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

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

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
ISO 9241-171:2025っていうのがあってな
Avatar for Shoji Ohashi shosira
1
240
2026の目標「もっと定量的に事業、会社へ貢献する！」
Avatar for yuri ohashi yuri_ohashi
0
880
セブンデックス プロジェクト事例 / innovation Scenes
Avatar for セブンデックス sevendex
1
1.5k
Signull 団体説明資料
Avatar for Signull signull
0
740
Claudeもくもく会、はじめませんか？
Avatar for yusukeiyoda yusukeiyoda
0
150
Build for the Web, Build on the Web, Build With the Web
Avatar for Harry Roberts csswizardry
0
500
test deck title
Avatar for Shota Matsuo shotamatsuo
0
1.5k
AI時代に必要な アイデアの形
Avatar for ux-man uxman
0
250
Accelerating performance improvement based on a software review evaluation matrix
Avatar for kitanosirokuma kitanosirokuma
0
280
root COMPANY DECK / We are hiring！
Avatar for 株式会社ルート root_recruit
3
30k
Design dependencies
Avatar for Teba_eleven teba_eleven
0
150
「おすすめ」はなぜ信用されないのか - 信頼を築くUI/UX設計
Avatar for ryu ryu1013
0
210

Featured

See All Featured
The SEO identity crisis: Don't let AI make you average
Avatar for Varn varn
0
530
More Than Pixels: Becoming A User Experience Designer
Avatar for Michelle Schulp Hunt marktimemedia
3
480
Balancing Empowerment & Direction
Avatar for Lara Hogan lara
6
1.2k
Building a Modern Day 
E-commerce SEO Strategy
Avatar for Aleyda Solis aleyda
45
9.2k
技術選定の審美眼（2025年版） / Understanding the Spiral of Technologies 2025 edition
Avatar for Takuto Wada twada
PRO
119
120k
Put a Button on it: Removing Barriers to Going Fast.
Avatar for kastner kastner
60
4.5k
svc-hook: hooking system calls on ARM64 by binary rewriting
Avatar for Akira Moroo retrage
2
450
How to Align SEO within the Product Triangle To Get 
Buy-In & Support - #RIMC
Avatar for Aleyda Solis aleyda
2
1.8k
Taking LLMs out of the black box: A practical guide to human-in-the-loop distillation
Avatar for Ines Montani inesmontani
PRO
3
2.3k
What Being in a Rock Band Can Teach Us About Real World SEO
Avatar for Ade Holder 427marketing
0
1.1k
Information Architects: The Missing Link in Design Systems
Avatar for Michelle Chin soysaucechin
0
1.1k
End of SEO as We Know It (SMX Advanced Version)
Avatar for Michael King ipullrank
3
4.3k

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