Кнопка, которая ведёт себя как кнопка

Урок 8.6 · Интерфейсы и сайты с нуля · Модуль 8. Интерфейс, который понятно · По подписке

Цель урока: Сделать кнопку, про которую сразу понятно: на неё можно нажать, и после нажатия что-то произойдёт.

Нужно знать заранее: Урок 1.3 «Кнопка, на которую хочется нажать», урок 8.5

Объяснение

Зачем это нужно: Человек не читает подписи — он сначала смотрит, на что можно нажать. Если элемент выглядит как текст, его не нажимают; если кнопка слишком маленькая, в неё не попадают пальцем; если после нажатия ничего не изменилось, человек решает, что сайт сломан. Всё это — про одно: у действия должен быть понятный вид и понятный отклик.

Как это работает: В дизайне это называют аффордансом — свойством предмета подсказывать, как им пользоваться. У кнопки подсказка складывается из мелочей: заливка, скругление, отступы, курсор-рука, тень. У ссылки — подчёркивание или цвет. Если убрать все подсказки, останется текст, и никто не догадается, что он кликабельный. У действия есть состояния, и их надо оформить все: обычное — как выглядит всегда; наведение (hover) — курсор над кнопкой, лёгкое изменение; фокус (focus) — кнопка выбрана с клавиатуры, видимая рамка; нажатие (active) — кнопка «утапливается»; недоступное (disabled) — видно, что нажать нельзя.

Уроки модуля 8

• 8.1 Один главный объект: иерархия экрана (бесплатно)
• 8.2 Близость и воздух: отступы вместо рамок (по подписке)
• 8.3 Цвет — это сигнал, а не украшение (по подписке)
• 8.4 Сочетание цветов: почему это читается (по подписке)
• 8.5 Контраст: чтобы видели все (по подписке)
• 8.6 Кнопка, которая ведёт себя как кнопка — вы здесь (по подписке)
• 8.7 Проект: переделать страницу по правилам (по подписке)
• 8.8 Разбор экрана: почему не видно главного (по подписке)