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
1
270

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

Avatar for Denis Yarovoy

Denis Yarovoy

September 17, 2016
Tweet

Other Decks in Design

See All in Design
第18回サイゼミ
Avatar for LW lw
1
3.3k
Correspondence：共に生成していく過程
Avatar for Akira Motomura akiramotomura
0
190
AIでデザインをつくる：基礎編
Avatar for 太田賢一 kenichiota0711
3
2.5k
モビリティプラットフォームの未来を築くクラウド基盤
Avatar for Hajime KOSHIRO kossykinto
0
210
OSO2025-マサカリと太陽：伝え方の情報デザイン
Avatar for majimasachi majimasachi
0
680
“ことば”が苦手なデザイナーへの処方箋 「なんとなく」から「意図」へ、 デザインを動かす言葉の力
Avatar for MIXI DESIGN mixi_design
PRO
1
200
「稼ぐ」だけでなく 「還す」ためのデザイン / Designship2025
Avatar for インクルーシブデザインスタジオCULUMU culumu
1
570
AIスライドデザインを生成する仕組みを社内共有する
Avatar for 太田賢一 kenichiota0711
5
4.2k
コムデマネージャーがプロダクトデザインに挑戦した。むずかしくて楽しかった。
Avatar for payatsun payatsusan213
0
200
Meet, Learn, Grow × AI ― コミュニティで加速するスキル循環 「コミュニティと関わり方」
Avatar for ため tame
1
370
Vibe Coding デザインシステム
Avatar for poteboy poteboy
3
1.6k
図じゃなく言語で描く - Common Ground for Design AI Operations.
Avatar for Kazuki Ikeda kazukiikeda
1
670

Featured

See All Featured
We Are The Robots
Avatar for Honza Javorek honzajavorek
0
160
Dominate Local Search Results - an insider guide to GBP, reviews, and Local SEO
Avatar for Greg Gifford greggifford
PRO
0
78
GraphQLとの向き合い方2022年版
Avatar for Yosuke Kurami quramy
50
14k
Conquering PDFs: document understanding beyond plain text
Avatar for Ines Montani inesmontani
PRO
4
2.3k
Fashionably flexible responsive web design (full day workshop)
Avatar for Andy Clarke malarkey
408
66k
[SF Ruby Conf 2025] Rails X
Avatar for Vladimir Dementyev palkan
1
760
Why Mistakes Are the Best Teachers: Turning Failure into a Pathway for Growth
Avatar for Umar Saidu Auna auna
0
54
Applied NLP in the Age of Generative AI
Avatar for Ines Montani inesmontani
PRO
4
2k
Optimising Largest Contentful Paint
Avatar for Harry Roberts csswizardry
37
3.6k
How to Think Like a Performance Engineer
Avatar for Harry Roberts csswizardry
28
2.4k
HU Berlin: Industrial-Strength Natural Language Processing with spaCy and Prodigy
Avatar for Ines Montani inesmontani
PRO
0
220
A Tale of Four Properties
Avatar for Chris Coyier chriscoyier
162
24k

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