UX User Experience
Зачем
- UX-дизайн (User Experience — «пользовательский опыт») отвечает за то, как интерфейс работает.
- UI-дизайн (User Interface — «пользовательский интерфейс») отвечает за то, как интерфейс выглядит.
Паттерны
- Human Interface Guidelines
- Material Design Guidelines
Прелоадер Индикатор загрузки loader
- Видимость состояния системы — первая и самая важная из десяти эвристик Якоба Нильсена.
- наличие обратной связи увеличивает приемлемое время ожидания.
- Неопределенные индикаторы
- Определенные индикаторы
- Виды индикаторов
- Спиннер (spinner)
- Скелетная загрузка или трафарет (sceleton loader, stencil)
- Индикатор в виде полосы (progress bar)
- Круглый индикатор (progress circle)
- Процентный индикатор (percentage indicator)
- Гибридные индикаторы (hybrid indicators)
- Анимированные иконки или иллюстрации (animated icons/illustrations)
- Паттерны
- Давайте содержательную обратную связь, разбивайте сложные процессы на шаги и информируйте пользователей о задачах, которые выполняются в фоновом режиме
Назад, Закрыть, Отмена
- Закрытие — это не действие, а изменение состояния интерфейса.
- Прерывает действие, возвращается к предыдущему состоянию UI. Получается, мы должны использовать ссылку, а не кнопку.
- Для закрытия модальных окон (диалогов, выдвижных панелей, полноэкранных модальных окон) обычно используется свайп, кнопка закрытия (крестик) или касание за пределами элемента. Ошибка, выбирая стрелку назад вместо кнопки закрытия.
- Отмена действия — это полная противоположность его выполнению, отказ от действия.
- Во всех описанных выше случаях отмена действия повлечет за собой возврат к предыдущему состоянию UI.
- Назад
- Отображение в Верхней навигации
Навигация
- Верхнее меню
- Навигация на основе поиска
- Нижнее меню (Tab bar) \ Панель вкладок
- Боковая панель (sidebar)
Диалоговое окно (оповещение, список действий, всплывающее окно)
- Модальное окно, которое появляется на странице поверх контента.
Выдвижная панель bottom sheet
Checklist
- Обшие требования
- UI Kit
- Загрузка файлов
- Скачать
- Груповой выбор
- Прототип mocks, wireframe — упрощенный прототип интерфейса
- Reference Примеры конкурентов (dribbble.com)
- Карта экранов (ЭФ) - переходов
- Реестры, Справочники, Отчеты
- Фильтрация
- Интерактивный прототип (эмуляция UX): Figma Prototype
- Инструменты: Figma, Camunda Modeler Form, PlantUML Salt
- Элементы (кнопка, checkbox и тп), Действия, Видимость, Доступность, Обязательность, Правило валидации, Возможные значения, Значение по умолчанию, Источник данных