Паттерны

Восемь задач, которые решают не компонентом, а сочетанием. У каждой — анатомия, карта задействованных компонентов, пары «так и не так» с объяснением почему и заметки о доступности.

8 паттернов в 3 группах~25 мин на всё

Ввод данных3

Формы, настройки и вход: где пользователь сообщает продукту что-то сам.

ФормыИз чего состоит форма, какой компонент несёт какую часть и четыре решения, от которых зависит, заполнят её или нет.
- 3 мин
- компонентов: 8
- пар: 3
НастройкиВсякая настройка сначала отвечает на один вопрос — применяется она сразу или по сохранению. Всё остальное на экране следует из ответа.
- 3 мин
- компонентов: 8
- пар: 3
АутентификацияЗдесь нет ни одного особого компонента — это обычная форма. Всё важное в решениях, и большинство из них о том, чего не говорить.
- 3 мин
- компонентов: 8
- пар: 3

Навигация и поиск2

Как добраться до нужного экрана и до нужной записи.

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

Показ и отклик3

Таблицы и списки, ответ на действие, слои поверх страницы.

Отображение данныхДесять способов показать одни и те же строки. Выбор решается тем, что читатель сделает дальше — сравнит, просмотрит или найдёт одно.
- 3 мин
- компонентов: 9
- пар: 3
Обратная связьСемь компонентов отвечают на один вопрос — куда идёт сообщение. Ошибка в выборе и есть причина, по которой интерфейс кажется неотзывчивым.
- 4 мин
- компонентов: 7
- пар: 3
ОверлеиОдиннадцать компонентов кладут содержимое поверх страницы. Выбор между ними — выбор про фокус, а не про вид окна.
- 3 мин
- компонентов: 8
- пар: 3