Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for Denis Yarovoy Denis Yarovoy
September 17, 2016
Design
280
1

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

Avatar for Denis Yarovoy

Denis Yarovoy

September 17, 2016

Other Decks in Design

See All in Design
大企業インハウスデザイン組織における DesignOps改革の現在地 / DesignOps at Scale: Navigating Transformation in Large Enterprises
Avatar for NTT docomo Business nttcom
0
680
AIスライドデザインを生成する仕組みを社内共有する
Avatar for 太田賢一 kenichiota0711
7
5.5k
全員がアウトプットを出せる時代、 誰を採用する?
Avatar for NishaMe nishame
0
560
2026_01_07_３DプリントはじめましたLT.pdf
Avatar for HideakiTakechi hideakitakechi
0
190
2026の目標「もっと定量的に事業、会社へ貢献する！」
Avatar for yuri ohashi yuri_ohashi
0
830
2026年の勢い / Momentum for 2026
Avatar for bebe bebe
0
450
Signull 団体説明資料
Avatar for Signull signull
0
630
Design dependencies
Avatar for Teba_eleven teba_eleven
0
120
社長の宿題への回答 「新卒×AI」が生み出す価値
Avatar for さき saki822
2
150
ClaudeCodeでマーケターの課題を解決する
Avatar for 太田賢一 kenichiota0711
11
14k
デザイナーが主導権を握る、AI協業の本音と実践
Avatar for satosio satosio
7
3.3k
Accelerating performance improvement based on a software review evaluation matrix
Avatar for kitanosirokuma kitanosirokuma
0
240

Featured

See All Featured
Game over? The fight for quality and originality in the time of robots
Avatar for Wayne Barker wayneb77
1
180
The browser strikes back
Avatar for Jono Alderson jonoalderson
0
1.1k
We Are The Robots
Avatar for Honza Javorek honzajavorek
0
240
Measuring & Analyzing Core Web Vitals
Avatar for Philip Tellis bluesmoon
9
860
Building Adaptive Systems
Avatar for Chris Keathley keathley
44
3k
Stewardship and Sustainability of Urban and Community Forests
Avatar for Eric Wiseman pwiseman
0
220
Lightning talk: Run Django tests with GitHub Actions
Avatar for Sarah Abderemane sabderemane
0
190
Navigating the moral maze — ethical principles for Al-driven product design
Avatar for Skipper Chong Warson skipperchong
2
380
Applied NLP in the Age of Generative AI
Avatar for Ines Montani inesmontani
PRO
4
2.3k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
Avatar for Kevin Liebholz kevinliebholz
37
6.5k
Ruling the World: When Life Gets Gamed
Avatar for Sebastian Deterding codingconduct
0
240
The Language of Interfaces
Avatar for Des Traynor destraynor
162
27k

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

  43. 43

  44. Вопросы? 44