Юзабилити, то есть удобство интерфейса для пользователей, касается в первую очередь технической стороны, дизайна и оформления значимых деталей. В число последних входят кнопки, позволяющие совершать целевое действие.
Существует несколько принципов их профессионального оформления:
1. Визуальное отличие интерактивных фрагментов от фона. Эксперты делают упор на форме и цвете:
- Первая может быть прямоугольной или квадратной — такая геометрия наиболее привычна пользователям, и они без труда поймут, какой перед ними элемент. Использовать можно и любую другую форму, однако есть риск, что она останется незамеченной в силу визуальной непривычности.
- Цвет должен быть согласован с дизайном сайта в целом, однако кнопка должна не сливаться, а контрастировать. Например, синий цвет хорош на белом фоне, зелёный — на оранжевом и т.п.
2. Для юзабилити важна последовательность, то есть кнопки должны быть похожи между собой формой. По цветовой гамме допускаются отличия в ряде случаев, которые рассмотрим позже. Нелишним будет придание «объёма» кнопке с помощью тени.
3. Лёгкий поиск: кликабельные, равно как и некликабельные, элементы должны располагаться там, где их ожидают видеть пользователи. Чтобы не создавать стрессовую ситуацию, не нужно креативить — корзина традиционно должна быть в правом верхнем углу, кнопка покупки — под описанием товара и т.п. На длинных страницах уместно расположить одну «плавающую» кнопку или разместить несколько.
4. Порядок расположения: последовательность элементов также должна соответствовать представлениям пользователей. Поэтому кнопка «Отмена» должна находиться, например, левее или ниже кнопки «Отправить».
5. Надпись: кнопка должна оснащаться понятным ёмким текстом не длиннее четырёх слов: «Перейти к каталогу», «Скачать бесплатно», «Оформить подписку».
6. Вектор действия: кнопка должна чётко указывать, что наступает при её нажатии, какая задача решается. Мотивирующая кнопка создаёт комфорт для пользователя, поэтому рекомендуется не ограничиваться общими словами типа «Отправить данные». Если после введения данных в форму обещан подарок, то кнопка должна гласить: «Получить подарок». Необходимо избегать приказного тона при оформлении.
7. Использование формы первого лица: «Подключить мой бесплатный доступ» вместо «Подключить ваш бесплатный доступ».
8. Принцип срочности предложения усиливает спрос: текст кнопки должен выглядеть, например, так: «Заказать сейчас за полцены».
9. Пояснения при необходимости: рядом с ориентированной на срочность кнопкой «Купить за 50% стоимости» — должна быть фраза, что акция действует, например, до полудня 31 октября.
10. Размер имеет значение: крупные значки легче заметить, нежели мелкие. Между интерактивными фрагментами обязательно должны быть и отступы, параметры которых не позволяют пользователю промахнуться.
11. Кнопка должна «нажиматься», то есть состояние элемента по умолчанию должно отличаться от активной позиции, иначе пользователи не поймёт, что действие произошло.
12. Регулярный контроль: без постоянного тестирования и улучшения невозможен прогресс. Отслеживайте поведение пользователей, анализируйте конкурирующие сайты.
Нельзя забывать, что грамотно оформленные кнопки помогают посетителю сайта осуществить целевое действие, на разработке их не стоит экономить.