UX tips & tricks for developer

Презентация с конференции IT Home'2020
UX: tips & tricks для фронтендеров.

Нужны ли разработчику основы UX & UI? Какой UX-базис нужно знать разработчику, если вдруг на проекте нет проектировщика, а делать нормальные интерфейсы все-таки нужно? Где разница между "формошлёпством" и осознанным проектированием? Поищем ответы на эти вопросы вместе!

PDF-адаптация с добавлением нескольких примеров, озвученных на выступлении.

Видео выступления: https://www.youtube.com/watch?v=gCUeWjSKkfo

Transcript

1. IT Home 1 UX: tips & tricks for developers
2. 2 ПОИТ инженер-программист Всякое • фриланс • копирайтинг и журналистика • неформальное образование • некоммерческие проекты Backend Java Fullstack Java, Angular | React JS Из разработчиков – в UX 2008 2013 2015 Тая Крыжановская, UX Engineer в Senla 2017 – по настоящее время UX Research & Design
3. IT Home 3 Как понимание UX поможет стать лучшим разработчиком
4. 4 IT Home О чем поговорим? Кругозор и важность многогранного развития Про понятия и ценность UX Важное и/или очевидное “Ну я и сам интуитивно догадывался...” UX-процесс ключевые точки взаимодействия дизайнера и разработчика
5. IT Home 5 Итак, кругозор
6. IT Home 6 T-shape концепция Технари vs гуманитарии Важность установок Итак, кругозор
7. IT Home 7 Какой-такой UX, зачем мне это нужно?
8. IT Home 8 тайм-менеджмент разработка интерфейсов — наша работа да ладно? Аргументы Против “Хочу писать код, смотреть котиков в интернете и не отвлекаться на посторонние вещи.” на самом деле, доплачивают Нет времени А дизайнер на что? Мне это в жизни не пригодится Мне за это не доплачивают Дизайн – это про талант талант переоценен, важны усилия и энтузиазм
9. IT Home 9 Аргументы За “Хочу во всем разбираться, запилить стартап и зарабатывать миллионы.” Легче принимать решения Меньше очевидных ошибок Разработчик интерфейсов “на максималках” Систематизация знаний Применение в сайд- проектах Общение на одном языке с дизайнером
10. IT Home 1 0
11. IT Home 1 1 Когда применять эти знания?
12. IT Home 1 2 Есть дизайнер, но… • есть дизайнер, но… кхм… Странный. • есть дизайнер, но… Наплывами/перегружен / мало времени отведено на дизайн. • есть дизайны, но не все. А дизайнер в ближайшие 15 суток будет отсутствовать по непредвиденным обстоятельствам. Нет дизайнера на проекте • в больших командах – распределение ролей и зон ответственности. • в маленьких – специалисты- швейцарские ножи, надо уметь все. • порой ты сам себе команда, особенно в сайд-проектах. Когда применять эти знания?
13. 1 3 Выбираем жизненное кредо Случай 2: Кажется, вы и есть дизайнер “Хочешь сделать что-то хорошо – сделай это сам!” Случай 1: Дизайнер с вами “Каждый должен заниматься своим делом!”
14. 1 4 IT Home Начните думать в этом направлении Не нужно проходить миллиард курсов. Начните с базы знаний для себя. В любой форме.
15. IT Home 1 5 UX !== UI
16. IT Home 1 6 UX !== UI
17. IT Home 1 7 набор элементов
18. IT Home 1 8 набор элементов UI UX
19. IT Home 1 9 набор элементов UI UX
20. 2 0 IT Home User Interface (UI) Интерфейс, обеспечивающий передачу информации между пользователем и программно-аппаратными компонентами компьютерной системы ISO 24765-10 User Experince (UX) Ощущения и реакции человека вследствие использования или предполагаемого использования продукта, системы или услуги. ISO 9241-10
21. 2 1 IT Home UX-процесс
22. 2 2 IT Home UX-процесс Взаимодействие с разработчиками
23. 2 3 IT Home Никакой тирании, только конструктив. #01 Наладить коммуникацию с дизайнером
24. 2 4 IT Home Чем раньше – тем лучше. #02 Синхронизируйте макеты с вашей JS-библиотекой
25. 2 5 IT Home Дизайнеры отдают вам макеты. Картинки. Иногда в этих картинках нет кое-чего важного. Иногда — всего. #03 Помогите вашему дизайнеру • Работа по сетке, • Типизация объектов и компонентный подход, • Состояния компонентов при взаимодействии, • Пустые и пограничные состояния, • Адекватный нейминг и группировка слоев-стилей-компонентов, • Изображения, иконки, шрифты и другие элементы в одном месте, • UI-кит на отдельной странице, • Комментарии и минимальная спецификация паттернов перед передачей в разработку, • Поддержка доступности.
26. 2 6 IT Home Все, что найдете полезным. В любой удобной для вас форме. • эвристики, • гайды по элементам интерфейса: компоненты, их состояния, • лучшие практики, • коллекция ваших собственных граблей, набитых шишек и пробивных решений, • паттерны: сравнение и выбор, • тренды и антитренды. #04 Составляйте собственную базу знаний
27. 2 7 IT Home Контур.Гайды
28. 2 8 IT Home Опознать нашу секту обычно можно по очевидной аббревиатуре UX. • блоги на Medium, • habr в категории UX, • Smashing Magazine, • Nielsen Norman Group , • UX Club, Дизайн Кабак, • ux.stackexchange.com, • авторские telegram каналы. #05 Читайте тематические ресурсы
29. 2 9 IT Home За всем уследить нереально
30. 3 0 IT Home Находите в них примеры и вдохновение: • Airbnb, • Notion, • Miro, • Asana, • Airtable. #06 Следуйте за лидерами отрасли
31. 3 1 IT Home Многое уже придумано до нас и подготовлено для нас. По возможности, не изобретайте велосипед. • Material Design, • Human Interface Guideline, • Ant Design, • Salesforce Lightning Design System, • gov.design, • дизайн-системы от Альфа Банка и других крупных компаний. #07 Изучайте гайдлайны и дизайн-системы
32. 3 2 IT Home
33. 3 3 IT Home Протестируйте свой сайд-проект или партизаньте на боевых. Изучайте продукты-конкуренты. #08 Проведите исследование своего продукта
34. 3 4 IT Home Проводите не просто функциональное тестирование, но usability-тестирование. По возможности – с реальными пользователями*. В случае с тестирование accessibility – обязательно с реальными пользователями. * Если позволяет NDA.
35. 3 5 IT Home Не просто добавляйте компонент, а думайте о последствиях и сценарии целиком. #09 Сохраняйте целостный взгляд на продукт
36. 3 6 IT Home Выясняйте неочевидные проблемы и устраняйте очевидные. #10 Решайте проблему, а не просто пишите код
37. 3 7 IT Home При регистрации пользователь должен ввести следующие данные (обязательные поля для ввода): • Имя • Контактный телефон • Пароль • Подтверждение пароля Дополнительные поля для ввода (не обязательные): • Отчество • Фамилия • Email • Атрибуты карточки для автоматических транзакций Функционал приложения будет доступен после регистрации.
38. 3 8 IT Home Мобильное приложение. Пользователь спешит и хочет уехать. Возможно, в условиях непогоды. Итак, он скачивает приложение и… Простая задача: вызвать такси Заполни, пожалуйста, вот это полотно в 10 полей, да, номер карты тоже давай, кстати, пароль не совпадает и вообще недостаточно сложный. Пользователь: - Ловит такси “c бордюра”, - Идет пешком, - Ругает вас, прям сильно ругает и уходит к конкурентам. + =
39. 3 9 IT Home Они очень коварны. #11 Будьте внимательны к мелочам
40. 4 0 IT Home Не только в рабочих задачах, но и в повседневной жизни. #12 Применяйте человеко- ориентированное мышление
41. 4 1 IT Home Простая задача: открыть пакет В супермаркете. В условиях пандемии. В маске. Сухими и холодными пальцами. И палец не слюнявить (даже украдкой)! + = Страдай, клиент, и тереби пакетик.
42. 4 2 IT Home Простая задача: открыть пакет В супермаркете. В условиях пандемии. В маске. Сухими и холодными пальцами. И палец не слюнявить (даже украдкой)! + = Разместить диспенсер с антисептиком в зоне фасовки фруктов и овощей. Гигиеничное и простое решение. Полезно не только в условиях пандемии.
43. 4 3 IT Home На его потребностях, на его опыте взаимодействия. Мы – не наши пользователи. #13 Сосредоточьтесь на пользователе
44. 4 4 IT Home Keep It Short and Simple. #14 KISS
45. 4 5 IT Home
46. 4 6 IT Home Но не слишком. #15 Относитесь к улучшению UX серьезно
47. 4 7 IT Home Насмотренность Эмпатия Здравый смысл Анализ и эксперименты И еще раз...
48. 4 8 IT Home Система отступов, размерность элементов. Никаких половинчатых пикселей. Работа по сетке Кнопки, поля для ввода, выпадающие списки, карточки. Их состояния, анатомия и поведение. Базовые элементы Формы, таблицы, визарды. Модальные и немодальные окна. Лучшие практики для них. Элементы посложнее Советы бывалых прагматиков Поддерживаемые разрешения экранов. Брейкпоинты. Адаптив / Респонсив Яркость и контрастность текста/фона. ARIA label и семантический HTML. Тэг ALT. Работа с Voice Over. Доступность Совместимость с библиотеками и возможность реализации отдельных элементов. Браузеры Шрифты (основные и резервные). Начертания. Размерность. Не нужно зоопарка шрифтов и начертаний. Типографика Работа с цветом: деструктивные/позитивные действия, цветовые палитры. Задавать цвет прозрачностью = зло. Цвет Композиция. Визуальная иерархия. Пустое пространство. Консистентность. Другое из визуального дизайна Пустые состояния, экраны ошибок, валидация. Если до сих пор никто на проекте о них не подумал — настало ваше время. Пограничные состояния Оптимизация загрузки — это важный кусочек не только SEO, но и фактор, влияющий на UX. Скорость загрузки страницы Напишите его в комментарии c пометкой “tips” и выиграйте подарок. Здесь мог бы быть ваш совет
49. 4 9 IT Home Углубиться • ui-patterns.com • nngroup.com • uxplanet.org • Подкаст uwebdesign.ru
50. IT Home 5 0 что за презентация про дизайн без цитаты Стива Джобса Здесь должна быть заезженная мощная цитата Стива Джобса
51. IT Home 5 1 Разработчик интерфейсов, дизайнер, бюрошник и просто достойный человек Хорошо дизайнит тот, кто дизайнит последним... Артем Поликарпов
52. 5 2 IT Home Спасибо за внимание! https:/ /bit.ly/3lGjJ69 Хочешь быть вместе с Grodno Design Community? Хочешь задать детальные вопросы? Везде в сети я @funnypersimmon Понравились иллюстрации? Это лисскуство “Эхо Лисы” @poslushai
53. IT Home 5 3 Ваши вопросы? ну, почти и советы