UX процесс (план)

Здесь описан не полностью процесс, а небольшой план процесса UX, перетекающий в UI. Но, к сожалению, не бывает универсальной таблетки (ЖАЛЬ), по этому план придется адаптировать под каждый проект индивидуально.

Немного терминологии простым языком:

Интерфейс - это мост между пользователем и контентом; среда, через которую пользователь получает информацию. Среда формирует опыт взаимодействия, опыт можно использовать.
UI - это визуальный дизайн. Форма, эстетика, внешний вид, язык, настроение.
UX - не визуальный дизайн. Изложение текста, навигация, структура, контент, удобство.

Важно!! не забывать, что на этапе UX мы не принимает никаких дизайн-решений (UI), мы только создаем структуру и вписываем в нее контент. Подходим к дизайну с точки зрения организации системы.

• Идея
• Стратегия
• Целевая аудитория
• Краткое описание требований
• Контентный план
• Карты (User flow и Content map)
  
• Карта сайта (сервиса или приложения)
  
• Каркасы (Wireframes)
  
• Прототип (Wireframe prototype)
  
• Дизайн UI
  
• UI макеты и прототип (Visual Prototype)
  

а. Какую проблему вы решаете?

б. Каковы ваши конкуренты (аналогичные, похожие или контент-смежные приложения)?

в. Что будет делать ваше приложение/сайт/интерфейс?

г. Название приложения, слоган и миссия

а. Какая цель у приложение/сайта/интерфейса? Что он хочет достичь?

б. Потребности пользователей

в. Потребности бизнеса

г. Какие технологии будут использованы?

д. Waterfall или Agile? Сравнение этих методов можно почитать здесь

а. Кому выгодно мое приложение/сайт/интерфейс? (например, моё приложение поможет людям, которые хотят накопить деньги)

б. Роли (группы с похожими чертами личности и целями). Назначьте ключевое слово для каждой роли: например, «Политический» для пользователей, которые хотят экономить на еде, «Функциональный» для тех, кто хочет сэкономить время и т. д. Эти ключевые слова помогают с дизайном и языком.

в. Демография

г. Психография (ценности, хобби)

д. Персоны (собирательный образ пользователя)

Трансформируем цели, учитывая с конкретные требования веб-сайта.

а. Список требований к содержанию

б. Список функциональных требований

а. Основные категории контента

а. Создаем основные пути пользователя (User flow). Это карта похожа на блок-схему, на которой можно увидеть весь путь пользователя по разным направлениям. Она также влияет на контент.

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

Если ваше приложение/сайт не очень сложное, то можно соединить эти карты в одну.

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

а. Определить основные категории контента

б. Определить структуру сайта и навигационного меню

с. Определить структуру веб-форм

д. Элементы карты сайта

е. Протестируйте и скорректируйте при необходимости. Инструмент для тестирования карты сайт здесь

Каркасы — это визуальная структура страниц. На этом этапе мы все еще не думаем о дизайне.

а. Создать общие элементы сайта/приложения (хэдер, футер, меню, боковая/ нижняя панель, контент)

б. Задать общие элементы формы (фио, телефон, согласие на обработку, кнопка)

с. Стратегия подачи домашней страницы

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

Помните 2.0. Мы всегда создаем 2 версии сайта (web & mobile).

а. Путь, который проходит пользователь

а. Создаем доску настроения (Mood board).

б. Фундаментальные элементы UI (их 5 пять, более подробно тут)

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

– Цвет (он не является субъективной метрикой, а передает пользователю настроение, также он имеет вес и толщину. С помощью цвета можно показать определенную культуру и поведение) Используя все это, можно влиять на поведение пользователя. Активный/неактивный цвет лучше задать заранее, он должен быть интуитивно понятный пользователю.

– Изображения (они могут быть различными по стилю, но независимо от этого изображения передают общее настроение в интерфейсе)

– Типографика

– Иконки и символы

с. UI компоненты. Если вы новичок, то сначала можно изучить все UI элементы.

– Стиль UI

– Библиотека шаблонов

– Навигация

– Элементы взаимодействия

а. Гладкая анимация, которая соответствует законам физики и интуитивно привлекает внимание к элементу

б. Незагроможденный чистый дизайн

в. Умное использование пустого пространства, которое вызывает у пользователя чувство спокойствия

а. Работающий функциональный прототип для тестирования дизайна

б. Не обязан быть полноценным продуктом

а. Тестирование на ошибки

б. Юзабилити тестирование

в. Тестирование на пользователях

а. Составление ТЗ

б. Передача в разработку

в. Авторский надзор

Забирайте себе этот план, модифицируйте под свой проект и используйте в работе.