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

Вопросы?