UX-design: main life hacks every engineer should know Nick explained how beautiful design can be even worse than ugly one and explain: • what is UX and where is its place in the design • what is the difference between usability and UX • what are the levels and stages of the UX • what tools and techniques are used in the UX

1. Хитрости UX-дизайна
Главные лайфхаки, которые должен
знать любой разработчик

2. Дизайн – это не то, как предмет
выглядит, а то, как он работает.
Стив Джобс

3. Хороший дизайн:
1.Инновационный
2.Делает продукт полезным
3.Эстетичен
4.Помогает продукту быть понятным
5.Ненавязчив
6.Честен
7.Надёжен
8.Продуман до мельчайших деталей
9.Беспокоится об окружающей среде
10. Хороший дизайн — это как можно
меньше дизайна
Дитер Рамс, проектировщик Braun
«10 правил хорошего дизайна»

4. UX = User eXperience
(пользовательский опыт)
— это ощущения, возникающие у человека при
непосредственном взаимодействии с объектами
окружающего мира. В более узком смысле, опыт
взаимодействия характеризует личное восприятие
человеком функциональных и эмоциональных
характеристик продукта или услуги в процессе
использования.
Wikipedia

5. UX не рождается в голове дизайнера, его формируют
пользователи

6. UX – не графический
дизайн или
интерфейс
UX – то, что
пользователь
ощущает, когда им
пользуется

7. UX – преобладание практики над теорией. Решения
UX-дизайнера должны базироваться на рациональном
фундаменте.
Поэтому…
UX должен измеряться. Будь то количество
пользователей, которые произвели ключевое действие
или количество уникальных пользователей, которые
заходят ежедневно в личный кабинет, добавляют
контент, удовлетворены работой с продуктом.
UX без метрики не существует.

8. UX должен измеряться

9. UX должен измеряться

10. Инструменты:
1. Google Analytics (http://www.google.com/analytics/)
2. Yandex.Metrika (https://metrika.yandex.ua)
3. Piwik (http://piwik.org/)
4. Clicky (http://clicky.com/)
5. Отчеты из базы данных ресурса
6. NPS http://www.npscalculator.com/
UX должен измеряться

11. Место UX
? ?
?

12. Место UX
UX

13. UI / Usability / UX
UI
Функция: Она работает
Usability
Действие: Оно хорошо работает
UX
Эмоции: Оно хорошо работает и заставляет воскликнуть «Вау!»

14. Дж. Гаррета
Визуальный (графический) дизайн
Дизайн интерфейса Дизайн навигации
Проектирование
взаимодействия
Информационная
архитектура
Функции (фичи) Требования контента
Описывает бизнес цели, цели пользователей, что будет
мерилом успеха
Список функциональности, тип контента – всё, что
необходимо для удовлетворения потребностей
пользователей
Структура (страницы) продукта, иерархия, пути
использования продукта пользователями
Вид / представление информации, элементы навигации
по структуре продукта, представление контента
Визуальное / графическое представление каждого
элемента продукта
5 уровней UX
Информационный дизайн
Потребности пользователей
Цели сайта

15. User Experience = Experience
И ТОЧКА!

16. Персонаж – это архетип пользователя, представляющий
определенную поведенческую модель.

17. Персонаж
Социально-демографические данные1
Психологический профиль и поведение2
Кто и как влияет на персонажа3
Архетип и ключевая цитата
персонажа
4
Опыт работы с технологиями (кроме устройств)5
UX ожидания6
Использование устройств и платформ7
Сфера использования устройств8
Должен делать / Не должен делать (в рамках
продукта)
9
Отношение к бренду / продукту, конкурентам10
Стиль жизни+

18. Персонаж

19. Сценарии взаимодействия

20. Как получить необходимую информацию?

21. Сформируйте одну цель для
опроса, не распыляйте;
Используйте онлайн опросы;
Старайтесь проводить опросы на
своей аудитории;
Опросы
Не перестарайтесь с количеством
вопросов;
Измеряйте результаты.

22. Заранее готовьте вопросы;
Задавайте открытые вопросы;
Во время интервью один беседует,
другой записывает;
Интервью
Общайтесь с вашей аудиторией;
Не бойтесь остановить
респондента, если при ответе
ушел в сторону.

23. A/B тестирование (split)
Ставьте конкретную цель;
Не плодите много вариантов за
один тест;
Заранее продумайте необходимые
данные, которые нужны для
определения эффективности теста;
Не делайте преждевременные
выводы;
Не упускайте из виду
второстепенную статистику;
Источники траффика должны быть
одинаковыми для всех вариантов;
Результат должен выражаться в
числах (% конверсии).

24. Привлекайте как можно меньше
модераторов (один моделирует
действия, другой записывает);
Просите их комментировать свои
действия;
Обращайте больше внимание на то,
что делают, а не говорят;
Расслабьте респондента;
Пользовательское (юзабилити) тестирование
Тестируйте существующий продукт
или прототип;
Приблизьте тестирование к
максимально реальной ситуации
респондента;
Давайте задания респонденту;
Не подсказывайте, а спросите про
ожидания.

25. Этапы UX
Empathize
Define
Ideate
Prototype
Test
Evaluate

26. Мифы о дизайне

27. Пользователи не скроллят.
Нужно главное размещать в первом экране
1

28. Пользователь должен достичь цели за 3 клика2
S1E4 Shock Therapy

29. Главная страница - самая важная3

30. Пользователь читает весь текст,
что вы написали
4

31. Зеленая кнопка "Сохранить" – хорошо.
Красная "Сохранить" - плохо
5

32. Дизайн должен быть оригинальным6

33. Вы и ваш пользователь – одно и тоже7

34. Пользователи действуют рационально8

35. Мои пользователи – все люди на Земле9

36. Если это сработало у Google (любая другая компания),
это сработает у меня
10

37. Больше выбор (возможностей) - лучше11

38. Можно создавать дизайн, не имея контента12

39. UX нужен только внутри интерфейса13

40. На этом всё. Спасибо вам за внимание.
Николай Грачёв
grachov.nick@gmail.com
http://facebook.com/nick.grachov

41. Литература
Алан Купер об
интерфейсе. Основы
проектирования
взаимодействия
Алан Купер
Дизайн привычных
вещей
Дональд Норман
Веб-дизайн: книга Стива
Круга или "не
заставляйте меня
думать!", 2-е издание
Стив Круг
UX-дизайн. Практическое
руководство по
проектированию опыта
взаимодействия
Расс Унгер

42. Полезные ссылки
О персонажах
http://www.ux-lady.com/introduction-to-user-personas/
http://www.uxbooth.com/articles/creating-personas/
http://www.copyblogger.com/empathy-maps/
http://zillion.net/ru/blog/354/sozdaniie-profilia-potriebitielia-na-osnovie-karty-empatii
http://uxexperience.net/useful/artefakty-karta-empatii
О сценариях
http://www.usability.gov/how-to-and-tools/methods/scenarios.html
http://www.webdesignerdepot.com/2015/04/how-to-perfect-your-ux-with-persona-scenarios/
http://www.uxforthemasses.com/scenario-mapping/
http://blog.usabilla.com/how-user-scenarios-help-to-improve-your-ux/
Методы и способы
http://www.usabilityfirst.com/usability-methods/
Ресурсы по теме
http://uxmovement.com/
http://uxmag.com/
http://usabilitypost.com/
https://medium.com/mental-notes/7bbb96465500