1 заметка с тегом

website

Про дизайн кнопок

Сделал я интерфейс с двумя страницами. На каждой странице кнопка. У кнопок одинаковый функционал (например это ссылка), но разные результаты по клику.

Я вот что подумал, почему я должен делать кнопки в интерфейсе одинаковыми? Совершенно, не должен. Чтобы оптимизировать разработку/код? В этом есть доля правды, но подойдем с другой стороны. Каждая кнопка (её внешний вид) должна ассоциироваться с ожидаемым результатом.

Рассмотим на примере одного выдуманного сайта.

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

Страница ошибки, тоже есть экшен — вернуться на главную. Здесь используем второй тип кнопки. Не такой контрасный и яркий, но все же, чтобы было похоже на кнопку. Можно обойтись прозрачным фоном с бордером. Такие кнопки еще назыаются ghost button. Они как бы есть, но не делают большого акцента/внимания пользователя.

Проблемы которые могут возникнуть. Например, если пользователь встретился с кнопкой первого типа и воспольовался ей, то создается ассоциативная связь: ожидаемый результат (в нашем случае это звонок) + внешний вид кнопки. Далее, если пользователь встретит на своем пути кнопку с таким же оформлением но другим текстом, он может даже не прочитать что на ней написано, и подумать что действие будет одинаковое. Лучше этого избежать на визуальном уровне сразу.

Используйте дизайн кнопок соответственно их требованиям.
А что вы думаете по этому поводу?

2017   button   cat   ghost button   interface   ux   website   размышления