Нужны ли в интерфейсе подсказки? 15 удачных примеров

Знаете историю про изобретение чайного пакетика? В 1904 году жил был торговец чаем – мужик по имени Томас. Чай в то время продавали в больших жестяных банках. Но Томас был дядька умный, он смекнул, что продавать в розницу выгоднее. Смастерил много мелких шелковых мешочков, насыпал в них чай и предложил покупателям.

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

Что было дальше, вы знаете. Людям понравилось. Чайные пакетики завоевали всемирную популярность.

Томасу повезло. Отсутствие инструкции по использованию продукта сыграло ему на руку. Но это исключение, которое только подтверждает правило. Сколько других товаров не взлетает потому, что пользователи не понимают, как ими пользоваться?

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

Разберем по-порядку.

Такая ситуация возникает в пустых разделах, в которых пока нет контента и поэтому непонятно, что там будет и что сделать, чтобы оно там появилось.

MailChimp сообразил, что из названия Comments непонятно, что будет в этом блоке, поэтому объяснил:

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

Пример Convead – не все пользователи знакомы с термином XML-файл и тем более не знают, где его можно взять:

Бывает, что клиент не понимает важности какого-то действия. Например, в MailChimp нужно обязательно вставить в письмо ссылку «Отписаться». Неопытный пользователь может подумать «Да ну, зачем мне эта ссылка?». MailChimp подробно объясняет, что это не прихоть а закон, что конкретно надо сделать и как оно работает.

Пример Airbnb. Эти ребята умудрились не только объяснить, зачем нужен Service fee, но и показать ценность для клиента, и оправдать дополнительный платеж. Браво!

Дизайнеры часто грешат тем, что ставят на формы поля ввода с краткими названиями, из которых непонятно, что туда писать. Исправить очень просто – надо привести пример, как правильно.

Чудесное решение от PivotalTracker. Не так давно они ввели поле «Блокер» для задачи и очень четко объяснили, что в него писать – причину блокировки, например, ссылку на другую задачу или пользователя.

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

У наших клиентов в Convead возникали сложности с конструктором сегментов. Честно говоря, они и сейчас возникают, но по другому поводу :) Мы добавили подсказки с примерами, и пользователи стали понимать, как составлять условия. Вопросов и ошибок стало меньше раз в пять.

Сколько раз было – хочу поменять картинку обложки в Facebook и иду гуглить требования к размеру. Потому что на Facebook нигде про это не написано.

А вот умница Linkedin подсказывает рекомендуемый размер картинки при наведении на иконку редактирования:

Если в интерфейсе есть загрузка файлов или форма ввода данных с ограничениями или рекомендованными характеристиками, стоит об этом сказать. Пользователи будут вам благодарны.

Пример от TildaPublishing:

Люблю этих ребят. На подсказки они не скупятся.

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

HubSpot, на мой взгляд, чудесно справился с задачей:

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

В Google Maps, например, есть возможность поменять местами пункты маршрута. Об этом можно узнать, если случайно наведешь на иконку:

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

Пример Airbnb. Страшно же нажать на Book – вдруг с моей карты спишутся деньги! Ребята просто написали, что нет, не спишутся.

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

Элегантный пример от Intercom. И не переборщили, и выглядит надежно.

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

Gmail на мой взгляд отлично показывает, что письмо сохранено:

А Facebook доносит, что персональная информация в безопасности:

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

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

Во многих случаях вопросы, сомнения и страхи можно снять подсказками. Да, не всегда. Да, можно с ними переборщить. Но мы же с вами люди адекватные, и не будем лепить подсказки к каждому элементу, правда? :)