User Experience Design (UX design) “Проектирование взаимодействий с пользователем”.

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

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

Для примера прилагаю скрин одного из макетов.

Программ для проектирования очень много, мы используем Axure RP Pro — там все просто!

Примеры проекта:

Макет главной страницы:

проект 1

 

Пример реализации макета главной страницы:

реализация 1

 

 Макет страницы каталога:

проект 2

 

 

 Пример реализации макета страницы каталога:

реализация 2

 

 

Макет карточки товара:

проект 3

 

 

Пример реализации макета карточки товара:

реализация 3

 

Зачем тратить время зря.. или не зря?

Преимущества проектного подхода:

  • Сильно повышает гарантию достижения результата.
  • Экономит время и деньги.
  • Позволяет эффективно разделять работу.

“UX дизайн — это научное обоснование здравого смысла”

Основные этапы проектирования:

  • Определение целей проекта и клиента
  • Исследование сферы деятельности
  • Создание смысловой концепции сайта
  • Моделирование интерфейсов и поведения пользователей

Рассмотрим каждый из этапов немного подробнее:

Определение целей проекта и клиента

  • Цели инициатора проекта?
  • Подробное интервью
  • Целевая аудитория
  • Конкуренты
  • Определение компетентности и ответственности инициатора проекта

Исследование сферы деятельности

  • Составление ядра ЦА
  • Интервью представителей ЦА
  • Выявление задач ЦА, проблем и их решений
  • Исследование конкурентов
  • Сценарии поведения

Создание концепции

  • Составление “оглавления сайта”
  • Описание разделов на перспективу
  • Описание дополнительного функционала
  • Письменное описание проекта

Этапы моделирования

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

Терминология

Sketch (набросок, эскиз)
Wireframe (блок-схема)
Prototype (прототип)
Simulation (симулякр, полнофункцональный прототип)
Mockup или mock-up (макет)