Подсказки, Как Элемент Микровзаимодействия, В Веб-Дизайне

Подсказки в интерфейсе сайтов: уместны ли? Нужны ли? Как создать действительно удобную и нужную подсказку на сайте, чтобы посетителю она потребовалась? Об этом и не только в материале ниже.

Всплывающие подсказки лучший и наиболее эффективный подход к адаптации посетителей к интерфейсу того или иного сайта. Впрочем, аналогично дело обстоит и с приложениями, но наш разговор сегодня будет именно о сайтах. Подсказки, обычно, очень полезны. И если создается впечатление, что пользователи уже давно все знают и зачем им говорить, что если сюда кликнуть, появится что-то, то есть одно « НО ». Дело в том, что каждый из нас просматривает сайты бегло. И только если что-то действительно заинтересует, то взгляд задерживается и уже затем происходит взаимодействие с интерфейсом сайта. Соответственно, при беглом просмотре не всегда схватываешь то, что есть вокруг. А потому вдруг появившаяся подсказка реально упрощает и облегчает поиск нужного в пределах одного проекта.

Речь идет не только о блогах, но и о сайтах компаний, кафе, интернет-магазинах в особенности и прочих. Пользователи получают возможность управлять процессом поиска и предоставления информации. Вот вам пример: ищите вы вид пиццы именно с теми ингредиентами, какими хочется. Листаете и листаете список, а тут появляется небольшие сообщение: обратите внимание на детальный поиск, он вот тут у нас, неприметный, но он есть. А дело было в том, что поиск по ингредиентам был в свернутом состоянии, и на деле было только общее поле поиска. Говорить, хорошо сделал веб-мастер или нет, не будем, но идея, думаем, вам понятна.

Сравните два варианта: с фильтром (активируется по клику по иконке) и без. Не каждый день люди пиццу заказывают, чтобы наизусть все знать. Одно дело читать составы более 50-ти видов пицц, другое - использовать фильтр.

Микровзаимодействие – динамический процесс, который вызывается триггером, реагирующим на то или иное действие и обеспечивает обратную связь с пользователем, а потом предоставляет информацию этому пользователю о возможном следующем шаге некоторого действия. Кажется, что просто, но не совсем.

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

В этом материале мы попробуем глубже посмотреть на всплывающие подсказки в веб-дизайне и решить, чего лучше избегать, что наоборот использовать. Да и вообще, нужны ли подсказки на сайте?

Прецеденты

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

Незнакомые кнопки и иконки

Если на сайте используются уникальные и мало кому знакомые иконки и кнопочки – это отличный повод для создания подсказки. Даже если значок знакомый, подсказка поможет быстро освежить в памяти её назначение в пределах данного ресурса. Как часто мы видим иконку шестеренки в верхнем правом углу того или иного проекта. Все запомнили, что она значит в целом. Но в каждом проекте она разная: где-то настройки аккаунта, а где-то сервиса. Или значок рядом с шестеренкой во втором примере. Ни подсказки, ни подписи. И думай, а что это? Выход?

Информация

Неважная информация может быть скрыта за подсказкой. Если на экране все не умещается или на нем много текста, а подсказать что и где находится – нужно. Не держать же пользователю все в памяти. Например, в браузере открыто много вкладок, но при наведении на них курсора появления небольшое сообщение о названии страницы, сайта. Это неважная информация, но удобная и полезная. Если на сайте много страниц, веб-дизайнеры стараются обеспечить такое описание, чтобы оно было емким и информативным, чтобы пользователю не пришлось постоянно перекликивать вкладки браузера и искать, где же и что написано/нарисовано.

Не общий идеал

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

Не интуитивный дизайн

Не интуитивный веб-дизайн – это когда дизайн заставляет пользователя думать и полагаться только на подсказки, чтобы разобраться, куда бы кликнуть. В этом случае, никакие подсказки уже не помогают, потому как проблема состоит именно в самом дизайне, в интерфейсе. Суть подсказки – адаптировать пользователей к интерфейсу, но задача веб-мастера заключается в том, что «после первого урока» посетители должны быть в состоянии в дальнейшем сами работать и понимать уже что, где и как.

Ссылки внутри подсказок

Иногда это необходимо для пользователей, чтобы разобраться в некотором вопросе более детально. Например, мы исследуем данные, сравниваем описания товаров или характеристик в интернет-магазине или на сайте производителя. Есть название поддержки технологии или возможности, существует иконка вопросика со всплывающей подсказкой, о чем идет речь, а внутри текста дополнительная ссылка на более подробное описание. Удобно ли такое? Многим пользователям да, если они действительно пытаются найти нужное. Хотя веб-мастера зачастую не уделяют такому должное внимание, полагая: интернетом пользоваться умеют все, сами найдет в той же википедии.

Тем не менее, в веб-дизайне создают такие подсказки в случае, если при попытке передвинуть курсор, чтобы кликнуть по ссылке, эти подсказки-то и исчезают! Досадно получается. Обидно.

Удивительный дизайн всплывающих подсказок

Но как же все-таки веб-мастера создают идеальную подсказку, чтобы обеспечить микровзаимодействие для пользователей и обеспечить обратную связь. Приходится, как минимум, потратить чуть больше своего времени, но и результат получается лучшим и продуктивным.

Минимализм, устойчивость и заметность идеально создают пользовательский интерфейс в веб-дизайне. Занятно, меньше шансов получить на выходе что-то непонятное, но одновременно с этим разрушается и представление о необходимости существования всплывающих подсказок. Впрочем, соединяя основные цвета, язык, шрифт и стилизацию, веб-мастера добиваются интересных решений.

Самые простые и наглядные примеры: Google Переводчик и проект Wistia . Подсказки не скрыты, они вот, на виду, но при этом дизайн настолько минимален, что их наличие и нужно, и не нужно одновременно. Один раз узнав, что иконка звездочки означает разговорник, более мы можем и не воспользоваться подсказкой. Но каждый новый посетитель или нечастый гость здесь будет пользоваться ею.

Подсказки видны и заметны (вопросительные знаки, звездочки близ параметра), они ненавязчивы, даже если в 100-ый раз открываешь страницу и знаешь, что там была когда-то подсказка. Она и сейчас там есть, вызвать её – дело желания посетителя.

Разумность информации

Текст во всплывающей подсказке должен быть простым и понятным большинству. Объясняется ли особенность технологий или назначения поля – все предложения должны быть короткими и лаконичными. Тем более что область всплывающей подсказки на экране и так невелика, чтобы включать в нее «трактаты». И тут-то как раз и появляется необходимость использования встроенных ссылок в текст подсказок.

Посмотрим, как реализовали это в Intel. Почти каждый из нас, выбирая ноутбук или проводя апгрейд настольного РС, сталкивается с вопросом, какой процессор выбрать, дабы «машинка» помощнее была. Одно дело название в описании в интернет-магазине, другое – описание процессора на сайте производителя. Выберем пример и смотрим. Нажимая на значки вопросиков напротив спецификаций, появляются целое всплывающее сообщение. Какие-то очень короткие, какие-то нет, и даже те, что содержат ссылку. При этом обратите внимание на лаконичность описания. Буквально два предложения, а уже понятно, что Технология Intel® Hyper-Threading обеспечивает скорость при многозадачности.

Мировой опыт

Проект ound-of-change имеет весьма интересную форму связи, которая, с одной стороны, понятна и без слов, с другой – имеет оригинальные подсказки. Нажимая по каждой категории для заполнения, можно увидеть, какая из них всех является обязательной для заполнения (отмечены красным). Таким образом, можно не тратить время и заполнять все поля, а только те, что красные. Нет никаких галочек, подсветок, или переадресаций после нажатия кнопки отправки. Просто и лаконично.

Интернет-магазин Reebok предлагает в качестве подсказки увеличенное изображение товара. При этом подсказка полностью перекрывает все данные о цене, названии, кнопки заказа. Почему? Почему не в ином месте это картинка? Потому что при изучении данного типа подсказок, главное во внешнем виде товара. Пользователь потом отключит её и нажмет заказ. Если ему не нужна такая подсказка, он и не вызовет её.

Красиво сделана анимация подсказки прокрутки очень и очень длинной страницы проекта lederniergaulois.nouvelles. Казалось бы, что подсказки здесь нет как таковой. Но в реалии, прокручивая страницу, уже ближе к середине начинаешь осознавать, что кружочек внизу заполняется постепенно и как только заполняется, появляется следующая информация. Иными словами, пока он не заполнен, можно не ждать, что от одной прокрутки колесика мышки что-то изменится. Нужно крутить его и крутить, а сколько – кружочек и подскажет.

Анимация в подсказках и микровзаимодействиях также уместна. Сайт Зверопой имеет не только навигацию горизонтальную, но также и анимационные подсказки персонажей из тех песен, что они исполняют в мультфильме. При необходимости можно просто подвести курсор и выбрать то, что интересно.

Сайт KLM, рассказывая об интересных местах, с помощью микровзаимодействия и подсказок способствует развитию желания отправиться путешествовать. Оригинальное воздействие на эмоции, ничего даже и не скажешь против. Нажимает ли пользователь на сердечко или обращает внимание на ссылки внизу станицы (не на каждой странице, стоит заметить), он получает дополнительную информацию. Это не подсказки в привычном нам понимании и виде, но и такая реализация общепринятого имеет место быть. При этом дополнительная подсказка может быть и видео, и ауди, и фотография.

Выводы

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

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