Как построить сайт для пользователей, а не для себя? Это один из главных вопросов, которые задают себе как агентства, так и клиенты в последние 10-ть лет

1. как построить сайт для пользователей, а не для себя
User eXperience design

2. Определение
Юзабилити является степенью эффективности,
продуктивности и удовлетворенности, с которой продукт
может использоваться определёнными пользователями
для достижения определённых задач в определённом
контексте.
ГОСТ ISO 9241-11

3. Кто такие UX-спецы?
- Не программисты: программисты подписывают у заказчика
непонятное ему ТЗ, выполняют работу, заказчик берется за голову,
программисты показывают ему подпись на ТЗ.
- Не дизайнеры: дизайнеры ориентируются на чувство вкуса, а не
измерения, торопятся «сделать красиво» вместо вникания в бизнес
клиента, дизайнеры не готовы обосновывать.
- Не маркетологи: маркетологи сфокусированы на привлечении, забывая
про удержание, прячутся за общим, вместо фокусирования на
конкретном, часто занимаются копированием конкурентов, вместо
решения потребностей.

4. Айсберг Юзабилити:
Из чего состоит работа по проектированию взаимодействия?
10% Внешний вид: макет, цвета,
изображения.
30% Функциональность: меню, кнопки,
управление.
60% Цели и задачи пользователя: действия,
навигация, объекты и взаимодействие между
ними, жизненный опыт, ожидания.

5. Как принято создавать веб-продукт?
Традиционный подход
ДИЗАЙН ПРОГРАММИРОВАНИЕ
1 2

6. Почему традиционный подход плох?
При создании любого продукта допускаются ошибки.
Традиционный подход в сотню раз повышает цену их исправления:
ЦЕНА ИСПРАВЛЕНИЯ ОШИБОК НА РАЗНЫХ ЭТАПАХ:
Стоимость исправления
ошибки минимальна

7. Как же правильно
создавать веб-продукт?

8. Как мы создаем веб-продукты?
Современный подход
ДИЗАЙН ПРОГРАММИРОВАНИЕ
2 3
ПРОЕКТИРОВАНИЕ
1

9. Как же правильно создавать продукт?
Начинаем с цели и стратегии

10. Цель и стратегия
Все начинается с цели. Сначала мы решаем что хотим сделать, а
потом — как это можно реализовать.
• В процессе работы над проектом, мы узнаем много новых нюансов и
подробностей. Поэтому менять цель и стратегию — это нормально.
• На начальном уровне мы не увлекаемся деталями.
• Забываем про технические ограничения.
• Думаем о том, зачем пришел пользователь.

11. Цель и стратегия
Разрабатываем пользовательские сценарии. Как будут
развиваться события внутри нашего проекта?
• Думаем, как улучшить существующий у пользователя опыт решения проблемы?
• Выделяем самые жизнеспособные идеи. Эскизы, раскадровки.
• Выбираем решения, на которые будем опираться

12. Изучаем своего пользователя и его среду
Цель и стратегия

13. Изучаем путь пользователя
Цель и стратегия

14. Наблюдаем
Цель и стратегия
Как задумал дизайнер Как решили пользователи

15. Переводим наработки в прототипы
ВЫБОР
ШАБЛОНОВ
СОЗДАНИЕ
ШАБЛОНОВ
ОПИСАНИЕ
ВЗАИМОДЕЙСТВИЯ

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

17. Переводим наработки в прототипы
Также мы знаем, как повысить доверие пользователей, привлечь
их внимание, подтолкнуть сделать первый шаг, а значит –
повысить конверсию.

18. К чему мы стремимся?
Результат работы программиста Результат работы UX-специалистов
Стараемся максимально сократить и упростить взаимодействие
пользователя с интерфейсом, чтобы эффективней погрузить его в
общение с предоставляемым сервисом.

19. Один мастер подбора тарифа
заменил 5 страниц с
описаниями деталей тарифов
Примеры прототипов

20. Примеры прототипов
Интерактивный прототип - http://projects.newstrategies.ua/UX/MSD/

21. Примеры прототипов
Интерактивный прототип - http://projects.newstrategies.ua/UX/Danone/

22. Примеры прототипов

23. Финальный этап – визуальный дизайн