{"id":14270,"url":"\/distributions\/14270\/click?bit=1&hash=a51bb85a950ab21cdf691932d23b81e76bd428323f3fda8d1e62b0843a9e5699","title":"\u041b\u044b\u0436\u0438, \u043c\u0443\u0437\u044b\u043a\u0430 \u0438 \u0410\u043b\u044c\u0444\u0430-\u0411\u0430\u043d\u043a \u2014 \u043d\u0430 \u043e\u0434\u043d\u043e\u0439 \u0433\u043e\u0440\u0435","buttonText":"\u041d\u0430 \u043a\u0430\u043a\u043e\u0439?","imageUuid":"f84aced9-2f9d-5a50-9157-8e37d6ce1060"}

Дизайн без дизайнера

Я работаю в Райффайзенбанке с командами, у которых нет своего дизайнера, и помогаю им сделать качественный UX и UI. В большинстве случаев алгоритм его создания в разных продуктах один и тот же. Если у вас нет своего дизайнера, вы вполне можете пройти его самостоятельно. Как это сделать — рассказываю 😊

Именно с таким запросом чаще всего обращаются к дизайнеру.

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

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

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

1. Определите, кто ваш пользователь

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

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

Для таких кейсов можно использовать фреймворк Jobs-To-Be-Done. В нем пользователи сегментируются по «работам», на которые они нанимают ваш продукт.

2. Определите цель пользователя

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

Цель не должна быть слишком обобщена, необходимо вытащить из неё суть. Возможно, в этом вам поможет метод пяти почему.

Определение цели пользователя — это самая важная часть работы над digital-продуктом. Если определить её неправильно, может получиться технозависимый продукт, который не решает или очень неэффективно решает задачи пользователя, недружественен к нему.

Цель можно сформулировать в свободной форме, но ещё удобно использовать User Story или Job Story.

User Story

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

User Story — быстрый способ документировать требования клиента без необходимости разрабатывать объемные формализованные документы и впоследствии тратить ресурсы на их поддержание. Такой способ позволяет оперативно и без дополнительных затрат реагировать на быстро меняющиеся требования реального мира.

Job Story

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

В основе концепции Job Story лежит мысль о том, что пользователь «нанимает» наш продукт, чтобы решить свою задачу. Помимо самой задачи, существует еще и контекст — ситуация, в которой задача возникла. Контекст, в свою очередь, может стать источником гипотез и идей для развития продукта.

Когда лучше применять User Story, а когда – Job Story?

User story подойдет вам, если:

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

Job Story подойдет вам, если:

ваш продукт предназначен буквально «для всех», а различия обнаруживаются только в контексте его использования. Например, кто-то покупает технику Yamaha из-за надежности, а кто-то — чтобы похвастаться перед друзьями.

3. Изучите путь пользователя

Проследите, как пользователь достигает своей цели, применяя ваш продукт?

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

CJM состоит из стадий жизненного цикла клиента/пользователя, конкретных шагов и слоев информации.

Проще всего понять принцип построения CJM на примере:

Пример из Google Картинок :)

Чтобы построить CJM, вам нужно:

  • взять 5-8 респондентов (из пункта 1)
  • озвучить им цель (из пункта 2) и попросить выполнить её
  • наблюдать, как они достигнут озвученной цели
  • зафиксировать всё увиденное и услышанное в CJM

Почему пять-восемь человек достаточно? Ответ здесь.

4. Продумайте функциональность продукта

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

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

5. Используйте дизайн-систему или UI Kit

Наконец-то вы можете превратить ваши вайрфреймы в красивый UI: )

Если вы работаете в крупной организации — у вас скорее всего есть дизайн-система.

В Райффайзенбанке — это дизайн-система Vienna. Она содержит библиотеку готовых компонентов в коде, из которых можно быстро собрать готовый front-end для любого digital-продукта.

Применение дизайн-системы облегчает работу разработчиков и обеспечивает соответствие гайдлайнам.

Если дизайн-системы в вашей организации нет — это повод задуматься о её создании: )

Также вы всегда можете найти готовый UI Kit на просторах интернета — сейчас их очень много на любой вкус. Например, здесь или здесь. Можно выбрать любой UI Kit, который вам больше нравится, и собрать из него красивые макеты или даже готовый front-end.

Необязательно быть дизайнером?

Несмотря на длинное описание, все вышеописанные действия доступны каждому. Согласны?

0
27 комментариев
Написать комментарий...
Oleg Sayberbulin

Пост с шагами прямо-таки по всем канонам каждой второй инстаграм-карусели у дизайноцыган. Это еще ладно, все эти шаги могут быть вполне валидны, но последний пункт — это что-то за пределами здравого смысла. Вы создаете новый интерфейс, для которого НЕОБХОДИМЫ юзер персоны, кастомер джорни и прочие ритуалы, и всерьез расчитываете, что дизайн-система может покрыть эту задачу максимально эффективно?

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

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

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

Ответить
Развернуть ветку
Аккаунт удален

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

Ответить
Развернуть ветку
Аккаунт удален

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

Ответить
Развернуть ветку
Аккаунт удален

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

Ответить
Развернуть ветку
Юлия Антипова
Автор

Да? А у меня из проекта в проект одно и то же)) 

Ответить
Развернуть ветку
Аккаунт удален

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

Ответить
Развернуть ветку
Юлия Антипова
Автор

Понимаю, не все могут себе позволить. 

Ответить
Развернуть ветку
Alex G

Как токсично!

Ответить
Развернуть ветку

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

Развернуть ветку
Nickolai Vasiliev

жостко ))

Ответить
Развернуть ветку
M

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

Аналогия на 100% применима к теме статьи. Забавно, что легкая и непринуждённая сборка продукта для банка из говна и палок проиллюстрирована именно на примере Райфайзена, у которого, судя по всему, палок не было. Зачем это все написано - не понятно. UXер пытается всем объяснить, что UXеры не нужны?

Ответить
Развернуть ветку
Юлия Антипова
Автор

Не обижайтесь :) Хороший юиксер стоит очень дорого, как и строитель. Лучше строить дом самому, чем нанимать бригаду Джамшутов :) 

Ответить
Развернуть ветку
Макс Мухарёв

Чем лучше?)

Ответить
Развернуть ветку
Юлия Антипова
Автор

На примере домостроения: потому что недорогому Джамшуту выгодно побыстрее закончить работы, чтобы получить деньги за работу и перейти на следующий объект. Квалификация недорого Джамшута — кот в мешке. Даже фотографии объектов не гарантируют, что то, что на фото, делал он, а не его коллега. По итогу, чтобы получить хороший дом, заказчику придется стоять у него над душой 100% времени, уволившись с работы и забив на все другие дела. А также знать правильную технологию всех работ, чтобы вовремя просекать косяки. Об этом можно почитать у Виктора Борисова, например. Таким образом — проще самому изучить всё и построить :)

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

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

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

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

Ответить
Развернуть ветку
Evgeny Shpilevoy

пишете бред конечно))) жто я про пример с джамшутом, дальше читать было не интересно.

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

и дальше: "Таким образом — проще самому изучить всё и построить :)"

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

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

Ответить
Развернуть ветку
Аккаунт удален

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

Ответить
Развернуть ветку
Evgeny Shpilevoy

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

Но посыл автора при сравнении со стройкой был в том, что типа зачем вам кому-то платить много, если есть исполнители дешевле, но тогда надо тратить время и стоять над ними, дышать в затылок и т.д., а значит самый лучший выход - это выучить всё самому и сделать все самому))) И я с этим в корне не согласен)))) Это как многие живут с мыслью: а зачем я буду этот светильник заказывать за 6к, если я куплю комплектующих на али на 3к и сам соберу такой светильник из говна и палок. Как итог: куча потраченного времени, потраченные деньги и сомнительный результат. ну примеров в общем куча.

самое главное понимать, что твое время тоже стоит денег, и что если ты делаешь что-то сам, то это твое время (читай деньги).

Ответить
Развернуть ветку
Юлия Антипова
Автор

мой основной посыл касается только тех случаев, когда у человека нет этих 6к)) таких людей много.

Ответить
Развернуть ветку
Юлия Антипова
Автор

базовый продукт - это какой, например?

Ответить
Развернуть ветку
Юлия Антипова
Автор

"лучше быть богатым и здоровым, чем бедным и больным"
согласна на 100% с вами :)

Ответить
Развернуть ветку
M

Не обижаться, простите, на что?) На вашу некомпетентность?)

Ответить
Развернуть ветку
Елена Стрекалева

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

Ответить
Развернуть ветку
Юлия Антипова
Автор

Цель статьи — помочь тем, у кого нет ресурсов на хорошего юиксера :)

Ответить
Развернуть ветку
Evgeny Shpilevoy

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

Ответить
Развернуть ветку
Ира Левина

Статья написана явно для кросс-пиара (kpi по просмотрам и комментариям - почему нет?)) . Но, поскольку кроме азбучных блоков  описания CJM и JTBD , есть пару ссылок на инструменты UI и UX, считаю ее минимально полезной. 

Ответить
Развернуть ветку
Юлия Антипова
Автор

Спасибо :) а что для вас сделало бы её полезнее?)

Ответить
Развернуть ветку
Ира Левина

мне было бы интересно как внедряли в конкретном банке, какие барьеры и сложности встречали и как с ними справлялись, без теорий)

Ответить
Развернуть ветку
Юлия Антипова
Автор

Что именно внедряли?

Ответить
Развернуть ветку
24 комментария
Раскрывать всегда