The Design Times. Страница 17

Разные ЦА

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

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

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

Усредненный пользователь

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

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

С какой целью пользователи используют ваш сервис?
В каком контексте?
И с каких устройств?

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

Заложник ТЗ

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

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

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

Новогоднее письмо автора

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

До встречи в январе, друзья!
С наступающим 🎄

Искренне ваш
@iskros

Уведомления

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

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

В описании уведомления сообщайте две вещи: что именно произошло и с каким объектом. Таким образом, пользователь сразу поймет в чем дело и ему не придется проваливаться внутрь, чтобы узнать подробности.

Самый простой пример:
Объект: “Заказ 3048 (Книги на 1240₽)”
Событие: “Собран и отправлен курьером”

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

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

Уведомления могут быть нескольких типов:

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

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

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

Персонализация

Суть персонализации – предоставить пользователю актуальную информацию или функционал.

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

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

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

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

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

Негативный сценарий

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

Что произойдет, если пропадет соединение?
Что вы предложите пользователю, если оплата не пройдет?
Что, если пользователь введет некорректную информацию?

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

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

Сначала люди

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Онбординг

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

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

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

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

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

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

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

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

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

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

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

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

Поиск идей

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

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

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

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

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

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

Навигация

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

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

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

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

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

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

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

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

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

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

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

Ограничения

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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