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

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

Михаил Галушко Презентация для Moscow Startup Day - 2014

Немного обо мнеМихаил Галушко Занимаюсь проектированием пользовательских интерфейсов

• Бизнес-аудит

• Юзабилити-экспертиза

• Пользовательский опыт

• Информационная архитектура

• Проектирование взаимодействия

• Интерактивные прототипы

• Контент-стратегия

• Концепция развития

• Консультационная поддержка

galushko.ru

Темы к обсуждению

• Роль трендов в интерактивных коммуникациях

• Организация процессов проектирования

• Применение практик проектирования на примере стартапа

• Рекомендуемая литература

Роль трендовв интерактивных коммуникациях

• Cрок жизни тренда: 2-3 года

• Сайты стартапов традиционно используютнаиболее актуальные тренды

• Классический бизнес развивает свои сайты ориентируясь на опыт стартапов

Примеры трендов

Large Hero Areas – большое графическое или видео-изображение при входе на сайт

Плоский дизайн и простые цветовые схемы – сплошные цвета и никакого скевоморфизма

UX-ориентированная навигация –качественный пользовательский опыт определяет все решения на сайте

Эксперименты и инновации в навигации – отказ от шаблонных решений и сценариев в пользу «вау-эффекта»

Легкость и простота восприятия контента

Унификация обычной и мобильной версий – весь контент всегда доступен для всех пользователей независимо от устройства

www.awwwards.com все актуальные тренды здесь

• Тренды мешают развивать узнаваемость

• Коммуникационная эффективность тренда зачастую противоречит бизнес-эффективности

• Применение трендов требует тестирования

Сайт Virgin America как пример использования актуальных трендов

Практика применения трендов

Три версии анкетыV H T

Общие показателиСтраница Трафик Конверсия (%)

V 280 10

H 453 7,73

T 377 6,37

P-value 0,006

Общие показатели

0

2,5

5

7,5

10

Конверсия

10%

7,7%H

V

6,37%T

ОшибкиСтраница Процент возникновения

ошибок

V 11,91%

H 24,72%

T 32%

Основные ошибки на форме H возникали на поле ФИО.Пользователи не проходили валидацию, т.к. пытались вводить теряли либо Фамилию либо Отчество.

Конкретизация ошибок на формах

Ошибка Почта Доход Стаж более года

Более 4 месяцев ФИО Телефон Даю

согласие Возраст

V 19 35 43 21 6 5 14 7

H 49 26 14 16 19 13 - -

T 27 27 14 13 18 10 - -

Общее 95 88 71 50 43 28 14 7

Обилие ошибок на форме H вызвано тем, что ошибка срабатывает тогда, когда пользователь снимает фокус с поля. А учитывая, что многие пользователи пробегаются по полям перед тем как заполнить, то пользователь получает большой спектр ошибок.

Распределение вниманияH T

Почему проиграла версия T?

На странице T у нас есть сценарий, при котором в момент взаимодействия мы отказываем пользователям в кредите. Таких пользователей получилось 85. Идеальный способ для повышения качества входящих лидов.

Где мы теряли пользователей?

Где мы теряли пользователей?

Где мы теряли пользователей?

Приняли решение объединить версии V и H

Что мы поняли по итогам тестирования:

• Трендовая версия показала отличное вовлечение пользователей

• Трендовая версия давала наиболее качественную аудиторию

• Когда важнее количество заявок, а не их качество, трендовая версия проиграла классическим решениям

Процессы проектированияс ориентацией на пользователя

Как это работает в агентствах

Бизнес-аудит• Собирается вся доступная информация о проекте и стоящих перед ним задачах.

• Интервьюирование руководителей направлений в компании заказчика

• Сбор и анализ информационно-аналитических материалов, презентаций заказчика, статистика и т.п.

• Изучение открытых источников по теме

Стратегия• Формулируются коммуникационные и бизнес-цели (или операционные цели) будущего сайта или сервиса

• Конструируются инструменты, которые будут применяться для достижения установленных целей

• В итоге появляется концепция продукта

Аналитика

• Прорабатываются особенности целевой аудитории (персонажей)

• Проектируются сценарии взаимодействия

• Готовится вся необходимая документация, которой будут руководствоваться в дальнейшем проектировщики и разработчики

Проектирование и дизайн

• Разработка концептуальных прототипов и концепции дизайн

• Тестирование концепции

• Детальное проектирование

• Дизайн, верстка и разработка

Практика проектированияна примере проекта mainbox.com

• Есть складские площади в Америке

• Есть возможность регистрации виртуальных почтовых адресов

• Есть возможность организовать авиадоставку

Как из этих вводных сделать прибыльный интернет-бизнес?

• Сайты конкурентов выглядели так, словно были сделаны 10 лет назад.

• Мы предложили ориентироваться на наиболее актуальные тренды на тот момент.

• Конкуренты имели невнятную ценовую политику с массой дополнительных условий

• Мы все упростили: 19 долларов за килограмм, все остальное опции

• Процесс получения заказа и последующей доставки у конкурентов не был понятен и прозрачен

• Мы разработали весь бизнес-процесс, каждая стадия которого отображалась в личном кабинете пользователя

Пример проектирования бизнес-процесса

Проработка деталей (одна из версий)

Разработка прототипов и спецификаций

Разработка дизайна и программирование

• Сайт сразу показал высокую конверсию в регистрации

• Высокая доля повторного использования сервиса

• Немалую роль сыграла поддержка пользователей в онлайн-каналах и быстрый ответ на их запросы

• Этот бизнес существует уже 2 года и продолжает развиваться

Рекомендуемая литературапо проектированию для стартапов

• Marcin Treder UX Design for Startups

• Jeff Gothelf, Josh Seiden Lean UX

• 50 User Experience Best Practices by Above the Fold

• Алан Купер Психбольница в руках пациентов

• Алан Купер об интерфейсе. Основы проектирования взаимодействия

• Мальком Гладуэлл Переломный момент Как незначительные изменения приводят к глобальным переменам

• Робин Вильямс Дизайн для недизайнеров

• Дон Бек, Крис Кован Спиральная динамика. Управляя ценностями, лидерством и изменениями в XXI веке

Cпасибо за внимание