UX курс | Wireframe & Прототипы

UX Дизайн. Wireframes.

Wireframes (вайрфреймы) — это организация полного функционала конечного продукта,
в виде структуры с представлением
элементов интерфейса и навигации,
их взаимодействия друг с другом.

ОСНОВНОЕ ПРАВИЛО:

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

Wireframes фокусируется на том, как экраны взаимодействуют между собой, а не на то, как они выглядят.

Опасно избегать этап создания вайрфреймов

Команды разработчиков и проектировщиков часто пропускают этот этап, чтобы как можно быстрее выпустить продукт

Вайрфреймы - самый действенный способ для того, чтобы подтвердить обоснованность ваших идей!

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

ЭТО ГЛАВНЫЙ ШАГ!

ПРИНЦИПЫ СОЗДАНИЯ:

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

wireframing — это прежде всего пользовательский путь. История, которую вы доносите до пользователя должна быть простая и удобная.

ЧТО МЫ ДОЛЖНЫ ПОКАЗАТЬ?

ПОКАЗАТЬ ОСНОВНУЮ ГРУППУ КОНТЕНТА

ПОКАЗАТЬ СТРУКТУРУ ИНФОРМАЦИИ

ОПИСАНИЕ И БАЗОВАЯ ВИЗУАЛИЗАЦИЯ ВЗАИМОДЕЙСТВИЯ МЕЖДУ ИНТЕРЬФЕЙСОМ И ЮЗЕРОМ

Максимально
упрощенная эстетика

Хорошо созданный вайрфрейм изображает дизайн предельно точным образом и прокладывает дорогу для всей команды.

C чего начинаем?

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

Шаг 1. Скетч

Шаг 2. Сетка

Шаг 3. Расположение элементов

Шаг 4. Иерархия элементов

Шаг 5. Акценты полутонами

Шаг 6. Детализация

Шаг 7. Создание UI дизайна

Для чего?

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

Прототип может визуально отличаться от готового продукта. Самое главное в прототипе это то, что он является рабочим инструментом для проверки гипотез и логики, отработки пользовательских сценариев.

То есть прототип должен быть кликабельным.

Основные принципы, применяемые
при создании прототипа!

Прототип создается только после того как определена персона, расписаны все сценарии поведения.

Сценарии

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

Кликаем!

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

Не объяснять

При тестировании прототипа необходимо давать минимум информации потенциальному пользователю. Причина проста – чем больше он «наломает дров», тем лучше для продукта, так надо тестировать, а не валидировать сценарии.

Проверяй!

Проверять все, даже если есть уверенность в том или ином функционале будущего продукта.

Не отвлекай

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

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

🚀

Результат?