Website UX/UI design process: all steps

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

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

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

Представим заказчика, который пришел с идеей. В лучшем случае, у него есть небольшое ТЗ и несколько зарисовок от руки (влитых в Figma, Miro или GDocs). Ему нужен дизайн стартапа: веб-версия, 2 приложения и немного макулатуры для инвесторов. Первым делом отправляю в бой менеджера проектов с навыками UX.

Менеджер вникает в идею и собирает ТЗ. Иногда ему приходится объяснять очевидное: «Почему треугольничек не вставляется в круглое отверстие»

Итогом этапа, в идеале, должно стать:

• flow / короткое ТЗ на проект;
• базовый прототип с основным функционалом;
• краткое и емкое пояснение: цель проекта, конкуренты, монетизация, плюсы и минусы, возможные трудности.

Что могу посоветовать:

1. На этом этапе звонок или личная встреча лучше переписок. Обязательна запись звонка, если заказчик не возражает.
2. Прожект-менеджеру нужен чек-лист, чтобы проверять, все ли он узнал у заказчика. И не продолжайте проект, пока не получите всё.
3. Если на этом этапе вы чувствуете, что проект не будет успешным – просто откажитесь, пока не поздно. Будьте честными и мягко объясните заказчику ваши сомнения.

Обсуждаем с командой и заказчиком сырые прототипы, все обрастает подробностями. Тут важен профессионализм всех участников. Составляем листы сравнений с конкурентами и псевдоконкурентами, анализируем, упрощаем, дорабатываем прототип.

Наступает время создавать CJM (Customer Journey Map). Приветствую UX инженера, аналитика… Вживаемся в роли клиентов или приглашаем респондентов. Фокус-группы собираются из пользователей, которые являются непосредственной целевой аудиторией. Раскладываем прототипы и продумываем путь пользователя от осознания потребности в услуге или товаре до повторных контактов. 

В итоге имеем:

1. прототипы v2;
2. обзор конкурентов;
3. CJM.

Все предыдущие прототипы можно назвать базовыми. Теперь создаем финальный кликабельный прототип. На его основании мы будем делать опрос ЦА и — после доработки — дизайн.

Разберемся, кто такой UX копирайтер, и почему он столько стоит. В первую очередь – маркетолог и UX аналитик, а лишь во вторую — человек пера. Он обладает знаниями о поведении пользователей и умеет работать с прототипами и CJM. Он пишет тексты для кнопок, всплывающих окон и подсказок, форм, вкладок меню, сообщений об ошибке. Текст, написанный UX-ером, упрощает пользовательский путь и быстрее ведет к понятной юзеру конверсии.

Пример UX-копирайтинга. Один известный фитнес-клуб вместо кнопок “Перейти на сайт” (из 2ГИС) накреативил кнопку “Хочу похудеть”, а вместо “Оставить заявку” (на самом сайте) – “накачать пресс”. Одних пользователей это запутает, других развеселит, а третьих оскорбит. Хороший UX-копирайтер знает, где это уместно, а где нет.

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

После этого этапа имеем:

1. прототип в деталях;
2. листы опросов;
3. тексты — на прототипе и в отдельных файлах.

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

Обсуждаем итоговый дизайн с клиентом, тестируем на ЦА, дорабатываем.

Получается:

1. кликабельный дизайн в Figma (320px+768px+1140px+big);
2. иллюстрации в векторе;

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

Пишем, не забывая скриншоты:

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

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

Результат этого этапа:

1. тз для верстальщика;
2. готовая верстка.

Кратко опишем процесс для тех, кто далек от IT. Предыдущий шаг назывался верстка. Или же front-end. Это видимая пользователю часть, интерфейс. А back-end – программно-аппаратная часть продукта, то есть его «начинка», скрытая от юзера.

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

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

У нас есть арсенал самых популярных телефонов и планшетов. Если какого-то устройства у нас нет (например, айпада мини), можем и друзей-родственников попросить полистать сайт – все ли ровно и красиво. Это когда нет строгой секретности в виде NDA (Non-disclosure agreement), конечно.

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

Результат этого шага:

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

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

Находим составленные на Шаге 3 общие идеи для A/B тестирования. Добавляем новые, планируем итерации, обсуждаем с клиентом и рисуем.

В таком состоянии проект переходит на постоянную поддержку, в которую входит:

• A/B тестирование, отрисованные блоки для тестирования, регламент тестирования;
• Отрисовка нового функционала, обновлений;
• Создание креативов, баннеров, графики для рекламы и т.д.

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

Я намеренно опустила некоторые этапы, ценность которых может быть высокой на проектах >1.000.000 рублей и старалась не ругаться, бросаясь в вас терминами типа RITE, ET, Desk Research и т.д.

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