Влияние UX на исходный код приложения. Валерий...
Transcript of Влияние UX на исходный код приложения. Валерий...
UX versus Source Code
Valerii Sorokobatko @tuchk4
Введение
Поговорим:
• Об очевидных вещах :)
• Почему разработчик не должен делать UX
• О процессах проектирования
• Найдем проблемы
• Рассмотрим примеры
• Советы и выводы
UI / UX для пользователя
UI / UX для разработчика
UX
Application architecture
Source code
Server API
BUGS
UI / UX
• Используем готовый набор компонентов
• Разрабатываем все сами
Процесс проектирования
Проектирование Реализация
Как чаще всего бывает, а не как в книгах пишут
Feature
С технической точки зрения
Процесс проектирования
Проектирование Реализация
Результат #1:
Feature
Тестирование
• "Кнопка не работает"
• "Неудобно"
• "Давайте проще сделаем"
• "Не нравится"
С технической точки зрения
+ UX
90% проблемы UX
Процесс проектирования
Проектирование Реализация
Результат #2:
Feature
Тестирование
Release
"Потому что очень нужно"С технической точки зрения
+ UX
Процесс проектирования
Итог:
• Появляются "Белые пятна"
• Остается "Технический долг"
• Дизмораль
• Усложнение кода
• Фикс на фиксе
• Проект превращается в кашу
Проблема
30%
70%
Business logic
UI/UX implementation
Большая часть времени уходит не на то, что нужно
Потраченное время:
Примеры
#1 Чемодан на колесиках
#1 Чемодан на колесикахЕсли бы делал программист:
• Сменные колесики
• Колесики для разной погоды и поверхности
• Сменная обшивка
• Возможность создания кластера чемоданов
• Распределенная нагрузка
Максимально гибко
#1 Чемодан на колесикахЕсли бы делал программист:
• Добавление новых колес
• Добавление новых отсеков
• Модульность - поддержка сторонних
разработчиков
Расширяемость
#1 Чемодан на колесикахЕсли бы делал программист:
• Авторегулировка скорости
• Звуковой сигнал
• Трекер передвижений
• Предупреждение о препятствиях
Новые технологии
#1 Чемодан на колесикахЕсли бы делал программист:
• Социальная сеть для владельцев
чемоданов
• Солнечные батареи для зарядки телефонов
Фичи
#1 Чемодан на колесикахЧто сказали бы QA:
Как это тестировать?
#1 Чемодан на колесиках
Как это все показать и расказать заказчику, чтобы он понял?
#1 Чемодан на колесиках
#1 Чемодан на колесиках
А нужно было всего лишь:
#2 Tags multiselect
• Выбор нескольких тегов
• Добавление новых
• Google Material UX Specification
• Набор готовых компонентов
Что у нас есть:
#2 Tags multiselectЕсли бы делал программист:
#1 Multiselect #2 Button #3 New tag dialog
#2 Tags multiselectКак бы делал UX
#2 Tags multiselect
Проблемы:
• Дропдаун в дропдауне
• Не соответствует спецификации
• Проблемы с позиционированием
• Что будет с мобильной версией?
Как бы делал UX
#2 Tags multiselectПроблемы с позиционированием
#2 Tags multiselect
Итог - делаем все сами
• Разработка своего дропдауена
• Разработка мультиселекта
• Позиционирование
• Интеграция с формами
• Поддержка различных стостояний
• Перфоманс?
и тратим время на:
Как бы делал UX
#3 Editable tree
• До 10 уровней вложенности
• Более 30 полей в каждой ноде
#3 Editable tree
• 1 день - работа с данными
• 10 дней - поиск варианта отображения
Потраченное время:
Хороший вариант найден не был
#3 Editable tree
• Остановили работу разработчика
• Поставили задачу UX дизайнеру из другой
команды
Как мы поступили:
Разработчик был рад и счастлив :)
#3 Editable treeКак нужно было сделать:
Работа с данными Рефакторинг / Оптмизация / Тесты Реализация UX
Разработка UX
Dev
UX
Разработчик занимается тем, чем нужно
Обсуждение
Developer vs UX
Developer
• Архитектура
• Проектирование
• Рефакторинг
• Тесты
• Оптимизация
• Исследования
• Оценивать влияние UX решений на исходный код
• Прокачивать дизайнера
UI/UX
• Внешний вид
• Компановка элементов
• Взаимное расположение
• Набор возможностей
• Желания / ожидания
Советы
Правила
• Если работает, но не нравится - это не
проблема разработчика
• Должен быть ответственный за принятие
дизайн решений (адвокат)
• Прокачивать UX дизайнера
Обязательно к прочтению"Психбольница в руках пациента" Alan Cooper
Советы
• Выбрать UX спецификацию и следовать ей
• Использовать Storybook или подобное
• Использовать то, что есть, и не плодить
компоненты
• Если PM не понимает вас - подарите ему
книгу :)
Советы
• Используйте персонажей вместо
пользователей (подробнее в книге)
• Занимайтесь проектированием
• "Очень нужно" - работает только на этапе
прототипирования
Советы
Не забирайте чужую работу :)
Работа с данными Рефакторинг / Оптмизация / Тесты Реализация UX
Разработка UX
Dev
UX
Обсуждение
Счастливый разработчик:
• Который не тратит вермя на лишнее дерьмо
• И занимается тем, чем нужно и интересно
Спасибо за внимание
Valerii Sorokobatko @tuchk4
Вопросы?