Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
UX для разработчиков
Search
Denis Yarovoy
September 17, 2016
Design
1
260
UX для разработчиков
Denis Yarovoy
September 17, 2016
Tweet
Share
Other Decks in Design
See All in Design
WHAT ARE ME?
takuro_nakajima
PRO
0
1.4k
意志と、デザインと、ときどきお金
transit_kix
2
2.2k
マスとAIをなめらかにつなぐデザイン
abcmisuzu
0
240
デザインシステムで解消するさまざまな分断
hirataaa0220
1
170
Designing UIs without a UI designer
strongeron
0
130
Product-Writing
aguringo
6
2.8k
みてね デザイン組織の変遷とデザインマネージャーの振り返り
naoyawatanabe
3
640
Designship 2023|想いを可視化するデザインの力
weddingpark
0
250
20240120_画像生成AI_NovelAI入門・情報収集
doradora09
0
120
成果が出ないユーザーインタビューは何がダメだったのか? ~「誰に聞くか」の探り方 ~
jouykw
10
13k
プロダクトを成長させる生成 AI のユースケース発見ワークショップ vol.3
icoxfog417
1
110
ユーザーのためなら 『デザイン』 以外にも手を伸ばせる
navitimejapan
PRO
2
790
Featured
See All Featured
We Have a Design System, Now What?
morganepeng
43
6.8k
Happy Clients
brianwarren
92
6.4k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
22
1.6k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
7
3.4k
The Art of Programming - Codeland 2020
erikaheidi
43
12k
Become a Pro
speakerdeck
PRO
13
4.6k
How to train your dragon (web standard)
notwaldorf
75
5.2k
4 Signs Your Business is Dying
shpigford
176
21k
The MySQL Ecosystem @ GitHub 2015
samlambert
244
12k
Scaling GitHub
holman
457
140k
A designer walks into a library…
pauljervisheath
201
23k
Documentation Writing (for coders)
carmenintech
60
4k
Transcript
UX для разработчиков Денис Яровой 1
@kqxsr 2
User Experience 3
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
Кто отвечает за UX? 5
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
3 принципа создания интерфейсов 1. Принцип обратной связи 2. Принцип
бесконечной целостности пользовательских данных 3. Принцип делегирования 7
Принцип обратной связи 8
Принцип обратной связи Действия пользователя должны вызывать в интерфейсе своевременную,
адекватную и заметную реакцию — обратную связь. Совет об обратной связи в интерфейсе 9
background-color: #bada55; Всегда задавайте :active button:active { } 01. 02.
03. 10
Отправить 11
Используйте новые курсоры 12
cursor: not-allowed; Для неактивных кнопок :disabled, [disabled], [aria-disabled="true"] { }
01. 02. 03. 04. 05. 13
outline: 0; Никогда не обнуляйте :focus /* remember to define
focus styles! */ :focus { } Web Content Accessibility Guidelines 01. 02. 03. 04. 14
Отменить Сохранить 15
И еще разок 16
Увеличивайте кнопки 1. Минимальный размер кликабеной области — 40×40px 2.
Рекомендуемый — 50×50px 3. Минимальный отступ между элементами — 10px Совет о законе Фиттса 17
Забудьте про :hover 18
Давайте своевременную обратную связь • 100ms для нажатия кнопки •
1s для загрузки страницы Якоб Нильсен об оптимальном времени отклика 19
Пример с задержкой на мобильных 20
content="width=device-width" touch-action: manipulation; Убирайте задержку в 300ms для мобильных <head>
<meta name="viewport" > </head> или html { } 01. 02. 03. 01. 02. 03. 21
Оптимизируйте загрузку страниц 22
Начинайте рендеринг как можно быстрее 23
Пример Amazon 24
Используйте технику Preemptive start 25
Пример Instagram 26
Пример Instagram 27
Пример Instagram 28
Принцип бесконечной ценности пользовательских данных 29
Компьютер не может причинить вред данным пользователя или своим бездействием
допустить, чтобы данным был причинен вред. Джеф Раскин “ 30
Принцип бесконечной ценности пользовательских данных Система должна рассматривать все данные,
вводимые пользователем, как бесценные. 31
Проблема объемных форм 32
Сохраняйте формы в localStorage 33
Прячьте кнопки «катапультирования» подальше 34
Антипример Adobe 35
Принцип делегирования 36
Принцип делегирования Не нужно заставлять человека делать то, что он
делает плохо — перемножать большие числа в уме, запоминать путь к файлу, сверять с бумажкой пятнадцатизначный код. О человечных интерфейсах 37
Избавьтесь от капчи 38
Вместо капчи можно использовать • Тест для ботов вместо теста
для пользователей • Логин через соцсеть • Скрытое поле • Минимальный лимит на заполнение формы 39
Автоматизируйте автоматизируемое 40
A еще разработчик ответсвенен за • Деградацию в устаревших браузерах
• Создание «уместной» анимации • Продумывание умной валидации • Обеспечение доступности • и т.д. 41
И все это влияет на UX 42
43
Вопросы? 44