Что такое юзер флоу
Что строить в первую очередь: User Journey Map или User Flow?
(Мы продолжаем переводить цикл статей по UX/UI. Полную подборку можно найти в коллекции « Инструменты проектировщика»)
UX дизайн — комплексный процесс. Чтобы создавать по-настоящему удобные и полезные продукты, проектировщики используют разные инструменты на разных этапах. В этой статье мы разберем два типа материалов, которые помогают визуализировать опыт пользователя в продукте: карта пути пользователя (user journey map) и пользовательские сценарии (user flows).
Попробуем ответить на такие вопросы:
Для начала я объясню некоторые базовые термины, которые встретятся нам в этой статье.
Интересуетесь свежими статьями по дизайну? Вступайте в группу на Facebook.
Ищите системное погружение в тему? Загляните в блог для дизайнеров.
Что такое карты пути пользователя (User Journey Map)?
User Journey Map помогает зафиксировать пользовательский опыт во время взаимодействия с продуктом. Это некое визуализированное путешествие пользователя по продукту. User Journey Map — как журнал, в котором пользователь записывает свои чувства, неудачи и успехи.
В User Journey Map может быть несколько слоев, она не привязана к конкретному элементу в продукте, который отвечает за то или иное действие. User Journey Map даже может описывать, что делает система “за кулисами”, чтобы предоставить пользователю необходимую информацию. С другой стороны, User Journey Map — это больше про пользователя: она описывает его чувства, мысли, действия при взаимодействии с продуктом.
User Journey Map обычно линейны, так как описывают различные аспекты достижения конкретных задач.
Что такое пользовательские сценарии (User Flows)?
User flows (также известные как пользовательские сценарии, UX-сценарии, Wire, UI или IX сценарии) — это наглядные материалы, которые иллюстрируют весь путь пользователя в продукте целиком.
Изначально это были блок-схемы, но со временем они обросли разными визуальными элементами — вайрфреймами, скетчами и визуализацией жестов.
Сейчас user flow — это гибрид классической блок-схемы и элементов визуального интерфейса. В основе user flow лежат задачи, которые выполняет пользователь, а также возможные альтернативные исходы.
Можете прочесть пару моих статей об UX-сценариях (user flow):
User Flows in Sketch — Step by Step Guide to Create Them Quickly
Sketch is a powerful tool to create digital products. You may be surprised but it is also ideal to prepare some other…
If one picture is worth thousand words, then UI flows are worth a thousand pictures. Even if you created outstanding…
Отличия
User flows (также известные как пользовательские сценарии, UX-сценарии, Wire, UI или IX сценарии) — это наглядные материалы, которые иллюстрируют весь путь пользователя в продукте целиком.
Изначально это были блок-схемы, но со временем они обросли разными визуальными элементами — вайрфреймами, скетчами и визуализацией жестов.
Сейчас user flow — это гибрид классической блок-схемы и элементов визуального интерфейса. В основе user flow лежат задачи, которые выполняет пользователь, а также возможные альтернативные исходы.
Можете прочесть пару моих статей об UX-сценариях (user flow):
Отличия
В основе сценария — User Flow — как правило, лежит порядок действий, которые должен выполнить пользователь. User Flow помогает понять, все ли процессы в продукте имеют логическое завершение. Глядя на user flow, команда может сразу понять, в чем суть решения, которое предлагает продукт.
User flow могут быть нелинейными — в них есть точки принятия решений, пути, режимы и петли, при помощи которых мы иллюстрируем все возможные взаимодействия с продуктом.
Обычно в User Flow мы не делаем акцент ни на ощущения пользователя, ни на множество возможных уровней решения. Основная задача сценариев — показать процесс работы с продуктом.
User Journey Map больше ориентированы на пользовательский опыт клиента. Они выявляют проблемные точки и моменты радости. User Journey Map может описывать разные аспекты решения: например, не только мобильное приложение, но и работу системы на сервере.
Есть определенные правила построения User Flow (наверное потому, что сценарии эволюционировали из блок-схем). А вот что касается User Journey Map, единого рецепта тут нет. Можно найти в интернете кучу примеров карт и все они будут очень разные.
Как использовать User Flow в процессе дизайна
Меня очень часто спрашивают: с чего начать? С User Journey Map или с User Flow? Не буду оригинальным: все зависит от ситуации 🙂
Если у вас уже есть готовое решение, тогда, мне кажется, сначала стоит создать User Flow. На основании этих сценариев вы сможете построить хорошую User Journey Map, которая в свою очередь поможет выявить проблемные места и устранить их. Не менее важно выявить приятные моменты на пути пользователя, чтобы сохранить их и при возможности усилить.
Когда вы создаете решение с нуля, собирайте требования, узнавайте потребности пользователей и пишите пользовательские истории. В первую очередь думайте о том, что должен сделать пользователь, чтобы выполнить стоящую перед ним задачу. На базе этой информации вы создадите карту User Journey Map. В эту версию карты не обязательно включать вайрфреймы: рассматривайте ее как начальный план, который вы детализируете на последующих этапах. Уже потом, когда вы создадите вайрфреймы и макеты, можно будет обратиться к UX Flows: они помогут понять, правильный ли путь вы предлагаете пользователям и как его можно улучшить.
Короче говоря:
Я рекомендую начинать с User Flow, если у вас на руках готовое решение. Если вы запускаете новый проект, начните с построения User Journey Map и уже потом усиливайте ее при помощи User Flow.
Еще я обнаружил, что User Flow очень эффективны, когда дело касается общения с клиентом. Людям, не связанным с дизайном, проще понять формат блок-схемы. А вот User Journey Map они читают с трудом — поэтому бывает рискованно показывать ее клиентам на ранних этапах и без объяснений.
Как создавать User Journey Map и User Flow
При создании этих материалов я люблю пользоваться разными полезными инструментами.
Когда нужно накидать User Journey Map прямо во время встречи или мозгового штурма, я предпочитаю стикеры. Их можно легко менять местами, выбрасывать ненужные и заменять новыми.
Цифровую карту User Journey Map проще всего создавать в электронной таблице.
Что касается User Flows, то в режиме реального времени их проще всего создавать на белой доске. Но после встречи/мозгового штурма определенно стоит красиво оформить наработки в каком-нибудь цифровом инструменте. Я использую для этого Sketch — он на удивление хорошо подходит для создания различных UX материалов. Чтобы сделать процесс еще эффективнее, я создал инструмент для создания UX-сценариев — SQUID. Благодаря библиотеке, я могу за считанные минуты создавать стилизованные пользовательские сценарии.
Как тестировать user flow: четыре метода и лайфхак для бесплатного UI тестирования
Работа над User flow, пользовательским сценарием — важный этап создания интерфейса. User flow принимает различные формы в зависимости от этапа развития продукта. Расскажу, как тестировать сценарии в разных ситуациях и как это можно делать бесплатно. Пригодится людям, задействованным в создании интерфейсов: UI дизайнерам, менеджерам продуктов, UX исследователям.
User Flow — пользовательский сценарий иллюстрирует порядок действий, который пользователь выполняет для решения задачи. Сценарий — это скелет интерфейса, состоит из шагов — отдельных экранов. Удобный для пользователя интерфейс начинается именно с проработки user flow, структуры.
В оригинале пользовательский сценарий представляет собой блок-схему с логическими связями и пересечениями. Но тестировать сценарий в таком виде затруднительно и бессмысленно.
Интерфейс — это подход к решению задачи. Для проверки логики смотрим, насколько интерфейс выполняет свою функцию.
Для теста User Flow достаточно последовательных экранов или даже нарисованных от руки черновиков. Большинство дизайнеров, продактов и исследователей имеют дело уже с работающим цифровым продуктом, поэтому начнем именно с этой ситуации.
Тестировании User Flow продукта — это гигиеническая норма. Для оценки общего уровня удобства важны количественные метрики. Подход к сбору данных зависит от исследовательской культуры и возможностей.
Для проверки сценариев достаточно провести онлайн опрос. Даем респондентам ссылку на продукт и задание. По итогу прохождения задаем вопросы из стандартной анкеты по оценке юзабилити (SUS). Полезно наравне с собственным продуктом тестировать прямых и косвенных конкурентов. В разнице оценок и содержится наиболее полезная информация.
Пример: летом 2019 года провели сравнительное исследование трех онлайн супермаркетов. За несколько часов получили общие метрики по удобству интерфейса, а из открытых ответов почерпнули информацию о разрывах в пользовательском сценарии.
Fastuna Task Flow Click (UX Benchmark) Ссылка на отчет
Я не смогла добавить все товары в корзину. При добавлении только 1 товара мне сразу предлагают оформить доставку, а я хотела добавить другие товары.
Опрос дает количественные оценки и прямую речь. Фиксируем показатели, которые отклоняются от нормы или результатов конкурентов. Изучаем упомянутые в открытых ответах проблемы. Полученных данных бывает достаточно для принятия бизнес решения. Если вопросы остались, то обращаемся к более глубоким методам исследований.
Предположим ситуацию: продукт функционирует без багов, но люди не доходят до выполнения целевого действия. Точного понимания причин нет. Поиск проблемы — это качественная, а не количественная задача, предполагает погружение в опыт отдельных людей. Здесь подходят два метода: модерируемые и немодерируемые юзабилити тесты. Первый метод быстр, доступен почти всем. Модерируемый тест способен дать более глубокие данные, но требует времени и специальных навыков.
Немодерируемые тестирования занимают от одного до нескольких дней. Люди под запись экрана делают попытку выполнения задания, а потом дают обратную связь. Изучаем видеозаписи и пониманием, в чем заключена проблема: в логике user flow, в функциональных элементах или в оформлении интерфейса.
В статье “Смотрим видео и страдаем. Как я анализировал записи UX-исследования” рассказываю о том, как выглядит анализ немодерируемого юзабилити теста и с какими неожиданными трудностями сталкиваются люди при использовании привычных элементов.
Применимо, когда есть потребность в большей детализации и погружении. Респондент получает задание, а интервьюер очно или онлайн наблюдает за человеком в режиме реального времени, задает уточняющие вопросы. Личные интервью с людьми — более трудоемкий и времязатратный метод, требует особых компетенций, но при правильном проведении дает ценную информацию. Модерируемые юзабилити интервью рекомендуем по возможности проводить с привлечением штатных сотрудников, погруженных в продукт.
При тестировании User Flow путем модерируемых и немодерируемых юзабилити тестирований важно помнить, что эти методы относятся к качественной методологии, служат для формулировки предположений, а не для проверки гипотез. На нескольких интервью вы найдете проблему, но не ее распространенность.
Предположим, мы нашли проблему в пользовательском сценарии и работаем над улучшением User Flow. Новый пользовательский сценарий обретает плоть. Сначала в виде последовательных макетов. Мы не палим ресурсы разработки впустую, поэтому удостоверяемся, что новый вариант работает, люди понимают, куда нажимать на каждом шаге для выполнения задания, дойдут до конца маршрута.
Для количественной проверки гипотез, при оценке сценария на интуитивность подходит тест первого клика
Как это работает: даем 100-400 людям задание и последовательно показываем экраны интерфейса. На каждом экране человек делает только один клик, который приблизит к выполнению задания. По итогу получаем тепловую карту кликов на каждом шаге. Видим, на каком этапе пользовательского сценария возникает больше всего затруднений.
Пример: я тестировал пользовательский сценарий по поиску дверной ручки на сайте строительного гипермаркета. На втором шаге сценария, при попадании в каталог 71% ищут дверные ручки в разделе двери и окна. И лишь 6% в скобяных изделиях, где они и находятся. Вывод: интерфейс не решает задачу для сценария по поиску этого товара.
Если задача — общая оценка то из исследований наиболее релевантен опрос с применением классической шкалы SUS или ее разновидностей.
Если на этапе готового продукта ищем проблему в User Flow, то в зависимости от требуемой детализации и ресурсов используем немодерируемое или модерируемое юзабилити тестирование.
На этапе разработки, когда user flow представлен в виде последовательных экранов рекомендую тест первого клика — он покажет, на каком шаге люди теряются, поможет при размещении кнопок.
Обещанный лайфхак: перечисленные решения доступны бесплатно. Fastuna специализируется на готовых решениях на базе онлайн панели. Но при использовании собственной базы все решения можно использовать бесплатно. Каждой компании доступно 500 интервью в месяц. Да, это касается даже немодерируемых юзабилити тестирований с записью экрана.
Что строить в первую очередь: User Journey Map или User Flow?
UX дизайн — комплексный процесс. Чтобы создавать по-настоящему удобные и полезные продукты, проектировщики используют разные инструменты на разных этапах.
Продуктовый дизайнер (UX/UI), системный аналитик, исследователь. Активно осваивает Data Science.
Авг 12, 2018 · 6 мин читать
В этой статье мы разберем два типа материалов, которые помогают визуализировать опыт пользователя в продукте: карта пути пользователя (user journey map) и пользовательские сценарии (user flows).
Попробуем ответить на такие вопросы:
Для начала я объясню некоторые базовые термины, которые встретятся нам в этой статье.
Что такое карта пути пользователя (User Journey Map)?
User Journey Map помогает зафиксировать пользовательский опыт во время взаимодействия с продуктом. Это некое визуализированное путешествие пользователя по продукту. User Journey Map — как журнал, в котором пользователь записывает свои чувства, неудачи и успехи.
В User Journey Map может быть несколько слоев, она не привязана к конкретному элементу в продукте, который отвечает за то или иное действие. User Journey Map даже может описывать, что делает система «за кулисами», чтобы предоставить пользователю необходимую информацию. С другой стороны, User Journey Map — это больше про пользователя: она описывает его чувства, мысли, действия при взаимодействии с продуктом.
Интересуетесь свежими статьями по дизайну? Вступайте в группу на Facebook.
User Journey Map обычно линейны, так как описывают различные аспекты достижения конкретных задач.
Что такое пользовательские сценарии (User Flows)?
User flows (также известные как пользовательские сценарии, UX-сценарии, Wire, UI или IX сценарии) — это наглядные материалы, которые иллюстрируют весь путь пользователя в продукте целиком.
Изначально это были блок-схемы, но со временем они обросли разными визуальными элементами — вайрфреймами, скетчами и визуализацией жестов.
Сейчас user flow — это гибрид классической блок-схемы и элементов визуального интерфейса. В основе user flow лежат задачи, которые выполняет пользователь, а также возможные альтернативные исходы.
Можете прочесть пару моих статей об UX-сценариях (user flow):
Отличия
В основе сценария — User Flow — как правило, лежит порядок действий, которые должен выполнить пользователь. User Flow помогает понять, все ли процессы в продукте имеют логическое завершение. Глядя на user flow, команда может сразу понять, в чем суть решения, которое предлагает продукт.
User flow могут быть нелинейными — в них есть точки принятия решений, пути, режимы и петли, при помощи которых мы иллюстрируем все возможные взаимодействия с продуктом.
Обычно в User Flow мы не делаем акцент ни на ощущения пользователя, ни на множество возможных уровней решения. Основная задача сценариев — показать процесс работы с продуктом.
User Journey Map больше ориентированы на пользовательский опыт клиента. Они выявляют проблемные точки и моменты радости. User Journey Map может описывать разные аспекты решения: например, не только мобильное приложение, но и работу системы на сервере.
Есть определенные правила построения User Flow (наверное потому, что сценарии эволюционировали из блок-схем). А вот что касается User Journey Map, единого рецепта тут нет. Можно найти в интернете кучу примеров карт и все они будут очень разные.
Как использовать User Flow в процессе дизайна
Меня очень часто спрашивают: с чего начать? С User Journey Map или с User Flow? Не буду оригинальным: все зависит от ситуации 🙂
Когда вы создаете решение с нуля, собирайте требования, узнавайте потребности пользователей и пишите пользовательские истории. В первую очередь думайте о том, что должен сделать пользователь, чтобы выполнить стоящую перед ним задачу. На базе этой информации вы создадите карту User Journey Map. В эту версию карты не обязательно включать вайрфреймы: рассматривайте ее как начальный план, который вы детализируете на последующих этапах. Уже потом, когда вы создадите вайрфреймы и макеты, можно будет обратиться к UX Flows: они помогут понять, правильный ли путь вы предлагаете пользователям и как его можно улучшить.
Короче говоря:
Я рекомендую начинать с User Flow, если у вас на руках готовое решение. Если вы запускаете новый проект, начните с построения User Journey Map и уже потом усиливайте ее при помощи User Flow.
Еще я обнаружил, что User Flow очень эффективны, когда дело касается общения с клиентом. Людям, не связанным с дизайном, проще понять формат блок-схемы. А вот User Journey Map они читают с трудом — поэтому бывает рискованно показывать ее клиентам на ранних этапах и без объяснений.
Как создавать User Journey Map и User Flow
При создании этих материалов я люблю пользоваться разными полезными инструментами.
Когда нужно накидать User Journey Map прямо во время встречи или мозгового штурма, я предпочитаю стикеры. Их можно легко менять местами, выбрасывать ненужные и заменять новыми.
Цифровую карту User Journey Map проще всего создавать в электронной таблице.
В заключение
User Flow и User Journey Map по сути похожи. Цель и тех, и других — выяснить, как пользователь будет взаимодействовать с вашим решением. И все же они ориентированы на разные аспекты продукта.
В ходе дизайна стоит создавать и User Flow, и User Journey Map— эти материалы дополняют друг друга и помогают вам усилить UX. Что создавать в первую очередь? Простого ответа на этот вопрос не существует — очень многое зависит от особенностей вашего проекта.
Ежедневные задачи UX/UI дизайнера. Программы для дизайна
Сегодня рассмотрим, какие обычно задачи выполняет UX/UI–дизайнер, какие программы для этого используются. Затронем графический дизайн в контексте UI дизайна. Познакомлю с новыми словами, с которыми будете сталкиваться ежедневно в работе. Очень много информации перекликается с прошлым уроком, но сегодня углубляемся в детали и учим профессиональные термины.
Для начала достаточно знать лишь Figma, но со временем вы будете развиваться и пробовать новый софт. После прочтения сможете сориентироваться и прикинуть, что подучить следующим.
Освоив один графический редактор, сможете быстро перейти на другой — отличия минимальны. Например, программы Figma и Adobe Xd практически в точности копируют Sketch.
И, конечно, поймем в чем разница между векторной и растровой графикой.
Задачи UX–дизайнера
Предположим, что нас наняла компания на самом раннем этапе создания сайта. Еще ничего нет, ни набросков экранов, ни дизайна, готова лишь техническая документация. Менеджер проектов объясняет, что новый сервис предназначен для покупки и продажи всевозможных вещей. Нам ставят задачу: придумать юзер флоу для покупки товара.
Создание юзер флоу
User flow (читается юзер флоу) — это пошаговая схема взаимодействия с веб-сайтом для решения поставленной пользователем задачи. Включает в себя действия и переходы между экранами, через которые проходит пользователь для достижения своей цели.
Добавим немного конкретики и представим, что наш воображаемый пользователь хочет купить велосипед.
Юзер флоу обязательно отвечает на такие вопросы:
Теперь в работу вступает UX-дизайнер. Отвечая на последний вопрос можно предположить, что пользователь начнет с главной страницы, где напишет велосипед в форме поиска. После чего попадет на страницу результатов поиска с фотографиями и ценами велосипедов. Выбрав подходящий, перейдет на следующий экран с более подробной информацией и кнопкой купить. Нажав которую, перейдет к форме оплаты. После подтверждения покупатель увидит сообщение спасибо за покупку.
Этот ответ сильно упрощен, но должен дать вам представление, о том какую информацию несет в себе юзер флоу. На практике вы должны отрисовать схему. В зависимости от детализации их бывает 3 вида: таск флоу, вайрфлоу, скринфлоу.
Таск флоу
Task flow (читается таск флоу) — последовательность задач. Это схема включает в себя лишь названия экранов и действий. Часто вам даже не нужно притрагиваться к компьютеру, делаете набросок маркером в блокноте или на доске. Схемы могут включать разветвления в зависимости от действий пользователя:
Запомните ключевые моменты при составлении таск флоу:
После отрисовки и правок на бумаге можно перерисовать схему в графическом редакторе, иногда это делается сразу:
Вайрфлоу
Wireflow (пишется вместе, читается вайрфлоу) — это последовательность набросков экранов (вайрфреймов). Это схема включает грубые наброски экранов с важными элементами интерфейса (кнопки, поля ввода, места для картинок) и действия. Их тоже часто рисуют вручную:
Детализация и проработка зависит от ситуации. В этом примере все упрощено до максимума, но главные элементы интерфейса на каждом экране четко выделены. Для уточнения все детали прописывают текстом:
Скринфлоу
Screenflow (пишется вместе, читается скринфлоу) — последовательность экранов с готовой UI-частью. Этот вид используется на более поздних этапах разработки. Здесь дизайн каждого экрана выполнен с максимальной (финальной) детализацией. Выполняется только в графических редакторах и специализированных приложениях (к примеру Overflow помогает рисовать стрелочки между экранами):
Отрисовка вайрфреймов
Wireframe (читается вайрфрейм) – это статический набросок конкретного экрана, который определяет расположение и размер UI элементов. Визуальная часть всегда ограничивается черно-белой палитрой и простыми фигурами.
Если продолжить наше предположение с работой в компании, то после обсуждений нас могут попросить отрисовать вайрфреймы для главного экрана и юзер флоу покупателя.
В зависимости от задачи может использоваться, как в технической документации для разработчиков, так и основой для UI-дизайнера. Могут выполняться аналогично юзер флоу в блокноте, на доске или в графическом редакторе. Существуют даже специальные программы для имитации ручных набросков на компьютере (Balsamiq Wireframes).
Отрисовывается, чтобы определить или хотя бы предположить, как расположить элементы интерфейса, чтобы пользователю было максимально удобно пользоваться сайтом, выполнять конкретные задачи.
На рисунке сверху слева изображен вайрфрейм, а справа законченный дизайн (постарался UI-дизайнер). По степени детализации вайрфреймы можно разделить на два вида.
Лоу-фидэлити вайрфреймы
Low-fidelity wireframes (читается лоу-фидэлити вайрфреймс) – очень грубые и быстро выполненные наброски экранов. Обычно содержат минимум текста, в большинстве случаев он заменен горизонтальными линиями, все кнопки и изображения показаны прямоугольниками (иногда используются круги). Часто расположение и размер элементов приблизительны.
Хай-фидэлити вайрфреймы
High-fidelity wireframes (читается хай-фидэлити вайрфреймс) – точно выполненные наброски экранов. Содержат весь текст; расположение, размеры кнопок и остальных элементов максимально приближается к финальному дизайну. Требуют намного больше времени на отрисовку, содержат больше деталей.
Создание прототипа
Prototype (читается прототайп) или интерактивный прототип – это дизайн экрана, который реагирует на действия пользователей. То есть это не статическая картинка, как в случае с вайрфреймами или юзер флоу. Прототипы позволяют понять, как будет работать веб-сайт до начала программирования, выявить проблемные и неудобные экраны. Часто используются для тестирования на реальных пользователях.
Интерактивные прототипы запускаются в браузере на компьютере или в специальных приложениях на смартфоне и могут выглядеть и вести себя, как настоящие законченные продукты. Но на самом деле это лишь подделки, никаких серьезных вычислений или обработки данных там выполняться не может.
Наш интерактивный прототип на основе предыдущих набросков может быть использован для дальнейшего тестирования. Для одной функции иногда может быть разработано несколько прототипов и уже на основе отчетов usability-тестирования принимается решение, какой вариант утверждать.
Usability-тестирование
Usability-тестирование (юзабилити) или проверка эргономичности – это исследование, чтобы проверить насколько удобно использовать интерфейс для выполнения конкретной задачи. Такие тесты выполняются на реальных людях с использованием интерактивных прототипов.
В большинстве случаев UX-дизайнер вручает устройство с запущенным прототипом, объясняет, что нужно сделать и наблюдает за пользователем. Далее все тщательно конспектируется и в дальнейшем анализируется. Иногда для комментариев используется диктофон. Проведя множество тестов, можно делать выводы о том, насколько удачен выбранный опыт взаимодействия или какая гипотеза сработала лучше.
Существуют и специальные сервисы для удаленного usability-тестирования. Там прототипы запускаются на компьютерах пользователей и ведется видеозапись экрана с голосовыми комментариями испытуемых (иногда пишется видео с веб-камеры, так что вы можете даже видеть выражение лица и эмоции пользователя).
Инструменты UX–дизайнера
Задачи UI–дизайнера
UI дизайн включает в себя визуальную часть и определяет внешний вид и эстетический облик сайта. Это один из финальных этапов процесса разработки пользовательского интерфейса, когда мы работаем с очень точной версией. Круг задач очень широк и может посоперничать с дизайном опыта взаимодействия.
Подбор цветовой палитры
Цветовая палитра или цветовая схема — это набор базовых цветов, которые используются, как основа в дизайне. Помогает создавать целостные страницы, упрощает и значительно ускоряет работу, так как подбор нужно выполнить лишь один раз.
Обычно используется готовая палитра, которая опирается на фирменный стиль или рекламные материалы. Если таковых нет, то можно использовать логотип, чтобы получить несколько базовых цветов, а остальные подобрать самостоятельно. Если у клиента ничего нет, то всю цветовую схему вы делаете сами. Лучше заниматься созданием цветовой палитры после создания вайрфреймов, чтобы понимать какие элементы интерфейса и соответственно цвета вам понадобятся.
Когда создаете цветовой набор самостоятельно, то обратите внимание на цвета конкурентов и смежные области. Найдите как можно больше существующих примеров, составьте мудборд.
Есть множество сервисов для создания цветовых схем (Adobe Color, Coolors, Colormind, Colorhunt, Palettr), которые генерируют новый набор на основе лишь одного базового цвета или подгруженой вами картинки.
Работа с типографикой
Типографика — это правила, принципы и приемы оформления текста. Типографика является одним из разделов графического дизайна. Позволяет подать текст наиболее понятным образом для восприятия читателем. UI-дизайнер занимается подбором шрифтом, определяет размеры, начертания, расстояния между строками и символами. Определяет стили для заголовков, параграфов, списков и других элементов страницы. Далее несколько ключевых терминов из типографики.
Шрифт — это набор символов, оформленные в одном стиле и составляющие единую систему.
Гарнитура — это набор шрифтов, объединенные в одно семейство.
Кегль — это размер высоты буквы шрифта.
Интерлиньяж – это межстрочный интервал или расстояние между строками.
Более подробно с типографикой и ее основными принципами познакомимся через урок. А пока можете оценить насколько это сложная дисциплина по рисунку ниже.
Подбор, обработка иконок и изображений
Иконки – это простые и четкие образы (изображения) для ускорения понимания и восприятия информации. UI-дизайнеры часто используют готовые наборы иконок, которых существует великое множество (Fontawesome, Lineicons). Иногда иконки нужно править или перекрашивать. UI-дизайнер должен следить, чтобы все иконки были выдержаны в едином стиле.
Изображения используются для улучшения подачи и дополняют текст. Фотографии и иллюстрации обрезаются, подгоняются по размеру, проходят цветокоррекцию.
Существуют бесплатные и платные сайты для подбора иллюстраций и фотографий (Freepik, Unsplash, Shutterstock). UI-дизайнеры редко сами отрисовывают иконки и тем более иллюстрации. Это работа графического дизайнера.
Создание набора элементов интерфейса
UI-kit (читается юай-кит) или User Interface Kit — это набор элементов интерфейса для дальнейшей разработки страниц сайта. Набор будет разным для стартапа, блога и социальной сети. Самые распространенные элементы: кнопки, элементы навигации, поля ввода, выпадающие списки, переключатели, формы и так далее.
UI-kit в современных графических редакторах делается на основе компонентов. Это позволяет значительно ускорить внесение правок. Представьте себе ситуацию. У вас есть 20 отрисованных экранов. Внезапно заказчик захотел изменить скругление кнопок несмотря на все уговоры дизайнеров. Используя UI-кит на основе компонентов вам прийдется внести изменения лишь в одном месте, правки на всех страницах будут сделаны автоматически и мгновенно. Это ли не магия? Без компонентов (например, если вы используете Photoshop) вам прийдется пройтись по всем страницам и переделать каждую кнопочку вручную.
Отрисовка страниц
На основе созданной цветовой гаммы, типографики, сетки, UI-кита начинается отрисовка главных страниц. Если заказчик утверждает дизайн, то и все остальные страницы сайта берутся в работу.
Немного о самом процессе. Развею распространенный миф. UI-дизайнеры редко все придумывают сами с нуля. Чаще всего они ищут вдохновение на таких сайтах, как Behance и Dribbble, где лучшие коллеги из всего мира делятся своими работами. Это не значит, что все просто копируется, нет. Но дизайнер может подсмотреть какую-то деталь, удачное сочетание цветов, шрифтов, сетку, компоновку элементов. Таким образом, новый дизайн постепенно синтезируется из мировоззрения и вашего опыта, а также из уже существующих удачных решений. С наработкой проектов у вас постепенно сформируется свой неповторимый стиль с уникальными фишками. Но помните, на это потребуется очень много времени и усилий.
Mockup (читается мокап) — это дизайн отрисованной страницы. Также мокапом называют дизайн страницы или экрана, который вставлен в фотографию или иллюстрацию с устройством, на котором и предполагается его использование. Когда вы видите фото с ноутбуком и запущеным сайтом, то знайте, что это мокап.
Создание адаптивного и отзывчивого дизайна
Adaptive design (читается адаптив дизайн) или адаптивный дизайн — это проектирование сайта, компоновка которого меняется в зависимости от устройства (размера экрана), базируясь на нескольких макетах фиксированной ширины.
При разработке этого вида дизайна выделяются ключевые варианты отображения, между которыми происходит резкий переход. При изменении размера окна браузера сайт будет меняться «рывками» при переключении от одного отображения к другому. Каждое отображение может иметь уникальную компоновку.
Например, отображение для настольных компьютеров (где обычно используются большие мониторы) дизайн может включать правую колонку с дополнительной информацией. Отображение для смартфона будет попросту эту боковую колонку скрывать, так как экран узкий.
Responsive design (читается респонсив дизайн) или отзывчивый дизайн — это подвид адаптивного дизайна, в котором переходы между вариантами отображения плавные. При изменении размера окна браузера дизайн подстраивается словно «резиновый». При этом структура компоновки статична (боковые колонки не исчезают).
Инструменты UI–дизайнера
Все три программы замечательно справляются со всеми задачами UI-дизайнера. После изучения Figma вы быстро освоите остальные, чтобы заполучить больше клиентов.
Виды графики
Графические ресурсы делятся на растровые и векторные. Когда вы приступите к практике, вы увидите, как это влияет на работу. Сейчас же я могу лишь объяснить это в теории.
Векторная графика
Векторная графика описывает изображение с помощью математических формул, а точнее кривых Безье. Такое изображение не теряет качество при увеличении по сравнению с растром. В этом его главное преимущество. Используется в основном для логотипов, иконок, иллюстраций. Кстати, Figma, Sketch и Xd являются по большей мере векторными редакторами, но имеют минимальный набор функций для работы с растром.
Растровая графика
Растровая графика описывает изображение с помощью набора цветных точек. При увеличении такого изображения можно наблюдать пиксели — мельчайшие элементы квадратной формы. Используется для фотографий и иллюстраций с большим количеством цветов. Photoshop является самым мощным растровым редактором, хотя и умеет работать с векторными фигурами.
Если открыть растровое и векторное изображение в соответствующих редакторах и увеличить их, то мы увидим, что:
Задачи графического дизайнера
Сюда входит широкий круг задач, но я выделила лишь основные, которые пересекаются с UX/UI-дизайном:
В отличие от UX/UI дизайнера, графический дизайнер иногда использует дополнительное оборудование, например, графический планшет. Кроме того, художественное образование может сильно помочь в профессии.
Инструменты графического дизайнера
В зависимости от предпочтений и стилистики графического дизайнера может использоваться, как растровый, так и векторный редактор.
В списке нет Figma, Sketch и Xd, хотя они тоже позволяют работать с векторной графикой, рисовать иконки и иллюстрации (чего нам будет вполне достаточно для начала). А вот по работе с растром у этих программ очень серьезные ограничения. Вам доступны лишь обрезка фото, базовая цветокоррекция и маски.
Домашнее задание
Делайте фото ваших юзер флоу и присылайте в директ в Instagram @frusia.pro (не забудьте указать, что это к третьему уроку) или оставляйте ссылки здесь в комментариях под уроком (ссылки я позже заменю на картинки прямо в комментариях).
По каждому ответу дам фидбек, так вы убедитесь, что усвоили материал правильно.
Выводы
Вот мы и получили представление, с чем приходится сталкиваться UX/UI-дизайнеру в повседневной работе. Это был самый длинный и сложный урок с массой новых терминов. Пожалуйста, изучите его досконально и сделайте домашнее задание. Все это лишь теория, в следующий раз (урок выйдет через неделю) мы переходим к практике, а именно к изучению Figma. Обещаю, будет еще интереснее!