Интерфейс

Курс лекций о проектировании интерфейсов, собранный из открытых источников.

С правильным порядком изложения: от основ к деталям, от простого к сложному. От обычных подборок «полезных ссылок» отличается как учебник физики от очередного выпуска журнала «Всё обо всём».

1. Универсальные принципы

Законы робототехники в интерфейсе · Антон Жиянов

Ошибки и человеческий фактор · Антон Жиянов

Привычки пользователя · Илья Бирман

Модальность · Илья Бирман

Обратная связь · Илья Бирман

Выбор · Антон Жиянов

2. Навигация

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

Навигация по сайту

Принципы правильной навигации
Сергей Кулинкович

Обвязка страниц
Сергей Кулинкович

Три состояния пункта меню сайта
Илья Бирман

Многоточие в пунктах меню
Илья Бирман

Навигация по данным

Прокрутка или листалка EN
Николай Бабич

Листалка EN
Николай Бабич

Прокрутка EN
Николай Бабич

3. Формы и ввод данных

Как спроектировать удобную форму, какие выбрать элементы управления.

Общие вопросы

Как спроектировать форму
Павел Моисеенко

Структура и действия EN RU
Николай Бабич

Подсказки и проверка данных EN
Николай Бабич

10 правил хороших форм
Сергей Кулинкович

Кнопки и текстовые поля

Кнопки: типы и состояния EN RU
Николай Бабич

Кнопки: основная и второстепенная EN
Николай Бабич

Текстовые поля EN
Николай Бабич

Переключалки и дропдауны

Флажки и переключатели EN RU
Николай Бабич

Радиокнопки EN RU
Николай Бабич

Мультигруппы
Кирилл Беляев

Выпадающие списки EN
Николай Бабич

Поля ввода даты
Энжи Ли

Всякие другие контролы

Индикаторы прогресса EN RU
Николай Бабич

Диалоговые окна EN RU
Николай Бабич

Нестандартные элементы интерфейса
Илья Бирман

Пиктограммы
Илья Бирман

4. Ошибки и обратная связь

Как дать обратную связь пользователю, когда что-то идёт не так.

Текст сообщения об ошибке · Рафаль Безымянный
Как сформулировать сообщение об ошибке, чтобы оно было полезно человеку

Валидация форм · СКБ Контур
Виды валидации, текст ошибок, поведение контролов при ошибках

Валидация полей ввода · Михаил Капанага
Как по-человечески проверять дату, почту, телефон и банковскую карту.

В какой момент показывать ошибки · Илья Бирман
Когда показывать ошибки заполенения формы: при потере фокуса, перед отправкой, все сразу или по отдельности.

5. Списки, поиск и фильтрация

Как организовать информацию в интерфейсе · Антон Жиянов

Дизайн таблиц с данными · Эндрю Койл

Сначала данные, затем фильтры · Илья Бирман

Как показывать результаты поиска EN · Николай Бабич

6. Дашборды

Понятные дашборды · Пейдж Лаубхаймер

7. Анимация

Интерфейсные анимации · Илья Бирман
Зачем в интерфейсе анимации, какие задачи они решают и как конкретно их надо делать, чтобы они выглядели естественно и приятно, а не раздражали.

Анимировать действия, не состояния EN · Тобиас Алин

8. Время

Проектируем время · Павел Моисеенко

Как восприятие времени формирует впечатление от интерфейса EN RU · Адриан Цумбрюннен

9. Вёрстка, композиция и цвет

Теория близости · Илья Бирман

Закон Фиттса · Илья Бирман

Как собрать палитру из одного цвета · Эрик Кеннеди

10. Текст

Информационный стиль в интерфейсе · Илья Бирман