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

Во-вторых, в большинстве случаев заказчику не нужен уникальный интерфейс. Ему лишь нужно, чтобы дизайн помогал бизнесу заработать лучше. Вот здесь и понадобятся проверенные отраслью решения. Ведь только для дизайнера каждый проект – это возможность придумать что-то новое. У клиента же есть только один проект, который он хочет сделать «на отлично» (а не креативно).

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

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

Сразу делайте скриншоты интересных моментов или всех страниц.

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

Не факт, что они пригодятся, но могут и натолкнуть на интересные идеи.

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

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

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

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

Я сам не раз участвовал в фокус-группах, проводил интервью с пользователями и постоянно узнавал много нового. Главное в подобных встречах – показать, что неправильных ответов не существует. Ваша цель во время общения – узнать привычки человека и то, каким образом он использует сервисы в реальной жизни, а потому любая информация здесь будет ценной.

Спросите, какими похожими сервисами он пользовался до этого, что в них ему понравилось, а что нет, какие ощущения он получал от процесса.

Единственное, к чему стоит относиться осторожно, – это прямые рекомендации по улучшению интерфейса. Их следует очень внимательно выслушать, но слепо им доверяться не надо. Во-первых, пользователь может считать, что его проблема заключается в чем-то одном, а вы как дизайнер, видя общую картину, сумеете решить ее на более высоком уровне. Во-вторых, один человек – это полезные данные, но не аналитика, а потому лучше поговорить с несколькими людьми.

Не раз слышал, как коллеги высказывали следующую мысль: «Если бы я был на месте пользователя, я поступил бы так-то…». Безусловно, дизайнеру необходимо ставить себя на место пользователя, но нельзя полностью доверять своим выводам. Мы не на его месте, наши привычки, принципы, опыт, компетенции очень отличаются, и на основе только таких данных нельзя проектировать интерфейс. Обычно я задаю себе вопрос: «Как бы это работало, если бы было просто?» – и стараюсь визуализировать оптимальное решение.

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

6. Сценарное мышление

Человек всегда использует сайт/приложение с какой-либо целью. Например, посмотреть новости, проверить уведомления, найти интересный фильм или что-нибудь купить. Его не интересуют страницы, и ему, в общем-то, всё равно, сколько их будет, так как он хочет лишь совершить определенные действия – и очень хорошо, если это не займет много времени. А поскольку люди чаще всего ленивы, один из главных критериев выбора сервиса – простота использования.

Как же добиться простоты?

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

Сценарий – это последовательность действий, которые нужно совершить пользователю для достижения цели.

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

У одного сервиса может быть несколько сценариев, и некоторые из них могут конфликтовать между собой. Чтобы выбрать приоритетный, нужно подумать, какой сильнее влияет на показатели бизнеса. В интернет-магазине это оформленный заказ, в социальных сетях – публикация контента. Вернемся к примеру с поиском и приобретением билетов. У пользователей сервиса «Яндекс. Афиша» есть два ключевых сценария: поиск мероприятия и покупка билетов. Они могут слиться в один, но не стоит на это рассчитывать. Чаще всего люди лишь просматривают мероприятия, но как только увидят что-то интересное (или получат зарплату), покупают билеты. «Поиск мероприятия» – не отдельный этап. Он, как и «покупка», состоит из нескольких шагов, каждый из которых необходимо понимать. Только подробно изучив все шаги пользователя, можно попытаться их упростить. Давайте посмотрим, как это можно сделать.

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

6.1. Customer Journey Map

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

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

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

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

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

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

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

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

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

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

* * *

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

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

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

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

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

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

О программистах дизайнеры и вовсе редко задумываются, хотя понимание работы коллег сильно ускоряет процесс, повышает качество итогового результата и улучшает атмосферу в коллективе. Я начинал карьеру в разработке, благодаря чему мне проще находить общий язык с программистами. Порою нужно настоять на своем, когда важно в точности реализовать идею дизайнера, а иногда легче уступить и найти более простое в реализации решение, особенно если оно потребует много ресурсов. Это позволяет завоевать доверие разработчиков, так как они начинают понимать, что цель дизайнера не произвести арт-объект, а сделать качественный продукт.

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

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

7.1. Создание фреймворка

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

Скопировать решение и сказать, что так работает Google, – не вариант. Но можно найти проекты, которые решают схожие задачи, и перенять их опыт. Пусть не в точности, но какие-то полезные идеи найти вы сможете.

Рассмотрим, что важно учитывать при создании фреймворка.

Разберитесь, с чем вы будете работать. Это могут быть карточки, таблицы, картинки, статьи, графики. Заранее всё определив, вы сможете примерно понять, какая структура подойдет проекту.

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