Проектируем интерфейс на основе карты — продолжение
Привет! В прошлой статье я:
- накидал общую схему своего приложения (какие будут скрины, какие модули они будут содержать и какую задачу решать),
- собрал референсы (прикольные образцы) для первых двух шагов сценария,
- быстренько накидал самый первый скрин приложения (по сути — лендинг, на котором пользователи будут узнавать о моем приложении),
- более подробно накидал следующий шаг, где пользователь будет настраивать рабочую сессию.
Продублирую их, чтобы были под рукой.
Схема приложения:
Шаги, которые я буду проектировать:
Спроектированный первый шаг:
(справа — хорошие образцы, слева — маленький блочок с будущей структурой страницы, в центре — wireframe страницы, его можно посмотреть в полный размер).
Список модулей для второго шага:
Хорошо, память мы освежили, можно идти дальше и проектировать второй шаг уже детально.
Список работ по проектированию и дизайну:
- Выбор контролов, которые будут использованы, добавление их на прототип
- UX-копирайтинг
- Layout, акценты, иерархия (размеры, цвет, контраст, разрыв паттерна, близость и выравнивание, оси взаимодействия, линейное и краевое натяжение)
- Графика
- Учет поведения пользователя (F и Z-паттерны движения глаз, прочие паттерны поведения, айкетчинг и фолд, CTA)
В конце статьи я приведу достаточно много ссылок, где вы можете про все это прочитать. А пока спроектирую пару экранов и покажу на их примере, как работает вышеперечисленный список.
Кроме того, в конце каждого раздела я буду рекомендовать пару статей по теме.
Выбор контролов.
В целом я хочу придерживаться метафоры стики ноутсов. Почему — они быстрые, легкие, и в хорошем смысле тупые (не требуют сложных взаимодействий).
Значит, я использую существующие приложения с такими заметками — как образец. И постараюсь взять какие-то паттерны из работы с настоящими бумажками.
Значит:
- Цветная подложка
- Пользователь больше пишет (а может и рисует), чем кликает на кнопки или использует какие-то сложные контролы
- Возможно использование рукописных шрифтов, и скетчевого стиля в иконках и другой графике
- Приоритет — простоте и скорости (перед гибкостью и функциональностью)
Попробуем набросать первые прототипы. Получилось две картинки.
1. Настройка длины сессии и задач:
Я могу указать, сколько я хочу поработать. Время можно указать как цифрами, так и “ближайший час”, или “ближайшие три часа”, что удобно, если я прямо щас поработать хочу (можно не смотреть на часы и не вычислять). Я могу указать, что хочу сделать за время сессии. Причем я очень легко могу указать подзадачи/критерии успеха.
Система подсказывает мне об этих возможностях и советует, как заполнить поля.
Важно: казалось бы, что тут проектировать, два поля и кнопки. Это значит, что я сделал свою работу хорошо и выбрал правильные контролы :) Поскольку выбор временных промежутков и создание задач+подзадач обычно делают мягко говоря, более сложными :)
2. Выбор, на какие письма и сообщения я хочу реагировать во время сессии, а что буду игнорировать:
UX-копирайтинг
Я уделил много внимания текстам плейсхолдеров. Скорее всего, их придется еще дорабатывать после юзабилити-тестирования.
Могу ли я еще что-то доработать сейчас? Пожалуй да, второму экрану недостает вступления. Там непонятно, что значит “ответить тут же”, “сделать пометку на потом”, о чем вообще речь в этих полях.
Добавлю-ка я вступление:
Отлично.
Пока для этого шага достаточно, дальше я его доработаю тексты после тестов.
Статьи о копирайтинге, которые могут помочь глубже понять тему:
http://ux-design.ru/ux-encyclopedia/18-effective-copywriting
http://telegraf.design/6-pravil-mikrorajtinga-dlya-produktovyh-kompanij-bez-ux-kopirajtera/
Layout, акценты, иерархия
У меня вполне разумное количество ярких элементов, и в первую очередь бросается в глаза именно то, что я хочу — заголовки полей. Это сделано за счет размера, контрастного цвета текстов, и расположения (слева-сверху, рядом с ними достаточно воздуха).
О контрасте и размерах неплохо написано здесь:
https://medium.com/ux-crash-course/ux-d65cd6b6dc17
Кнопки-ссылки сабмита находятся на привычном месте и тоже выделены. Вот только нужны ли мне отдельные сабмиты для полей формы? Может, хватит одного сабмита на всю страницу? Удалю-ка я их.
Вот что получилось:
Как по мне, стало гораздо чище.
Что еще можно сделать сейчас, на стадии средней детализации?
Проверить на теорию близости. Больших недочетов я не вижу, поля сгруппированы с заголовками.
Прогонать свой прототип через https://goodui.org/, там много прекрасных мыслей.
Проверить кнопки на иерархию (хорошо описано тут: https://medium.com/ux-crash-course/ux-d8323a2a536f). С этим все в порядке, есть главная и второстепенная кнопки и есть мелкие кнопки в шапке. Все они оформлены согласно иерархи.
Проверить специфические именно для форм моменты:
- Разбиение на шаги
- Типы ввода
- Метки и инструкции
- Спроектировать ошибки
- Проверить ось взаимодействия
- Спроектировать заполненный стейт
Обо всем этом неплохо написано в этой статье.
Разбиение на шаги мне сейчас нравится. На первом шаге я забиваю то, что касается непосредственно сессии (сколько буду работать и что хочу сделать), а на втором — на какие письма/сообщения мне придется реагировать немедленно, а про какие ставить пометку (все остальные нужно просто игнорировать).
Типы ввода — у меня концептуально будет только ввод с клавиатуры и самые простые кнопки/ссылки. Я постараюсь придерживаться этого во всем приложении.
Метки и инструкции — на этом шаге это только заголовки и плейсхолдеры у полей. В статье рекомендуют размещать инструкции сбоку от формы. Подумаем… Нет, в данном конкретном случае мне эта идея не нравится. У меня достаточно большие подсказки, если я их вынесу вправо или еще куда — форму раздет очень сильно.
Плюс поля специфические, и без прочтения подсказок их не заполнить. Поэтому протестирую так, но запишу на будущее, что может стоит вынести подсказки в сторону (и тогда уже сильно сократить их тексты).
Спроектировать ошибки:
Я сейчас вижу один-единственный вариант ошибки — невозможность распарсить продолжительность сессии. Впрочем, если дальше добавятся еще ошибки — никто не мешает отобразить их в таком же формате.
Ось взаимодействия:
Это линия, по которой идет взгляд. Если их слишком много, или они не выстроены — работать с интерфейсом тяжело.
Подробнее о них можно почитать здесь
В моем конкретном случае стоит попробовать сдвинуть поля влево, чтобы они были под заголовками. А также — подвинуть кнопки влево.
На этом пока все, допиливать красивый дизайн я сейчас не буду, для первых тестов он не нужен.
Дальше необходимо спроектировать следующий шаг (либо просто сделать какой-то саксесс-скрин), потом собрать кликабельный прототип и протестировать на пользователях.
Тут есть небольшая проблема, поскольку для меня будет очень важно, что будут писать пользователи, какие тексты набирать. Это накладывает требования на функциональность прототипа. Но об этом — в следующих уроках.
Я собрал подборку статей, часть из них уже упомянута выше, часть нет. Они могут стать неплохой шпаргалкой для вас в дальнейшем, когда вы будете создавать свои прототипы.
Вайфреймы:
https://medium.com/ux-crash-course/ux-wireframe-5a108e057324 основа
https://medium.com/ux-crash-course/ux-d65cd6b6dc17 визуальный вес
https://medium.com/ux-crash-course/ux-441b01a597df цвет
https://medium.com/ux-crash-course/ux-9c60e2e39d93 повторение и разрыв паттерна
https://medium.com/ux-crash-course/ux-55101291ec12 линейное и краевое натяжение
https://medium.com/ux-crash-course/ux-4e15c9cfb180 выравнивание и близость
https://medium.com/ux-crash-course/ux-946bc4d7194f паттерны движения глаз и иерархия
https://medium.com/ux-crash-course/ux-a58286ef2e63 поведение (просматривать, искать, обнаруживать)
https://medium.com/ux-crash-course/ux-215c1e002836 элементы веб-страницы
https://medium.com/ux-crash-course/ux-33fdaa800b22 айкетчинг и фолд. Картинки, заголовки и пр
https://medium.com/ux-crash-course/ux-ec01dfadc6b5 оси взаимодействия (по ним идет взгляд)
https://medium.com/ux-crash-course/ux-7d51facfc79 формы
https://medium.com/ux-crash-course/ux-d8323a2a536f главные и второстепенные кнопки
https://material.io/guidelines/layout/structure.html#structure-app-bar структура в андроиде
https://habr.com/company/logomachine/blog/324874/ еще о теории близости
https://spec.fm/specifics/8-pt-grid сетка 8 px (для высокой детализации)
Психология
https://medium.com/ux-crash-course/ux-4af8f12fa450 поведение, как убеждать пользователя
https://medium.com/ux-crash-course/ux-6fa003a07549 еще про убеждение
https://medium.com/ux-crash-course/ux-34fdf27b6982 узнавание, память, опыт, привыкание
Разное
https://habr.com/company/iloveip/blog/342952/ Система отступов в дизайне
http://www.kireya.ru/_ld/0/23_--__.pdf Про лейаут со стр 118
https://goodui.org/ паттерны проектирования
https://askusers.ru/blog/pravila/evristiki-nilsena-kak-ikh-ispolzovat/ эвристики
Пока все, спасибо за внимание!
Присылайте мне ваши вопросы и соображения, и я буду дополнять эту статью.
И не забывайте подписываться на мой канал о UX