Tweet
Tweet

Slide 1

Slide 1 text

IT Home 1 UX: tips & tricks for developers

Slide 2

Slide 2 text

2 ПОИТ инженер-программист Всякое ● фриланс ● копирайтинг и журналистика ● неформальное образование ● некоммерческие проекты Backend Java Fullstack Java, Angular | React JS Из разработчиков – в UX 2008 2013 2015 Тая Крыжановская, UX Engineer в Senla 2017 – по настоящее время UX Research & Design

Slide 3

Slide 3 text

IT Home 3 Как понимание UX поможет стать лучшим разработчиком

Slide 4

Slide 4 text

4 IT Home О чем поговорим? Кругозор и важность многогранного развития Про понятия и ценность UX Важное и/или очевидное “Ну я и сам интуитивно догадывался...” UX-процесс ключевые точки взаимодействия дизайнера и разработчика

Slide 5

Slide 5 text

IT Home 5 Итак, кругозор

Slide 6

Slide 6 text

IT Home 6 T-shape концепция Технари vs гуманитарии Важность установок Итак, кругозор

Slide 7

Slide 7 text

IT Home 7 Какой-такой UX, зачем мне это нужно?

Slide 8

Slide 8 text

IT Home 8 тайм-менеджмент разработка интерфейсов — наша работа да ладно? Аргументы Против “Хочу писать код, смотреть котиков в интернете и не отвлекаться на посторонние вещи.” на самом деле, доплачивают Нет времени А дизайнер на что? Мне это в жизни не пригодится Мне за это не доплачивают Дизайн – это про талант талант переоценен, важны усилия и энтузиазм

Slide 9

Slide 9 text

IT Home 9 Аргументы За “Хочу во всем разбираться, запилить стартап и зарабатывать миллионы.” Легче принимать решения Меньше очевидных ошибок Разработчик интерфейсов “на максималках” Систематизация знаний Применение в сайд- проектах Общение на одном языке с дизайнером

Slide 10

Slide 10 text

IT Home 1 0

Slide 11

Slide 11 text

IT Home 1 1 Когда применять эти знания?

Slide 12

Slide 12 text

IT Home 1 2 Есть дизайнер, но… ● есть дизайнер, но… кхм… Странный. ● есть дизайнер, но… Наплывами/перегружен / мало времени отведено на дизайн. ● есть дизайны, но не все. А дизайнер в ближайшие 15 суток будет отсутствовать по непредвиденным обстоятельствам. Нет дизайнера на проекте ● в больших командах – распределение ролей и зон ответственности. ● в маленьких – специалисты- швейцарские ножи, надо уметь все. ● порой ты сам себе команда, особенно в сайд-проектах. Когда применять эти знания?

Slide 13

Slide 13 text

1 3 Выбираем жизненное кредо Случай 2: Кажется, вы и есть дизайнер “Хочешь сделать что-то хорошо – сделай это сам!” Случай 1: Дизайнер с вами “Каждый должен заниматься своим делом!”

Slide 14

Slide 14 text

1 4 IT Home Начните думать в этом направлении Не нужно проходить миллиард курсов. Начните с базы знаний для себя. В любой форме.

Slide 15

Slide 15 text

IT Home 1 5 UX !== UI

Slide 16

Slide 16 text

IT Home 1 6 UX !== UI

Slide 17

Slide 17 text

IT Home 1 7 набор элементов

Slide 18

Slide 18 text

IT Home 1 8 набор элементов UI UX

Slide 19

Slide 19 text

IT Home 1 9 набор элементов UI UX

Slide 20

Slide 20 text

2 0 IT Home User Interface (UI) Интерфейс, обеспечивающий передачу информации между пользователем и программно-аппаратными компонентами компьютерной системы ISO 24765-10 User Experince (UX) Ощущения и реакции человека вследствие использования или предполагаемого использования продукта, системы или услуги. ISO 9241-10

Slide 21

Slide 21 text

2 1 IT Home UX-процесс

Slide 22

Slide 22 text

2 2 IT Home UX-процесс Взаимодействие с разработчиками

Slide 23

Slide 23 text

2 3 IT Home Никакой тирании, только конструктив. #01 Наладить коммуникацию с дизайнером

Slide 24

Slide 24 text

2 4 IT Home Чем раньше – тем лучше. #02 Синхронизируйте макеты с вашей JS-библиотекой

Slide 25

Slide 25 text

2 5 IT Home Дизайнеры отдают вам макеты. Картинки. Иногда в этих картинках нет кое-чего важного. Иногда — всего. #03 Помогите вашему дизайнеру ● Работа по сетке, ● Типизация объектов и компонентный подход, ● Состояния компонентов при взаимодействии, ● Пустые и пограничные состояния, ● Адекватный нейминг и группировка слоев-стилей-компонентов, ● Изображения, иконки, шрифты и другие элементы в одном месте, ● UI-кит на отдельной странице, ● Комментарии и минимальная спецификация паттернов перед передачей в разработку, ● Поддержка доступности.

Slide 26

Slide 26 text

2 6 IT Home Все, что найдете полезным. В любой удобной для вас форме. ● эвристики, ● гайды по элементам интерфейса: компоненты, их состояния, ● лучшие практики, ● коллекция ваших собственных граблей, набитых шишек и пробивных решений, ● паттерны: сравнение и выбор, ● тренды и антитренды. #04 Составляйте собственную базу знаний

Slide 27

Slide 27 text

2 7 IT Home Контур.Гайды

Slide 28

Slide 28 text

2 8 IT Home Опознать нашу секту обычно можно по очевидной аббревиатуре UX. ● блоги на Medium, ● habr в категории UX, ● Smashing Magazine, ● Nielsen Norman Group , ● UX Club, Дизайн Кабак, ● ux.stackexchange.com, ● авторские telegram каналы. #05 Читайте тематические ресурсы

Slide 29

Slide 29 text

2 9 IT Home За всем уследить нереально

Slide 30

Slide 30 text

3 0 IT Home Находите в них примеры и вдохновение: ● Airbnb, ● Notion, ● Miro, ● Asana, ● Airtable. #06 Следуйте за лидерами отрасли

Slide 31

Slide 31 text

3 1 IT Home Многое уже придумано до нас и подготовлено для нас. По возможности, не изобретайте велосипед. ● Material Design, ● Human Interface Guideline, ● Ant Design, ● Salesforce Lightning Design System, ● gov.design, ● дизайн-системы от Альфа Банка и других крупных компаний. #07 Изучайте гайдлайны и дизайн-системы

Slide 32

Slide 32 text

3 2 IT Home

Slide 33

Slide 33 text

3 3 IT Home Протестируйте свой сайд-проект или партизаньте на боевых. Изучайте продукты-конкуренты. #08 Проведите исследование своего продукта

Slide 34

Slide 34 text

3 4 IT Home Проводите не просто функциональное тестирование, но usability-тестирование. По возможности – с реальными пользователями*. В случае с тестирование accessibility – обязательно с реальными пользователями. * Если позволяет NDA.

Slide 35

Slide 35 text

3 5 IT Home Не просто добавляйте компонент, а думайте о последствиях и сценарии целиком. #09 Сохраняйте целостный взгляд на продукт

Slide 36

Slide 36 text

3 6 IT Home Выясняйте неочевидные проблемы и устраняйте очевидные. #10 Решайте проблему, а не просто пишите код

Slide 37

Slide 37 text

3 7 IT Home При регистрации пользователь должен ввести следующие данные (обязательные поля для ввода): ● Имя ● Контактный телефон ● Пароль ● Подтверждение пароля Дополнительные поля для ввода (не обязательные): ● Отчество ● Фамилия ● Email ● Атрибуты карточки для автоматических транзакций Функционал приложения будет доступен после регистрации.

Slide 38

Slide 38 text

3 8 IT Home Мобильное приложение. Пользователь спешит и хочет уехать. Возможно, в условиях непогоды. Итак, он скачивает приложение и… Простая задача: вызвать такси Заполни, пожалуйста, вот это полотно в 10 полей, да, номер карты тоже давай, кстати, пароль не совпадает и вообще недостаточно сложный. Пользователь: - Ловит такси “c бордюра”, - Идет пешком, - Ругает вас, прям сильно ругает и уходит к конкурентам. + =

Slide 39

Slide 39 text

3 9 IT Home Они очень коварны. #11 Будьте внимательны к мелочам

Slide 40

Slide 40 text

4 0 IT Home Не только в рабочих задачах, но и в повседневной жизни. #12 Применяйте человеко- ориентированное мышление

Slide 41

Slide 41 text

4 1 IT Home Простая задача: открыть пакет В супермаркете. В условиях пандемии. В маске. Сухими и холодными пальцами. И палец не слюнявить (даже украдкой)! + = Страдай, клиент, и тереби пакетик.

Slide 42

Slide 42 text

4 2 IT Home Простая задача: открыть пакет В супермаркете. В условиях пандемии. В маске. Сухими и холодными пальцами. И палец не слюнявить (даже украдкой)! + = Разместить диспенсер с антисептиком в зоне фасовки фруктов и овощей. Гигиеничное и простое решение. Полезно не только в условиях пандемии.

Slide 43

Slide 43 text

4 3 IT Home На его потребностях, на его опыте взаимодействия. Мы – не наши пользователи. #13 Сосредоточьтесь на пользователе

Slide 44

Slide 44 text

4 4 IT Home Keep It Short and Simple. #14 KISS

Slide 45

Slide 45 text

4 5 IT Home

Slide 46

Slide 46 text

4 6 IT Home Но не слишком. #15 Относитесь к улучшению UX серьезно

Slide 47

Slide 47 text

4 7 IT Home Насмотренность Эмпатия Здравый смысл Анализ и эксперименты И еще раз...

Slide 48

Slide 48 text

4 8 IT Home Система отступов, размерность элементов. Никаких половинчатых пикселей. Работа по сетке Кнопки, поля для ввода, выпадающие списки, карточки. Их состояния, анатомия и поведение. Базовые элементы Формы, таблицы, визарды. Модальные и немодальные окна. Лучшие практики для них. Элементы посложнее Советы бывалых прагматиков Поддерживаемые разрешения экранов. Брейкпоинты. Адаптив / Респонсив Яркость и контрастность текста/фона. ARIA label и семантический HTML. Тэг ALT. Работа с Voice Over. Доступность Совместимость с библиотеками и возможность реализации отдельных элементов. Браузеры Шрифты (основные и резервные). Начертания. Размерность. Не нужно зоопарка шрифтов и начертаний. Типографика Работа с цветом: деструктивные/позитивные действия, цветовые палитры. Задавать цвет прозрачностью = зло. Цвет Композиция. Визуальная иерархия. Пустое пространство. Консистентность. Другое из визуального дизайна Пустые состояния, экраны ошибок, валидация. Если до сих пор никто на проекте о них не подумал — настало ваше время. Пограничные состояния Оптимизация загрузки — это важный кусочек не только SEO, но и фактор, влияющий на UX. Скорость загрузки страницы Напишите его в комментарии c пометкой “tips” и выиграйте подарок. Здесь мог бы быть ваш совет

Slide 49

Slide 49 text

4 9 IT Home Углубиться ● ui-patterns.com ● nngroup.com ● uxplanet.org ● Подкаст uwebdesign.ru

Slide 50

Slide 50 text

IT Home 5 0 что за презентация про дизайн без цитаты Стива Джобса Здесь должна быть заезженная мощная цитата Стива Джобса

Slide 51

Slide 51 text

IT Home 5 1 Разработчик интерфейсов, дизайнер, бюрошник и просто достойный человек Хорошо дизайнит тот, кто дизайнит последним... Артем Поликарпов

Slide 52

Slide 52 text

5 2 IT Home Спасибо за внимание! https:/ /bit.ly/3lGjJ69 Хочешь быть вместе с Grodno Design Community? Хочешь задать детальные вопросы? Везде в сети я @funnypersimmon Понравились иллюстрации? Это лисскуство “Эхо Лисы” @poslushai

Slide 53

Slide 53 text

IT Home 5 3 Ваши вопросы? ну, почти и советы