Кликабельная кнопка что это
Как создавать эффективный дизайн кнопок. Советы UX-дизайнера
Блочный редактор писем, готовые шаблоны email, формы подписки и автоматизация. Запускайте email-рассылки, чтобы быть на связи со своими клиентами.
Где взять базу? Как сделать красивое письмо? Какие показатели смотреть? Расскажем об этом в бесплатном курсе из 16 писем. Татуировка в каждом письме!
Рассказываем про инструменты для email-рассылок. Обсуждаем лучшие примеры и механики. Говорим о деньгах. Публикуем вакансии.
Мы перевели статью UX-специалиста компании Windmill Тараса Бакусевича. Он раскрывает основные принципы дизайна кнопок и показывает на примерах, как с их помощью построить эффективную коммуникацию с пользователями.
Можно ли представить нашу жизнь без кнопок? Скорее всего, нет. Мы используем их как в реальной жизни — открываем двери, фотографируем, разогреваем еду, так и в digital-пространстве — оплачиваем покупки в интернете, оставляем данные на сайтах, ставим лайки и реакции в социальных сетях.
Кнопки восхитительны. Касание пальца запускает приложение, машину или приводит систему в движение. При этом пользователь может не догадываться о механизмах или алгоритмах, которые за этим стоят. «Вы нажимаете кнопку — мы делаем остальное», — благодаря этому привлекательному слогану потенциальные покупатели заинтересовались камерами Kodak.
Кнопки и ссылки. В чём разница
Кнопки сообщают о действиях, которые можно сделать на странице. Обычно они расположены в чатах, формах, панелях инструментов.
Ссылки используются, когда пользователю предлагают перейти на другую страницу (или её часть). Например, в личный профиль человека или в каталог товаров. Кнопки же просят совершить действие: «Отправить», «Создать новый документ», «Загрузить».
Вид кнопки. О чем он говорит пользователю
От внешнего вида кнопки зависит, насколько ей удобно пользоваться. Каждое состояние кнопки должно иметь особенности, которые отличают его от других состояний и окружающего макета. При этом кардинально изменять вид и создавать дополнительный визуальный шум нежелательно.
Всего существует 6 состояний кнопки:
Возможные формы, размеры и цвета кнопок
Самый популярный вид кнопок — прямоугольные с закруглёнными углами. Их легко идентифицировать и они хорошо смотрятся рядом с полем ввода. Выбор стиля кнопки будет зависеть от цели, платформы и брендбука.
Покажите важность действия с помощью стиля кнопки
Стили используют, чтобы отличать более важные действия от не таких важных. Если визуально выстроить иерархию, то пользователь не будет чувствовать себя потерянным в большом количестве вариантов. Обычно, может быть одна заметная кнопка (этот стиль называется «основной»), а также несколько «второстепенных» и побочных, «третичных» действий.
«Правильную» кнопку не всегда нужно выделять
Иногда хочется сделать «правильную» кнопку действием по умолчанию (используя «основной» стиль) и дополнительно выделить её. Большую часть пользователей это ведёт в нужном направлении и помогает им завершать свои дела быстрее.
Исключение: если варианты выбора равны, или действие может быть потенциально опасным (например, согласие о передаче личных данных). В таких случаях лучше давать пользователям возможность выбирать осознанно, а не случайно.
Делайте кнопки похожими на кнопки
«Не заставляйте меня думать» — название книги юзабилити-инженера Стива Круга. Среди многих пунктов, которые он затрагивает — насколько важно создавать очевидный для пользователя интерфейс без головоломок. Долгое пользование различными устройствами сформировали в наших головах то, как кнопки должны выглядеть и функционировать. Сильное отклонение от этого «стандарта» вызовет замешательство у пользователей.
Лучше не использовать один и тот же цвет для интерактивных и неинтерактивных элементов интерфейса — в противном случае люди не поймут, куда нужно нажимать.
Придерживайтесь единого стиля
Единство стиля улучшает скорость и точность взаимодействия, помогает избежать ошибок. Лучше создавать предсказуемые элементы. Это поможет пользователям почувствовать, что они контролируют ситуацию и могут получить желаемый результат. Продумывая основные, вторичные и третичные элементы, постарайтесь найти для них что-то общее — например, цвет, форму или что-то ещё.
Задумывайтесь о размерах кнопок
Если пользователь не может нажать на кнопку или случайно попадает при этом на другой элемент, это вызывает раздражение и негативный опыт.
Для интерактивных элементов на большинстве платформ подойдут размеры от 48×48 dp. Dp (Density-independent Pixels) — абстрактная единица измерения размера, которая позволяет элементам выглядеть одинаково в различных разрешениях. Обычные пиксели (px) на разных экранах могут отображаться по разному.
Для кнопок с иконками лучше убедиться, что интерактивная часть будет больше, чем сама иконка (кнопка Edit на примере выше). Это применимо не только для смартфонов или планшетов, но и для web-страниц, где указатель — компьютерная мышь.
Делайте дизайн доступным
Дизайнерам лучше тесно взаимодействовать с командой разработчиков, чтобы убедиться, что кнопки работают с экранным считывающим устройством. Это встроенное в ОС приложение, которое помогает людям с нарушениями зрения считывать информацию с экранов. Роль «кнопка» должна использоваться для всех интерактивных элементов, которые отвечают на действия пользователя. Атрибут role=”button” превратит элемент в кнопку для любого экранного считывающего устройства.
Рассмотрите не только касания, но и жестовое взаимодействие пользователя с интерфейсом
Жесты позволяют пользователям взаимодействовать с приложением касаниями. Это экономит время и дает чувство тактильного контроля. Некоторые виды касаний входят в нашу жизнь всё больше. Например, свайп (смахивание) для работы с контентом или двойное касание экрана, чтобы поставить лайк.
Хорошее название для кнопки поможет пользователю совершить нужное действие
То, какой посыл несут кнопки, также важно, как и то, как они выглядят. Пользователи могут не понять, чего от них хотят, потерять время и даже совершить ошибку, если на кнопке отображено непонятное действие.
Хорошее название кнопки предлагает пользователю совершить какое-либо действие. Лучше использовать глаголы и отображать на кнопке то, что она делает. Как будто кнопка спрашивает пользователя — «Хотите (Добавить в корзину)?» или «Хотите (Подтвердить заказ)?»
Лучше избегать слов «Да», «Нет» или общих слов — например, «Подтвердить/Отправить».
OК/Отмена or Отмена/OК? Любой вариант подходит
Дизайнеры могут часами спорить о том, как правильно располагать кнопки, но на самом деле разницы никакой нет.
Избегайте неактивных кнопок
Каждый из нас был в этой ситуации. Застревал на странице с неактивной кнопкой, пытаясь понять, почему она не работает и что нужно сделать, чтобы вернуть её к жизни. Неактивное состояние используется, чтобы показать, что этот элемент не активен, но может заработать в будущем. Так поступают, потому что временное исчезновение кнопки может запутать пользователя.
Лучше при возможности избегать неактивных кнопок – пусть они всегда будут активны. Если пользователи не ввели нужную информацию, просто подсветите пустые строки или покажите предупреждение.
12 советов о дизайне кнопок в интерфейсе
1. Различайте кнопки и ссылки. У них разное предназначение. Их схожесть в интерфейсе будет путать пользователя.
2. Продумайте варианты состояния кнопок. Активна ли она, будет ли подсвечиваться при наведении? Поймёт ли пользователь, что кнопка сработала? – это те вопросы, на которые стоит ответить заранее.
3. Подберите стиль своим кнопкам. Популярных вариантов не так мало сейчас, есть из чего выбрать. Продумайте, как кнопки будут сочетаться с другими элементами.
4. Соблюдайте иерархию кнопок. Кнопки делятся на основные, вторичные и третичные и поэтому оформляются по-разному.
5. Решите, точно ли нужно пользователям действие «по умолчанию». Иногда такой вариант может привести к ошибкам пользователей и, как следствие, негативу в сторону продукта.
6. Применяйте стандарты при проектировании элементов. Таким образом пользователю не нужно сильно задумываться над взаимодействием и терять время (и нервы).
7. Проработайте единый стиль для элементов. Это увеличит скорость работы с платформой и будет приятнее для пользователей.
8. Сделайте достаточно большие кнопки. Лучший вариант – от 48х48 dp, что обеспечит в реальных параметрах оптимальный размер – 9 мм.
9. Позаботьтесь о доступности дизайна. Чем более понятный к восприятию будет ваш продукт, тем легче будет пользователям с ним взаимодействовать. К тому же, существуют платформы, которые помогают понять, хорошо устроена страница или нет.
10. Придумайте понятное название для кнопки. В таком случае пользователи будут исполнять указанное там действие.
11. Не беспокойтесь о порядке размещения кнопок «Оk» и «Отмена». В любом случае они будут работать одинаково.
12. Избегайте неактивных кнопок. Лучше скажите пользователю, что что-то идёт не так с помощью уведомлений.
Как сделать кнопку в html css? Красивые кнопки для сайта с примерами
Приветствую! В этой статье хочу поговорить про кнопки, на мой взгляд один из важнейших элементов в дизайне сайтов и приложений. Ведь, в большинстве случаев, кнопки нужны для того, чтобы заставить пользователя выполнить какое-либо действие (подписаться на рассылку, добавить товар в корзину, оставить комментарий, заказать обратный звонок и т.д.), которое можно так или иначе монетизировать. Мы же здесь не просто так собрались 😉
Итак из этой статьи вы узнаете:
Также в конце статьи вас ждет небольшой бонус, который пригодится каждому сайтостроителю.
Но давайте по порядку.
Для чего нужны кнопки на сайте?
Ответ напрашивается сам собой: “Для того, чтобы их нажимали!”. И, действительно, выделяющаяся симпатичная кнопка привлекает гораздо больше внимания чем тусклая и унылая ссылка. С другой стороны, если вся страница заполнена разномастными кнопками, которые, переливаясь и моргая, требуют внимания пользователя, он, скорее всего, не поняв, что от него требуется, не нажмет ни на одну и просто закроет вкладку.
Поэтому использовать кнопки надо “экономно”, в идеале не больше 1-2 в видимой области экрана. При этом пользователю должно быть максимально понятно, что произойдет, если он нажмет на кнопку.
Какие бывают кнопки?
В моем представлении кнопки бываю двух типов, для каждого из них я использую соответствующие HTML-теги:
Но зачем это нужно. Все гораздо проще и понятнее.
Как сделать кнопку в HTML?
Тег используется для создания кнопок, при нажатии на которые должны происходить какие-либо действия, например отправка формы, очистка формы, открытие модального окна, загрузка изображения и т.д.
Основными атрибутами таких кнопок являются:
type: button | submit | reset
Несмотря на слухи, которые ходят в интернете, о том, что тег должен располагаться только внутри тегов
Когда кнопка — не совсем кнопка
Представим, у вас есть часть интерфейса, взаимодействуя с которой пользователь добивается определенного ответа системы. Можно предположить, что речь идет о простейшей кнопке, но позвольте некоторое время называть этот элемент просто «кликабельная штука». Ее края закруглены, а яркий оранжевый цвет выделяет эту «штуку» на фоне всего остального — речь определенно идет о кнопке, скажут некоторые из вас, но не будем спешить с выводами.
Дизайн «кликабельной штуки»
Что, если бы на этой штуке был размещен текст «Узнать больше», а клик по ней переводил бы пользователя на ваш лендинг? Хм. А что, если бы там находилось и синее подчеркнутое слово «Закрыть», нажатие на которое закрывало бы popup-окно? Можно ли эту надпись считать ссылкой, беря в расчет лишь то, что она синяя и подчеркнутая? Конечно, нет.
Ссылка или кнопка?
Ого! Кажется, что невозможно понять, ссылка перед вами или кнопка, ориентируясь только на внешний вид объекта. Это безумие! Каждый должен иметь возможность понять, что за элемент перед ним, до того, как решит кликнуть по нему, не так ли? Но что, если мы не можем этого понять или испытываем определенные сомнения? Как раз для такого случая есть следующая схемка:
Алгоритм выбора правильного элемента:
1. Это кнопка.
2. Если это не кнопка, тогда это ссылка
3. Так и есть.
Не забудьте указать стили фокусировки
Это не отняло много времени. Теперь посмотрим, как все выглядит и работает:
Порой браузер не самый ваш лучший друг
Боже! С браузером что-то не так. Почему кнопка выглядит так отвратительно? Текст слишком мелок, хотя в было установлено значение в 16 px, и даже шрифт отображается не так. Скругленные края с глупой псевдо-тенью выглядят настолько архаично, что это нисколько не круто!
В чем разница между и
Итак, вы решили провернуть эту хитрость. Вы не будете связываться со стилем браузера и сделаете элемент похожим на интерактивную кнопку, чтобы у пользователей не возникало никаких сомнений, что перед ними.
Теперь элемент не только выглядит привычным образом, но и стал доступен при навигации с клавиатуры, благодаря атрибуту tabindex. Программы чтения с экрана будут обрабатывать ее как кнопку, потому что вы предусмотрительно добавили к ней роль role = «button».
Над этим элементом нужно совершить еще несколько действий.
После нажатия на кнопку должна активироваться функция doSomething, и должен быть способ как-то отключить кнопку, чтобы она перестала быть кликабельной после нажатия. Звучит просто.
Добавим к этой кнопке скрипт Event Listener:
Сделано. Теперь пользователь может кликнуть по кнопке мышью на десктопе или коснуться пальцем на сенсорном экране.
Также необходимо убедиться, что скрипт работает одинаково для пользователей, работающих с клавиатуры. Поскольку к кнопке присоединен атрибут tabindex=»0″, на нее можно перейти с клавиатуры. Далее людям необходимо дать возможность нажать пробел или клавишу «Enter», чтобы активировать событие.
Итак, нужно подключить другой Event Listener, чтобы не оставлять без внимания и сигналы, идущие с клавиатуры, и эта функция будет запускаться только при нажатии конкретных клавиш. Хорошо, что сенсорные устройства достаточно умны, чтобы конвертировать все тапы в клики; в противном случае, было бы обязательным прицепить к кнопке еще один Event Listener.
Отлично! Теперь наша кликабельная вещь полностью доступна с клавиатуры. JavaScript творит чудеса — что бы мы без него делали?
Итак, теперь перейдем к последней задаче: кнопка должна иметь отключенное состояние, при котором будет изменен ее внешний вид и поведение. Она должна выглядеть онемевшей: серого цвета и некликабельной. Хорошо, давайте добавим состояние в таблицу стилей, используя bem-naming:
Эта кнопка выглядит безжизненной
Задача не самая простая.
Поскольку кнопка не должна быть доступна в порядке табуляции, атрибута tabindex там быть не должно. И нужно убедиться, имеет ли кнопка отключенное состояние и перестала ли она запускать функцию. Кроме того, этот модификатор может применяться динамически. Хотя для CSS не проблема сопоставлять элементы с селекторами на лету и применять стили, нам может понадобиться какой-то наблюдатель мутаций, чтобы вызвать другие изменения для этой кнопки.
У него есть немало полезных вещей, а не только уродливые стили браузера. И не забудьте type= «button “ — вы же не хотите, чтобы при нажатии на всплывающую кнопку «Закрыть» пользователь отправлял данные формы, ведь type=»submit» является значением по умолчанию?
Очевидно когда на наведен курсор и нажата клавиша пробела или «Enter», активируется событие click (на мобильных устройствах активация происходит при совершении тапа).
Группа вводов отключена с помощью одного атрибута
Этот атрибут не просто отключает все события на элементах формы, но также удаляет их из порядка табуляции. Проблема решена!
Обратите внимание: он также запускает псевдокласс :disabled в CSS, и это означает, что мы можем избавиться от модификатора BEM для объявления стилей и вместо этого использовать встроенный динамический модификатор.
Что касается уродливых стилей браузера, то не обязательно использовать весь Normalize.css для корректировки одной кнопки. Три дополнительные строки ниже избавят вас от большинства раздражающих отличий от
Ну а если вы хотите воспользоваться WYSIWYG редактором, не вникая в тонкости верстки элементов для вашего лендинга, то регистрируйтесь на платформе LPgenerator, выбирайте готовый шаблон на ваш вкус и настраивайте его под себя при помощи удобной панели инструментов.
7 точек роста конверсии или как повысить кликабельность кнопок
Кнопки играют важную роль в процессе покупок в интернете: неправильно оформленные кнопки имеют низкую кликабельность и, как следствие, низкую конверсию. В статье пойдет речь о том, как это исправить.
Предисловие:
1. Наличие кнопки
Для того, чтобы по кнопке кликали, кнопка на странице должна быть. Это может прозвучать странным, но сайты без кнопок есть. На примере ниже — страница товара интернет-магазина ВелоДрайв. Сайт рекламируется в «Яндекс.Маркете», но кнопки «Купить» на странице нет, а звонить и диктовать номер артикула не самый удобный вариант.
На странице товара сайта velodrive.ru отсутствует кнопка
2. Кнопка должна быть похожа на кнопку
Для того, чтобы по кнопке кликали, пользователям необходимо понимать, что перед ними кнопка. Для этого их необходимо делать понятными и узнаваемыми, кнопки должны быть похожи на кнопки. Как этого добиться, рекомендации ниже.
Ссылка (слева) менее заметна, чем кнопка (справа)
2.1. Форма кнопки
Форма может быть любой (круглая, квадратная, прямоугольная), но наибольшее распространение получила именно прямоугольная, так как на ней можно уместить надпись с её предназначением.
Кнопки на сайте Tmall (AliExpress)
2.2. Скругленные углы кнопок
Большинство кнопок в физическом мире имеют закругленные углы, и такие кнопки на сайте проще узнать. К тому же, скругленные углы привычнее и потому проще воспринимаются мозгом. Пожалуй, самый наглядный пример — это клавиши на клавиатуре.
Apple Magic Keyboard, все клавиши имеют скругленные углы
2.3. Объемные кнопки
Кнопку лучше делать объемной, для этого используется тень, градиент и рамка. Тренд последних лет — плоский дизайн (flat design). Такой дизайн красив, но один из явных его недостатков в том, что из-за отсутствия теней и объема кнопки сложнее отличить от некликабельных элементов дизайна. Nielsen Norman group провели тест, в ходе которого выяснили, что объемные кнопки пользователи находят на 22% быстрее, чем плоские.
Плоская кнопка (слева) и объемная кнопка с тенью и градиентом (справа)
2.4. Интерактивные кнопки
Кнопку желательно делать отзывчивой, то есть при наведении курсора менять её цвет и объем. Таким образом, ещё при наведении курсора (до клика) становится понятно, что элемент кликабелен.
Кнопка по умолчанию (слева) и кнопка при наведении курсора (справа)
3. Царь-кнопка
Я вывел для себя одно хорошее правило, которое ещё ни разу меня не подвело: одна страница — одна главная кнопка (CTA — призыв к действию). Не стоит перегружать страницу множеством кнопок, это рассеивает внимание, создает лишние вопросы и, как следствие, снижает кликабельность.
Nix.ru, множество кнопок рассеивает внимание и снижает кликабельность
Не заставляйте пользователей думать, дайте им только одну главную кнопку на странице. Это не означает, что на странице не может быть других кнопок. Они могут там быть, но их задачи второстепенные, поэтому их стоит сделать менее заметными с помощью размера и цвета, а также расположения на расстоянии от основной кнопки, создав свободное пространство. Это делается для того, чтобы второстепенные кнопки не конкурировали с основной за внимание пользователей.
4. Цвет кнопок
4.1. Кнопка-призрак
Главная кнопка на странице должна быть контрастного цвета, чтобы выделяться от фона и окружающих элементов. Для менее приоритетных кнопок лучше не использовать цвет, сделав их прозрачными и поместив в рамку — это так называемые кнопки-призраки (ghost buttons).
Цвет кнопки отделяет главную кнопку (сверху) и второстепенную (снизу)
Но не стоит делать кнопку-призрак основной, иначе она сливается с фоном и становится менее заметной.
Кнопка-призрак в качестве главной кнопки неудачное решение
Так гораздо лучше, mi-storekazan.ru
4.2. Какой цвет кнопки выбрать
Распространено мнение, что цвет кнопки может подсказывать действие, например:
Цвет кнопок
Основано данное мнение на том, что человек с детства привыкает к значению этих цветов, и этот опыт закрепляется на уровне подсознания. Потому что так работают светофоры на улицах (красный — стой, зеленый — иди). Так работают смартфоны (зеленый — начать звонок, красный — сбросить) и так далее.
Привычное значение красного и зеленого цветов
Но на деле ситуация с восприятием цветов состоит несколько иначе. Красный цвет светофора выбран не из-за психоэмоционального восприятия цвета и не из-за его символической интерпретации. Ведь вид красного яблока или красной вишни ни у кого не вызывает отрицательных, тревожных или негативных эмоций. В Китае, красный — цвет радости, жизни. В Индии, родине цветового символизма, аналогично.
Дело в рэлеевском рассеянии, при котором красному цвету соответствует наибольшая длина волны видимого спектра. А это значит, что он менее всего подвержен рассеянию. При всех прочих равных, красный сигнал светофора водитель сможет различить на более удаленном расстоянии от перекрестка или пешеходного перехода и у него будет чуть больше времени для остановки.
Но вернемся к конверсии, в результате теста кнопок разных цветов лучшая конверсия вышла у кнопки красного цвета — 52,25%, а худший показатель оказался у кнопки зеленого цвета 41,46%. Другими словами, ситуация абсолютно противоположная цветам светофора. Что говорит в пользу закона Рэлея и красный цвет более заметен.
Коэффициент конверсии кнопок разных цветов
В ходе другого теста измерялся коэффициент конверсии разных цветов текста на кнопках. В результате, с большим преимуществом лидировал белый цвет, с конверсией почти 77%. Белый цвет оказался наиболее читабельным из-за высокого контраста с фоном кнопок разных цветов.
Коэффициент конверсии текста разных цветов на кнопках
5. Размер кнопок
Размер кнопок важен по двум основным причинам:
UX Magazine (слева) и фрагмент руководства от Apple (справа)
Другой важный момент, который можно отнести к размерам — это расстояние между кнопками. Если кнопки находятся близко друг к другу, пользователи мобильных устройств могут случайно нажать неправильную кнопку пальцем. Рекомендуемое расстояние между кнопками — 3 мм.
6. Расположение кнопок
Кнопки должны быть заметны, для этого их лучше всего размещать там, где их ожидают увидеть, например, рядом с товаром на странице товара или рядом с итоговой ценой в корзине. Главную кнопку на странице необходимо размещать в первом экране. Не заставляйте пользователей искать важные кнопки по сайту, это снизит конверсию.
Главная кнопка «Купить» расположена на видном месте, в первом экране страницы товара на сайте «Спортмастер»
Главная кнопка «Оформить заказ» расположена в первом экране корзины на сайте Adidas. Также кнопка продублирована на случай большого количества товаров в корзине.
Главная кнопка «Оформить заказ» отсутствует в первом экране корзины маркетплейса «Беру».
7. Текст на кнопках
7.1. Понятный призыв к действию
Человек так устроен, что он с опасением относится к чему-то неизвестному. Поэтому надпись на кнопке должна подсказывать, что ожидает человека после клика, и побуждать к действию. В противном случае, кликабельность кнопки будет ниже.
Текст на кнопке должен ясно подсказывать действие
7.2. Динамичные надписи на кнопках
Другой вариант — это изменяющиеся надписи на кнопках при наведении. По ним пользователь сразу понимает, какое действие он совершит, кликнув на кнопку. Это снижает неопределенность и повышает кликабельность.
Динамичные кнопки в Twitter, кнопка меняет надпись и цвет при наведении курсора, подсказывая действие
7.3. Значки на кнопках
Помимо надписей, на кнопку можно вынести значок, так становится гораздо понятнее. Ниже пример кнопки на сайте Amazon, обратите внимание, что благодаря значку корзины значение кнопки понятно на любом языке.
Кнопки на сайте Amazon на русском (слева) и японском (справа) языках
Но применять значки стоит обдуманно. Подбирайте простые и понятные значки, не злоупотребляйте украшениями. Значки должны подходить по смыслу тому разделу в который они направляют.
Значки (сверху) и их значения (снизу)
1 — личный кабинет (регистрация или вход).
2 или 3 — с этими значками следует быть осторожнее, потому как они могут обозначать множество функций: избранное, сохраненное, список желаний, закладки, лайк, рейтинг. Легко запутаться.
4 — сравнение товаров (по характеристикам).
5 — просмотренные ранее товары.
6 — помощь (info).
7.4. Текст рядом с кнопками
Желательно указывать подписи к кнопкам и значкам. Без подписи кликабельность снижается, а вместе с ней и конверсия. Пример: когда компания Microsoft выпустила почтовый клиент Outlook 97, то в новом интерфейсе для кнопок были использованы значки основных команд.
Но тесты показали, что люди практически не использовали панель инструментов с значками. Тогда было принято решение внести исправления: перестановка значков местами, отрисовка новых значков. Но с каждым изменением ничего не менялось, люди не использовали кнопки с значками.
Microsoft Outlook 97
Наконец, команда проекта решила разместить текстовое описание рядом с каждым значком. И это сработало, люди начали активно использовать панель инструментов.
Microsoft Outlook 2003
Поясняющий текст рядом с кнопками также помогают снять беспокойства пользователей, например: «Я сейчас нажму на кнопку и у меня спишут деньги?»
Поясняющий текст рядом с кнопкой на сайте Booking.com
7.5. Не перегружайте кнопки текстом
Для этого можно воспользоваться рекомендациями выше.
Nix.ru