Текст книги "Дизайнер интерфейсов"

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

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

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

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

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

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

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

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

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

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

* * *

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Продумывая адаптив, заранее решите, как должна вести себя навигация. Самый популярный вариант – свернуть всё в бургерное меню. А что делать, если у него два уровня? В этом случае одно меню можно спрятать, а другое отображать в виде горизонтальной прокрутки. Всё зависит от конкретной задачи.

Делайте первые наброски на бумаге, так как в графическом редакторе трудно избежать перфекционизма и не уделять внимание мелочам. Ваш набросок не должен быть четким (мои вообще, кроме меня, никто не поймет). Главное – отобразить все свои идеи и выбрать от одной до трех наиболее перспективных. Не останавливайтесь на первой попавшейся, а подумайте еще. Многие полагают, что первая идея, пришедшая на ум, – правильная, хотя такая позиция больше смахивает на лень. Первая идея может оказаться лучшей, как и вторая, третья и четвертая. И чем больше их будет, тем лучше. Вполне возможно, в итоге вы соберете микс из нескольких идей, который и возьмете в работу.

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

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

8. Поиск визуального стиля

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

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

Схожая история со многими модными брендами. Например, рюкзак Louis Vuitton – показатель роскоши, о чем говорят не только подобранные цвета (преимущественно золотой и черный), но и общественное мнение (преимущественно ошибочное). Благодаря правильному обрамлению, когда вы прикасаетесь к бренду, кажется, будто ваш статус повышается.

Проведем аналогию с цифровым дизайном. Сравните сайты мужского журнала GQ и источника бизнес-новостей «РБК». Если первый встретит посетителя большими фотографиями и яркими цветами, то второй погрузит в атмосферу серьезности с помощью черного и зеленого цветов и десятков заголовков (создающих впечатление стремительно развивающихся событий, без которых эрудированный человек не может прожить и дня).

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

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

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

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

Красный – опасность, страсть, волнение, энергия.

Оранжевый – свежесть, творчество, авантюра.

Желтый – оптимизм, задор, игривость, счастье.

Зеленый – натуральность, природа, здоровье.

Синий – общение, надежность, спокойствие.

Фиолетовый – величие, духовность, таинственность.

Коричневый – польза, честность.

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

Белый – чистота, простота, минимализм.

Но не нужно становиться их заложником. Когда вы создаете новый бренд, взять нетипичный цвет или стиль будет отличным маркетинговым ходом. Выбрав в качестве своего логотипа яблоко, Apple выделила себя среди конкурентов, коих и тогда было достаточно. Сами посмотрите: прошло уже более сорока лет, но до сих пор яблочный логотип отличается от большинства ИТ-компаний.

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

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

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

Поэтому те, кто переживают из-за отсутствия вдохновения, непременно проиграют тем, кто его не ждет и ежедневно оттачивает свое мастерство.

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

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

Самый популярный способ поиска вдохновения – Dribbble и Behance. Это хороший инструмент, но у него есть одна проблема. Любая профессиональная сфера в какой-то момент замыкается в себе, перерабатывая одни и те же идеи, – а потому, если вы хотите создать что-то уникальное, необходимо смотреть дальше привычных источников. Я, например, периодически покупаю архитектурный журнал AD и заглядываю на их сайт, таким образом расширяя запас визуальных паттернов. Помимо архитектуры, можно наблюдать за природой или дизайнерской техникой (от автомобилей до кухонных устройств). Благодаря этому вы постепенно развиваете свой визуальный вкус и можете найти интересную идею для нового проекта.

Сделайте из понравившихся идей отдельную подборку, которую чаще всего именуют «мудбордом». Ее можно сделать на фотохостинге Pinterest, прикрепив фотографии на доску (отличный способ, так как собранные идеи всегда будут на виду). Кроме того, попробуйте Buckets на Dribbble, Moodboard в InVision или любой другой способ (хоть папку на рабочем столе), который вам покажется удобным.

Дэвид Огилви считает, что великие идеи приходят из подсознания; поэтому в своей книге «Огилви о рекламе»[10]10
  Огилви Д. Огилви о рекламе. – М.: Издательство «МИФ», 2012.


[Закрыть] он советует периодически отключать рациональное мышление. Например, отправиться на долгую прогулку, принять ванну или выпить рюмку/бокал любимого напитка. Но прежде чем сделать это, нужно наполнить мозг информацией о задаче, над которой вы работаете. Иначе начнут приходить мысли, не относящиеся к решаемой проблеме. Я не раз замечал, что идеи о проекте часто посещают меня по пути в магазин, в ду́ше или во время чтения. Помню, как на первом курсе института, изучая программирование, пытался разобраться в сложной теме деревьев (связанной структуре данных). Вроде бы все алгоритмы знал, но не хватало общего понимания, и, что интересно, оно пришло ко мне, когда я стоял на кухне и наливал воду в стакан. Вспоминаю то мгновение до сих пор: за секунду разобравшись в сложной теме, поняв ее на каком-то внутреннем уровне, я осознал, что смогу решить любую задачу, и потому отложил подготовку к экзамену, который впоследствии сдал на отлично.

Подобные моменты вдохновения происходят регулярно. Их можно распознать по глубоким вдохам и радостным возгласам «Ааа!». Некоторые считают, что до тех пор, пока не выполнишь все задачи, не стоит отходить от стола, хотя короткая пауза способна в разы увеличить эффективность и принести новые идеи. Главное – успеть их записать.

Если подвести итог, то поиск креативных идей выполняется в три шага:

1. Изучить всю доступную информацию по стоящей перед вами задаче.

2. Отвлечься на какое-либо занятие, не требующее интеллектуальной нагрузки.

3. Дать мыслям блуждать и не упустить пришедшие идеи.

По ходу сбора информации у вас должны были сформироваться определенные идеи. Из одного проекта вы можете взять шрифты, из пейзажей – цвета, из техники – посыл (например, статус или профессионализм). Это нормально, если идей – несколько. Визуализируйте их и попытайтесь сравнить, держа в голове посыл бренда и целевую аудиторию.

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

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

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

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

9. Основные элементы интерфейса

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

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

Возможно, что-то более актуально для других сервисов, но абсолютно не подходит вам.

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

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

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

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

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

Нажатие на лого должно вести на домашнюю страницу. Это всем привычный паттерн, и не стоит его нарушать. Но что делать, если пользователь и так находится на домашней странице? Вы можете ничего не делать, и это будет правильно (хотя на сайте «Студии Артемия Лебедева» при клике по логотипу на главной странице воспроизводится видеоролик).

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

В футере можно раскрыть пункты меню, добавить контакты, ссылки на социальные сети, мобильные приложения и форму подписки.

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