May 11, 2018

Проектируем интерфейс на основе карты — продолжение

Привет! В прошлой статье я:

  • накидал общую схему своего приложения (какие будут скрины, какие модули они будут содержать и какую задачу решать),
  • собрал референсы (прикольные образцы) для первых двух шагов сценария,
  • быстренько накидал самый первый скрин приложения (по сути — лендинг, на котором пользователи будут узнавать о моем приложении),
  • более подробно накидал следующий шаг, где пользователь будет настраивать рабочую сессию.

Продублирую их, чтобы были под рукой.

Схема приложения:

Шаги, которые я буду проектировать:

Спроектированный первый шаг:

(справа — хорошие образцы, слева — маленький блочок с будущей структурой страницы, в центре — 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