Чек-лист для дизайнера интерфейсов (личный опыт)
15 пунктов, которые помогут усилить интерфейс и ничего не упустить (наверное)
Занимаясь интерфейсами, я часто что-то забывал или не учитывал. Например, экран с ошибкой или скелетон. Эти косяки обычно всплывали ближе к дедлайну и я уходил докручивать макеты. А всё потому, что мне сложно держать в голове миллион нюансов.
Поэтому сделал для себя чек-лист для самостоятельной проверки интерфейса. Он помогает:
— смотреть на макет с разных сторон;
— учитывать разные сценарии;
— помнить о проблемах юзеров и интересах бизнеса;
— экономить время на правках.
Чек-лист включает 15 пунктов, которые можно поделить на 4 блока:
Синхронизация
- Решает ли интерфейс проблемы и потребности пользователей? Это база. Если нет, зачем тогда мы все это делаем? !
- Учтены ли особенности пользователя? Например, аудитория нашего продукта — бабушка с плохим зрением.
- Учтен ли контекст, где находится юзер в момент использования продукта? Сколько у него времени, чем он занят, кто может его отвлечь? А может быть это работник склада, который всегда в перчатках?
- Учтен ли контекст, где будет находиться интерфейс (если это часть фичи, а не целая страница)? Насколько консистентно вливается интерфейс в уже существующий продукт?
- Решаются ли задачи бизнеса? Например, бизнес хочет экономить время сотрудников с помощью интерфейса, а наш продукт нацелен на другое.
- Макет показан разработчику? Может я сделал «космическую ракету», которую невозможно или сложно реализовать? С этим помогут регулярные обсуждения.
Простота
- Текущее решение лучшее из всех возможных? Например, горизонтальное или вертикальное расположение, карточкой или таблицей и тд. Стараюсь не останавливаться на первом решении, а крутить-вертеть макеты дальше. Конечно же, лучшее решение может подсказать респондент во время исследований. Но сейчас не об этом.
- Что в интерфейсе «сложного и дорогого» с точки зрения логики и функционала? Как можно это «упростить и удешевить» без потери ценности? Опыт помогает оценить сложность функционала без общения с разработчиком. Если такие места есть, конечно же, их лучше упрощать – снижать стоимость и время разработки.
Какие действия система может упростить за пользователя? Например, при заполнении данных карты при вводе последней цифры система автоматически перебрасывает нас на следующее поле. Это помогает экономить действия.
У Тинькофф при заполнении анкеты на сим-карту система выдает подсказки и автоматически перемещает фокус на следующие поля:
Уборка
Какие функции или свойства можно объединить в один элемент? Например, Кинопоиск — кнопка «Следующая серия» отсчитывает таймер и сама переключает на следующую серию.
- Что можно выкинуть из макета без потери смысла и ценности? Какие элементы и фразы повторяются и я могу вынести их в надсистему или за скобки? Например, раньше в Вконтакте каждый раздел начинался с «Мои…». После редизайна этот информационный шум исчез.
Состояние контента
- Испытан ли макет на прочность? Например, в случаях, когда контента или элементов станет на 20% больше? На 40%? На 60%? и т. д. Не развалится ли макет? А если контента вообще не будет? Например, раньше я любил делать макеты, в которых все было идеально скомпоновано, но тесновато. И при любом изменении объема контента всё легко рушилось.
- Макет продуман для каждого сценария, ошибок, пустого экрана, лоудера, скелетона и тд?
- Подготовлены ли макеты под разные экраны десктопа, мобилки и планшета?
- Получает ли юзер обратную связь на свои действия? Обратная связь мгновенная? Однозначная? Честная? Заметная?
Например, Кинопоиск так объясняет невозможность сделать скрин сериала или фильма.
Еще чек-листы
Дополнительный материал: чеклист UX/UI дизайнера и самостоятельная проверка интерфейса.
Пожалуйста, поделитесь в комментариях своими способами проверки интерфейса.
Спасибо за внимание!)
А ещё для усиления интерфейсов я качаю насмотренность в UX, а референсы собираю в телеграм-канале.
Статья - огонь) И отдельное большое спасибо за реальные примеры)
🙏