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

Сделала папки. Честно стырила дизайн у Мэйлчимпа (самый же крутой емэйл-сервис) и оказалось, что в таком виде папками невозможно пользоваться. Непонятно, громоздко и неочевидно. Даже не стали выпускать на продакшен.

Переделала на классическую схему, как у старого доброго Norton Commander. Папки теперь лежали вверху списка рассылок. Их можно было создать из выпадающего меню. На них распространялись некоторые групповые операции. Например, отметить галками несколько папок и рассылок и удалить.

Нажимаешь на папку – проваливаешься внутрь и видишь рассылки. Чтобы вернуться обратно надо нажать на иконку вверху списка.

Посовещались с командой и решили, что одного уровня вложенности достаточно.

Проблема 1. К беспорядку в рассылках добавился беспорядок в папках :) Клиенты не давали им осмысленные названия. Большинство папок называлось «Новая папка 1», «Новая папка 2». В них лежали те же самые рассылки «КОПИЯ КОПИЯ КОПИЯ Новая рассылка 1».

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

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

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

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

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

Ссылку «Перейти на уровень вверх» оформила стрелочкой с явной надписью. Вопросы в техподдержку прекратились. Однако первые две проблемы остались.

Чуть не сделали переключатель, о котором просили клиенты – включаешь его и видишь только запущенные рассылки, отключаешь – видишь папки.

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

Вариант сделать два переключателя отмели сразу. Это уже неоправданное усложнение интерфейса.

И тут нашли решение – добавить к обычным папкам виртуальные: «Все рассылки», «Активные», «Черновики», «В архиве». И перенести список папок в сайдбар.

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

Чтобы перейти из папки в папку не надо переходить на уровень вверх – меню доступно всегда.

Оливка на оливье – поиск по названию и сортировка. Теперь можно найти нужную рассылку не перегребая 100500 папок. Мне даже кажется, что это дало побочный положительный эффект – клиенты стали давать чуть более осмысленные названия рассылкам :)

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

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

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