Подписка на блог

В Телеграме помимо ссылок на заметки делюсь околодизайнерскими наблюдениями.

В Твиттере помимо ссылок на заметки пишу всякую чушь.

В Тумблере и Же-же есть автоматические трансляции. Если не работает, напишите мне: ilyabirman@ilyabirman.ru.

По РСС и Джейсон-фиду трансляции для автоматических читалок

Обратная связь

Ховер и клик должны совпадать

Это кажется очевидным, но ошибки на эту тему встречаются так часто, что надо бы написать.

Если у элемента интерфейса есть какой-то эффект при ховере (наведении мыши), этот элемент должен нажиматься. Если элемент нажимается, у него должен быть какой-то эффект при ховере. Зоны, в которых элемент нажимается и проявляет эффект при ховере должны совпадать с точностью до пикселя.

Вот некоторые ошибки, которые мне встречались:

  • Меню на сайте состоит из ссылок, завёрнутых в некоторый контейнер. У контейнера в стилях прописана подсветка при наведении. Вокруг текста ссылки остаются некоторые поля до краёв контейнера, где контейнер подсвечивается, но ссылка не работает.
  • Подчёркивание ссылки реализовано как-то так, что клик в саму линию подчёркивания не вызывает перехода по ссылке, хотя ховер есть. Бывает наоборот: ховера нет, а клик срабатывает.
  • Модальный попап закрывается кликом за его пределами. Ховеры элементов вокруг попапа продолжают работать, хотя клик по ним не вызовет связанное с ними действие, а только лишь закроет попап.
  • Функция элемента заблокирована скриптом, а ховер остаётся. Например: главная кнопка на форме отключена из-за ошибки в заполнении, но продолжает подсвечиваться при наведении, как будто работает.
  • Большой контейнер с картинкой и подписью нажимается целиком и реагирует на наведение каким-то эффектом. В углу контейнера есть маленькая иконка, которая делает что-то другое, например, добавляет объект в «Избранное». При наведении на иконку эффект наведения на контейнер сохраняется, хотя клик в этом месте не вызовет действия, связанного с контейнером целиком.

Эта мысль относится к теме «Обратная связь».

 4 комментария    2068   3 мес   обратная связь   пользовательский интерфейс

Три состояния пункта меню сайта

Пункт меню на сайте имеет три возможных состояния.

Невыбранное:

Три состояния пункта меню сайта

Мы находимся не в разделе «Дрожжи» и можем перейти в него по клику. Ссылка подчёркнута, при наведении подсвечивается, курсор превращается в пальчик, ведёт на главную страницу раздела.

Текущее:

Три состояния пункта меню сайта

Мы находимся на главной странице раздела «Дрожжи». Текст выделен фоном, никак не реагирует на наведение и клики.

Родительское:

Три состояния пункта меню сайта

Мы находимся на одной из страниц раздела «Дрожжи», но не на главной его странице. Ссылка выделена фоном и подчёркнута, при наведении подсвечивается, курсор превращается в пальчик, ведёт на главную страницу раздела.

Это понятный и логичный стандарт. Выделять текущий раздел подчёркиванием или перезагружать по клику страницу, на которой человек и так находится — признак неряшливого, недодуманного дизайна.

 351   2014   веб-дизайн   дизайн сайтов   обратная связь   студентам

Подкраска ссылок при наведении

Ссылки и другие нажимаемые элементы хорошо подкрашивать при наведении курсора мыши (ховере). Мы в бюро и я в своих проектах обычно подкрашиваем красным, очень клёво работает. Так же хорошо подкрашивать рамки вокруг нажимаемых картинок и сложных элементов. С тех пор, как ЦСС научился легко делать всякие эффекты типа плавного изменения свойств, многие стали упражняться с плавным проявлением и затуханием подсветки.

Важная штука тут в том, чтобы делать плавным только затухание — тогда эффект получится действительно приятным.

Исходный смысл подсветки — обратная связь, ощущение, что всё работает, реагирует, не зависло и не заглючило. Если подсветка срабатывает не мгновенно, а лениво, это сразу воспринимается как тупняк, а не как приятный эффект. Точно так же бесит, когда некоторые светильники не сразу включаются, когда жмёшь кнопку, а плавно.

См. также: Ховер из овер.

 291   2013   обратная связь   пользовательский интерфейс