7 июня 2017

UX кейс. Пять жизней одного списка

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

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

Клиенты создают рассылки разных типов: триггерные, массовые, по-расписанию. Запускают их, останавливают, копируют и организуют.

Задача – сделать удобно, понятно, минимизировать ошибки и количество обращений в техподдержку.
Жизнь 1. MVP
Сначала был просто список рассылок, отсортированных по дате создания. Когда их становилось много, было очень трудно в них ориентироваться. Пользователи просили папки, чтобы раскладывать по ним рассылки и навести в этом хаосе порядок.
Жизнь 2. Самая короткая
Сделала папки. Честно стырила дизайн у Мэйлчимпа (самый же крутой емэйл-сервис) и оказалось, что в таком виде папками невозможно пользоваться. Непонятно, громоздко и неочевидно. Даже не стали выпускать на продакшен.
Жизнь 3. Самая проблемная
Переделала на классическую схему, как у старого доброго Norton Commander. Папки теперь лежали вверху списка рассылок. Их можно было создать из выпадающего меню. На них распространялись некоторые групповые операции. Например, отметить галками несколько папок и рассылок и удалить.
Нажимаешь на папку – проваливаешься внутрь и видишь рассылки. Чтобы вернуться обратно надо нажать на иконку вверху списка.
Посовещались с командой и решили, что одного уровня вложенности достаточно.
Что пошло не так
Проблема 1. К беспорядку в рассылках добавился беспорядок в папках :) Клиенты не давали им осмысленные названия. Большинство папок называлось «Новая папка 1», «Новая папка 2». В них лежали те же самые рассылки «КОПИЯ КОПИЯ КОПИЯ Новая рассылка 1».

Проблема 2. Искать запущенные рассылки стало еще сложнее. Приходилось заходить в каждую папку по-порядку.

Клиенты просили переключатель, мы сопротивлялись. Я сама пару раз забыла отключить рассылки, так как не увидела их. Слава Одину, что сделали только один уровень вложенности.

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

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

А они, бедняги, не понимали потому, что они – молодые. Они в глаза не видели Norton Commander. Для них папка с двумя точками – это что-то вроде перфокарты или дискеты – непонятная штука, назначение которой неизвестно.

Жизнь 4. Переходная
Ссылку «Перейти на уровень вверх» оформила стрелочкой с явной надписью. Вопросы в техподдержку прекратились. Однако первые две проблемы остались.
Чуть не сделали переключатель, о котором просили клиенты – включаешь его и видишь только запущенные рассылки, отключаешь – видишь папки.

Он бы решил задачу «Посмотреть все запущенные рассылки», но не был бы понятен семантически. Переключатель должен переключать какой-то один признак, например, вид по папкам / вид одним списком или все / только запущенные. Тогда это интуитивно понятно и естественно.

Вариант сделать два переключателя отмели сразу. Это уже неоправданное усложнение интерфейса.
Жизнь 5. Эврика!
И тут нашли решение (не я, к сожалению) – добавить к обычным папкам виртуальные: «Все рассылки», «Активные», «Черновики», «В архиве». И перенести список папок в сайдбар.
И все встало на свои места. Можно создавать папки и раскладывать по ним рассылки, если хочешь их организовать по смыслу. Но самая главная систематизация происходит автоматически – можно посмотреть все запущенные, отдельно лежат новые с которыми работаешь и в выделенной папке уже отработавшие.

Чтобы перейти из папки в папку не надо переходить на уровень вверх – меню доступно всегда.
And one more thing
Оливка на оливье – поиск по названию и сортировка. Теперь можно найти нужную рассылку не перегребая 100500 папок. Мне даже кажется, что это дало побочный положительный эффект – клиенты стали давать чуть более осмысленные названия рассылкам :)
В итоговом виде все выглядит как так и надо. Смотришь – и думаешь – «Ну почему было сразу так не сделать, это же очевидно!» Хех. Это признак того, что наконец-то сделано хорошо. Еще один признак – клиенты перестали предлагать переключатель :)

Кстати, заметили осьминога в названии папки на скриншоте?

Подглядела такой прием у клиента. Это обычная emoji – копируешь например, отсюда и вставляешь в название папки или ярлыка. Работает во многих веб-интерфейсах. Удобно помечать важные вещи да и просто радует глаз.
Что дальше?
Не все идеально, на самом деле. В списке папок слева немного деревянный скролл, переместить папку вверх или вниз можно только на одну позицию за раз. Еще шапку таблицы не мешало бы закрепить. Но клиенты не жалуются, а значит, трогать это пока не будем.

Не факт, что мы не придумаем решения лучше, но пока я очень довольна этим кусочком интерфейса. Это место, которое не вызывает вопросов и не отнимает время у техподдержки. Пойду займусь чем-нибудь более проблемным :)
Нажимая на кнопку, вы даете согласие на обработку своих персональных данных и соглашаетесь с политикой конфиденциальности
Made on
Tilda