UX для разработчиков

Transcript

1. UX для разработчиков Денис Яровой 1
2. @kqxsr 2
3. User Experience 3
4. User experience is the overall effect created by the interactions and perceptions that someone has when using a product or service. Leah Buley. «The User Experience Team Of One» “ 4
5. Кто отвечает за UX? 5
6. User experience isn’t just the designer’s job: it’s the job of anyone who has anything to do with your customer’s experience of your product. Jason Cranford Teague “ 6
7. 3 принципа создания интерфейсов 1. Принцип обратной связи 2. Принцип бесконечной целостности пользовательских данных 3. Принцип делегирования 7
8. Принцип обратной связи 8
9. Принцип обратной связи Действия пользователя должны вызывать в интерфейсе своевременную, адекватную и заметную реакцию — обратную связь. Совет об обратной связи в интерфейсе 9
10. background-color: #bada55; Всегда задавайте :active button:active { } 01. 02. 03. 10
11. Отправить 11
12. Используйте новые курсоры 12
13. cursor: not-allowed; Для неактивных кнопок :disabled, [disabled], [aria-disabled="true"] { } 01. 02. 03. 04. 05. 13
14. outline: 0; Никогда не обнуляйте :focus /* remember to define focus styles! */ :focus { } Web Content Accessibility Guidelines 01. 02. 03. 04. 14
15. Отменить Сохранить 15
16. И еще разок 16
17. Увеличивайте кнопки 1. Минимальный размер кликабеной области — 40×40px 2. Рекомендуемый — 50×50px 3. Минимальный отступ между элементами — 10px Совет о законе Фиттса 17
18. Забудьте про :hover 18
19. Давайте своевременную обратную связь • 100ms для нажатия кнопки • 1s для загрузки страницы Якоб Нильсен об оптимальном времени отклика 19
20. Пример с задержкой на мобильных 20
21. content="width=device-width" touch-action: manipulation; Убирайте задержку в 300ms для мобильных <head> <meta name="viewport" > </head> или html { } 01. 02. 03. 01. 02. 03. 21
22. Оптимизируйте загрузку страниц 22
23. Начинайте рендеринг как можно быстрее 23
24. Пример Amazon 24
25. Используйте технику Preemptive start 25
26. Пример Instagram 26
27. Пример Instagram 27
28. Пример Instagram 28
29. Принцип бесконечной ценности пользовательских данных 29
30. Компьютер не может причинить вред данным пользователя или своим бездействием допустить, чтобы данным был причинен вред. Джеф Раскин “ 30
31. Принцип бесконечной ценности пользовательских данных Система должна рассматривать все данные, вводимые пользователем, как бесценные. 31
32. Проблема объемных форм 32
33. Сохраняйте формы в localStorage 33
34. Прячьте кнопки «катапультирования» подальше 34
35. Антипример Adobe 35
36. Принцип делегирования 36
37. Принцип делегирования Не нужно заставлять человека делать то, что он делает плохо — перемножать большие числа в уме, запоминать путь к файлу, сверять с бумажкой пятнадцатизначный код. О человечных интерфейсах 37
38. Избавьтесь от капчи 38
39. Вместо капчи можно использовать • Тест для ботов вместо теста для пользователей • Логин через соцсеть • Скрытое поле • Минимальный лимит на заполнение формы 39
40. Автоматизируйте автоматизируемое 40
41. A еще разработчик ответсвенен за • Деградацию в устаревших браузерах • Создание «уместной» анимации • Продумывание умной валидации • Обеспечение доступности • и т.д. 41
42. И все это влияет на UX 42
44. Вопросы? 44