{"id":14274,"url":"\/distributions\/14274\/click?bit=1&hash=fadd1ae2f2e07e0dfe00a9cff0f1f56eecf48fb8ab0df0b0bfa4004b70b3f9e6","title":"\u0427\u0435\u043c \u043c\u0443\u0440\u0430\u0432\u044c\u0438\u043d\u044b\u0435 \u0434\u043e\u0440\u043e\u0436\u043a\u0438 \u043f\u043e\u043c\u043e\u0433\u0430\u044e\u0442 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0441\u0442\u0430\u043c?","buttonText":"\u0423\u0437\u043d\u0430\u0442\u044c","imageUuid":"6fbf3884-3bcf-55d2-978b-295966d75ee2"}

Как писать всплывающие подсказки?

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

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

- В подсказках должна быть исчерпывающая, но лаконичная подача. Предупреждаем дополнительные вопросы и необходимость дальше гуглить. Но и не превращаем подсказку в инструкцию. Тут тонкая грань. Если вариантов характеристики, например, 6, нужно объяснить 6, а не 3 основных.

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

Еще пара советов:

*не объясняйте банальные вещи;

*не использовать термины, которые тоже могут быть непонятны;

*подсказка должна помочь, а не запутать еще больше

например, вы объясняете параметр работы камеры — ISO

Хорошо: ISO — чувствительность матрицы фотоаппарата к свету. Влияет на качество снимков. Слишком высокое значение создает шумы на картинке.

Плохо: Изменяя чувствительность матрицы (ISO) мы заменяем недостающие для нормальной экспозиции эквивалентные ступени выдержки (и/или диафрагмы).

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

0
4 комментария
Oblachnii boy

В "хорошо" не хватило данных разве что, щас объясню:
Вот пользователь видит iso 120 и подсказку, жмёт на неё, узнает что много - плохо, но 120 – это много? он всё ещё не знает.
А был бы текст: "Чувствительность матрицы фотоаппарата к свету. Влияет на качество снимков. Слишком высокое значение создаёт шумы на картинке. Нормой считается 50-250", пользователь бы понял, что 120 – ок
Понятно что есть куча нюансов, но опытный юзер их знает, а неопытный или возьмёт по норме, или поймёт по описанию что это ему особо важно и погуглит подробнее

На я.маркете это хорошо местами сделано, кстати (хотя попадается и треш)

Ответить
Развернуть ветку
Юлия, контент-маркетолог
Автор

Прекрасное дополнение! Спасибо большое!)))

Ответить
Развернуть ветку
Александр Велько

Очень полезная статья, я считаю на многих сайтах сейчас перегруз информации на фронтенде, поэтому начинающему пользователю легко потеряться в интерфейсе, закрыть сайт и искать альтернативу "где попроще")

Ответить
Развернуть ветку
Юлия, контент-маркетолог
Автор

спасибо большое! 

Ответить
Развернуть ветку
1 комментарий
Раскрывать всегда