Съесть собаку#3. 16/06/2016

1. UX versus Source Code
Valerii Sorokobatko @tuchk4

2. Введение
Поговорим:
• Об очевидных вещах :)
• Почему разработчик не должен делать UX
• О процессах проектирования
• Найдем проблемы
• Рассмотрим примеры
• Советы и выводы

3. UI / UX для пользователя

4. UI / UX для разработчика
UX
Application architecture
Source code
Server API
BUGS

5. UI / UX
• Используем готовый набор компонентов
• Разрабатываем все сами

6. Процесс проектирования
Проектирование Реализация
Как чаще всего бывает, а не как в книгах пишут
Feature
С технической точки зрения

7. Процесс проектирования
Проектирование Реализация
Результат #1:
Feature
Тестирование
• "Кнопка не работает"
• "Неудобно"
• "Давайте проще сделаем"
• "Не нравится"
С технической точки зрения
+ UX
90% проблемы UX

8. Процесс проектирования
Проектирование Реализация
Результат #2:
Feature
Тестирование
Release
"Потому что очень нужно"С технической точки зрения
+ UX

9. Процесс проектирования
Итог:
• Появляются "Белые пятна"
• Остается "Технический долг"
• Дизмораль
• Усложнение кода
• Фикс на фиксе
• Проект превращается в кашу

10. Проблема
30%
70%
Business logic
UI/UX implementation
Большая часть времени уходит не на то, что нужно
Потраченное время:

11. Примеры

12. #1 Чемодан на колесиках

13. #1 Чемодан на колесиках
Если бы делал программист:
• Сменные колесики
• Колесики для разной погоды и поверхности
• Сменная обшивка
• Возможность создания кластера чемоданов
• Распределенная нагрузка
Максимально гибко

14. #1 Чемодан на колесиках
Если бы делал программист:
• Добавление новых колес
• Добавление новых отсеков
• Модульность - поддержка сторонних
разработчиков
Расширяемость

15. #1 Чемодан на колесиках
Если бы делал программист:
• Авторегулировка скорости
• Звуковой сигнал
• Трекер передвижений
• Предупреждение о препятствиях
Новые технологии

16. #1 Чемодан на колесиках
Если бы делал программист:
• Социальная сеть для владельцев
чемоданов
• Солнечные батареи для зарядки телефонов
Фичи

17. #1 Чемодан на колесиках
Что сказали бы QA:
Как это тестировать?

18. #1 Чемодан на колесиках
Как это все показать и расказать заказчику, чтобы он понял?

19. #1 Чемодан на колесиках

20. #1 Чемодан на колесиках
А нужно было всего лишь:

21. #2 Tags multiselect
• Выбор нескольких тегов
• Добавление новых
• Google Material UX Specification
• Набор готовых компонентов
Что у нас есть:

22. #2 Tags multiselect
Если бы делал программист:
#1 Multiselect #2 Button #3 New tag dialog

23. #2 Tags multiselect
Как бы делал UX

24. #2 Tags multiselect
Проблемы:
• Дропдаун в дропдауне
• Не соответствует спецификации
• Проблемы с позиционированием
• Что будет с мобильной версией?
Как бы делал UX

25. #2 Tags multiselect
Проблемы с позиционированием

26. #2 Tags multiselect
Итог - делаем все сами
• Разработка своего дропдауена
• Разработка мультиселекта
• Позиционирование
• Интеграция с формами
• Поддержка различных стостояний
• Перфоманс?
и тратим время на:
Как бы делал UX

27. #3 Editable tree
• До 10 уровней вложенности
• Более 30 полей в каждой ноде

28. #3 Editable tree
• 1 день - работа с данными
• 10 дней - поиск варианта отображения
Потраченное время:
Хороший вариант найден не был

29. #3 Editable tree
• Остановили работу разработчика
• Поставили задачу UX дизайнеру из другой
команды
Как мы поступили:
Разработчик был рад и счастлив :)

30. #3 Editable tree
Как нужно было сделать:
Работа с данными Рефакторинг / Оптмизация / Тесты Реализация UX
Разработка UX
Dev
UX
Разработчик занимается тем, чем нужно
Обсуждение

31. Developer vs UX
Developer
• Архитектура
• Проектирование
• Рефакторинг
• Тесты
• Оптимизация
• Исследования
• Оценивать влияние UX
решений на исходный код
• Прокачивать дизайнера
UI/UX
• Внешний вид
• Компановка элементов
• Взаимное расположение
• Набор возможностей
• Желания / ожидания

32. Советы

33. Правила
• Если работает, но не нравится - это не
проблема разработчика
• Должен быть ответственный за принятие
дизайн решений (адвокат)
• Прокачивать UX дизайнера

34. Обязательно к прочтению
"Психбольница в руках пациента" Alan Cooper

35. Советы
• Выбрать UX спецификацию и следовать ей
• Использовать Storybook или подобное
• Использовать то, что есть, и не плодить
компоненты
• Если PM не понимает вас - подарите ему
книгу :)

36. Советы
• Используйте персонажей вместо
пользователей (подробнее в книге)
• Занимайтесь проектированием
• "Очень нужно" - работает только на этапе
прототипирования

37. Советы
Не забирайте чужую работу :)
Работа с данными Рефакторинг / Оптмизация / Тесты Реализация UX
Разработка UX
Dev
UX
Обсуждение

38. Счастливый разработчик:
• Который не тратит вермя на лишнее дерьмо
• И занимается тем, чем нужно и интересно

39. Спасибо за внимание
Valerii Sorokobatko @tuchk4
Вопросы?