Design Review

1.1 Навигация

Пробегитесь глазами по макету. Ответьте на вопросы: Быстро ли вы нашли нужный раздел? Соответствуют ли заголовки контексту? Можно ли упростить структуру? Пункты навигации неизменны на всех страницах. Используются привычные паттерны. Наличие хлебных крошек

1.4 В интерфейсе есть потенциал для развития

Например есть блок с набором действий. Сейчас их 3, а через полгода их станет 5 или 10. Показать самое длинное возможное название товара, Показать цену товара с максимальным количеством знаков, Показать страницу новости с длинной аннотацией (лид-абзац), и т.п.

1.5 В дизайне определён и показан вариант вывода минимального объёма информации

показать вывод новости, у которой не задано фото (а если таких несколько подряд?), вывод таблицы, в которой пользователь скрыл все столбцы кроме 2–3, вывод товара, у которого очень короткое описание, и т.п.

1.8 Тексты интерфейса и контент

Текст написан «человеческим» языком Контент разбит на смысловые блоки Текст написан в едином стиле По возможности без рыбного текста В макете нет грамматических и логических ошибок

1.9 Пять правил написания хороших UX-текстов:

Сокращай. Не растекайся мыслью по древу, но и не ужимай текст настолько, что от него останется только форма. Пиши понятно. Не мудрствуй лукаво и всегда ставь себя на место бабушки, которой на твоём сайте всё должно быть ясно; Не забывай про консистентность. Пиши последовательно и однозначно — так пользователь быстрее привыкнет к интерфейсу; Не обманывай ожидания. Говоришь «А», говори и «Б». И подкрепляй это соответствующими действиями; Помни, для кого ты пишешь. Меньше «воды» и украшательств, больше конкретики.

2. UI чек-лист

2.1 Сетка

Проверить отступы, мы используем модуль кратный 4px. Наиболее предпочтительны отступы: 4, 8, 16, 24, 32, 48, 96, 128. Можно использовать и промежуточные отступы, но ОБЯЗАТЕЛЬНО кратные 4px

2.3 Используется не более 3 основных цветов

Проверка цветового единства для всех заданных элементов, отсутствие новых цветов, одинаковый цвет для шрифта, обводки и т.д.

2.7 Компоненты

Проверить их наличие в макете При необходимости показать состояния элементов (активное, ошибки и т.д.) Если необходимо создать новый компонент, то его обязательно нужно добавить в библиотеку

3. Общее

3.2 Почистить макет

Все экраны должны иметь нормальное наименование, название экрана должгл описывать его функцию (например, “добавить в корзину”). Удалить не нужные слои, фреймы, направляющие и т.д. Название макета на латинице

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

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

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

Design Review

1. UX чек-лист

2. UI чек-лист

3. Общее

Автор: скрыт

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

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