Оффтоп Олег Чулаков
381

Chulakov Design #6: анализируй!

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

В закладки

Больше заметок вы найдете здесь.

Думать как пользователь

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

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

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

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

Персонажи

Один из видов качественной аналитики строится на использовании персонажей. Разберёмся, что это такое.

Что такое персонажи?

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

Для чего нужны персонажи?

Персонажей используют для проектирования интерфейсов: составления пользовательских путей и архитектуры сайта.

Правильно составленный персонаж отвечает за часть целевой аудитории сервиса, а несколько персонажей покрывают почти всю ЦА.

Откуда берутся персонажи?

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

Как использовать персонажей?

С помощью персонажа описывается пользовательский путь (CJM). У одного персонажа может быть 1-2 CJM. Такие сценарии описывают пошаговое взаимодействие каждого персонажа с интерфейсом от начала использования до достижения конечной цели.

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

CJM

После того, как вы тем или иным образом сформировали персонажей, разумным решением будет составить customer journey map, он же — пользовательский сценарий.

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

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

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

«У Максима заболел живот. Это его беспокоит, и он включает приложение. В нем есть доктор Мария, к которому Максим уже ходил. Он заходит в приложение и видит, что врач сейчас доступен для связи. Он отправляет сообщение с жалобой. Доктор Мария видит на экране телефона входящее уведомление из своего приложения. Она отвечает, что выпишет ему препараты для снятия симптомов и назначит приём. Мария вспоминает, что Максим когда-то приходил на приём, но подробностей она не помнит. Она заходит в профиль Максима и видит, что полгода назад он приходил к ней с подобной жалобой, и она поставила ему диагноз гастрит, сделала пометку о жалобах и выписала такие-то лекарства. Она смотрит, делает выводы из этого и назначает Максиму лекарства для снятия симптомов. Мария выбирает заготовленный заранее и проверенный курс из своей виртуальной аптечки, но приложение предупреждает, что у Максима есть аллергия на один из препаратов. Она заменяет его на подходящий аналог, корректирует некоторые параметры курса и делает назначение. Максиму приходит уведомление. Он соглашается с курсом. В расписании приёма лекарств теперь есть напоминания, благодаря которым он не будет забывать пить таблетки. Если Максим захочет, он сможет их отключить. Исходя из ранее поставленного диагноза, Мария решает что нужно проверить Максима с помощью специального оборудования, смотрит свой список назначенных приемов и выбирает время для Максима. Максиму приходит уведомление, он заносит его в свои предстоящие события. Завтра он получит уведомление о приеме ровно за 2 часа».

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

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

10 советов для развития дизайнера

Изучайте фундаментальные для дизайна дисциплины

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

  • записывайте. Записывайте самое главное и систематизируйте полученные знания. Делайте заметки в блокноте телефона, специальной тетради или Google-документах, чтобы вы могли к ним возвращаться;
  • соответствуйте. Всегда старайтесь соответствовать самому высокому уровню работ. Лучше всего по умолчанию думать, что ваша работа плохая;
  • спрашивайте. Не бойтесь спрашивать у старших коллег. Вы должны задать все вопросы, которые у вас есть. Хороший начинающий дизайнер всегда задает много вопросов. Чтобы задать вопросы нам, записывайтесь в нашу школу, когда будет объявлен следующий набор;
  • анализируйте работы других дизайнеров. Мало просто заходить на авардс, дриббл, биханс и любоваться чужим красивым дизайном. Необходимо разбирать чужие работы на кусочки. Понимать, из чего они состоят, и мотать на ус, какие приемы использовать;
  • держите руку на пульсе. Читайте как можно больше материалов, связанных с дизайном. Подпишитесь на качественные паблики. Читайте Medium, vc.ru и подпишитесь на каналы опытных дизайнеров в телеграме. Для дизайнера очень важно быть в курсе всех трендов;
  • прокачивайте смежные дисциплины. Работа дизайнера заходит далеко за пределы рисования и проектирования. Копирайтинг, знание бизнеса, методологии ведения проектов, развитие технологий — все это пригодится при создании продуктов. Вы должны разбираться, какой текст хороший, а какой плохой, что соответствует целям бизнеса, а что — нет;
  • пробуйте. Пробуйте все варианты, которые пришли в голову. Для развития UI пробуйте самые безумные идеи. Для развития UX проектируйте и продумывайте реальное использование продукта;
  • развивайте креативность. Старайтесь, чтобы в основе каждой вашей работы лежала какая-либо большая идея;
  • развивайте вкус. Требуйте лучшего сервиса, лучшей гостиницы, лучшего отношения к себе.

Материал опубликован пользователем. Нажмите кнопку «Написать», чтобы поделиться мнением или рассказать о своём проекте.

Написать
{ "author_name": "Олег Чулаков", "author_type": "self", "tags": [], "comments": 2, "likes": 1, "favorites": 1, "is_advertisement": false, "subsite_label": "flood", "id": 39064, "is_wide": false, "is_ugc": true, "date": "Wed, 30 May 2018 18:29:00 +0300" }
{ "id": 39064, "author_id": 2389, "diff_limit": 1000, "urls": {"diff":"\/comments\/39064\/get","add":"\/comments\/39064\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/39064"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 199791 }

2 комментария 2 комм.

Популярные

По порядку

0

"подписывайтесь на каналы дизайнеров" помнится кое-кто призывал отписываться на канал кое-кто_дизаин и кое-кто_нотес, примерно в середине апреля и так ни одной записи и не опубликовал.

Ладно. Эт я так.
Вопрос по аватарам. Я че-т не до конца понял схему.
Как аватар "дед Коля" и "студент Миша" поможет построить приложение, например для сбербанка, если один хочет заплатить за свет, второй - получить права, а аватар "Сергей иваныч" хочет взять кредит на развитие бизнеса?

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

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

Можно подробнее на эту тему?
Какие конкретно выводы я должен сделать из имеющихся вводных?

Ответить
1

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

Персонажи помогают понять "как сделать это лучше всего".

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

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

Или возьмем Колю. Он часто тусит с друзьями в кафе и барах. Они все модные и счет оплачивают телефоном. Раздельный чек просить влом, поэтому все просто переводят одному человеку потом. Вы, в свою очередь, начинаете понимать, что таких как Коля много (благо, инфы у Сбера предостаточно для этого),
и делаете для Коли "Диалоги", которые позволяют достаточно быстро и в привычной для него обстановке перевести деньги своему другу. А потом сделаете для него перевод касанием телефона к телефону.

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

Ответить

Комментарий удален

0

Прямой эфир

[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "240х200_mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "flbq" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "bscsh", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-1104503429", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=bugf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Плашка на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudx", "p2": "ftjf" } } }, { "id": 16, "label": "Кнопка в шапке мобайл", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byzqf", "p2": "ftwx" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvc" } } }, { "id": 19, "label": "Тизер на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "p1": "cbltd", "p2": "gazs" } } } ]
Нейронная сеть научилась читать стихи
голосом Пастернака и смотреть в окно на осень
Подписаться на push-уведомления