Как дизайн-процесс упрощает работу веб-дизайнеру

На связи главред Upward School. В этот раз я хочу рассказать про дизайн-процесс и его роль в работе веб-дизайнера.

В закладки

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

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

Дизайн-процесс: начало

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

Так вот, этапы дизайн-процесса:

1 — Проводите исследование: собираете информацию о бизнесе и пользователях.

2 — Структурируете данные и формируете текстовый прототип.

3 — Составляете мудборд: подбираете цвета, шрифты, формы, изображения.

4 — Собираете прототип без цветов и изображений: расположение заголовков, подзаголовков, текста и блоков так, как будет в итоговой работе.

5 — Соединяете прототип и мудборд — получаете дизайн-макет.

6 — Адаптируете макет под мобильные устройства.

7 — Презентуете проект заказчику*

8 — Упаковываете работы в кейс для портфолио (если нет NDA — договора о неразглашении).

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

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

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

Сбор информации о бизнесе: интервью vs бриф

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

Чтобы создать сайт, нужно понять:

1. Кто/что? Что за проект/продукт/услуга, позиционирование компании/бренда на рынке.

2. Для кого? Кто ЦА? Что им нужно?

3. Зачем? Какие задачи будет решать сайт?

4. Где? Когда? Как? Сколько?

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

Как работает бриф

Бриф — это документ, в котором вы собираете все ключевые вопросы о клиенте, бизнесе и бизнес-процессах, конкурентах, потребителях, о цифрах, фактах, планах/целях. Как работает схема дальше:

1 — вы договариваетесь, что отправите на электронную почту в течение дня бриф и согласовываете дедлайн для заполнения;
2 — ждете ответ;
3 — получаете ответ, но в нем короткие фразы и недостаточно информации;
4 — вы созваниваетесь и договариваетесь, что бриф пришлете повторно для уточнения деталей;
5 — ждете, снов…;
6 — получаете заполненный бриф и понимаете, что клиент не понял половину вопросов;
7 — снова звоните.
Лучше сразу отбросить этот вариант или совместить с интервью, но так вы ставите между собой и клиентом электронную почту, которая затягивает процесс работы над сайтом.

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

Как работает интервью

Интервью дает больше информации о бизнесе, помогает сориентироваться дизайнеру. Но есть нюансы, которые следует учесть. Поэтому составьте план проведения интервью по следующим шагам:
Шаг 1 — вы договариваетесь с клиентом, что берете время на сбор информации о нем: проводите исследование проекта/продукта/услуги и конкурентов, составляете для себя шпаргалку с вопросами.
Шаг 2 — назначаете дату и время встречи, которая удобна обеим сторонам. Это может быть личная встреча или звонок по Skype.

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

Зачем это нужно? Пока вы будете задавать вопросы, вам нужно следить за тем, как проходит интервью: все внимание сосредотачивается на сути и смысле ответов. Сложно одновременно осознанно слушать и фиксировать ответы. Если вы поняли, что памятки с вопросами не хватает для раскрытия вопроса, не бойтесь задать дополнительные. И не забывайте объяснять клиенту, зачем вы задаете тот или иной вопрос.

Шаг 5 — после встречи вы предупреждаете, что по итогам интервью соберете всю информацию и договоренности в документ, который пришлете на согласование в течение 1-2 дней.

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

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

Зачем нужен анализ конкурентов

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

Собрать информацию о пользователе

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

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

Составить портрет пользователя

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

Составляем образ группы. Например, аватар одной из групп — студент на последнем курсе университета. Что нужно о нем рассказать:

— имя, возраст потенциального студент,

— фотография, которая проиллюстрирует аватар группы. Можно взять с просторов интернет,

— профессиональная деятельность,

— особенности.

Написать User Story

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

User Story пишут на основе формулы. Вот она:

Пользователь хочет <что-то получить>, для того, чтобы <цель, мотив пользователя>.

Например:

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

Пользовательских историй может быть несколько. Например пользовательские истории для интернет-магазина одежды:

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

2. Молодая мама хочет найти подходящую модель, для того, чтобы ей было удобно заниматься.

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

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

5. Молодая мама хочет убедиться, что выбранная модель из качественных материалов. Для этого ей нужны отзывы.

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

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

8. Молодая мама хочет понять вопросы оплаты и доставки.

На основе User Story вы сформируете в текстовом прототипе будущие блоки/страницы сайта.

То есть, на основе примера, мы получаем следующие блоки сайта:

1 — Каталог магазина

2 — Раздел со спортивной одеждой

3 — Карточка товара

4 — О нас

5 — Отзывы

6 — Доставка и оплата

7 — Корзина

Завершение работы над сбором информации

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

Пример текстового прототипа  Дарья Шкуратова, выпускница школы

Помните, что к оформлению текстового прототипа нужно отнестись так же внимательно, как и к созданию сайта:

— следить за композицией: логика, верстка, иерархия, отступы;

— тексты: заголовки, подзаголовки и основной текст;

— следить за ошибками.

Рекомендации от тренера школы Upward

1. Текстовый прототип вы создаете в том случае, если работаете в проекте с самого начала. То есть, у клиента еще нет информации.

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

3. Текстовый прототип оплачивается, так как это отдельный процесс.

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

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

Подводим итоги статьи

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

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

3. Дизайн-процесс состоит из этапов: исследование, текстовый прототип, мудборд, прототип, дизайн-макет, адаптация макета под мобильные устройства, презентация проекта клиенту, упаковка работы в кейс для портфолио.

4. Исследование начинается с опроса клиента.

5. Интервью/бриф помогут собрать информацию. Первый вариант эффективнее.

6. Аватар пользователя поможет понять, какие группы целевой аудитории будут пользоваться продуктом/услугой.

7. Опрос среди пользователей выстраивает логику при взаимодействии с проектом клиента.

8. User Story формирует блоки на будущем сайте.9. Сбор информации в текстовый прототип.

10. Согласование готового варианта с заказчиком.

{ "author_name": "Анастасия Кошелева", "author_type": "self", "tags": [], "comments": 2, "likes": -2, "favorites": 27, "is_advertisement": false, "subsite_label": "design", "id": 128224, "is_wide": false, "is_ugc": true, "date": "Tue, 19 May 2020 16:24:34 +0300", "is_special": false }
Онлайн-марафон «2 шага до уровня pro в маркетинге недвижимости»
26 мая Онлайн Бесплатно
Объявление на vc.ru
0
2 комментария
Популярные
По порядку
–1

И дизайнер такой:
- Что за х"уйня!? 

Ответить
3

Евгений, добрый вечер!

Благодарю за конструктивную критику 

Ответить

Прямой эфир