Расположение кнопок

Расположение кнопок

С одной стороны все же понятно, Ок слева, Отмена справа.

Оказывается что не всегда и не у всех.

Так как же правильно?

На самом деле все просто.
Читаем мы слева направо. То есть, если первой кнопкой будет подтверждение, то мы не нажмем ее, пока не ознакомимся со второй кнопкой. После этого мы примем решение и нажмем подтверждение. В результате произойдет это

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

Можно провести аналогию между кнопками НАЗАД/ВПЕРЕД и кнопками ОТМЕНА/ОК. ОТМЕНА это по сути назад, а ОК это по сути вперед. То есть ОТМЕНА должна быть слева, а ОК должна быть справа.

Размер и цвет кнопок.

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

По возможности избавляться от ненужных кнопок

Я не могу вспомнить когда бы я открыл word, что то долго набирал и не захотел бы это сохранить. Зачем тогда мне выводить диалоговое окно с 3 вариантами ответов «Сохранить», «Не сохранять», «Отменить».
Вот есть Sketch, где после закрытия не появляются диалоговые окна. И за пару лет ежедневной работы у меня не было необходимости в них.

Правильно подписывайте кнопки

Не используйте кнопки типа «OK», «Cancel», «Да», «Нет» и т.п.  Эти кнопки никак не связаны с действием, которое совершает пользователь. Чтобы было проще, связывайте название кнопки с желаемым/планируемым действием пользователя.

Помните о первичных и вторичных действиях

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

Указывайте состояние кнопки

Продумывайте все состояния кнопок, при наведении, при нажатии, задизейбленые.

Иконки в кнопке

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

Иванов Виктор

Иванов Виктор

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