Контент-дизайн для Indeepa. Часть 2: рисуем интерфейс и пишем хелп

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

Это вторая часть моего кейса по работе над SaaS для стартапа, который разрабатывает софт для торговли на Wildberries и других маркетплейсах. Первую часть я описываю здесь:

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

Но вернемся к Индипе. Закончил я этап исследования на трех приоритетах:

Пойдем по порядку.

Вот так выглядел интерфейс, когда я пришел на проект:

Как вы видите, это — ночной кошмар юиксера.

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

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

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

Например, посмотрите, как пользователь должен понять, к какой строке относится значение:

Лично у меня от этого болят глаза, особенно когда в поле зрения не отдельный столбец, а десять-пятнадцать.

К счастью, у меня есть опыт работы со сложными таблицами. Я работал у вендора, известного самыми страшными таблицами на рынке, и десятки столбцов с названиями типа "ИнКомПролЖНип" для меня привычное дело. (Бонус тому, кто угадает, о какой компании речь :)

Первый шаг: делим таблицу под выведенные нами user scenarios. В результате бесед с пользователями я условно разделил их работу на три этапа:

Следовательно, бьем наборы полей на три комплекта и делаем выпадающий селектор:

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

Скриншот для примера:

Получилось разработать? В целом да. Я смог убедить команду, что это то, что нужно пользователям.

Еще подтверждало мою позицию то, как выглядит личный кабинет на Wildberries. Use case другой, но в любом случае это то, что привыкли видеть наши клиенты:

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

Еще сложности добавили технические ограничения, которые помешали выровнять ширину некоторых столбцов и по мелочам ограничили user experience, типа технических полей с недискриптными названиями, которые пока что нельзя скрыть.

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

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

Это вообще полезный экзерсис для разрабов: попросить доказать, что на интерфейсе должно быть больше, чем просто кнопка "сделать хорошо". Примерно так:

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

Но снижение количества столбцов даже на 25% — уже результат:

Третий шаг: пройтись по всем сценариям и отметить все, что вызывает вопросы и сомнения. Я прошелся по всем user scenarios и выделил все, что мне показалось странным — нелогичные переходы, непонятные тексты, кнопки, сообщения. Вот несколько примеров.

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

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

Кроме того, мы:

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

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

Начал я с того, что постарался визуализировать Customer Journey в Miro — для себя и стейкхолдеров.

К сожалению, пока я это делал, произошли события сентября, и пока я решал личные вопросы, стали подступать дедлайны. Пришлось писать "наживую":

Получилось записать? Да. Самый беспроблемный этап — потому что делаешь сам.

Для этой части я запрототипировал занятное решение: гибрид guided tour и контекстного хелпа.

Посмотреть можно здесь.

Скриншот:

В тулбар добавляем кнопку со знаком вопроса, которая пульсирует при первом запуске.

При нажатии на кнопку выводим пользователю всю релевантную контекстную помощь в виде оверлея. На нем:

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

Получилось разработать? Пока нет. Главное ограничение такого решения — оно требует затрат на разработку. Мы нашли полукоробочные варианты, но их все нужно сильно допиливать. В результате разработка получила пониженный приоритет и ушла бэклог.

В этот текст не вошли другие мои наработки для Индипы:

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

Сейчас мячик целиком на стороне клиента. Я сделал те 80%, которые мог в данных условиях, и предложил дальше консультировать их, когда они отдадут задачам по UX должный приоритет и ресурсы.

Моей целью в этом кейсе было приучить себя к рефлексии и начать вести человеческое портфолио. Прошу писать любые замечания и конструктивную критику. Буду очень рад.

Я контент-дизайнер, продакт, UX-консультант, ламер в Hearthstone и многодетный отец. Связаться со мной можно в телеге: @vkuzin.