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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Например:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

4 — О нас

5 — Отзывы

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

7 — Корзина

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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