Профессиональные контакты

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

***

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

Портфолио UX-дизайнера

Dribbble и Behance – не оптимальный вариант для создания портфолио UX-дизайнера. Поэтому обратите внимание на текстовые платформы, где можно лучше описать процесс. Среди них отмечу Medium, VC, Habr.

Идеальный вариант – ваш отдельный сайт. Сделать его можно, используя популярные платформы WP, Tumblr. Я советую обратить внимание на продукт Semplice, сделанный Tobias van Schneider. Это WordPress тема с очень удобным визуальным редактором.

Главная задача UX-дизайнера – это понять задачу и спроектировать оптимальное решение. Поэтому любой ваш кейс должен начинаться с поставленной задачи.

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

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

Тестирование релиза

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

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

Программисты работают спринтами по 1-2 недели. После завершения каждого спринта, состоится релиз и новые наработки “выкатываются” в продукт. Чтобы в продукте были реализованы все ваши идеи в нужном виде, вам необходимо его регулярно тестировать.

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

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

Прямая линия развития продукта

За несколько лет продуктовой работы у меня сформировалась философия, которую я регулярно использую. Назвал я ее “Прямой линией”.

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

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

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

7 основополагающих принципов дизайна

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

1. Наглядность. Пользователь понимает, какие действия возможный и в каком состоянии находится устройство/система в данный момент.

2. Фидбэк. У пользователя все время есть полная информация о результатах действий и текущем состоянии продукта или сервиса. После совершения действия легко понять, каково новое состояние устройства.

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

4. Возможности. Возможность определяет, какие действия возможны. У продукта есть правильные возможности, которые позволяют совершать желаемые действия.

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

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

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

Дизайн-тренды

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

Дизайн-тренды чаще всего касаются визуала, но как можно заранее определить визуал всей отрасли, если каждому бизнесу требуется свой визуальный стиль?

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

Обратная связь интерфейса

Пользователь должен понимать в каком состоянии находится интерфейс и его сущности. Это может отображаться в виде статусов (“заказ в пути”) или спиннеров загрузки (“письмо отправляется”).

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

Создав качественную обратную связь интерфейса, пользователь будет чувствовать, что все у него находится под контролем. Таким образом создается доверие и лояльность к продукту.

Суть работы дизайнера

Ключевая мысль книги “Дизайн привычных вещей” довольно проста, но очень важна для понимания не только дизайнерами, но и всеми людьми:

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

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

По мнению Дональда Нормана, работа дизайнера заключается в следующем:

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

Удаление и отмена

Зачастую, пользователь по ошибке не нажимает кнопку “удалить”. Обычно, это действие происходит намеренно. Проблема в том, что он может выбрать не тот объект, из-за чего важнейшая информация будет утеряна, даже если вы спросите "Вы уверены, что хотите удалить?". В этом случае интерфейс послушно (и безвозвратно) выполнит действие пользователя, но будет ли он считаться хорошим? Похоже, что нет.

Так что же делать?

Хорошим вариантом будет удалить объект сразу, но, при этом, предоставить возможность отменить действие. В этом случае пользователь поймет нужный ли объект он удалил и, в случае ошибки, сможет его быстро восстановить. Таким образом происходит удаление элементов в сервисах Google (Keep, Docs, Gmail).

Но здесь есть одна деталь.

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

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

Ограничения

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

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

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

Навигация

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

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

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

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

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

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

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

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

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

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

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

Поиск идей

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

Например, отправиться на долгую прогулку, принять ванну или выпить рюмку/бокал любимого напитка.

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

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

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

Если подвести итог, то поиск креативных идей выполняется в три шага:
1. Изучить всю доступную информацию по стоящей перед вами задаче.
2. Отвлечься на какое-либо занятие, не требующее интеллектуальной нагрузки.
3. Дать мыслям блуждать и не упустить пришедшие идеи.

Запасной выход

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

В моем текущем проекте, принимая какое-либо серьезное решение, например, выбор платформы, мы задаемся вопросом:

“Что мы будем делать, если выбранное решение окажется ошибочным?”

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

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

Онбординг

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

Чаще всего онбординг осуществляется тремя способами:

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

2. Вы можете пошагово помочь пользователю совершить первые действия. Basecamp по входу в систему предлагает создать первый проект, запрашивая название, сроки и документы. Pinterest предлагает подписаться на интересные темы, а Apple Music на любимых исполнителей. Таким образом формируется персональная лента, и продукт становится новому пользователю ближе.

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

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

Эволюционируй или умри

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

Метод прост: действие + время = обратная связь
После этого: анализ результатов + выводы = знание

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

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

Только так появляется практический опыт и экспертиза. Только таким образом мы растем.

Поле для ввода

Если вы не на Dribbble, то у полей должны быть четкие края, которые видны не только на Retina, но и на старых мониторах. (Советую проверять все оттенки серого).

Плейсхолдер в привычных полях не обязателен. Довольно глупо вставлять в поле с заголовком “Имя” плейсхолдер “Иван Иванов” или “Введите ваше имя” (пользователь не дурак).

Но в полях, где могут возникнуть вопросы, не помешает добавить пояснение. Например, если минимальная длина пароля 6 символов, неплохо бы об этом сообщить.

Хороший вариант – использовать плейсхолдер, который плавно становится заголовком.

Сообщения об ошибках выдавайте красным цветом под полем или в отдельном попапе. Не помешает окрасить рамку в красный.

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

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

Если поле часто редактируется, добавьте справа крестик, который будет его очищать.

Создание инноваций

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

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

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

Вот три автора, чьи книги помогли мне посмотреть на мир шире: Нассим Талеб, Юваль Ной Харари, Ричард Докинз.

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

Сначала люди

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

Мы часто противопоставляем Apple с Microsoft и делаем это неспроста.

Философия Apple была создана, в большей степени дизайнерами, Стивом Джобсом и Джони Айвом. И эта философия находит отражение в каждом продукте Apple. Это касается внешнего вида устройства, упаковки и внутренних его частей.

Microsoft же была основана двумя программистами: Биллом Гейтсом и Полом Алленом, поэтому в первую очередь компания ориентировалась на функциональность продукции.

Сейчас же почти все компании понимают значение дизайна и эмоциональной связи с брендом. Вспомните новогодние рекламные ролики Coca-Cola, поддержку экстремальных видов спорта Red Bull или презентации Apple. Благодаря подобным вещам, люди не просто используют какой-либо продукт, но и ассоциируют себя с определенной деятельностью.

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

Когда люди используют ваш продукт?
Что они при этом испытывают?
В чем нуждаются?

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

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

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