Влияние UX на исходный код приложения. Валерий...
Transcript of Влияние UX на исходный код приложения. Валерий...
![Page 1: Влияние UX на исходный код приложения. Валерий Сорокобатько](https://reader034.fdocuments.net/reader034/viewer/2022042611/586f8f4b1a28ab54768b74e3/html5/thumbnails/1.jpg)
UX versus Source Code
Valerii Sorokobatko @tuchk4
![Page 2: Влияние UX на исходный код приложения. Валерий Сорокобатько](https://reader034.fdocuments.net/reader034/viewer/2022042611/586f8f4b1a28ab54768b74e3/html5/thumbnails/2.jpg)
Введение
Поговорим:
• Об очевидных вещах :)
• Почему разработчик не должен делать UX
• О процессах проектирования
• Найдем проблемы
• Рассмотрим примеры
• Советы и выводы
![Page 3: Влияние UX на исходный код приложения. Валерий Сорокобатько](https://reader034.fdocuments.net/reader034/viewer/2022042611/586f8f4b1a28ab54768b74e3/html5/thumbnails/3.jpg)
UI / UX для пользователя
![Page 4: Влияние UX на исходный код приложения. Валерий Сорокобатько](https://reader034.fdocuments.net/reader034/viewer/2022042611/586f8f4b1a28ab54768b74e3/html5/thumbnails/4.jpg)
UI / UX для разработчика
UX
Application architecture
Source code
Server API
BUGS
![Page 5: Влияние UX на исходный код приложения. Валерий Сорокобатько](https://reader034.fdocuments.net/reader034/viewer/2022042611/586f8f4b1a28ab54768b74e3/html5/thumbnails/5.jpg)
UI / UX
• Используем готовый набор компонентов
• Разрабатываем все сами
![Page 6: Влияние UX на исходный код приложения. Валерий Сорокобатько](https://reader034.fdocuments.net/reader034/viewer/2022042611/586f8f4b1a28ab54768b74e3/html5/thumbnails/6.jpg)
Процесс проектирования
Проектирование Реализация
Как чаще всего бывает, а не как в книгах пишут
Feature
С технической точки зрения
![Page 7: Влияние UX на исходный код приложения. Валерий Сорокобатько](https://reader034.fdocuments.net/reader034/viewer/2022042611/586f8f4b1a28ab54768b74e3/html5/thumbnails/7.jpg)
Процесс проектирования
Проектирование Реализация
Результат #1:
Feature
Тестирование
• "Кнопка не работает"
• "Неудобно"
• "Давайте проще сделаем"
• "Не нравится"
С технической точки зрения
+ UX
90% проблемы UX
![Page 8: Влияние UX на исходный код приложения. Валерий Сорокобатько](https://reader034.fdocuments.net/reader034/viewer/2022042611/586f8f4b1a28ab54768b74e3/html5/thumbnails/8.jpg)
Процесс проектирования
Проектирование Реализация
Результат #2:
Feature
Тестирование
Release
"Потому что очень нужно"С технической точки зрения
+ UX
![Page 9: Влияние UX на исходный код приложения. Валерий Сорокобатько](https://reader034.fdocuments.net/reader034/viewer/2022042611/586f8f4b1a28ab54768b74e3/html5/thumbnails/9.jpg)
Процесс проектирования
Итог:
• Появляются "Белые пятна"
• Остается "Технический долг"
• Дизмораль
• Усложнение кода
• Фикс на фиксе
• Проект превращается в кашу
![Page 10: Влияние UX на исходный код приложения. Валерий Сорокобатько](https://reader034.fdocuments.net/reader034/viewer/2022042611/586f8f4b1a28ab54768b74e3/html5/thumbnails/10.jpg)
Проблема
30%
70%
Business logic
UI/UX implementation
Большая часть времени уходит не на то, что нужно
Потраченное время:
![Page 11: Влияние UX на исходный код приложения. Валерий Сорокобатько](https://reader034.fdocuments.net/reader034/viewer/2022042611/586f8f4b1a28ab54768b74e3/html5/thumbnails/11.jpg)
Примеры
![Page 12: Влияние UX на исходный код приложения. Валерий Сорокобатько](https://reader034.fdocuments.net/reader034/viewer/2022042611/586f8f4b1a28ab54768b74e3/html5/thumbnails/12.jpg)
#1 Чемодан на колесиках
![Page 13: Влияние UX на исходный код приложения. Валерий Сорокобатько](https://reader034.fdocuments.net/reader034/viewer/2022042611/586f8f4b1a28ab54768b74e3/html5/thumbnails/13.jpg)
#1 Чемодан на колесикахЕсли бы делал программист:
• Сменные колесики
• Колесики для разной погоды и поверхности
• Сменная обшивка
• Возможность создания кластера чемоданов
• Распределенная нагрузка
Максимально гибко
![Page 14: Влияние UX на исходный код приложения. Валерий Сорокобатько](https://reader034.fdocuments.net/reader034/viewer/2022042611/586f8f4b1a28ab54768b74e3/html5/thumbnails/14.jpg)
#1 Чемодан на колесикахЕсли бы делал программист:
• Добавление новых колес
• Добавление новых отсеков
• Модульность - поддержка сторонних
разработчиков
Расширяемость
![Page 15: Влияние UX на исходный код приложения. Валерий Сорокобатько](https://reader034.fdocuments.net/reader034/viewer/2022042611/586f8f4b1a28ab54768b74e3/html5/thumbnails/15.jpg)
#1 Чемодан на колесикахЕсли бы делал программист:
• Авторегулировка скорости
• Звуковой сигнал
• Трекер передвижений
• Предупреждение о препятствиях
Новые технологии
![Page 16: Влияние UX на исходный код приложения. Валерий Сорокобатько](https://reader034.fdocuments.net/reader034/viewer/2022042611/586f8f4b1a28ab54768b74e3/html5/thumbnails/16.jpg)
#1 Чемодан на колесикахЕсли бы делал программист:
• Социальная сеть для владельцев
чемоданов
• Солнечные батареи для зарядки телефонов
Фичи
![Page 17: Влияние UX на исходный код приложения. Валерий Сорокобатько](https://reader034.fdocuments.net/reader034/viewer/2022042611/586f8f4b1a28ab54768b74e3/html5/thumbnails/17.jpg)
#1 Чемодан на колесикахЧто сказали бы QA:
Как это тестировать?
![Page 18: Влияние UX на исходный код приложения. Валерий Сорокобатько](https://reader034.fdocuments.net/reader034/viewer/2022042611/586f8f4b1a28ab54768b74e3/html5/thumbnails/18.jpg)
#1 Чемодан на колесиках
Как это все показать и расказать заказчику, чтобы он понял?
![Page 19: Влияние UX на исходный код приложения. Валерий Сорокобатько](https://reader034.fdocuments.net/reader034/viewer/2022042611/586f8f4b1a28ab54768b74e3/html5/thumbnails/19.jpg)
#1 Чемодан на колесиках
![Page 20: Влияние UX на исходный код приложения. Валерий Сорокобатько](https://reader034.fdocuments.net/reader034/viewer/2022042611/586f8f4b1a28ab54768b74e3/html5/thumbnails/20.jpg)
#1 Чемодан на колесиках
А нужно было всего лишь:
![Page 21: Влияние UX на исходный код приложения. Валерий Сорокобатько](https://reader034.fdocuments.net/reader034/viewer/2022042611/586f8f4b1a28ab54768b74e3/html5/thumbnails/21.jpg)
#2 Tags multiselect
• Выбор нескольких тегов
• Добавление новых
• Google Material UX Specification
• Набор готовых компонентов
Что у нас есть:
![Page 22: Влияние UX на исходный код приложения. Валерий Сорокобатько](https://reader034.fdocuments.net/reader034/viewer/2022042611/586f8f4b1a28ab54768b74e3/html5/thumbnails/22.jpg)
#2 Tags multiselectЕсли бы делал программист:
#1 Multiselect #2 Button #3 New tag dialog
![Page 23: Влияние UX на исходный код приложения. Валерий Сорокобатько](https://reader034.fdocuments.net/reader034/viewer/2022042611/586f8f4b1a28ab54768b74e3/html5/thumbnails/23.jpg)
#2 Tags multiselectКак бы делал UX
![Page 24: Влияние UX на исходный код приложения. Валерий Сорокобатько](https://reader034.fdocuments.net/reader034/viewer/2022042611/586f8f4b1a28ab54768b74e3/html5/thumbnails/24.jpg)
#2 Tags multiselect
Проблемы:
• Дропдаун в дропдауне
• Не соответствует спецификации
• Проблемы с позиционированием
• Что будет с мобильной версией?
Как бы делал UX
![Page 25: Влияние UX на исходный код приложения. Валерий Сорокобатько](https://reader034.fdocuments.net/reader034/viewer/2022042611/586f8f4b1a28ab54768b74e3/html5/thumbnails/25.jpg)
#2 Tags multiselectПроблемы с позиционированием
![Page 26: Влияние UX на исходный код приложения. Валерий Сорокобатько](https://reader034.fdocuments.net/reader034/viewer/2022042611/586f8f4b1a28ab54768b74e3/html5/thumbnails/26.jpg)
#2 Tags multiselect
Итог - делаем все сами
• Разработка своего дропдауена
• Разработка мультиселекта
• Позиционирование
• Интеграция с формами
• Поддержка различных стостояний
• Перфоманс?
и тратим время на:
Как бы делал UX
![Page 27: Влияние UX на исходный код приложения. Валерий Сорокобатько](https://reader034.fdocuments.net/reader034/viewer/2022042611/586f8f4b1a28ab54768b74e3/html5/thumbnails/27.jpg)
#3 Editable tree
• До 10 уровней вложенности
• Более 30 полей в каждой ноде
![Page 28: Влияние UX на исходный код приложения. Валерий Сорокобатько](https://reader034.fdocuments.net/reader034/viewer/2022042611/586f8f4b1a28ab54768b74e3/html5/thumbnails/28.jpg)
#3 Editable tree
• 1 день - работа с данными
• 10 дней - поиск варианта отображения
Потраченное время:
Хороший вариант найден не был
![Page 29: Влияние UX на исходный код приложения. Валерий Сорокобатько](https://reader034.fdocuments.net/reader034/viewer/2022042611/586f8f4b1a28ab54768b74e3/html5/thumbnails/29.jpg)
#3 Editable tree
• Остановили работу разработчика
• Поставили задачу UX дизайнеру из другой
команды
Как мы поступили:
Разработчик был рад и счастлив :)
![Page 30: Влияние UX на исходный код приложения. Валерий Сорокобатько](https://reader034.fdocuments.net/reader034/viewer/2022042611/586f8f4b1a28ab54768b74e3/html5/thumbnails/30.jpg)
#3 Editable treeКак нужно было сделать:
Работа с данными Рефакторинг / Оптмизация / Тесты Реализация UX
Разработка UX
Dev
UX
Разработчик занимается тем, чем нужно
Обсуждение
![Page 31: Влияние UX на исходный код приложения. Валерий Сорокобатько](https://reader034.fdocuments.net/reader034/viewer/2022042611/586f8f4b1a28ab54768b74e3/html5/thumbnails/31.jpg)
Developer vs UX
Developer
• Архитектура
• Проектирование
• Рефакторинг
• Тесты
• Оптимизация
• Исследования
• Оценивать влияние UX решений на исходный код
• Прокачивать дизайнера
UI/UX
• Внешний вид
• Компановка элементов
• Взаимное расположение
• Набор возможностей
• Желания / ожидания
![Page 32: Влияние UX на исходный код приложения. Валерий Сорокобатько](https://reader034.fdocuments.net/reader034/viewer/2022042611/586f8f4b1a28ab54768b74e3/html5/thumbnails/32.jpg)
Советы
![Page 33: Влияние UX на исходный код приложения. Валерий Сорокобатько](https://reader034.fdocuments.net/reader034/viewer/2022042611/586f8f4b1a28ab54768b74e3/html5/thumbnails/33.jpg)
Правила
• Если работает, но не нравится - это не
проблема разработчика
• Должен быть ответственный за принятие
дизайн решений (адвокат)
• Прокачивать UX дизайнера
![Page 34: Влияние UX на исходный код приложения. Валерий Сорокобатько](https://reader034.fdocuments.net/reader034/viewer/2022042611/586f8f4b1a28ab54768b74e3/html5/thumbnails/34.jpg)
Обязательно к прочтению"Психбольница в руках пациента" Alan Cooper
![Page 35: Влияние UX на исходный код приложения. Валерий Сорокобатько](https://reader034.fdocuments.net/reader034/viewer/2022042611/586f8f4b1a28ab54768b74e3/html5/thumbnails/35.jpg)
Советы
• Выбрать UX спецификацию и следовать ей
• Использовать Storybook или подобное
• Использовать то, что есть, и не плодить
компоненты
• Если PM не понимает вас - подарите ему
книгу :)
![Page 36: Влияние UX на исходный код приложения. Валерий Сорокобатько](https://reader034.fdocuments.net/reader034/viewer/2022042611/586f8f4b1a28ab54768b74e3/html5/thumbnails/36.jpg)
Советы
• Используйте персонажей вместо
пользователей (подробнее в книге)
• Занимайтесь проектированием
• "Очень нужно" - работает только на этапе
прототипирования
![Page 37: Влияние UX на исходный код приложения. Валерий Сорокобатько](https://reader034.fdocuments.net/reader034/viewer/2022042611/586f8f4b1a28ab54768b74e3/html5/thumbnails/37.jpg)
Советы
Не забирайте чужую работу :)
Работа с данными Рефакторинг / Оптмизация / Тесты Реализация UX
Разработка UX
Dev
UX
Обсуждение
![Page 38: Влияние UX на исходный код приложения. Валерий Сорокобатько](https://reader034.fdocuments.net/reader034/viewer/2022042611/586f8f4b1a28ab54768b74e3/html5/thumbnails/38.jpg)
Счастливый разработчик:
• Который не тратит вермя на лишнее дерьмо
• И занимается тем, чем нужно и интересно
![Page 39: Влияние UX на исходный код приложения. Валерий Сорокобатько](https://reader034.fdocuments.net/reader034/viewer/2022042611/586f8f4b1a28ab54768b74e3/html5/thumbnails/39.jpg)
Спасибо за внимание
Valerii Sorokobatko @tuchk4
Вопросы?