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

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

Avatar for Denis Yarovoy Denis Yarovoy
September 17, 2016
Design
1
270

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

Avatar for Denis Yarovoy

Denis Yarovoy

September 17, 2016
Tweet

Other Decks in Design

See All in Design
harutaka Vision Deck
Avatar for ZENKIGEN,Inc. zenkigenforrecruit
0
130
なぜプレイドにデザインエンジニアが必要だったのか？
Avatar for t32k t32k
0
490
250131_product meetup
Avatar for Motoko Ishida motokoishida
0
210
今日からできる実践アクセシビリティSNSというかXでaltをつけよう
Avatar for Yu Morita securecat
1
230
How to get a Tiger to Tulsa
Avatar for Brynn McDucky P. mcduckyart
0
100
読書シェア会 vol.5 / Yumemi.grow 20250526
Avatar for Rakus_Dev rakus_dev
0
1.6k
CIRCULAR ECONOMY + SERVICES
Avatar for John Manoochehri jmanooch
0
110
Building foundations 堅牢なデザイントークンの設計
Avatar for Hiroki Tani hilokifigma
2
3.4k
The Golden Whitney
Avatar for OhTristanArt ohtristanart
PRO
0
480
ブランドパーソナリティ言語化における生成AI活用の実際
Avatar for Hiroki Hosaka h0sa
0
130
【Adobe MAX Japan 2025】上手にFireflyにお願いしてウェブデザイン案を出すぞ！
Avatar for Akiko Kurono cremacrema
7
5.6k
AI動画生成ガチャ紹介
Avatar for Takatomo Torigoe piyo7
1
110

Featured

See All Featured
Building Flexible Design Systems
Avatar for Yesenia Perez-Cruz yeseniaperezcruz
328
39k
Dealing with People You Can't Stand - Big Design 2015
Avatar for Cassini Nazir cassininazir
367
26k
XXLCSS - How to scale CSS and keep your sanity
Avatar for Zaharenia Atzitzikaki sugarenia
248
1.3M
A designer walks into a library…
Avatar for Paul Jervis Heath pauljervisheath
206
24k
Art, The Web, and Tiny UX
Avatar for Lynn Fisher lynnandtonic
299
21k
Reflections from 52 weeks, 52 projects
Avatar for Jefferson Lam jeffersonlam
351
20k
A Tale of Four Properties
Avatar for Chris Coyier chriscoyier
160
23k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
Avatar for mongodb mongodb
46
9.6k
RailsConf 2023
Avatar for Aaron Patterson tenderlove
30
1.1k
CSS Pre-Processors: Stylus, Less & Sass
Avatar for Bermon Painter bermonpainter
357
30k
Intergalactic Javascript Robots from Outer Space
Avatar for Vicent Martí tanoku
271
27k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
Avatar for Michelle Schulp Hunt marktimemedia
31
2.4k

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