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

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

Почта «Рамблера» существует уже 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).

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

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

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

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

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

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

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

Александра Ермоленко, руководитель отдела дизайна продуктов
Елена Лисеева, ведущий дизайнер продуктов
Ольга Пиголицина, графический дизайнер
0
75 комментариев
Написать комментарий...
Игорь Мыслинский
Ответить
Развернуть ветку
Илья Максимов
Ответить
Развернуть ветку
Sasha Ermolenko

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

Ответить
Развернуть ветку
3 комментария
Arthur Koch

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

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

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
1 комментарий
Дмитрий Харин

Самая главная проблема почты рамблера это не дизайн

Ответить
Развернуть ветку
Марк Захаров

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

Ответить
Развернуть ветку
2 комментария
Максим Малыгин

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

Ответить
Развернуть ветку
Sasha Ermolenko

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

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

Ответить
Развернуть ветку
1 комментарий

Комментарий удален модератором

Развернуть ветку

Комментарий удален модератором

Развернуть ветку

Комментарий удален модератором

Развернуть ветку

Комментарий удален модератором

Развернуть ветку
Alex Fedotov

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

Ответить
Развернуть ветку
Sasha Ermolenko

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

Ответить
Развернуть ветку
Artem

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

Ответить
Развернуть ветку
Владимир

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

Ответить
Развернуть ветку
3 комментария
Sasha Ermolenko

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

Ответить
Развернуть ветку
Denis Izmaylov

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

Ответить
Развернуть ветку
Данил Корнаков

Вкусненько

Ответить
Развернуть ветку
инкредибл скилл.

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

Ответить
Развернуть ветку
1 комментарий
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Влад Цыплухин

Отличая работа.

Ответить
Развернуть ветку
Илья Максимов

нет

Ответить
Развернуть ветку
2 комментария
Sasha Ermolenko

Спасибо! :blush:

Ответить
Развернуть ветку
Astkhik Sukiasyan

Отличная работа, я считаю)

Ответить
Развернуть ветку
Sasha Ermolenko

Спасибо! :kissing_heart:

Ответить
Развернуть ветку
Александр Кичатов

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

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

Ответить
Развернуть ветку
Chingis Alekenov

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

Ответить
Развернуть ветку

Комментарий удален модератором

Развернуть ветку

Комментарий удален модератором

Развернуть ветку

Комментарий удален модератором

Развернуть ветку

Комментарий удален модератором

Развернуть ветку
Roman BL

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

Ответить
Развернуть ветку
Sasha Ermolenko

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

Ответить
Развернуть ветку
Filipp Lyakh

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

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

Ответить
Развернуть ветку
Filipp Lyakh

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

Ответить
Развернуть ветку
2 комментария
Sasha Ermolenko

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

Ответить
Развернуть ветку

Комментарий удален модератором

Развернуть ветку
Дмитрий Малахов

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

Ответить
Развернуть ветку
VVilliam Blake

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

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
VVilliam Blake

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

Ответить
Развернуть ветку
Sasha Ermolenko

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

Ответить
Развернуть ветку
Ilya Spirin

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

Ответить
Развернуть ветку
Sasha Ermolenko

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

Ответить
Развернуть ветку
Иван Биткин

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

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Игорь Гец

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

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

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

Ответить
Развернуть ветку
Владимир Соловьёв

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

Ответить
Развернуть ветку
Konstantin Keller

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

Ответить
Развернуть ветку
Sasha Ermolenko

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

Ответить
Развернуть ветку
Sasha Ermolenko

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

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

Ответить
Развернуть ветку
Илья Максимов

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

Ответить
Развернуть ветку
Кара-Кусек

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

Ответить
Развернуть ветку
Michael

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

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
3 комментария
Илья Мiрошниченко

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

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

Ответить
Развернуть ветку
Максим Шпилёв

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

Ответить
Развернуть ветку
Konstantin Keller

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

Ответить
Развернуть ветку
Sasha Ermolenko

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

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

Ответить
Развернуть ветку
Alexander Desyatnik

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

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Levitan Nick

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

Ответить
Развернуть ветку
Vasek Romanov

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

Ответить
Развернуть ветку
72 комментария
Раскрывать всегда