Возможность записывать и каталогизировать мысли очень популярна на рынке, если верить 100+ миллионам пользователей Evernote , но интерфейс приложений подобного плана до сих пор оптимизирован под клавиатурный ввод на мобильных устройствах, а тут как раз не помешала бы возможность голосовой диктовки.

Давайте создадим более удобный способ диктовки, проработаем его от идеи до прототипа.

1-gZ_70fv7_W_1jdQ2tAODHA

Идеация и анализ

Быстрый обзор текущей версии ввода заметки в Evernote под iOS требует огромного количества касаний и взаимодействий.

Evernote

Мне нравится пользоваться Evernote, и я нахожу функцию голосового набора очень ценной, но 8-шаговый процесс требует усовершенствования.

Какие минимальные шаги нужны для диктовки голосовых заметок, и как можно скомпоновать разные действия в одно?

Какие шаги нужны для диктовки голосовых заметок

Фокус на голосовой диктовке позволяет сократить процесс до двух главных шагов:

  1. Нажать и надиктовать заголовок
  2. Нажать и надиктовать текст заметки

*Примечание: можно свернуть этот процесс еще круче, но об этом позже.

Требования

Чтобы реализовать это взаимодействие, мы ограничим продукт следующими требованиями:

  • Домашний экран — это канвас новой заметки
  • Поля Title и Body выбираются автоматически (title > body)
  • Первичное взаимодействие: долгое нажатие и диктовка текста голосом.
  • Вторичные взаимодействия: список (List), поделиться, клавиатура и Новая заметка (New)*
  • Заметки автоматически сохраняются по завершению ввода (их потом можно удалить на экране List)

*Вторичные взаимодействия:

  • List (посмотреть существующие заметки для чтения/правки/поделиться с другими)
  • Share (отправить текущую заметку друзьям или себе)
  • Keyboard (запустить QWERTY-редактирование)
  • New (создать новую заметку)

Планирование UX

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

Для продукта с ограниченным количеством экранов и взаимодействий мне нравится подход “пользователь видит — пользователь делает”, который я перенял у команды Basecamp.

1-9HHIikzioIrS_kbwklLWGg

И вот этот подход, примененный к нашему продукту:

Планирование UX

Грубый интерфейс

Начнем визуализировать наш первичный интерфейс (поле заголовка, поле тела и кнопка записи) в снисходительной форме.

Грубый интерфейс
*Нам понадобиться обозначать, какое поле выделено, но я побеспокоюсь об этом позже.

А что насчет вторичных взаимодействий?

Мы можем поместить эти элементы за меню, но это не совсем хорошо.

Мы бы могли использовать стандартную панель вкладок iOS для переключения подзадач, но тогда мы пожертвуем видимым пространством для нашей заметки.

Так что вместо этого я бы хотел рассмотреть вариант встраивания элементов в полноэкранный канвас. К счастью, у нас 4 элемента и 4 угла экрана… совпадение?

Вторичные взаимодействия

Помните, мы все еще создаем “грубую” форму интерфейса, так что символы и иконки пока также символические.

Мы решили, что показ этих элементов в представлении только по необходимости будет наиболее разумной тратой пространства экрана при записи заметки.

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

1-wj-zyXgb-MYRt9Su7T154w

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

Детальная проработка интерфейса

Для нашего детализированного интерфейса воспользуемся принципами Material Design, который подразумевает красивые, точные взаимодействия и глубину по z-оси.

Подготавливая артборды в Sketch, я набросаю каждое состояние от начала до конца, чтобы получился непрерывный сценарий для прототипирования.

Мне нравится создавать палитру цветов прямо в Sketch для простой подборки оттенков.
Мне нравится создавать палитру цветов прямо в Sketch для простой подборки оттенков.

Обозначение выделенного поля

Помните о проблеме указания пользователям, что они редактируют?

Я решил использовать эффект мерцания для индикации выделенного поля для Title и Body. Эту анимацию использовали в приложении Facebook Paper для iOS.

прототип

Прототипирование во Flinto

Flinto позволяет подключать к элементам и экранам сложные анимации. Я могу даже включать анимированные гифки, чтобы показать нужный эффект мерцания!

Прототипирование во Flinto

Взаимодействие с элементами Material

Взаимодействия — это реальная возможность вдохнуть жизнь и свой отпечаток в UX. У нас есть простое взаимодействие для просмотра списка заметок, и его можно сделать гораздо приятнее, чем просто выдвигающийся блок.

Кнопка пружинит и скручивается в альтернативное состояние, и с помощью анимации каждой заметки в списке по отдельности мы даем пользователям ощущение отделения от остального контента, ожидание, что каждая заметка — отдельный элемент.

1-GFYFaC1XPsfjlPwUIktRzg

В выделенном состоянии материал элемента списка всплывает и заполняет весь канвас, и появляются элементы вторичных взаимодействий.

Этот эффект наслоения нужно реализовывать осторожно, с постоянным затенением и трехмерной глубиной для каждого класса элементов.

1-_L5MEwUTR38l-hpOSHFACw

Собрав все вместе мы можем тестировать приложение в разных кейсах, чтобы продолжить итерировать и совершенствоваться, как показано в видео ниже.

Вот и все! Простое приложение для заметок, заточенное под голосовой ввод.

*И последнее. В начале поста я упомянул, что процесс можно ужать еще больше. Представьте аналогичное приложение (начните говорить, чтобы ввести заголовок > начните говорить, чтобы ввести тело), которое индицирует поля аудио-очередями, но не требует визуального интерфейса, продвигаясь по сценарию на основе пауз в вашей речи. Может быть, именно это я и сделаю в следующий раз. В конце-концов, лучшие интерфейсы — невидимые интерфейс.