UI/UX — это то, как используется продукт: экраны, последовательности действий и решения, которые принимает пользователь, ещё не прочитав ни слова из маркетинговых текстов. Мы разрабатываем весь путь пользователя, а не просто макет: исследование, структуру, интерфейс и систему, благодаря которой все экраны «говорят на одном языке».
Что такое UI/UX-дизайн?
Дизайн UI/UX — это то, что отличает продукт, которым люди могут пользоваться, от продукта, которым они действительно пользуются. UX — это путь: то, что человек пытается сделать, порядок, в котором он это делает, и каждое решение, которое вы просите его принять на этом пути. UI — это поверхность, на которой прорисовывается этот путь: шрифт, интервалы, состояния и надписи на кнопках.
Их продают как единое целое, потому что в отдельности они не работают. Красивый экран, размещённый в неподходящем месте в пользовательском потоке, по-прежнему ведёт в тупик, а тщательно продуманный пользовательский поток, оформлённый тремя шрифтами и четырьмя оттенками синего, воспринимается как незавершённый. Ни то, ни другое не выдерживает проверки, если реализовано отдельно.
Большая часть работы выполняется ещё до того, как что-либо начнёт рисоваться. Мы наблюдаем за тем, как выполняется работа сегодня, выявляем моменты, в которых люди сдаются, и только после этого определяем, как будут выглядеть экраны. В результате вы получаете не папку с макетами, а систему дизайна — набор компонентов и правил, с помощью которых можно создать даже десятый экран без участия дизайнера.
Что мы делаем для вас
Шесть элементов, которые можно приобрести как в комплекте, так и по отдельности. В большинстве случаев внедрение начинается с верхнего уровня и завершается, как только ваша команда сможет взять на себя остальные задачи.
Интервью, записи рабочих сессий и подробное описание рабочего процесса в его современном виде. Мы ищем моменты, когда люди задумываются, импровизируют или обращаются за помощью к коллеге — именно эти экраны стоит переработать, и они редко фигурируют в техническом задании.
Что где находится и что нужно держать в голове, чтобы это найти. Карты сайта, навигация и система наименований — а это и есть основная часть проблемы: половина жалоб на неудобство использования, с которыми к нам обращаются, связана с тем, что два разных элемента обозначаются одним и тем же словом.
Каждый экран в любом состоянии — пустой, загружающийся, с одной строкой, с четырьмястами строками и с ошибкой, которую никто не предусматривал. Экран, существующий только в идеальном состоянии, импровизируется в коде, и именно эта импровизация и попадает в финальную версию.
Что движется, на какое расстояние и почему. Движение, объясняющее происхождение объекта, стоит реализовывать; движение, служащее лишь украшением перехода, — это задержка, за которую вы заставляете пользователя платить.
Достаточно привлекателен, чтобы показать его тому, кто его ещё не видел. Прототип нужен для того, чтобы недорого исправить ошибки — каждый вопрос, который он решает, в противном случае пришлось бы решать в ходе спринта.
Маркеры, компоненты и правила их комбинирования, предоставленные в том виде, в котором ваши инженеры уже их внедряют. Именно от этого зависит, сохранится ли проект в рабочем состоянии в течение шести месяцев после нашего ухода.
Как проходит проект по разработке дизайна
Пять этапов, рассчитанных на срок от четырёх до десяти недель, в зависимости от количества потоков и объёма текущего продукта, с которым нам сначала предстоит ознакомиться.
Мы используем то, что уже есть, изучаем запросы в службу поддержки и общаемся с теми, кто выполняет эту работу. Прежде чем что-либо предложить, мы можем описать их рабочий день их же словами.
Каждый путь прохождения продукта, прослеженный от начала до конца. Именно здесь происходит большая часть сокращений — в девятиэтапном процессе обычно четыре этапа существуют только из-за какого-то ограничения, которое никто не пересмотрел.
Определите шрифт, цвет, интервалы и набор компонентов. Именно благодаря тому, что эти параметры устанавливаются один раз, разработка экранов после третьего варианта занимает часы, а не дни, и даже двадцатый вариант по-прежнему выглядит так же, как и первый.
Просмотры проводятся в несколько раундов, причем каждый из них проходит в присутствии человека, не связанного с проектом. Мы следим за тем моментом, когда они перестают рассказывать и начинают строить догадки.
Система, исходные файлы и пошаговое руководство для тех, кто будет её создавать. Если ваши инженеры не смогут создать экран № 21 без нашей помощи, значит, мы ещё не закончили.
Почему это важно
Дизайн проявляется в показателях, которые никто не относит к сфере дизайна: объём поддержки, коэффициент активации и время прохождения вводного курса.
В большинстве случаев отток пользователей не связан с потерей интереса. Это момент, когда следующий шаг не был очевиден — его можно было обнаружить, и исправить это было несложно, как только он становился видимым.
Продукт, который понятен сам по себе, не требует предварительного обращения в службу поддержки, чтобы им можно было воспользоваться. Это и затраты на продажи, и затраты на поддержку, и те, и другие носят периодический характер.
Вопросы, которые повторяются в почтовом ящике службы поддержки, представляют собой список проблем проектирования, упорядоченных по приоритету. Устранение трёх основных проблем, как правило, способствует увеличению объёма работы в большей степени, чем набор новых сотрудников.
Набор компонентов с определёнными состояниями устраняет главный источник неоднозначности на этапе сборки: решения, принимаемые в пул-реквесте тем, кто просто оказался поблизости.
Контрастность, порядок фокусировки и маршруты навигации по клавиатуре должны быть заложены на этапе разработки, а не корректироваться позже. Доработка доступности впоследствии означает перерисовку экранов, что является более затратным вариантом.
Система — это то, что позволяет десятому экрану оставаться частью того же продукта, что и первый. Без неё каждая функция становится предметом отдельных переговоров, а отклонение от первоначального замысла становится заметным только в совокупности.
Где это уже работает.
Следующий шаг
Давайте посмотрим на те экраны, которые у вас уже есть.
Пришлите нам продукт или его описание. Мы сообщим вам, что мы бы изменили в первую очередь и почему. Без презентации.
