0%
  1. Главная
  2. Каталог
  3. Другое
816 PDF
создать чек-лист
28 декабря 2020 года

Design Review

Чек-лист нужен для того, чтобы сократить количество ошибок при сдаче макетов.


0%

UX чек-лист

Навигация
Пробегитесь глазами по макету. Ответьте на вопросы: Быстро ли вы нашли нужный раздел? Соответствуют ли заголовки контексту? Можно ли упростить структуру? Пункты навигации неизменны на всех страницах. Используются привычные паттерны. Наличие хлебных крошек
Показаны уведомления об ошибках
Меньше подсказок
Интерфейс должен быть понятен сразу Если есть подсказки, то они должны быть простыми и понятными
В интерфейсе есть потенциал для развития
Например есть блок с набором действий. Сейчас их 3, а через полгода их станет 5 или 10. Показать самое длинное возможное название товара, Показать цену товара с максимальным количеством знаков, Показать страницу новости с длинной аннотацией (лид-абзац), и т.п.
В дизайне определён и показан вариант вывода минимального объёма информации
показать вывод новости, у которой не задано фото (а если таких несколько подряд?), вывод таблицы, в которой пользователь скрыл все столбцы кроме 2–3, вывод товара, у которого очень короткое описание, и т.п.
Есть подтверждение совершенных действий
Если есть сложный процесс, есть индикатор прогресса
Тексты интерфейса и контент
Текст написан «человеческим» языком Контент разбит на смысловые блоки Текст написан в едином стиле По возможности без рыбного текста В макете нет грамматических и логических ошибок
Пять правил написания хороших UX-текстов:
Сокращай. Не растекайся мыслью по древу, но и не ужимай текст настолько, что от него останется только форма. Пиши понятно. Не мудрствуй лукаво и всегда ставь себя на место бабушки, которой на твоём сайте всё должно быть ясно; Не забывай про консистентность. Пиши последовательно и однозначно — так пользователь быстрее привыкнет к интерфейсу; Не обманывай ожидания. Говоришь «А», говори и «Б». И подкрепляй это соответствующими действиями; Помни, для кого ты пишешь. Меньше «воды» и украшательств, больше конкретики.
Элементы управления
Все контролы понятны и уместны Однотипные контролы имеют однотипный вид
При необходимости подготовить прототип
Адаптивность
Основной акцент на мобильную версию

UI чек-лист

Сетка
Проверить отступы, мы используем модуль кратный 4px. Наиболее предпочтительны отступы: 4, 8, 16, 24, 32, 48, 96, 128. Можно использовать и промежуточные отступы, но ОБЯЗАТЕЛЬНО кратные 4px
Главное действие визуально отличается от действия второго порядка
Используется не более 3 основных цветов
Проверка цветового единства для всех заданных элементов, отсутствие новых цветов, одинаковый цвет для шрифта, обводки и т.д.
У изображений есть контейнер
Иконки
Иконки должны быть в квадратном контейнере В одном стиле, в формате svg
Все картинки в макете оптимального качества и размера
Компоненты
Проверить их наличие в макете При необходимости показать состояния элементов (активное, ошибки и т.д.) Если необходимо создать новый компонент, то его обязательно нужно добавить в библиотеку

Общее

Стили
Шрифт PT Sans Иерархия текстовых стилей Текст и фон должны быть контрастны друг другу
Почистить макет
Все экраны должны иметь нормальное наименование, название экрана должгл описывать его функцию (например, “добавить в корзину”). Удалить не нужные слои, фреймы, направляющие и т.д. Название макета на латинице
0%

Например, дизайн поля для загрузки файла. Как его обычно показывают дизайн поля для загрузки файл в UI? Некое поле с кнопкой Обзор (или просто кнопка “Выбрать”).

Но по факту понадобятся:

  • Мог ли пользователь понять, какой формат/размер поддерживаются? (подсказка об ожидаемых форматах, размерах)
  • Как будет происходить загрузка? (потянуть-бросить, прелоадер загрузки, отмена в процессе загрузки).
  • Что будет после загрузки? (уведомление об успешном завершении, новый вид вывода)
  • Что будет, если файл не подходит по размеру или формату? (вывод сообщения об ошибке)
  • Как удалить/заменить файл? (новые управляющие элементы для уже загруженного файла)

Автор: скрыт

Скачать чек-лист в PDF  
Распечатать чек-лист  

Смотрите другие чек-листы в категории "Другое"

Чек-лист готовности к Новому году Ты узнаешь УТЭ из тысячи Кинодекабрь


Чек-лист | ЭкспертЧек-лист | Эксперт - создайте чек-лист онлайн, бесплатно!

Создано с помощью сервиса "Чек-лист | Эксперт"