👏 Там притаился сайт студии antomal.com, если что →
Блог и подкаст Антона Малявского.

Подсказки в интерфейсе на примере псевдо-чата Linkedin

Сегодня меня встретило интересное окно на Linkedin (раздел «сообщения»).

Информация о новых функциях в разделе «сообщения» на linkedin.com

Выше картинка, но в жизни это анимация, в которой мне демонстрируются какие-то чудесности и новые возможности чата.

Я захожу на страницу с конкретной целью и ожиданием (я помню, как обычно выглядит чат) и вдруг открывается окно, которое я принимаю за чат. Я не сразу сообразил, что это подсказка и со мной никто не разговаривает. Есть заголовок, но мой взгляд моментально перемещается на «чат» т. к. там вся «движуха» — мне уже что-то пишут и долго ждать не будут.

Пишут Михаилу — если вы Михаил, эффект будет сильнее.

Где бы в интерфейсе я не встретил подсказку — она должна выглядеть как подсказка.

Как делать подсказку в интерфейсе?

  1. Первое, что приходит на ум в этом примере — поместить чат в изображение окна браузера (части окна) или устройство (здесь монитор, а в мобильной версии — смартфон) — т. е. в среду́.
  1. Вариант два — намекнуть, что это окно с подсказкой. Это можно сделать цветом или какой-то иконкой. Естественно, к таким подсказкам пользователя нужно постепенно приучать.
  1. Вариант три — «мультяшный» стиль. Я сразу должен понять, что это понарошку.
  1. Подсветить то, на что обращено внимание. В этом примере — анимированную иконку «многоточие» и статус «просмотрено». Это отличный вариант т. к. он сразу фокусирует на важном. Это у нас воооот тут, а это воооот тут — всё!
 25   2018   интерфейс
Популярное