Best practices in UX/UI of web design and mobile interfaces

1. Фокус

а) Создайте точку входа

Подчеркните точку входа в интерфейсе

Обесцветьте элементы рядом с точкой входа

б) Направляйте поток глаз

Неясные детали фона

Перекрывающиеся элементы в разделах

c) Сгруппируйте похожие элементы

Переместите заголовки ближе к их разделам

Держите метки близко к их элементам

Группировать похожие элементы по близости

Разделите длинные списки на более мелкие разделы

Отличайте мощные функции, чтобы свести к минимуму проскальзывания

г) Удалите ненужные элементы

Пропустите самоочевидные инструкции

Максимизируйте соотношение данных и чернил

Скрыть периферийные детали в расширяемых носителях

e) Сообщите о скрытых частях дизайна

Укажите, существует ли контент ниже сгиба

Передайте глубину через переходы или тени

f) отображать изменения, не отвлекая пользователя

Предотвратите блокировку других функций изменениями

Анимация визуальных изменений в интерфейсе

Укажите, какие элементы были изменены

Предупреждать пользователей, когда будет выполняться запланированная функция

2. Понимание

а) Укажите, какие элементы являются интерактивными

Изменить курсор или средство

Изменить элемент

Укажите, какой элемент получит взаимодействие

б) Обеспечить обратную связь во время и после взаимодействия

Укажите, будет ли взаимодействие успешным

Укажите, было ли взаимодействие успешным

c) Общайтесь в относительных терминах

Передавайте время по отношению к настоящему

Сравните цифры со значимой базовой линией

г) Помогите пользователям найти свое текущее местоположение

Показать предыдущие шаги пользователя

Укажите местоположение курсора

Сообщите о текущей фазе взаимодействия

e) Дизайн для сканирования

Поместите важную информацию в начало

Вставьте основной вывод в заголовки

f) Сообщите ожидаемый результат взаимодействия

Укажите следующий элемент в последовательности

Показать количество элементов в группе

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

Опишите назначение ссылок

Укажите взаимодействие, которое произойдет

g) Соответствовать ожиданиям пользователя

Сохраняйте согласованность между ссылками и пунктами назначения

Показать основную сущность при загрузке

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

Выбирайте цвета, которые имеют семантическое значение

3. Усилие

а) Помогите пользователям выбрать параметры

Предложите отправную точку

Сравните параметры по атрибутам

Рекомендовать вариант

Показать типичный ответ

б) Свести к минимуму вред от ожидания

Уменьшите их возбуждение с помощью холодных цветов

Держите пользователей вовлеченными, пока они ждут

Совместите время простоя машины с временем простоя пользователя

Заполните интерфейс заполнителями во время загрузки

c) Минимизируйте зависимость от вычислений и памяти

Подсчитать количество оставшихся предметов

Держите соответствующую информацию видимой

Разрешить пользователям копировать информацию

Укажите, какие предметы. Пользователи уже просмотрели

Минимизируйте учетные данные, относящиеся к интерфейсу

г) Минимизируйте избыточные задачи

Разрешить пользователям дублировать прошлый ввод

Сохранять ввод при изменении интерфейса

Отслеживайте черезмерный ввод или повторения

e) Размещайте часто используемые взаимодействия ближе к пользователям

Держите варианты видимыми в небольших ассортиментах

Предварительно заполните поля ввода общими ответами

Расположите общие ответы в верхней части списков

Предлагайте предложения на основе предсказанного ввода

Держите соответствующую информацию перед взаимодействием

Держите частые взаимодействия видимыми

Скрыть нечастые взаимодействия

f) Направлять пользователей к их цели

Подталкивайте пользователей к ценности

Начать прогресс выше нуля

4. Ошибки

а) Предотвратить возможность ошибок

Отключить кнопки, когда пользователи их нажимают

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

Включайте функции только при необходимости

Структурируйте текстовые поля для соответствия вводу

Добавьте ограничения к необратимым изменениям

б) Сообщите о требованиях к взаимодействию

Опишите необходимые входные данные

Опишите необходимые параметры

Заполните единицы или параметры

Сопоставьте размеры формы с входными размерами

Укажите, какие элементы необходимы

c) Отслеживайте сигналы, типичные для ошибок

Следите за формулировками, противоречащими намерениям

Мониторинг пустых отправлений

Монитор бездействия

Подтвердите, было ли запланировано повторное действие

г) Обеспечьте простые способы побега или обратного хода

Пропускать подтверждения в обратимых решениях

Разрешить пользователям отменять несколько уровней действий

e) Помогите пользователям решить проблему

Определите проблему и решение ошибок

Укажите пользователям поддержку или документацию

Не говорите «вы» в сообщениях об ошибках

f) Расширение подвижных путей и кликабельных областей

Добавьте прозрачную рамку к маленьким кнопкам

Гиперссылка на полный фон элемента

Задержка анимации наведения на несколько миллисекунд

5. Совместимость

а) Приспособиться к навыкам или знаниям пользователя

Помогите пользователям понять незнакомые языки

Помогите пользователям понять незнакомые термины

Бортовые пользователи на основе их опыта

б) Соответствие цели или рабочему процессу пользователя

Разрешить пользователям контролировать внешний вид элементов

Разрешить пользователям контролировать порядок элементов

Позвольте пользователям откладывать ненужные задачи

Предлагайте несколько способов выполнения задачи

Разрешить пользователям переходить непосредственно к местоположению

c) Максимизируйте доступность вашего интерфейса

Категоризация элементов с помощью семантической разметки

а также

"Ширина = "2501" Высота = "888">

Предоставление альтернативных форматов контента

Передавайте информацию в нескольких форматах

г) Максимальная совместимость для всех входов и сценариев

Убедитесь, что сообщения применимы ко всем сценариям

Принимать различные форматы ввода

Обработка входных данных с неправильным форматированием