UX & UI для разработчика: боги, зачем?

Доклад-дискуссия с Senla October Meetup'2019

Спикеры: Александр Рум, Тая Крыжановская (Senla)

Вариант с анимациями в *.pptx: https://drive.google.com/file/d/1zyKXWW4jBBJWfZr5lJdyfHES1I3OpTGt/view?usp=sharing

1. SENLAINC.COM UX & UI для разработчика боги, зачем?
2. SENLAINC.COM 2 Бесстыжая UX- специалистка Сознательный фронтендер Привет! Саша и Тая Мы здесь, потому что создаем интерфейсы, и иногда создаем друг другу проблемы. Нам надоело это терпеть.
3. SENLAINC.COM Проблемы?
4. SENLAINC.COM Со стороны разработки Со стороны дизайна SENLAINC.COM 4 • Разработчики с Марса, дизайнеры с Венеры. • Не имея в чем-то опыта - сложно оценивать риски, невозможно изначально правильно оценить масштаб, дать эстимацию. • Не всегда на проекте есть дизайнер/UX-специалист. • Иногда стыдно за результаты своего труда, ведь от этого страдают люди. • “Лоудер мне отрисуй!” • Блокер: дизайнер не отрисовал состояние selected для dropdown! • “Пиксель вправо, пиксель влево - какая разница.” • “Наша js-библиотека так не умеет.” • Но… мы же… отрисовали UI-Kit! • Иногда стыдно за результаты своего труда, ведь от этого страдают люди.
5. SENLAINC.COM Вспомните приложения, которыми вы реально гордитесь?
6. SENLAINC.COM GRIBBBLE
7. SENLAINC.COM И фичи, за реализацию которых стыдно...
8. SENLAINC.COM Как быть? Минусы: • “Камон, там ангуляр 8 вышел, а я только на 2 сижу… На это все нужно время!” • “Пусть каждый занимается своей работой” • “Мне это в жизни не пригодится” • “Мне за это не доплачивают” • “Чтобы достичь в этом чего-то - нужен талант!” • В целом, отнимает драгоценное время, которое можно было бы посвятить техническому развитию или котикам в интернете - тайм-менеджмент! - разработка интерфейсов наша работа - да ладно? - на самом деле, доплачивают... - нет.
9. SENLAINC.COM Как быть? Плюсы: • Разработчик осознаннее и легче принимает решения • Делает меньше очевидных ошибок • Не дергает дизайнера на каждую кнопку или диалоговое окно • Разработчик интерфейсов на максималках уже • Может делать свои сайд-проекты • Знания в дизайне интерфейсов становятся системнее • Дар предвидения • В целом позволяет работать и взаимодействовать с командой более эффективно
10. SENLAINC.COM Поиграем?
11. SENLAINC.COM 1 2
12. SENLAINC.COM 1 2
13. SENLAINC.COM 1 2
14. SENLAINC.COM 1 2
15. SENLAINC.COM 1 2
16. SENLAINC.COM 1 2
17. SENLAINC.COM 1 2
18. SENLAINC.COM 1 2
19. SENLAINC.COM 1 2
20. SENLAINC.COM 1 2
21. SENLAINC.COM 1 2
22. SENLAINC.COM 1 2
23. SENLAINC.COM 1 2
24. SENLAINC.COM 1 2
25. SENLAINC.COM 1 2
26. SENLAINC.COM Развиваем дар предвидения? Мыслим шире!
27. SENLAINC.COM Думаем о поведении элементов
28. SENLAINC.COM
29. SENLAINC.COM Думаем о сопутствующем поведении
30. SENLAINC.COM Думаем о состояниях элементов
31. SENLAINC.COM
32. SENLAINC.COM 1 2
33. SENLAINC.COM Accessibility
34. SENLAINC.COM Доступность - обеспечить возможность использования сервиса для как можно большего количества людей. Факторы, оказывающие влияние на доступность: • Местоположение – люди могут использовать сервис в зоне, где медленный wi-fi, в шумном кафе или солнечном парке. • Состояние здоровья – люди могут владеть лишь одной рукой по причине перелома. • Оборудование – у них может быть смартфон с маленьким экраном или устаревший браузер. • Физические ограничения - например, нарушения опорно-двигательного аппарата, речи или зрения.
35. SENLAINC.COM 1. Цветовой контраст 2. Семантический html: Ориентиры ARIA Используй <em>, <strong> вместо <i> <b>. Используй <article>, <section>, <nav>, <main>, <H1>...<H6> вместо <div><span> - эти тэги попадают в accessibility tree. Старые браузеры не поддерживают все эти штуки из html5, но они прекрасно понимают атрибут role. <nav>=<div role=”navigation”> 1. Фокус и корректная работа Tab Index. 2. Изображения и атрибут alt Что важно учитывать?
36. SENLAINC.COM Как со всем этим разобраться?
37. SENLAINC.COM 37 Слушать дизайнера! • доверяй своему дизайнеру • следите за своими программистами • следуй UI-kit • создавайте вместе с ним полноценную дизайн-систему
38. SENLAINC.COM 38 Не слушать дизайнера! • доверяй, но сомневайся • мысли критично • заботься о пользователе • критикуя - предлагай • аргументация “я лично считаю” или “мне кажется” - не очень.
39. SENLAINC.COM Смотреть гайдлайны все уже придумано до нас:)
40. SENLAINC.COM Анализировать продукт собственного труда эмпатия и здравый смысл
41. SENLAINC.COM Нарабатывать опыт насмотренность, шишки, грабли
42. SENLAINC.COM 42 Мы тоже заботимся о Вас! • эвристики • справочник элементов интерфейса • best practices • паттерны • ...и многое другое потихоньку собирается в нашем confluence
43. SENLAINC.COM • ui-patterns.com • nngroup.com • uxplanet.org • Подкасты: uwebdesign.ru • …. Как развиваться? книжки, статьи, опыт, эвристики, база знаний, подкасты...
44. SENLAINC.COM Спасибо за внимание:) Берегите друг друга Смотрят в светлое будущее...
45. SENLAINC.COM Расхлебывать все равно вместе! Оказываются в прозаическом настоящем...
46. SENLAINC.COM UX & UI для разработчика боги, зачем?