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
Connpass-Xperia_Camera_App_by_HCD.pdf
Avatar for ソニー株式会社 sony
0
490
root COMPANY DECK / We are hiring！
Avatar for 株式会社ルート root_recruit
2
26k
越境するデザイン人材：デザイナーが社会資本となる世界へ
Avatar for Goodpatch Inc. goodpatch
1
500
爆速開発でAIプロダクトが40万インプレッションになった話
Avatar for つぶら tsubura
0
160
Drawing for Animation
Avatar for Mandalyn Teo lynteo
2
190
hicard_credential_202601
Avatar for hicard hicard
0
150
Liquid GlassとApp Intents
Avatar for touyou touyou
0
810
逆向きUIの世界 〜iOSアプリのRTL言語対応〜
Avatar for akatsuki174 akatsuki174
1
500
「余白」と「欲望」を味方につける ——AI時代のデザインエンジニアリングと「越境」の作法 #KNOTS2026
Avatar for koyaman koyaman
1
1.3k
30分でわかるインサイトマネジメント（2025年12月バージョン）
Avatar for Centou centou
1
390
文化のデザイン - Soft Impact of Design
Avatar for Atsushi Homma atsushihomma
0
140
見栄えと使いやすさの先にある 特別感 をデザインする / Designing a Sense of Specialness Beyond Aesthetics and Usability
Avatar for 株式会社ビットキー / Bitkey Inc. bitkey
PRO
0
250

Featured

See All Featured
Art, The Web, and Tiny UX
Avatar for Lynn Fisher lynnandtonic
304
21k
Building a Modern Day 
E-commerce SEO Strategy
Avatar for Aleyda Solis aleyda
45
8.7k
Done Done
Avatar for chrislema chrislema
186
16k
Self-Hosted WebAssembly Runtime for Runtime-Neutral Checkpoint/Restore in Edge–Cloud Continuum
Avatar for Yuki Nakata chikuwait chikuwait
0
330
Highjacked: Video Game Concept Design
Avatar for Ryan Kendrick rkendrick25
PRO
1
290
Music & Morning Musume
Avatar for Bryan Veloso bryan
47
7.1k
Java REST API Framework Comparison - PWX 2021
Avatar for Matt Raible mraible
34
9.1k
Digital Projects Gone Horribly Wrong (And the UX Pros Who Still Save the Day) - Dean Schuster
Avatar for UX Y'all uxyall
0
380
AI Search:
Where Are We & What Can We Do About It?
Avatar for Aleyda Solis aleyda
0
7k
Navigating Weather and Climate Data
Avatar for Ryan Abernathey rabernat
0
110
Fireside Chat
Avatar for paigeccino paigeccino
41
3.8k
[RailsConf 2023 Opening Keynote] The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
31
9.9k

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