Фак юикс

Конспект одноимённого доклада Ильи Бирмана с Дизайн-просмотра 2020 года в Санкт-Петербурге (видео).

Разделение на UX- и UI-дизайн

Самая большая чушь — разделение работы дизайнера на UX- и UI-дизайн, как будто это две разных профессии. UI-дизайнер руководствуется чувствами, рисует красоту, градиенты, скругления углов, выбирает шрифты. UX-дизайнер занимается интерфейсами очень серьёзно, с умом, подключением научных методов. У него всё на метриках, не то что у UI-дизайнера, у которого всё от балды.

Информация об этом разделении дошла уже и до клиентов. Недавно один спросил:

Вы делаете UX или только UI?

Обратите внимание на формулировку, вариант «только UX» даже не рассматривается.

Что клиент пытается выяснить на самом деле? Он понимает, что дизайнеры зачем-то придумали такое разделение, и хочет узнать, будет дизайнер думать или просто рисовать.

Деление дизайнеров на умных и красивых — полная хрень. В индустрии это поняли и стали писать UX/UI, потому что только UX или только UI никому не нужны (особенно только UX).

Сама аббревиатура чудовищна:

• Две из четырёх букв обозначают одно и то же (User);
• Слеш непонятно как читать и непонятно что значит (то ли «и», то ли «или»);
• Буква X обозначает слово, начинающееся на другую букву (Experience).

Это обозначение придумали UX-дизайнеры, чтобы возвыситься, мол, другие кнопочки рисуют, а мы рисуем вайрфреймы, проводим эксперименты, считаем метрики, у нас всё очень круто.

Чем занимается дизайнер

В классических книжках работу дизайнера в первую очередь связывают со смыслом: как продать удачной метафорой, как логически организовать интерфейс, чтобы человек в нём ориентировался. Для этого надо понимать, как люди взаимодействуют друг с другом, особенности памяти, когнитивных и моторных навыков и так далее.

В начале нулевых тема эстетики в интерфейсе вообще не всплывала. Никто не писал в книжках о градиентах и скруглениях. Многие не понимали, в чём преимущество Apple, и видели только блестящие кнопочки. Даже Стиву Джобсу приходилось объяснять, что дизайн — это как вещи работают, а не градиентики. Блестящие кнопки — это дополнительный слой.

Графическим дизайном интерфейсов занимались в Apple, а другим до этого не было дела. В середине нулевых интерфейсом заинтересовался бизнес, и ситуация стала меняться. Банки и интернет-магазины стали предлагать свои услуги в интернете и при этом хотели отличаться от множества конкурентов, проявлять свою уникальность.

В то же время по тем же причинам дизайнеры озаботились работоспособностью интерфейса, чтобы он не просто следовал гайдлайнам и был красивым, но и отвечал интересам бизнеса. Бизнесу надо продавать, находить клиентов, улучшать репутацию и решать другие задачи.

Работа дизайнера начинается со смысла, и потом на неё наслаивается графический дизайн и работоспособность интерфейса.

Интерфейсы на сайте World Chess

В «Бюро Горбунова» для сайта World Chess спроектировали интерфейс регистрации, выбора тарифа, настройки паспорта FIDE, оплаты и продления подписки.

В новой версии пользователь мог подключить новую платную услугу — возможность играть онлайн с рейтингом FIDE. Надо было не просто нарисовать новый интерфейс где-то на сайте, а внедрить новую услугу.

В простейшем случае при регистрации пользователь выбирает тип профиля, указывает почту, подтверждает её и всё. Если выбранный тип профиля платный, появляется ответвление сценария с оплатой. Перед выбором типа профиля стоит рассказать о плюсах платных вариантов, чтобы люди захотели их выбрать.

При этом:

• Чтобы играть с рейтингом, надо сделать паспорт FIDE, заполнить анкету и загрузить фотографию;
• При создании паспорта могут быть ответвления: плохое фото, есть игрок с такими же анкетными данными, лежит база FIDE;
• На других шагах тоже могут быть проблемы: занята указанная почта, не пришло письмо для её подтверждения, не прошла оплата;
• Если занята почта, значит, человек уже регистрировался, и надо сообщить об этом и показать ему интерфейс входа;
• Если не прошла оплата, можно предложить попробовать ещё раз, оплатить другой картой. Должна быть возможность пропустить этот шаг, иначе человек просто уйдёт. Об оплате можно напомнить потом;
• Человек может передумать создавать паспорт FIDE, когда увидит, сколько в анкете полей. Надо дать возможность пропустить и этот шаг, и помочь заполнить анкету потом, после завершения регистрации.

В итоге регистрация может быть завершена в разной степени, и всё это надо разруливать.

Также:

• При создании паспорта можно найти человека с именем и годом рождения, которые указал пользователь. Возникает сценарий, когда человек уже в FIDE (мог играть в турнирах, но не регистрировался на сайте);
• Он может с самого начала знать, что он в FIDE;
• Можно найти нескольких человек с таким же именем. Тогда надо помочь человеку выбрать в списке себя. И потом ему придётся подтвердить личность (чтобы никто посторонний не мог играть с рейтингом Гарри Каспарова);
• Часто играть в шахматы начинают дети. У них нет своих платёжных средств, и нужна возможность сделать так, чтобы за них заплатил кто-то другой;
• Ещё бывают промокоды и возможность подарить платную услугу;
• Тот, кто так и не оплатил услугу, может в конце концов передумать и пользоваться только бесплатными возможностями;
• Заплативший пользователь больше мотивирован создать паспорт FIDE. Это стоит учесть при определении порядка шагов.

Можно распутать эти верёвочки, нарисовать 58 экранов, которые нужны для всех этих случаев, и считать задачу выполненной. Но это плохой дизайн: его сложно понять, разрабатывать, тестировать и поддерживать.

Процесс можно разделить на 5 шагов:

1. Выбор платных услуг, которые понадобятся;
2. Подтверждение почты;
3. Настройка пароля;
4. Действия, связанные с платными услугами: оплата или получение ссылки для оплаты, создание или поиск профиля в FIDE;
5. Поздравление с регистрацией, отображающееся на стартовой странице личного кабинета. Если её перезагрузить, останется обычная стартовая страница, без поздравления. На ней можно выбрать платные услуги и перейти к их оплате (4-й шаг).

У стартовой страницы кабинета могут быть состояния:

• Платная услуга подключена, вместо переключателя отображается галочка;
• Оплата не прошла, у выбранной услуги отображается включённый переключатель, кнопка перехода к оплате и плашка с подсказкой;
• Не подключён профиль FIDE, отображается соответствующая плашка.

Это хороший дизайн:

• В восприятии команды и пользователей это 5 понятных шагов;
• Они всегда работают одинаково вне зависимости от сложности общего сценария, и работу каждого легко протестировать;
• Всё это можно внедрять поэтапно. Например, сценарий подарка в 1-й версии можно пропустить.

Исследование и тестирование

Исследование — это хорошо, но есть проблемы.

1. Иногда так называют то, что исследованием не является

Например, когда просто поговорили с пользователями и что-то узнали о задаче, прежде чем её решать.

Надо вникать в задачу, разбираться, зачем мы её решаем, для кого, почему за решение хотят заплатить, как мы будем оценивать результат. Это просто процесс понимания задачи, не надо раздувать его значимость.

2. Часто исследованием оправдывают стагнацию

Исследования должны открывать что-то новое. На деле исследователи смотрят на конкурентов и предлагают делать так же, даже если сделано плохо.

3. Иногда исследованием обосновывают плохие решения

Можно найти исследования как о положительном, так и отрицательном влиянии одних и тех же продуктов на человеческий организм. С интерфейсом ситуация похожая. Можно найти исследования, которые обоснуют всё, что угодно.

Плохо размещать в начале страниц бесполезные «клипартовые» картинки. Но есть исследование о том, что с картинками конверсия выше. И это исследование позволяет дизайнеру оправдать то, что у него вместо нормальных картинок стоят клипарты.

4. Главная беда: исследованиями подменяют экспертизу

У полей формы были подсказки, которые пользователь мог прочитать, нажав на знаки вопроса. Исследование показало, что люди не находили эти подсказки. Решили убрать знаки вопроса и сразу показывать подсказки к полям.

Это очевидное решение. Уже 30 лет известно, что никто не нажимает на эти знаки вопроса. Люди проводят такие исследования, потому что некомпетентны. Предполагается, что специалисты чему-то учатся, у них есть опыт, и им не нужно тестировать все свои решения.

5. Исследованиями оправдывают очевидные решения

Понятно, что ссылаясь на исследование, дизайнер добавляет веса своему решению. Но в итоге получается формула «Исследование показало X, поэтому мы сделали нормально». Первую часть можно убрать и делать нормально сразу.

Поскольку кофе обычно заказывают на ходу, мы спроектировали заказ всего в три шага.

А если бы люди заказывали не на ходу, вы бы добавили шагов? Вы сделали столько шагов, сколько надо, убрали всё лишнее, это просто нормальное проектирование. Это справедливо и для кофейни, и для агентства недвижимости.

Знания и опыт

Консультация эксперта может заменить некоторые пользовательские исследования. Эксперт ещё и подскажет, как исправить найденные ошибки.

7 человек перечислили те штуки, на которые ты тоже обратил внимание. Это явный плюс консультации: она вполне может заменить исследование пользовательского опыта.

Дмитрий Кухарев, отзыв о консультации

Твои наблюдения (за 20 минут) в целом совпадают с фидбеком, который мы получили при тестировании (собирали полгода).

Проблема в том, что знания и опыт заменяют на метод проб и ошибок.

Любой нормальный дизайнер любопытен, ему хочется смотреть по сторонам, узнавать новое. Никакие знания не бывают лишними. Классно, если он хочет включать их в свою работу. Важно, чтобы они не подменяли основу, на которой всё держится, а дополняли и обобщали.

Технологии цифрового маркетинга — книга, где я был соавтором (параграф про создание сайта) и литературным редактором (привёл текст к единой стилистике и упростил формулировки). От 249 рублей.