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

3. Цели и задачи

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

Понятный дизайн приборной панели воздушного судна в экстренной ситуации может спасти сотни жизней. В книге Чарльза Дахигга «Восемь правил эффективности»[9]9
  Дахигг Ч. Восемь правил эффективности: умнее, быстрее, лучше. Секреты продуктивности в жизни и бизнесе. – М.: АСТ, 2017.


[Закрыть] я прочел историю, как пилоты из-за плохой видимости не могли определить положение самолета. Растерявшись, они подняли нос и какое-то время летели сквозь облака, не понимая, что самолет поднимается всё выше и выше, пока в конце концов сила притяжения не взяла свое.

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

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

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

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

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

Нам всегда хотелось путешествовать (Airbnb), быстро передвигаться (Uber), получать внимание (Instagram), развиваться (Coursera), знакомиться (Badoo) и многое другое. Наши желания остаются прежними, меняется только их воплощение.

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

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

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

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

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

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

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

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

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

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

4. Сила процесса

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

Как и многим, на старте карьеры мне довелось столкнуться с данной проблемой. Периодические заказы могли создать иллюзию, что всё идет правильно, но со временем я начал понимать: в моей работе что-то не так.

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

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

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

Я понимал: чтобы найти хорошую работу, нужно изучить новые навыки, за которые мне будут готовы платить. Среди всех моих увлечений дизайн выглядел наиболее перспективным, поэтому на него и пал выбор в качестве основной профессии. Но и тут я не был настолько хорош, чтобы получить приличную работу. И тогда я выработал простой план, который включал в себя регулярную практику и изучение теоретического материала. Толковую теорию о дизайне отыскать непросто (потому-то и возникла эта книга), но мне попался короткий курс от основателя сервиса Tilda, в котором затрагивалась тема дизайн-процессов.

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

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

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

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

Классический дизайн-процесс включает в себя следующие этапы.

1. Погружение в задачу. Здесь важно понять цели проекта и определить потребности и проблемы целевой аудитории. Многое вам подскажет заказчик.

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

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

4. Создание фреймворка. Фреймворк – структура, вокруг которой строятся все элементы. Он помогает оптимальным образом разместить их на странице.

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

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

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

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

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

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

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

5. Исследование

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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