Всплывающие подсказки лучший и наиболее эффективный подход к адаптации посетителей к интерфейсу того или иного сайта. Впрочем, аналогично дело обстоит и с приложениями, но наш разговор сегодня будет именно о сайтах. Подсказки, обычно, очень полезны. И если создается впечатление, что пользователи уже давно все знают и зачем им говорить, что если сюда кликнуть, появится что-то, то есть одно «НО». Дело в том, что каждый из нас просматривает сайты бегло. И только если что-то действительно заинтересует, то взгляд задерживается и уже затем происходит взаимодействие с интерфейсом сайта. Соответственно, при беглом просмотре не всегда схватываешь то, что есть вокруг. А потому вдруг появившаяся подсказка реально упрощает и облегчает поиск нужного в пределах одного проекта.
Речь идет не только о блогах, но и о сайтах компаний, кафе, интернет-магазинах в особенности и прочих. Пользователи получают возможность управлять процессом поиска и предоставления информации. Вот вам пример: ищите вы вид пиццы именно с теми ингредиентами, какими хочется. Листаете и листаете список, а тут появляется небольшие сообщение: обратите внимание на детальный поиск, он вот тут у нас, неприметный, но он есть. А дело было в том, что поиск по ингредиентам был в свернутом состоянии, и на деле было только общее поле поиска. Говорить, хорошо сделал веб-мастер или нет, не будем, но идея, думаем, вам понятна.
Сравните два варианта: с фильтром (активируется по клику по иконке) и без. Не каждый день люди пиццу заказывают, чтобы наизусть все знать. Одно дело читать составы более 50-ти видов пицц, другое - использовать фильтр.
Микровзаимодействие – динамический процесс, который вызывается триггером, реагирующим на то или иное действие и обеспечивает обратную связь с пользователем, а потом предоставляет информацию этому пользователю о возможном следующем шаге некоторого действия. Кажется, что просто, но не совсем.
Что отличает хорошую подсказку? Её невидимость. Она должна быть настолько осторожной, чтобы пользователь мог поклясться, что её там и в помине не было. Впрочем, это и возможность того, что они будут пропущены и пользователь так и не узнает нужного, ибо триггер не сработает.
В этом материале мы попробуем глубже посмотреть на всплывающие подсказки в веб-дизайне и решить, чего лучше избегать, что наоборот использовать. Да и вообще, нужны ли подсказки на сайте?
Прецеденты
Всплывающие подсказки существуют для повышения эффективности UX создаваемого сайта или приложения. Микровзаимодействие делает жизнь пользователей проще, в некотором роде. И хотя их цель проста, вполне могут быть и иные ситуации, когда получить реальную помощь сложно.
Незнакомые кнопки и иконки
Если на сайте используются уникальные и мало кому знакомые иконки и кнопочки – это отличный повод для создания подсказки. Даже если значок знакомый, подсказка поможет быстро освежить в памяти её назначение в пределах данного ресурса. Как часто мы видим иконку шестеренки в верхнем правом углу того или иного проекта. Все запомнили, что она значит в целом. Но в каждом проекте она разная: где-то настройки аккаунта, а где-то сервиса. Или значок рядом с шестеренкой во втором примере. Ни подсказки, ни подписи. И думай, а что это? Выход?
Информация
Неважная информация может быть скрыта за подсказкой. Если на экране все не умещается или на нем много текста, а подсказать что и где находится – нужно. Не держать же пользователю все в памяти. Например, в браузере открыто много вкладок, но при наведении на них курсора появления небольшое сообщение о названии страницы, сайта. Это неважная информация, но удобная и полезная. Если на сайте много страниц, веб-дизайнеры стараются обеспечить такое описание, чтобы оно было емким и информативным, чтобы пользователю не пришлось постоянно перекликивать вкладки браузера и искать, где же и что написано/нарисовано.
Не общий идеал
Всплывающие подсказки могут оказаться и очень вредными при неправильном применении. Если их много, то пользователи могут устать от сайта и покинуть его, уйти к конкуренту, у которого может и информации то меньше, зато «спокойнее».
Не интуитивный дизайн
Не интуитивный веб-дизайн – это когда дизайн заставляет пользователя думать и полагаться только на подсказки, чтобы разобраться, куда бы кликнуть. В этом случае, никакие подсказки уже не помогают, потому как проблема состоит именно в самом дизайне, в интерфейсе. Суть подсказки – адаптировать пользователей к интерфейсу, но задача веб-мастера заключается в том, что «после первого урока» посетители должны быть в состоянии в дальнейшем сами работать и понимать уже что, где и как.
Ссылки внутри подсказок
Иногда это необходимо для пользователей, чтобы разобраться в некотором вопросе более детально. Например, мы исследуем данные, сравниваем описания товаров или характеристик в интернет-магазине или на сайте производителя. Есть название поддержки технологии или возможности, существует иконка вопросика со всплывающей подсказкой, о чем идет речь, а внутри текста дополнительная ссылка на более подробное описание. Удобно ли такое? Многим пользователям да, если они действительно пытаются найти нужное. Хотя веб-мастера зачастую не уделяют такому должное внимание, полагая: интернетом пользоваться умеют все, сами найдет в той же википедии.
Тем не менее, в веб-дизайне создают такие подсказки в случае, если при попытке передвинуть курсор, чтобы кликнуть по ссылке, эти подсказки-то и исчезают! Досадно получается. Обидно.
Удивительный дизайн всплывающих подсказок
Но как же все-таки веб-мастера создают идеальную подсказку, чтобы обеспечить микровзаимодействие для пользователей и обеспечить обратную связь. Приходится, как минимум, потратить чуть больше своего времени, но и результат получается лучшим и продуктивным.
Минимализм, устойчивость и заметность идеально создают пользовательский интерфейс в веб-дизайне. Занятно, меньше шансов получить на выходе что-то непонятное, но одновременно с этим разрушается и представление о необходимости существования всплывающих подсказок. Впрочем, соединяя основные цвета, язык, шрифт и стилизацию, веб-мастера добиваются интересных решений.
Самые простые и наглядные примеры: Google Переводчик и проект Wistia. Подсказки не скрыты, они вот, на виду, но при этом дизайн настолько минимален, что их наличие и нужно, и не нужно одновременно. Один раз узнав, что иконка звездочки означает разговорник, более мы можем и не воспользоваться подсказкой. Но каждый новый посетитель или нечастый гость здесь будет пользоваться ею.
Подсказки видны и заметны (вопросительные знаки, звездочки близ параметра), они ненавязчивы, даже если в 100-ый раз открываешь страницу и знаешь, что там была когда-то подсказка. Она и сейчас там есть, вызвать её – дело желания посетителя.
Разумность информации
Текст во всплывающей подсказке должен быть простым и понятным большинству. Объясняется ли особенность технологий или назначения поля – все предложения должны быть короткими и лаконичными. Тем более что область всплывающей подсказки на экране и так невелика, чтобы включать в нее «трактаты». И тут-то как раз и появляется необходимость использования встроенных ссылок в текст подсказок.
Посмотрим, как реализовали это в Intel. Почти каждый из нас, выбирая ноутбук или проводя апгрейд настольного РС, сталкивается с вопросом, какой процессор выбрать, дабы «машинка» помощнее была. Одно дело название в описании в интернет-магазине, другое – описание процессора на сайте производителя. Выберем пример и смотрим. Нажимая на значки вопросиков напротив спецификаций, появляются целое всплывающее сообщение. Какие-то очень короткие, какие-то нет, и даже те, что содержат ссылку. При этом обратите внимание на лаконичность описания. Буквально два предложения, а уже понятно, что Технология Intel® Hyper-Threading обеспечивает скорость при многозадачности.
Мировой опыт
Проект ound-of-change имеет весьма интересную форму связи, которая, с одной стороны, понятна и без слов, с другой – имеет оригинальные подсказки. Нажимая по каждой категории для заполнения, можно увидеть, какая из них всех является обязательной для заполнения (отмечены красным). Таким образом, можно не тратить время и заполнять все поля, а только те, что красные. Нет никаких галочек, подсветок, или переадресаций после нажатия кнопки отправки. Просто и лаконично.
Интернет-магазин Reebok предлагает в качестве подсказки увеличенное изображение товара. При этом подсказка полностью перекрывает все данные о цене, названии, кнопки заказа. Почему? Почему не в ином месте это картинка? Потому что при изучении данного типа подсказок, главное во внешнем виде товара. Пользователь потом отключит её и нажмет заказ. Если ему не нужна такая подсказка, он и не вызовет её.
Красиво сделана анимация подсказки прокрутки очень и очень длинной страницы проекта lederniergaulois.nouvelles. Казалось бы, что подсказки здесь нет как таковой. Но в реалии, прокручивая страницу, уже ближе к середине начинаешь осознавать, что кружочек внизу заполняется постепенно и как только заполняется, появляется следующая информация. Иными словами, пока он не заполнен, можно не ждать, что от одной прокрутки колесика мышки что-то изменится. Нужно крутить его и крутить, а сколько – кружочек и подскажет.
Анимация в подсказках и микровзаимодействиях также уместна. Сайт Зверопой имеет не только навигацию горизонтальную, но также и анимационные подсказки персонажей из тех песен, что они исполняют в мультфильме. При необходимости можно просто подвести курсор и выбрать то, что интересно.
Сайт KLM, рассказывая об интересных местах, с помощью микровзаимодействия и подсказок способствует развитию желания отправиться путешествовать. Оригинальное воздействие на эмоции, ничего даже и не скажешь против. Нажимает ли пользователь на сердечко или обращает внимание на ссылки внизу станицы (не на каждой странице, стоит заметить), он получает дополнительную информацию. Это не подсказки в привычном нам понимании и виде, но и такая реализация общепринятого имеет место быть. При этом дополнительная подсказка может быть и видео, и ауди, и фотография.
Выводы
Во многих отношениях всплывающие подсказки являются завершенными и осмысленными вариантами микровзаимодействия. Они позволяют пользователям достичь их целей, выполнить нужные действия и разобраться в том интерфейсе, который создал веб-мастер. В зависимости от стиля таких подсказок, можно сэкономить огромное количество времени посетителя, упростить его жизнь и позволить ему, возможно, дольше задержаться на сайте, чтобы узнать что-то еще интересненькое.
Впрочем, подсказки не всегда хороши и удобны, поэтому тестировать и испытать дизайн придется гораздо чаще и кропотливее. Могут также возникнуть трудности и с тем, чтобы разместить их. Ведь для этого придется догадаться, понять, узнать, что именно в интерфейсе сайта может вызвать затруднения или нужна ли пользователям здесь подсказка вообще. Иными словами: каждый посетитель не думает и не действует так же как веб-мастер или иной человек. Один что-то знает, другой-нет.
Решение простое – просто понять свой интерфейс, свой сайт, пройти весь путь по нему самостоятельно так, если бы не вы его создали. Вспомните пример начальной страницы mail.ru (в начале нашего материала). Новый посетитель навряд ли обратит внимание на новую функцию просто так, зато подробная подсказка используется как нельзя лучше. Подсказки бывают разными.