Представьте, что вы начинаете работать над мобильным приложением для доставки еды. Вы уже знаете, чем оно должно помочь пользователям: сэкономить время и сделать заказ максимально удобным. На предыдущем уроке мы детально обсудили все этапы дизайн-процесса: от исследования потребностей пользователей до генерации идей. Теперь настало время погрузиться в четвертый этап — прототипирование. Именно на этом этапе ваши идеи принимают форму, а потенциальные решения становятся видимыми и более осязаемыми.
На практике часто бывает, что дизайнеры пропускают первые шаги и сразу создают вайрфреймы или даже финальные макеты. Это может произойти, если необходимая информация уже собрана с предыдущих проектов или пользовательских исследований, или же бюджет настолько ограничен, что времени на тщательный ресерч просто нет. Бывает так, что клиент приходит уже с готовыми эскизами, и тогда от дизайнера требуется в основном UI-складовая — визуальный стиль, подбор цветов, типографика, эстетическая привлекательность и так далее. Здесь нам пригодятся вайрфреймы, финальные макеты и интерактивные прототипы.
Однако для более сложных проектов, таких как, например, корпоративные системы для отслеживания заказов или мобильные приложения с множеством сценариев использования, полезно сначала представить путь пользователя этап за этапом и лишь после этого переходить к вайрфреймам и финальному дизайну каждого экрана.
Это похоже на то, как мы сначала разбиваем сложные задачи на простые шаги, а затем выполняем их один за другим. Для этого используются юзер флоу. Этот прием еще называют декомпозицией, потому что мы словно собираем конструктор из запчастей.
Готовы узнать тонкости всех этих методов? Тогда вперед!
Fidelity (читается фиделити) – переводится как точность и в дизайне используется для обозначения меры детализации прототипа.
Будем двигаться от более общих методов прототипирования к наиболее детализированным. То есть от low-fidelity (низкодельных, низкопроработанных, общих) до high-fidelity (высокодетализированных, высокопроработанных, деталированных). Общие методы требуют меньше усилий, экономят время и деньги, применяются на начальных этапах прототипирования. Это юзер флоу (user flow), лоу-фиделити вайрфреймы (low-fidelity wireframes) и бумажные прототипы (paper prototypes). Все эти методы можно выполнить на обычной бумаге без применения каких-либо программ.
Когда первоначальные эскизы отточены и они доказали свое право на существование, можно добавлять детали и шлифовать решение с помощью таких методов как хай-фиделити вайрфреймы (high-fidelity wireframes), интерактивные прототипы (interactive prototypes), готовить финальные макеты (final ui design). Здесь уже без Figma не обойтись, ведь на этом уровне решение будет очень похоже на настоящий продукт.
Пользовательский поток (читается юзер флоу) — это схема взаимодействия пользователя с продуктом (сайтом, мобильным приложением и т.д.) для решения поставленной задачи. Включает в себя фигуры различной формы для обозначения действий, решений, начала и окончания.
Рассмотрим пример. Пусть к вам, как к UX-дизайнеру, пришел продукт-менеджер с просьбой создать пользовательский поток для пользователя, который хочет заказать доставку еды с помощью мобильного приложения. Вот что вы можете предложить:
Обратите внимание на такие детали:
- Путь пользователя начинается с главного экрана, на который он мог попасть, например, установив приложение по промо-коду, чтобы получить бесплатную доставку. Этот шаг обозначен кругом, потому что в юзер флоу начало и конец обозначаются такой формой. В зависимости от задачи началом может быть совсем другой экран. Его название и вписываем в круг;
- в прямоугольниках обозначаются действия пользователя для выполнения поставленной цели. Как видите, все достаточно прямолинейно и логично. Никаких разветвлений пока нет. Каждый прямоугольник не обязательно обозначает один экран интерфейса. Например, выбрать и добавить в корзину блюдо можно, как с главного экрана, так и с результатов поиска по фильтрам. То есть имеем случай, когда на начальных этапах приходится упрощать и обобщать детали;
- стрелочки указывают в какой последовательности выполняются действия и соединяют прямоугольники с действиями. Другими словами стрелочки указывают тот же самый поток пользователя;
- еще один круг завершает схему. Кроме стандартных конец или завершение можно указать, что будет делать пользователь.
Когда строите юзер флоу, обязательно держите в голове ответы на такие вопросы:
- Кто является пользователем? У нас это пользователь, который проголодался и решил заказать еду;
- Какая у него цель? Хочет быстро пообедать;
- Какие шаги необходимо сделать пользователю, чтобы выполнить свою цель? Что конкретно нужно делать, чтобы заказать еду? Какие кнопки нажать и через какие экраны пройти?
Отвечая на последний вопрос, можно предположить, что пользователь начнет с главного экрана, где напишет пицца в форме поиска или применит фильтры. После чего попадет на страницу результатов поиска с фотографиями и ценами. Выбрав вкусное блюдо, перейдет на следующий экран с более подробной информацией и кнопкой добавить в корзину. Нажав на которую, перейдет в корзину, а затем к оформлению заказа. После подтверждения покупатель увидит сообщение спасибо за заказ, ваша пицца уже готовится.
Этот ответ очень упрощен, но должен дать вам представление о том, какую информацию несет в себе юзер флоу. Теперь давайте добавим немного деталей и познакомимся с новыми видами элементов. Посмотрите на эту обновленную схему:
Через то, что места по горизонтали мне уже не хватает, я немного изменила последовательность, и теперь она не идет под линейку, но по сути остается линейной, без ответвлений и мест, где пользователь может выбрать альтернативный путь. Последовательность может быть и вертикально-ориентированной, зависит от ваших предпочтений, правил тут нет. Обратите внимание на блок, где нужно ввести данные доставки. Он имеет форму параллелепипеда, что указывает на то, что пользователь в этой действия вводит данные (уточняет адрес доставки). Это может быть не только ввод текста с клавиатуры, но и фотография, которую вы делаете прямо сейчас или загрузка документа, который хранится в памяти смартфона. Часто этой формой пренебрегают и используют прямоугольник, как и для остальных действий. Но вам будет полезно знать такую деталь.
Итак, вы показали дополненный юзер флоу продукт-менеджеру, после обсуждения появилась отличная мысль, что было бы хорошо проработать способы оплаты. Вместе вы прошлись по каждому шагу и внесли важные комментарии, которые раскрывают полезные возможности, на которые нужно обратить внимание при создании вайрфреймов. Что ж, давайте дополним нашу схему:
Форма ромбу символизирует точку, где пользователю необходимо сделать выбор. В нашем случае, в зависимости от способа оплаты может понадобиться введение дополнительных данных, а именно информацию о кредитной карте, чтобы оплатить заказ. Подобных разветвлений может быть много. Как видите, схема значительно усложнилась, но покрывает требование продукт-менеджера и дает толчок для продолжения работы. Заметки и полезная информация, что была добавлена, еще станут вам в нагоде.
Теперь вы знаете, какие фигуры можно применить, чтобы построить собственный юзер флоу. Правда же, теперь значительно легче ориентироваться в том, что делает пользователь? Также обратите внимание на цикличность процесса. После первой итерации (попытки) у вас была довольно простая схема, которая не учитывала некоторых важных деталей. Но уже на последнем этапе, после обсуждения с командой, вы внесли необходимые дополнения.
Юзер флоу є лише підвидом так званих схем або діаграм. Англійською мовою вони ще називаються flowcharts (читається флоучартс). Це візуальні схеми, які дозволяють показати, як проходить той чи інший процес в залежності від ситуації. Програмісти часто використовують так звані блок-схеми, щоб зрозуміти, як має працювати алгоритм крок за кроком. Там використовується такий самий набір елементів, але є і свої унікальні (наприклад для циклів), які не використовують дизайнери в своїх юзер флоу.
Главная идея, которую я вам хочу донести, заключается в том, что визуализация процессов и решений помогает решать проблемы не только дизайнеров, но и многих других технических профессий, включая бизнес-аналитиков, инженеров, разработчиков. И все они придумывают свои собственные инструменты для этого, но суть и цель остаются неизменными: лучше разобраться в проблеме, ведь визуальное восприятие у человека развито лучше всего.
Task flow (читається таск флоу) — последовательность действий в рамках какого-то задания. Эта схема очень похожа на юзер флоу, но концентрируется на меньших задачах. Например, в нашем приложении для заказа еды это могут быть такие задачи:
- Поиск ресторанов по локации
- просмотр главного экрана с рекомендациями
- редактирование корзины (изменение количества/удаление позиций)
- отслеживание статуса заказа в режиме реального времени
- оставление отзыва и оценка сервиса после получения заказа.
В каждой из этих задач может быть много тонкостей, которые позволяет проработать именно таск флоу. Ведь, если бы мы это делали в рамках юзер флоу, то наша схема могла бы приобрести монструозные размеры и разобраться там было бы очень сложно. Поэтому нужно разделять и работать с маленькими кусочками информации. Поэтому по степени проработанности я ставлю этот метод выше юзер флоу и ближе к вайрфреймам.
Wireframe (читается вайрфрейм) – это статическое изображение конкретного экрана продукта, который определяет расположение и размер UI-элементов. Визуальная часть всегда ограничивается черно-белой палитрой и простыми фигурами.
Продолжая наш воображаемый проект по созданию приложения для заказа еды, после проработки дополнительных таск флоу, нас попросили спроектировать вайрфреймы для ключевых экранов.
В зависимости от задания может использоваться как в технической документации для разработчиков, так и служить базой для UI-дизайнера. Часто для вайрфреймов используется обычный блокнот и карандаш или маркер. Но можно также применить флипчарт, доску или графический редактор наподобие Figma. Существуют даже специальные программы для создания вайрфреймов, которые имитируют неаккуратно нарисованные от руки фигуры. Например, Balsamiq Wireframes.
Все это делается, чтобы определить, как лучше разместить элементы интерфейса, чтобы пользователям было максимально удобно выполнять конкретные задачи на сайте.
В зависимости от детализации (fidelity) вайрфреймы можно условно разделить на low-fidelity wireframes и high-fidelity wireframes.
Лоу-фіделіті вайрфрейми
Low-fidelity wireframes (читається лоу-фіделіті вайрфреймс) – дуже грубі та швидко виконані начерки екранів. Часто робляться на папері. Продовжимо уявляти себе в ролі UX-дизайнера і подивимось, як можуть виглядати готові лоу-фі вайрфрейми для основних екранів мобільного додатку для доставки їжі.
Сначала вам может показаться, что тут ничего не понятно, и эскиз выглядит слишком упрощенно, чтобы представить финальный дизайн, но на самом деле каждый элемент что-то означает и позволяет визуализировать основные экраны. Обратите внимание на такие детали:
- Зачеркнутый прямоугольник обозначает изображение. В нашем случае, это фотографии ресторанов и заведений быстрого питания и их логотипы. Например, на главном экране видно, что у нас есть рядок с изображениями, которые немного выходят за пределы экрана. Так мы обозначаем, что эти элементы можно скроллить (прокручивать) пальцем. Ниже вы видите широкие фотографии, на которых можно показывать основные блюда каждого заведения.
- Жирная линия обозначает заголовок или текстовый рядок. На главном экране у нас это поисковой запрос внутри строки поиска, которая разместилась сверху. Ниже можно видеть названия заведений и их короткую характеристику (например, время ожидания, расстояние до заведения и так далее).
- Прямоугольник обозначает поле для ввода данных или кнопку. На главном экране сверху есть поле для поиска, (слева внутри прямоугольника видно соответствующую иконку). На экране заведения, в корзине и при оформлении заказа видно кнопку внизу. Они соответственно выполняют такие функции: переход в корзину, переход к расчету и подтверждение заказа.
- Круг обозначает иконку или небольшое изображение. В меню заведения видно, что у нас есть рубрикатор по видам блюд, который используется для быстрой навигации к соответствующему списку категории.
- Иконки. Иногда вместо круга целесообразнее нарисовать простую иконку, чтобы показать основной функционал. На главном экране это у нас иконка увеличительного стекла, чтобы показать, что это поиск. В меню заведения у нас есть стрелочка для возврата к предыдущему разделу и плюсики, чтобы добавлять блюда в корзину. В корзине у нас есть иконка для изменения количества каждого блюда и удаления его из заказа. На странице оформления заказа это иконка карандаша для редактирования адреса доставки.
- Текст. Можем добавлять небольшие текстовые блоки для прояснения деталей. Это может быть текст на важной кнопке или, как в нашем случае, количество заказанных блюд в корзине.
Если назначение некоторых элементов остается загадкой, то взгляните на следующий раздел и сравните вайрфреймы – вам сразу станет все понятно.
Хай-фіделіті вайрфрейми
High-fidelity wireframes (читается хай-фіделіті вайрфреймс) – точно выполненные и детализированные эскизы будущего интерфейса. Содержат больше мелких деталей, текста, иконок. Расположение и размеры каждого элемента более точные и приближаются к финальному дизайну. Требуют гораздо больше времени на создание, но и объясняют значительно больше деталей. После обсуждения первых вайрфреймов с командой, вы как дизайнер могли бы создать такие хай-фиделити вайрфреймы:
Посмотрите, насколько детальнее и проработаннее выглядят новые вайрфреймы. Появились новые действия, например, добавление в избранное. Текстовые блоки стали полезными и показывают краткую характеристику заведений и блюд. Плейсхолдер карты превратился в более реалистичный маршрут доставки. В шаблон каждого экрана добавлены элементы операционной системы iOS, видно характерный вырез, иконки статуса системы и время. Это добавляет немного больше реализма и подсказывает, для какой платформы выполняется проектирование и, конечно, это не является обязательным элементом вайрфреймов, а добавляется по желанию.
Как видно, лоу фиделити вайрфреймы подходят для быстрых экспериментов и начального обсуждения, тогда как хай фиделити вайрфреймы нужны, чтобы приблизиться к реальному опыту пользователя и получить более точный обратный связь по дизайну перед началом разработки.
Что ж, вайрфреймы понравились команде и заказчику. После небольших правок вам поручили создать финальный UI-дизайн для уже знакомых экранов и предоставили вам одну неделю времени на это задание. Давайте посмотрим, что у вас вышло:
Вот какие отличия в сравнении с хай фиделіті вайрфреймами можно заметить:
- Перекрёстные прямоугольники заменены на фотографии или логотипы
- Прямоугольники заменены на поля ввода и кнопки
- Добавлены декоративные элементы и приемы для улучшения эстетического вида: карточки, закругления, тени
- Применена цветовая схема ко всем элементам
- Добавлена карта с маршрутом
Создание финального UI макета требует от дизайнера глубокого внимания к деталям и работы с различными аспектами визуального оформления. UI-дизайнер работает с типографикой, подбирая соответствующие шрифты, их размеры, интервалы между буквами и строками, чтобы обеспечить хорошую читаемость и стилистическое соответствие. Цвет в дизайне играет важную роль в создании атмосферы, подчеркивании важных элементов и обеспечении доступности для всех пользователей.
Композиция и отступы влияют на восприятие дизайна: правильные расстояния между элементами делают интерфейс чистым и упорядоченным. Сетки помогают сохранять структуру и согласованность макета на различных экранах, что особенно важно для адаптивного дизайна.
UI-дизайнер также учитывает принципы дизайна, такие как контраст, баланс, иерархия и юзабилити, чтобы создать привлекательный и функциональный интерфейс. Отдельное внимание он уделяет работе с иконками – они должны быть понятными, стильными и соответствовать общей визуальной языку продукта.
Этап создания UI-дизайна представляет собой отдельную профессию, но как вы уже поняли, чаще они объединяются с UX-обязанностями и формируют UX/UI-дизайнера. Каждая итерация макета проверяется, уточняется и согласовывается со стейкхолдерами, чтобы достичь единого, удобного и эстетически завершенного дизайна. О задачах UI-дизайнера более детально поговорим уже на следующем уроке.
Wireflow (пишется вместе, читается вайрфлоу) — это последовательность набросков экранов (вайрфреймов), которые покрывают какую-то задачу пользователя. Другими словами, это более детализированная версия юзерфлоу или таск флоу с применением вайрфреймов экранов вместо прямоугольников действий. То есть вместо прямоугольника с надписью оформить заказ у нас теперь будет экран корзины с помеченным элементом, который нужно тапнуть пользователю, чтобы перейти на соответствующий экран.
Вы можете видеть несколько новых элементов при применении этого метода:
- Экраны соединены между собой, как в юзер флоу, образуя последовательность действий или путь пользователя.
- Иногда нужно показать последовательность действий в рамках одного экрана. Как у нас на втором экране слева: пользователь сначала добавляет блюда в корзину с помощью кнопки с иконкой плюса, а уже потом тапает по кнопке внизу для перехода к корзине. Чтобы показать последовательность, используем числа, обозначающие первый, второй и так далее шаг.
- Если нужно, внизу соответствующего экрана можно расписать, что происходит. Например, 1 – добавить блюдо в корзину, 2 – перейти к корзине.
- Как и в юзер флоу, в вайерфлоу может быть разветвление, где пользователь делает выбор. Для этого можно применить фигуру ромба посередине перехода между экранами или от одного экрана могут сразу идти две стрелочки на другие экраны. Добавляйте пояснения по необходимости, если некоторые детали неочевидны.
Screenflow (пишеться разом, читається скрінфлоу) — послідовність екранів із готовою UI-частиною. Цей вид використовується на пізніх етапах розробки. Тут дизайн кожного екрану виконаний із максимальною (фінальною) деталізацією. По суті це той самий ваєрфлоу але з більшою деталізацією. Або іншими словами це юзер флоу з макетами UI-дизайну замість прямокутників. В нашому випадку це може виглядати так:
Скринфлоу является одним из наиболее детализированных артефактов, которые может создать UX/UI-дизайнер. Но можно пойти еще дальше и создать интерактивный прототип, который будет выглядеть и работать как настоящий продукт. Далее переходим к рассмотрению различных видов прототипов.
Бумажные прототипы — это один из самых быстрых и доступных способов визуализировать и протестировать идеи интерфейса на ранних этапах разработки. Они представляют собой обычные эскизы на бумаге или карточках, где элементы интерфейса (кнопки, поля ввода, иконки и т. д.) изображены в упрощенном виде. Главная преимущество такого подхода — возможность быстро фиксировать идеи, зачеркивать и исправлять ошибки без дополнительных затрат времени и ресурсов.
Благодаря своей простоте бумажные прототипы позволяют легко привлекать к процессу обсуждения всех участников проекта: дизайнеров, разработчиков, бизнес-аналитиков и даже будущих пользователей. Все видят, как примерно будет выглядеть интерфейс, и могут быстро вносить предложения или изменять расположение элементов. Это стимулирует командную работу и способствует лучшему пониманию целей продукта.
Во время тестирования пользователь может указать пальцем на элемент, который хочет «кликнуть», например, кнопку. UX дизайнер объясняет, что должно произойти после этого действия, и быстро подставляет следующий лист с эскизом, который соответствует ожидаемому результату. Таким образом, наблюдаем последовательность действий, что помогает выявить возможные проблемы в логике навигации и удобстве использования интерфейса.
Prototype (читается прототип) или интерактивный прототип – это дизайн экрана, который реагирует на действия пользователя. То есть это не статическая картинка, как в случае с вайрфреймами или юзер флоу. Прототипы позволяют понять, как будет работать продукт до начала программирования, выявить проблемные и неудобные экраны. Часто используются для тестирования с реальными пользователями.
Интерактивные прототипы запускаются в браузере на компьютере или в специальных приложениях на смартфоне и могут выглядеть, как настоящие законченные продукты. Но на самом деле это лишь подделки, никаких серьезных вычислений или обработки данных там выполняться не может. Обычно в прототипах нет свободы действий и пользователь может взаимодействовать с ограниченным количеством элементов интерфейса. Весь функционал максимально ограничивается для ускорения создания прототипа.
Наш интерактивный прототип на основе предыдущих методов может быть использован для дальнейшего тестирования. Для одной функции иногда может быть разработано несколько прототипов и уже на основе отчетов usability-тестирования принимается решение, какой вариант утверждать.
С этого момента этот курс рассчитан на самостоятельное изучение и выполнение домашних заданий. Понимаю, что некоторые задания могут быть непростыми для вас.
Для дополнительной поддержки воспользуйтесь чатом в телеграме. Здесь вы сможете задать вопросы, касающиеся уроков, или посмотреть примеры правильного выполнения от других учеников.
Чат недоступен для граждан россии.
- Выберите мобильное приложение, веб-сервис или сайт, которым вы часто пользуетесь. Создайте юзер флоу в блокноте для типовых сценариев использования выбранного продукта.
- Придумайте новую функцию для продукта, которым вы пользуетесь. Необязательно для вашего любимца из первого задания. Создайте таск флоу для этой новой функции.
- Создайте вайрфлоу для юзер флоу из первого задания. Можете использовать карандаш или стирательную ручку, чтобы вносить правки. Постарайтесь приблизиться к оригиналу.
- Создайте вайрфлоу для сценария из второго задания. Это задание повышенной сложности. То есть вам нужно создать серию вайрфреймов для новой функции, которую вы придумали. Здесь нужно быть очень наблюдательным, потому что вы не знаете всех элементов интерфейса, которые существуют и как они используются. Но вы можете смотреть другие продукты и вдохновляться ими. Обратите внимание, как другие дизайнеры использовали кнопки, карточки, текстовые блоки и как это можно использовать в вашем случае.
Выводы
На этом завершаем наше знакомство с этапом прототипирования дизайн-процесса. Именно этот промежуток ответственности обычно представляется, как работа дизайнера. Ведь здесь дизайнер создает интерфейс, с которым будет взаимодействовать пользователь. В дальнейшем мы еще глубже погрузимся в нюансы этой работы. А пока выполняйте домашнее задание и после его завершения переходите к следующему уроку, где вы больше узнаете о работе UI-дизайнера и смежных специальностях.
Подписывайтесь на меня в Instagram @frusia.pro, будьте в курсе анонсов новых уроков, узнавайте больше о поиске работы UX/UI-дизайнера, задавайте вопросы, а также на вас ждет множество полезных постов о дизайне.
Продолжить обучение