Лого vc.ru

Процесс: Редизайн почты «Рамблера»

Процесс: Редизайн почты «Рамблера»

Рассказ продуктовой команды холдинга.

Почта «Рамблера» существует уже 20 лет — она всего на пять лет моложе самого интернета. За это внушительное время продукт набрал аудиторию в 20 миллионов пользователей (по данным «Яндекс.Метрики» на 21 марта 2017 года). Ежедневно сюда приходит более полутора миллиона уникальных посетителей.

Закономерно, что ядро аудитории «Рамблер/почты» состоит из людей, которые открыли для себя сервисы «Рамблера» в момент их появления — эти первые пользователи рунета провели с нами почти 20 лет. Многим из них уже за 40 лет, но есть существенный сегмент молодой аудитории возрастом около 30 лет.

Лояльность аудитории «Рамблер/почты» проверена не просто годами — десятилетиями. Каждый день пользователи сервиса отправляют более миллиона писем.

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

Окончательное решение о необходимости тотального обновления мы приняли почти год назад. Значительную часть времени занял выбор и подготовка перехода на новую технологическую платформу: по совокупности возможностей мы выбрали связку React.JS + Redux.

Также пришлось усовершенствовать архитектуру всей системы (начали использовать ClickHouse от «Яндекса» для сбора статистики и анализа поведения пользователей). Самые значительные изменения планировалось совершить «под капотом» продукта — пользователи не должны были видеть их, но могли почувствовать.

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

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

  1. Мягкое, пошаговое улучшение пользовательского опыта.
  2. ​Интеграция новой айдентики.
  3. Актуализация визуального языка в интерфейсе.

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

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

Почта до редизайна
Почта до редизайна

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

Сначала перенесли и сгруппировали наиболее часто используемые функциональные элементы. Управление письмами и настройки вида отображения списка писем теперь расположены на одной панели. Кнопка «Написать письмо» наконец-то обрела положенный ей визуальный вес. В современных легких интерфейсах она должна быть самым заметным графическим элементом, но в старом дизайне кнопка откровенно терялась.

До редизайна
После редизайна

Экраны настроек стали проще и понятней, от них не веет сложностью панелей управления.

До редизайна
После редизайна

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

«Входящие» после редизайна
Просмотр письма после редизайна

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

Материалы из UI-гайдлайнов «Рамблера» (здесь и ниже)

Интерфейс стал значительно чище, исчезли эффекты, отсылающие к скевоморфизму. Мы отказались от теней, лишних бордеров и добавили сетке воздуха.

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

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

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

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

В попытке сделать дизайн приятным для блёклых экранов недорогих ноутбуков на откалиброванном IPS-дисплее легкий интерфейс можно превратить в набор грязных пятен. Та же ситуация с разрешениями: нам предстояло проверить интерфейс на всех размерах, от 1024х768 до 4К.

Почта — один из первых продуктов, редизайн которого произошёл с использованием нового для «Рамблера» визуального языка. Многие приёмы и элементы, использованные в интерфейсе, послужили основой для общих UI-гайдлайнов и библиотеки компонентов.

При наличии нескольких продуктов создание общих гайдлайнов критически важно — ведь это буквально лицо компании. Мы ведём более 20 сервисов и проектов разной степени сложности, но все они должны поддерживать в сознании пользователей устойчивую ассоциацию с брендом нового «Рамблера».

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

Первый публичный тест затронул 1% от всех пользователей сервиса. Мы смотрели на уровень отказов и жалобы. Убедившись, что процент отказов находился в пределах нормы, мы приступили ко второму этапу, выкатив новый интерфейс уже на 10% аудитории. Результаты второго теста по-прежнему были в пределах нормы, никаких явных причин остановить запуск не нашлось.

Заключительный тест должен был выявить «Показатель оттока клиентов» (ChurnRate). Мы отобрали тысячу пользователей и перевели их почтовые ящики в новый дизайн без возможности вернуться в старый. Переход сопровождался предупреждением, объясняющим грядущие изменения и особо важную роль каждого выбранного пользователя.

В течение трех недель только двое написали нам, что им не нравится дизайн и они собираются сменить «Рамблер/почту» на что-то другое (тот самый эмоциональный фон — не факт, что уход от нас действительно состоялся). Остальные 998 человек либо не отреагировали никоим образом, либо прислали некоторые замечания и пожелания.

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

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

Всего за несколько дней мы получили более 40 тысяч оценок с комментариями. Кроме эмоционального отклика, были очень дельные замечания и предложения, по которым мы начали работу.

Реакция пользователей на редизайн

Кто-то выражал своё мнение эмоционально, кто-то лаконично и скромно, кто-то не находил нужных слов, а кто-то присылал целый список конструктивных предложений.

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

Были, конечно же и негативные отзывы (и это одни их самых культурных).

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

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

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

Изменив не только визуальную, но и техническую составляющую сервиса, мы испытали самих себя. Редизайн «Рамблер/почты» — это только начало для нашей команды. Теперь мы планируем выпустить серию масштабных обновлений для ключевых продуктов «Рамблера», включая сам портал.

Команда проекта

Отдел дизайна продуктов

Александра Ермоленко, руководитель отдела дизайна продуктов
Елена Лисеева, ведущий дизайнер продуктов
Ольга Пиголицина, графический дизайнер

Присылайте свои колонки и интерфейсные кейсы на interface@vc.ru.

Выглядит неплохо. Получше, чем Gmail или iCloud.

Но пользоваться не буду, rambler вызывает ассоциацию с чем-то устаревшим. :(

0

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

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

0

Что вы для этого сделали? Мой ящик на Рамблере это какой-то магнит для спама. Писал в поддержку, внятного ответа не получал. Успокоился. В общем сейчас регулярно чищу от спама... А дизайн да, гуд.

0

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

0

Ясно. Буду пробовать. Спасибо.

0

Владимир, на почте мы внедрили персональный антиспам. Все отмеченные как спам письма, будут попадать в папку Спам.

0

Спасибо, мы старались 😇

Всё верно, Corsica Rambler LX используется в Почте для промо и внешних коммуникаций и тоже входит в UI Kit 👌

0

круто, а не круто когда дизайнеру приходится свой дизайн объяснять.

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

0

ну вон там ниже задавали вопросы, у меня был не вопрос, а не самая лучшая подъебочка

0

довольно манипулятивный тест и картинки

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

Мы постоянно улучшаем и тестируем новые версии дизайна. На сегодня, пользователи проблем с отсутствием рамок и недостаточным весом кнопки «написать письмо», судя по более 40 000 отзывов, полученных на данный момент, не испытывают 😉

В любом случае спасибо за твой фидбек!

0

Ого, я что, единственный?

0

Мой отец (80 лет) до сих пор пользуется почтой Рамблера.
Даже несмотря на редизайн.
На самом деле, хорошо, что обновились, а то кабинет хоть и выглядел "лампово", но как-то на фоне трендовых интерфейсов сдавал. Почтой Рамблера я не пользовался никогда, но раз отец на ней уже добрые десять лет, то одобряю)

Это нормальное допущение, отступы внутри контейнера. Нафинг криминал.

0

Всё верно, это материал из UI Гайдлайнов, задача которого проиллюстрировать важность верной размерности сетки на примере отступов внутри контейнера 😉

Редизайн - это, конечно, хорошо, но как насчет юзабельности?

1. Где спамфильтр?
2. Где почтмастер?
3. При попытке авторизовать в мобильном приложении Рамблера ящик на Gmail, Google распознает процедуру как крайне подозрительную и банит Gmail ящик в целях безопасности

0

Артур, благодарю)

1. На почте есть и персональный анстипам и общий антиспам
2. web для postmaster'a в разработке, но вы можете мне написать и мы подключим вам FBL
3. Гугл ругается на любую активность

0

1. Хорошие новости
2. Дождемся релиза
3. У меня установлено 12 почтовых клиентов на iOS и ни один не вызывает у гугла претензий при попытке авторизации. В случае Рамблер почты это не просто ругань. Ящик не привязывается :)

0

А спамфильтр с забивкой через запятую нежелательных адресов уже сделали или как у всех нафиг надо?

0

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

0

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

0

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

0

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

Самая главная проблема рамблер.почты это дикое количество спама. И это только 2017ом насыпалось.

Спам - бесконечная борьба со злом..
90% спама мы отсекаем еще на этапе приема письма, а то что попадает пользователям, это "возможно спам".
Мы постоянно работаем над увеличением эффективности нашей антиспам системы.

Бытовой пользователь сразу бы сказал: "Где кнопки, а где ссылки? Серая иконка с текстом это кнопка, а она заблокированная или активная?". К такому редизайну нужно привыкнуть, вникать в контекст каждого элемента. Зато красотища какая, внутренний эстет ликует)

0

Судя по реакции аудитории (форма обратной связи), наши пользователи проблем с идентификацией кнопок и ссылок не испытывают. Мы активно работаем над улучшением и развитием интерфейса, спасибо за приятный отзыв ☺

0

Почта до сих пор с ограничением по объему? Рекламу пихают?

А так симпатично выглядит

до было лучше сейчас выглядит как плохой копипаст гугл почты

Редизайн - очень ок.

Периодически использую почту Рамблера с 2004го. Сервис убивает следующее:
- Долгое получение писем. Лаг был всегда у Рамблера (года 3 назад - до 10-20 минут), потом его поправили до нулевого, сейчас опять периодически ждать письма очень долго.
- Нет цепочек писем и вообще какой-либо вменяемой организации с адресатами/авторами.
- Поиск по папкам не функционален. Вообще. Можно даже не пытаться найти что-то, что отправлено больше месяца назад (например ключ к купленному ПО): по запросной фразе покажет что угодно (и как правило, совпадения будут в 3000 письмах из 5000 полученных, даже по фразе "Adobe"). Проще запросить восстановление, чтобы письмо пришло еще раз.
- Мало-мальских облаков нет в принципе, для писем с вложениями в 2к17 это приговор. И вообще вложения сейчас работают в плане информативности без необходимости разгрузки не оч.
- Спам-фильтр никакой.

0

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

PS
Мой емаил для контактов: fp@rambler-co.ru

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

0

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

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

0

Мы как раз работаем над темами оформления для новой Почты, так что в ближайшее время новые цвета и возможности для изменения интерфейса появятся 👌

Недоделанная работа с точки зрения юзабилити, я бы в продакшн не пропустил. В плане эстетики прежде всего расстроила ограниченная цветовая палитра

0

Задачей первого релиза было плавное улучшение пользовательских привычек, а не их глобальное изменение 👌 Темы оформления уже в работе, так что в ближайшее время цветов станет значительно больше 😉

Боюсь рамблем проиграл конкуренцию еще в 2005-2013.
Иногда людей встречаю с почтой рамблера, но это как амурские тигры в дикой природе.
Думаю, чтобы рамблеру встать в конкурнецию с гуглом и яндексом и мэйлом (который тоже по-немногу сливается) надо проделать большую рекламную кампанию и чем - то действительно интересным привлечь людей, а не дизайнами кнопочек.

0

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

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

Оформление кейса, в нашем случае, это просто изображения из наших UI Гайдлайнов 😇

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

В новом интерфейсе есть проблема с логикой выделения писем. Вы сделали так, что просматриваемое письмо по умолчанию выделяется в списке слева, с этим есть две проблемы: во-первых если я при открытом письме захочу выделить и удалить из списка другие письма, то мне придется дополнительно искать то которое открыто и снимать с него выделение. Это, на самом деле, распространенный кейс - в спамовые письма не обязательно заходить, чтобы их удалить, поэтому получается что удаляешь их из состояния просмотра полезного письма. Тем более что, допустим, при удалении текущего письма выделение перепрыгивает на следующее письмо в списке, то есть вообще без ведома пользователя, это чревато случайным удалением того что не выделял.
Во-вторых если по какой-то причине (например в случае, который я описал выше) мы сняли выделение с активного письма, то мы с ним уже ничего не сможем сделать - ни удалить, ни переместить в папку, пока не выделим его в списке снова.
И в целом напрягает состояние "1 выбрано", есть ощущение что с ним нужно что-то сделать.

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

А еще вот такой вид на <1280 - там же ни одно письмо не поместится, почему бы просто резину не сделать)

0

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

Да там достаточно резинить на этом промежутке - вон сколько места пустого по краям

С логикой выделения первого письма и писем в целом в новом интерфейсе действительно были проблемы, мы уже исправили это в новом релизе 🤔 Спасибо за конструктивный фидбек! 😉

"Почта «Рамблера» существует уже 20 лет — она всего на пять лет моложе самого интернета. За это внушительное время продукт набрал аудиторию в 20 миллионов пользователей...

... Каждый день пользователи сервиса отправляют более миллиона писем."

П.С. вы уверены, что проблема в дизайне)

0

А точно UI-концепт и гайды вы сами внутри делали? И что, даже никакое агентство не помогало?)

0

Базовая айдентика нового Рамблера была разработана в сотрудничестве с агентством ONY около года назад (ссылка есть в статье).

Гайды, компоненты и принципы работы с визуальным языком в интерфейсах разрабатывались нами внутри 😉

0

И что, от они прям ничего по UI не было? Никаких гайдов и концептов?

0

ONY присылали нам концепты, но, на тот момент, они служили скорее приятным дополнением к айдентике и не проходили тестирования на предмет масштабирования и т.п.

В работе над группой продуктов (у нас их порядка 20) крайне сложно вести работу с подрядчиками снаружи, т.к. существенная часть специфики и процессов не очевидна при низкой вовлечённости.

В любом случае, мы вы высоко ценим вклад ONY в наш визуальный язык, без концепций, что ребята разработали для нас, не было бы наших текущих UI Гайдлайнов 💙💙💙

Материал-флэт-острова, набор большими буквами с разрядкой,
скриншоты под углом — авторам будет чем похвастаться на дриббле!

0

Лучше бы throttling победили. А то как что-то послать на несколько адресов в rambler.ru так каждое письмо по 2 минуты. И в support никто не отвечает.

0

Александр, напишите мне на fp@rambler-co.ru, будем разбираться с вашими рассылками.

Как в старые добрые :) А если серьезно, дизайн отличный, Саша с командой - умницы!

0

что за каша при просмотре письма? так в разы, как мне кажется, лучше ( не гоните что криво, слепил из кусочков )

0

миленько. но этой почтой не пользуюсь.

Прямой эфир
Нейронная сеть научилась читать стихи
голосом Пастернака и смотреть в окно на осень
Подписаться на push-уведомления