Мы учили продукт, продукт учил нас

Хорошо, когда ты пишешь с рождения продукта и можешь придумывать всё с нуля. Но чаще будет не так. Будут продукты, в которых кто-то уже годами писал до твоего прихода. Будет наследие, с которым придётся что-то делать. И если дать слабину, наследие победит. Чем больше продукт, тем сильнее его влияние.

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

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

Массовый опрос с картой

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

Если при анкетировании процесс проходит полностью в электронном виде — в приложении, то при опросе с картой существующие инструменты уже не справляются, по этой причине, в данном методе, используются только бумажные карты. С этим связано и главное ограничение — оцифровка информации с бумаги отнимает кучу ресурсов. И, если исследование объемное, то на обработку большого количества данных может просто не хватить рук: в таком случае от использования карт отказываются. Но, даже когда исследование позволяет использовать этот метод, объем полученной информации достаточно велик, и для его оцифровки может потребоваться несколько недель работы одного исследователя.

С точки зрения человека, работающего в полях, наличие карты, так же, не делает его работу проще. Подсчет квоты и заполнение анкеты он производит на смартфоне, а чтобы отметить маршрут, ему приходится переключаться на бумажную карту.
Одной анкете соответствует один экземпляр карты (то есть полевик несет с собой 25 распечаток + резерв). На карте имеется уникальный номер, который необходимо внести в конце электронной анкеты, чтобы связать офлайн карту с онлайн опросом. Одновременно с этим, на бумажной карте полевик ставит свои инициалы, чтобы, в случае возникновения проблем, с ним можно было связаться.

В итоге, получается довольно много возни, во многом из-за этого полевики совершают ошибки: кто-то указывает две точки, не помечая, какая из них начальная, а какая конечная; другие торопятся и пишут неразборчиво; а кто-то вообще может забыть внести данные на карту.

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

Шейн Дойл написал о неидеальных состояниях интерфейса.

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

  1. Пустое: контент ещё не добавлен, нулевые результаты поиска, пользователь удалил контент.
  2. Загрузка: когда загружается контент или выполняется какое-то действие. Важно донести до пользователя, что программа не зависла.
  3. Частичная наполненность: когда есть только часть контента. Подумайте, как помочь пользователю сделать так, чтобы получить идеальное состояние.
  4. Неидеальное: слишком длинный или короткий текст, изображения в неправильном формате или отсутствуют, нет части контента. Пользователь не должен думать, что программа сломалась.
  5. Интерактивное: фокус на элементе, заполнение поля и другие изменения интерфейса после взаимодействия с пользователем.
  6. Ошибка: нет подключения к сети, пользователь сделал что-то не то, системная ошибка. Важно, чтобы пользователь понимал суть ошибки и что ему делать.
  7. Выполнение действия: когда пользователь справился со своей задачей. Состояние может отличаться для разных пользовательских задач.

https://ux.pub/proektirovanie-razlichnyh-sostoyaniy-interfeysa/

Модель двойного алмаза

Если дивергентное мышление — это поиск множества решений одной проблемы, то противоположным ему будет конвергентное мышление — отсекание всего лишнего, анализ вглубь.

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

Если рассматривать этот процесс в рамках разработки продукта, то получится примерно такая история:

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

Идеальный процесс

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

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

Женя Бондарев рассказал нам о типичной структуре разработки цифрового продукта:

Погружение
Сбор информации, поиск вдохновения, анализ и инсайты.
Женя дал очень хорошее определение того, что такое инсайт:
Инсайт — это глубинная потребность человека в чем-либо. Обязательные элементы инсайта — мотив и барьер: я хочу делать то и то — мотив; но не делаю это потому что — барьер.
Наша задача, как дизайнера, в том, чтобы узнать конкретную причину этого барьера.

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

Usability test
Тестирование всего продукта и финальные изменения — Женя советует писать гипотезы в гугл-доке на протяжении всего исследования, чтобы во время тестирования не упустить что-то важное.
По итогу тестирования выявляются критичные и не очень ошибки, после чего нужно решить, с чем можно выходить на рынок, а что требует обязательной доработки. На этом шаге может всплыть много неожиданностей, на эту тему как-то писал Костя Горский — t.me/desprod/239

Финализация
Финальное утверждение, подготовка к разработке, подготовка к публикации (кейс в медиа, либо конкурс и т.д.), авторский надзор.
Круто выпускать MVP как можно раньше, чтобы начать получать реальный фидбэк.

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

1. Погружение

1. Связаться с заказчиком
Сделать:
- интервью с заказчиком
- запросить метрики
Итог:
- утвержденное направление работу
- утвержденные с заказчиком сроки
Срок: 4.03

2. Поиск референсов/конкурентов
Срок: 04.03

3. Интервью с пользователями
Сделать:
-подготовить вопросы
-найти респондентов
На выходе:
- уточненный портрет
- проблемы пользователей
Срок: 13.03

4. Попробовать
Сделать:
- Сделать заказ (понять процесс, опросить мастера)
- Зарегаться как мастер (понят, процесс, взять заказ)
На выходе:
- проблемы
- полное понимание бизнес-процесса
Срок: 11.03

Анализ полученных инсайтов
Артефакты: понять на каких проблемах фокусируемся, список инсайтов, фичерлист
Показываем заказчику — 12.03
— Ретро —


2. UX — проектирование

1. Информационная архитектура — 20.03
2. Структура — 20.03
3. Карта экранов — 31.03
4. Сценарии
5. Прототип
6. Тестирование прототипа (проверка гипотез) - 7.04

Анализ полученных решений
Артефакты: протестированный прототип, карта экранов, структура, информационная архитектура
Показываем заказчику — 9.04

— Ретро —


3. UI — визуальный язык

1. Существующие гайды продукта
2. Мудборд
3. Дизайн концепт 3-5 экранов — 14.04
4. Масштабирование
5. Анимация

Анализ полученных решений
Артефакты: финальный дизайн продукта, анимация
Показываем заказчику — 30.04

— Ретро —


4. Передача в разработку
5 занятий 10.05-19.05

5. Подготовка портфолио
9 занятий 22.05-09.06

6. Презентация
3 занятия

7. Защита
23 июня


По сути, этот план также может являться оглавлением моего дальнейшего повествования.
Как вы могли заметить, на сегодняшний момент мы заканчиваем стадию «2. UX — проектирование» и переходим к поиску визуальной концепции.
Уже сейчас можно сделать какие-то выводы о том, как мы двигаемся по этому плану: что-то из написанного в плане мы так и не сделали до сих пор, что-то наоборот — сделали с опережением. Так, мы до сих пор не утвердили окончательный набор фич, но, с другой стороны, у нас уже готовы все необходимые артефакты — можно начинать готовить мудборды

Брови заголовков

Исследования (https://www.nngroup.com/articles/first-2-words-a-signal-for-scanning/) показывают, что пользователи не читают заголовок полностью, а лишь первые несколько слов.

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

Как же тогда решать эту проблему? Используйте брови заголовков.

Брови заголовков — это описательное ключевое слово или фраза, расположенная над основным заголовком.

К примеру: у вас на главной странице банка есть слайдер, а в слайдере предложение с пониженной процентной ставкой по кредиту — добавьте к заголовку бровь «Кредиты». Время, которое пользователь потратит на принятие решения о том, интересна ему эта статья или нет, максимально сокращается.

Как сделать брови заголовков?
Сделайте их меньше основного заголовка, но все же читаемыми. Что бы их выделить, можно сделать жирнее, написать капсом или изменить цвет.

Когда нужно использовать брови заголовков?
Не каждый заголовок нуждается в бровях. Излишне добавлять брови, если ваш заголовок короткий и содержит много ключевых слов. Помните о правиле двух первых слов.

Брови заголовков
— достаточно короткие для сканирования
— используют понятные ключевые слова
— дают пользователю контекст
— легки для восприятия