Дизайнер интерфейсов

Сценарии помогают выявить потенциальные проблемы пользователей на каждом этапе, благодаря чему у вас появляется возможность заранее предусмотреть решение многих проблем. Лучшим инструментом для анализа сценариев является Customer Journey Map.

6.1. Customer Journey Map

Хочу отметить, что этот инструмент я начал применять не сразу, хотя давно слышал о нем. Он оправдал себя в первый же день использования на логистическом сервисе, так как мне удалось по каждому из сценариев найти до тридцати потенциальных проблем и решений. CJM проще всего представлять в виде таблицы, хотя в интернете можно отыскать десятки других вариантов. Некоторые очень красивы, но суть у них всегда одна; поэтому для себя я выбрал табличный вид, для которого не нужны специальные сервисы и достаточно функционала любого текстового редактора.

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

Например, при покупке билетов на сайте авиакомпании столбцы таблицы выглядели бы примерно так: сайт, заполнение формы (откуда, куда, кто и когда), поиск подходящего рейса, просмотр подробностей, оплата. Каждый шаг – это не обязательно отдельная страница, так как сценарий можно реализовать в рамках одного экрана.

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

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

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

Настроение. Здесь нужно определить, что чувствует пользователь на каждом этапе, и постараться избежать недовольства или замешательства. Если несколько этапов подряд идут негативные эмоции, высока вероятность, что пользователь бросит работу с сервисом.

Возможные проблемы. Чрезвычайно важный этап, над которым стоит хорошо подумать. Он может включать в себя как ошибки из-за невнимательности, так и непонимание интерфейса. Например, на первом этапе покупки билетов есть вероятность, что человек ошибется с выбором даты. Это критичная ошибка, а потому цель дизайна – помочь ее избежать. В данном случае не помешает несколько раз показать дату при поиске рейсов и перед оплатой. Таким образом, повышается вероятность, что пользователь заметит ошибку (особенно если помимо цифры вы добавите день недели). Возможное непонимание интерфейса решается тремя способами: упрощением, системой подсказок и сменой дизайнера. Стремитесь к первому и избегайте последнего. Мне удавалось находить до десяти потенциальных проблем на каждом этапе, и понимание таких вещей сильно упрощало дальнейшую работу. Благодаря этому все дизайн-решения подкрепляются конкретными причинами, а не случайно увиденными паттернами, и вы сможете аргументированно защищать их перед заказчиком и коллегами.

Решения. Данный этап тесно связан с предыдущим. На каждую проблему нужно найти одно или несколько решений. Именно поэтому CJM сильно помогает в проектировании интерфейсов.

Таблица 1. Пример CJM

* * *

Многие думают, что успех проекта решает только опыт, поэтому недооценивают важность процесса. Использование CJM помогает минимизировать недостаток опыта за счет того, что мы продумали последовательность действий. Составление таблицы отнимает достаточно времени, но не нужно забывать, что это тоже дизайн, возможно даже больше, нежели то, что мы делаем в графическом редакторе.

Напомню, дизайн – инструмент бизнеса, который решает проблемы пользователей, а чтобы это сделать, их сначала нужно обнаружить. Описание сценариев – один из лучших способов.

7. Работающий фреймворк

Мы привыкли смотреть на дизайн как на сочетание элементов и редко думаем о правилах их расположения. С опытом начинаешь замечать схожие паттерны, но не всегда понимаешь истинные причины их использования. Вспомните сайт «ВКонтакте»: у него синяя шапка, левое меню и правая часть, которая может представлять собой статичную страницу или динамичную ленту. Левое меню всегда фиксированное, так как обеспечивает понятность навигации. Переключаясь между страницами, вы не столкнетесь с тем, что контент вдруг перескочил налево, а меню построилось наверху, поскольку у сайта стабильная структура, которая называется «фреймворк».

Фреймворк – структура, вокруг которой строятся элементы интерфейса.

Без нее каждый экран создавался бы индивидуально. Общая же структура экономит уйму времени, ресурсов и нервов. Сами подумайте: намного удобнее скопировать элементы с одной страницы на другую, чем рисовать их для каждой заново. То же самое и в разработке.