Проектирование пользовательского опыта и тренды в...
DESCRIPTION
Презентация для стартапов в рамках Moscow Startup Day - 2014TRANSCRIPT
![Page 1: Проектирование пользовательского опыта и тренды в интерактивных коммуникациях. Рекомендации для](https://reader030.vdocuments.net/reader030/viewer/2022020218/557f4cc3d8b42ac3288b526e/html5/thumbnails/1.jpg)
Проектирование пользовательского опыта и тренды в интерактивных коммуникациях. Рекомендации для стартапов
Михаил Галушко Презентация для Moscow Startup Day - 2014
![Page 2: Проектирование пользовательского опыта и тренды в интерактивных коммуникациях. Рекомендации для](https://reader030.vdocuments.net/reader030/viewer/2022020218/557f4cc3d8b42ac3288b526e/html5/thumbnails/2.jpg)
Немного обо мнеМихаил Галушко Занимаюсь проектированием пользовательских интерфейсов
• Бизнес-аудит
• Юзабилити-экспертиза
• Пользовательский опыт
• Информационная архитектура
• Проектирование взаимодействия
• Интерактивные прототипы
• Контент-стратегия
• Концепция развития
• Консультационная поддержка
galushko.ru
![Page 3: Проектирование пользовательского опыта и тренды в интерактивных коммуникациях. Рекомендации для](https://reader030.vdocuments.net/reader030/viewer/2022020218/557f4cc3d8b42ac3288b526e/html5/thumbnails/3.jpg)
Темы к обсуждению
• Роль трендов в интерактивных коммуникациях
• Организация процессов проектирования
• Применение практик проектирования на примере стартапа
• Рекомендуемая литература
![Page 4: Проектирование пользовательского опыта и тренды в интерактивных коммуникациях. Рекомендации для](https://reader030.vdocuments.net/reader030/viewer/2022020218/557f4cc3d8b42ac3288b526e/html5/thumbnails/4.jpg)
Роль трендовв интерактивных коммуникациях
![Page 5: Проектирование пользовательского опыта и тренды в интерактивных коммуникациях. Рекомендации для](https://reader030.vdocuments.net/reader030/viewer/2022020218/557f4cc3d8b42ac3288b526e/html5/thumbnails/5.jpg)
• Cрок жизни тренда: 2-3 года
• Сайты стартапов традиционно используютнаиболее актуальные тренды
• Классический бизнес развивает свои сайты ориентируясь на опыт стартапов
![Page 6: Проектирование пользовательского опыта и тренды в интерактивных коммуникациях. Рекомендации для](https://reader030.vdocuments.net/reader030/viewer/2022020218/557f4cc3d8b42ac3288b526e/html5/thumbnails/6.jpg)
Примеры трендов
![Page 7: Проектирование пользовательского опыта и тренды в интерактивных коммуникациях. Рекомендации для](https://reader030.vdocuments.net/reader030/viewer/2022020218/557f4cc3d8b42ac3288b526e/html5/thumbnails/7.jpg)
Large Hero Areas – большое графическое или видео-изображение при входе на сайт
![Page 8: Проектирование пользовательского опыта и тренды в интерактивных коммуникациях. Рекомендации для](https://reader030.vdocuments.net/reader030/viewer/2022020218/557f4cc3d8b42ac3288b526e/html5/thumbnails/8.jpg)
Плоский дизайн и простые цветовые схемы – сплошные цвета и никакого скевоморфизма
![Page 9: Проектирование пользовательского опыта и тренды в интерактивных коммуникациях. Рекомендации для](https://reader030.vdocuments.net/reader030/viewer/2022020218/557f4cc3d8b42ac3288b526e/html5/thumbnails/9.jpg)
UX-ориентированная навигация –качественный пользовательский опыт определяет все решения на сайте
![Page 10: Проектирование пользовательского опыта и тренды в интерактивных коммуникациях. Рекомендации для](https://reader030.vdocuments.net/reader030/viewer/2022020218/557f4cc3d8b42ac3288b526e/html5/thumbnails/10.jpg)
Эксперименты и инновации в навигации – отказ от шаблонных решений и сценариев в пользу «вау-эффекта»
![Page 11: Проектирование пользовательского опыта и тренды в интерактивных коммуникациях. Рекомендации для](https://reader030.vdocuments.net/reader030/viewer/2022020218/557f4cc3d8b42ac3288b526e/html5/thumbnails/11.jpg)
Легкость и простота восприятия контента
![Page 12: Проектирование пользовательского опыта и тренды в интерактивных коммуникациях. Рекомендации для](https://reader030.vdocuments.net/reader030/viewer/2022020218/557f4cc3d8b42ac3288b526e/html5/thumbnails/12.jpg)
Унификация обычной и мобильной версий – весь контент всегда доступен для всех пользователей независимо от устройства
![Page 14: Проектирование пользовательского опыта и тренды в интерактивных коммуникациях. Рекомендации для](https://reader030.vdocuments.net/reader030/viewer/2022020218/557f4cc3d8b42ac3288b526e/html5/thumbnails/14.jpg)
• Тренды мешают развивать узнаваемость
• Коммуникационная эффективность тренда зачастую противоречит бизнес-эффективности
• Применение трендов требует тестирования
![Page 15: Проектирование пользовательского опыта и тренды в интерактивных коммуникациях. Рекомендации для](https://reader030.vdocuments.net/reader030/viewer/2022020218/557f4cc3d8b42ac3288b526e/html5/thumbnails/15.jpg)
Сайт Virgin America как пример использования актуальных трендов
![Page 16: Проектирование пользовательского опыта и тренды в интерактивных коммуникациях. Рекомендации для](https://reader030.vdocuments.net/reader030/viewer/2022020218/557f4cc3d8b42ac3288b526e/html5/thumbnails/16.jpg)
Практика применения трендов
![Page 17: Проектирование пользовательского опыта и тренды в интерактивных коммуникациях. Рекомендации для](https://reader030.vdocuments.net/reader030/viewer/2022020218/557f4cc3d8b42ac3288b526e/html5/thumbnails/17.jpg)
Три версии анкетыV H T
![Page 18: Проектирование пользовательского опыта и тренды в интерактивных коммуникациях. Рекомендации для](https://reader030.vdocuments.net/reader030/viewer/2022020218/557f4cc3d8b42ac3288b526e/html5/thumbnails/18.jpg)
Общие показателиСтраница Трафик Конверсия (%)
V 280 10
H 453 7,73
T 377 6,37
P-value 0,006
![Page 19: Проектирование пользовательского опыта и тренды в интерактивных коммуникациях. Рекомендации для](https://reader030.vdocuments.net/reader030/viewer/2022020218/557f4cc3d8b42ac3288b526e/html5/thumbnails/19.jpg)
Общие показатели
0
2,5
5
7,5
10
Конверсия
10%
7,7%H
V
6,37%T
![Page 20: Проектирование пользовательского опыта и тренды в интерактивных коммуникациях. Рекомендации для](https://reader030.vdocuments.net/reader030/viewer/2022020218/557f4cc3d8b42ac3288b526e/html5/thumbnails/20.jpg)
ОшибкиСтраница Процент возникновения
ошибок
V 11,91%
H 24,72%
T 32%
Основные ошибки на форме H возникали на поле ФИО.Пользователи не проходили валидацию, т.к. пытались вводить теряли либо Фамилию либо Отчество.
![Page 21: Проектирование пользовательского опыта и тренды в интерактивных коммуникациях. Рекомендации для](https://reader030.vdocuments.net/reader030/viewer/2022020218/557f4cc3d8b42ac3288b526e/html5/thumbnails/21.jpg)
Конкретизация ошибок на формах
Ошибка Почта Доход Стаж более года
Более 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 вызвано тем, что ошибка срабатывает тогда, когда пользователь снимает фокус с поля. А учитывая, что многие пользователи пробегаются по полям перед тем как заполнить, то пользователь получает большой спектр ошибок.
![Page 22: Проектирование пользовательского опыта и тренды в интерактивных коммуникациях. Рекомендации для](https://reader030.vdocuments.net/reader030/viewer/2022020218/557f4cc3d8b42ac3288b526e/html5/thumbnails/22.jpg)
Распределение вниманияH T
![Page 23: Проектирование пользовательского опыта и тренды в интерактивных коммуникациях. Рекомендации для](https://reader030.vdocuments.net/reader030/viewer/2022020218/557f4cc3d8b42ac3288b526e/html5/thumbnails/23.jpg)
Почему проиграла версия T?
На странице T у нас есть сценарий, при котором в момент взаимодействия мы отказываем пользователям в кредите. Таких пользователей получилось 85. Идеальный способ для повышения качества входящих лидов.
![Page 24: Проектирование пользовательского опыта и тренды в интерактивных коммуникациях. Рекомендации для](https://reader030.vdocuments.net/reader030/viewer/2022020218/557f4cc3d8b42ac3288b526e/html5/thumbnails/24.jpg)
Где мы теряли пользователей?
![Page 25: Проектирование пользовательского опыта и тренды в интерактивных коммуникациях. Рекомендации для](https://reader030.vdocuments.net/reader030/viewer/2022020218/557f4cc3d8b42ac3288b526e/html5/thumbnails/25.jpg)
Где мы теряли пользователей?
![Page 26: Проектирование пользовательского опыта и тренды в интерактивных коммуникациях. Рекомендации для](https://reader030.vdocuments.net/reader030/viewer/2022020218/557f4cc3d8b42ac3288b526e/html5/thumbnails/26.jpg)
Где мы теряли пользователей?
![Page 27: Проектирование пользовательского опыта и тренды в интерактивных коммуникациях. Рекомендации для](https://reader030.vdocuments.net/reader030/viewer/2022020218/557f4cc3d8b42ac3288b526e/html5/thumbnails/27.jpg)
Приняли решение объединить версии V и H
![Page 28: Проектирование пользовательского опыта и тренды в интерактивных коммуникациях. Рекомендации для](https://reader030.vdocuments.net/reader030/viewer/2022020218/557f4cc3d8b42ac3288b526e/html5/thumbnails/28.jpg)
![Page 29: Проектирование пользовательского опыта и тренды в интерактивных коммуникациях. Рекомендации для](https://reader030.vdocuments.net/reader030/viewer/2022020218/557f4cc3d8b42ac3288b526e/html5/thumbnails/29.jpg)
Что мы поняли по итогам тестирования:
• Трендовая версия показала отличное вовлечение пользователей
• Трендовая версия давала наиболее качественную аудиторию
• Когда важнее количество заявок, а не их качество, трендовая версия проиграла классическим решениям
![Page 30: Проектирование пользовательского опыта и тренды в интерактивных коммуникациях. Рекомендации для](https://reader030.vdocuments.net/reader030/viewer/2022020218/557f4cc3d8b42ac3288b526e/html5/thumbnails/30.jpg)
Процессы проектированияс ориентацией на пользователя
![Page 31: Проектирование пользовательского опыта и тренды в интерактивных коммуникациях. Рекомендации для](https://reader030.vdocuments.net/reader030/viewer/2022020218/557f4cc3d8b42ac3288b526e/html5/thumbnails/31.jpg)
Как это работает в агентствах
![Page 32: Проектирование пользовательского опыта и тренды в интерактивных коммуникациях. Рекомендации для](https://reader030.vdocuments.net/reader030/viewer/2022020218/557f4cc3d8b42ac3288b526e/html5/thumbnails/32.jpg)
Бизнес-аудит• Собирается вся доступная информация о проекте и стоящих перед ним задачах.
• Интервьюирование руководителей направлений в компании заказчика
• Сбор и анализ информационно-аналитических материалов, презентаций заказчика, статистика и т.п.
• Изучение открытых источников по теме
![Page 33: Проектирование пользовательского опыта и тренды в интерактивных коммуникациях. Рекомендации для](https://reader030.vdocuments.net/reader030/viewer/2022020218/557f4cc3d8b42ac3288b526e/html5/thumbnails/33.jpg)
Стратегия• Формулируются коммуникационные и бизнес-цели (или операционные цели) будущего сайта или сервиса
• Конструируются инструменты, которые будут применяться для достижения установленных целей
• В итоге появляется концепция продукта
![Page 34: Проектирование пользовательского опыта и тренды в интерактивных коммуникациях. Рекомендации для](https://reader030.vdocuments.net/reader030/viewer/2022020218/557f4cc3d8b42ac3288b526e/html5/thumbnails/34.jpg)
Аналитика
• Прорабатываются особенности целевой аудитории (персонажей)
• Проектируются сценарии взаимодействия
• Готовится вся необходимая документация, которой будут руководствоваться в дальнейшем проектировщики и разработчики
![Page 35: Проектирование пользовательского опыта и тренды в интерактивных коммуникациях. Рекомендации для](https://reader030.vdocuments.net/reader030/viewer/2022020218/557f4cc3d8b42ac3288b526e/html5/thumbnails/35.jpg)
Проектирование и дизайн
• Разработка концептуальных прототипов и концепции дизайн
• Тестирование концепции
• Детальное проектирование
• Дизайн, верстка и разработка
![Page 37: Проектирование пользовательского опыта и тренды в интерактивных коммуникациях. Рекомендации для](https://reader030.vdocuments.net/reader030/viewer/2022020218/557f4cc3d8b42ac3288b526e/html5/thumbnails/37.jpg)
• Есть складские площади в Америке
• Есть возможность регистрации виртуальных почтовых адресов
• Есть возможность организовать авиадоставку
![Page 38: Проектирование пользовательского опыта и тренды в интерактивных коммуникациях. Рекомендации для](https://reader030.vdocuments.net/reader030/viewer/2022020218/557f4cc3d8b42ac3288b526e/html5/thumbnails/38.jpg)
Как из этих вводных сделать прибыльный интернет-бизнес?
![Page 39: Проектирование пользовательского опыта и тренды в интерактивных коммуникациях. Рекомендации для](https://reader030.vdocuments.net/reader030/viewer/2022020218/557f4cc3d8b42ac3288b526e/html5/thumbnails/39.jpg)
• Сайты конкурентов выглядели так, словно были сделаны 10 лет назад.
• Мы предложили ориентироваться на наиболее актуальные тренды на тот момент.
![Page 40: Проектирование пользовательского опыта и тренды в интерактивных коммуникациях. Рекомендации для](https://reader030.vdocuments.net/reader030/viewer/2022020218/557f4cc3d8b42ac3288b526e/html5/thumbnails/40.jpg)
• Конкуренты имели невнятную ценовую политику с массой дополнительных условий
• Мы все упростили: 19 долларов за килограмм, все остальное опции
![Page 41: Проектирование пользовательского опыта и тренды в интерактивных коммуникациях. Рекомендации для](https://reader030.vdocuments.net/reader030/viewer/2022020218/557f4cc3d8b42ac3288b526e/html5/thumbnails/41.jpg)
• Процесс получения заказа и последующей доставки у конкурентов не был понятен и прозрачен
• Мы разработали весь бизнес-процесс, каждая стадия которого отображалась в личном кабинете пользователя
![Page 42: Проектирование пользовательского опыта и тренды в интерактивных коммуникациях. Рекомендации для](https://reader030.vdocuments.net/reader030/viewer/2022020218/557f4cc3d8b42ac3288b526e/html5/thumbnails/42.jpg)
Пример проектирования бизнес-процесса
![Page 43: Проектирование пользовательского опыта и тренды в интерактивных коммуникациях. Рекомендации для](https://reader030.vdocuments.net/reader030/viewer/2022020218/557f4cc3d8b42ac3288b526e/html5/thumbnails/43.jpg)
Проработка деталей (одна из версий)
![Page 44: Проектирование пользовательского опыта и тренды в интерактивных коммуникациях. Рекомендации для](https://reader030.vdocuments.net/reader030/viewer/2022020218/557f4cc3d8b42ac3288b526e/html5/thumbnails/44.jpg)
Разработка прототипов и спецификаций
![Page 45: Проектирование пользовательского опыта и тренды в интерактивных коммуникациях. Рекомендации для](https://reader030.vdocuments.net/reader030/viewer/2022020218/557f4cc3d8b42ac3288b526e/html5/thumbnails/45.jpg)
Разработка дизайна и программирование
![Page 46: Проектирование пользовательского опыта и тренды в интерактивных коммуникациях. Рекомендации для](https://reader030.vdocuments.net/reader030/viewer/2022020218/557f4cc3d8b42ac3288b526e/html5/thumbnails/46.jpg)
• Сайт сразу показал высокую конверсию в регистрации
• Высокая доля повторного использования сервиса
• Немалую роль сыграла поддержка пользователей в онлайн-каналах и быстрый ответ на их запросы
• Этот бизнес существует уже 2 года и продолжает развиваться
![Page 47: Проектирование пользовательского опыта и тренды в интерактивных коммуникациях. Рекомендации для](https://reader030.vdocuments.net/reader030/viewer/2022020218/557f4cc3d8b42ac3288b526e/html5/thumbnails/47.jpg)
Рекомендуемая литературапо проектированию для стартапов
![Page 48: Проектирование пользовательского опыта и тренды в интерактивных коммуникациях. Рекомендации для](https://reader030.vdocuments.net/reader030/viewer/2022020218/557f4cc3d8b42ac3288b526e/html5/thumbnails/48.jpg)
• Marcin Treder UX Design for Startups
• Jeff Gothelf, Josh Seiden Lean UX
• 50 User Experience Best Practices by Above the Fold
![Page 49: Проектирование пользовательского опыта и тренды в интерактивных коммуникациях. Рекомендации для](https://reader030.vdocuments.net/reader030/viewer/2022020218/557f4cc3d8b42ac3288b526e/html5/thumbnails/49.jpg)
• Алан Купер Психбольница в руках пациентов
• Алан Купер об интерфейсе. Основы проектирования взаимодействия
• Мальком Гладуэлл Переломный момент Как незначительные изменения приводят к глобальным переменам
• Робин Вильямс Дизайн для недизайнеров
• Дон Бек, Крис Кован Спиральная динамика. Управляя ценностями, лидерством и изменениями в XXI веке
![Page 50: Проектирование пользовательского опыта и тренды в интерактивных коммуникациях. Рекомендации для](https://reader030.vdocuments.net/reader030/viewer/2022020218/557f4cc3d8b42ac3288b526e/html5/thumbnails/50.jpg)
Cпасибо за внимание