Почте Mail.ru в прошлом году исполнилось 20 лет. За время существования веб-версия продукта менялась много раз — всего было семь полноценных версий. Иногда мы затрагивали только техническую часть, иногда заметно меняли внешний вид. Но каждый раз изменения происходили не просто так — мы развивали продукт, делая его быстрее, удобнее и современнее.
Список писем в новом дизайне, 2019 г.
Чтение письма в новом дизайне, 2019 г.
А десять лет назад, в 2009 году, она выглядела так:
Почта, 2009 г.
Почта, 2011 г.
Версия Почты 2014 года появилась в рамках унификации трех продуктов: Календарь, Почта и Облако. Каждый сервис решает свою задачу, но при этом отлично дополняет друг друга — это мощный набор инструментов для решения определенных задач, в компании мы называем их productivity-сервисы.
Почта, 2014 г.
Параллельно с веб-версией Почты активно развивались мобильные приложения продукта. Мобильная аудитория росла гигантскими темпами, стали заметны явные пересечения с аудиторией веба, то есть люди пользовались веб-версией дома или на работе, а на ходу могли использовать мобильное приложение или мобильную веб-версию. Стал очевиден следующий шаг для продукта — надо было двигаться к единому виду на всех платформах.
Был еще один важный импульс для перемен — логотип и фирменный стиль компании существенно не менялись на протяжении 10 лет, при этом было сильное желание освежить внешний вид. Так мы получили глобальную задачу ребрендинга компании вместе с редизайном флагманского продукта, на котором можно было попробовать новый стиль.
Первые концепты
Началось все с названия продукта внутри команды. У нас есть забавная традиция называть версии с использованием греческих числительных, поэтому проект стали называть «Октавиус», так как это была восьмая по счету версия (octō с греческого означает «восемь»).
Это созвучно со словом octopus, поэтому в текущей бета-версии на загрузке можно встретить осьминога — он стал своеобразным маскотом проекта. Интересный факт — осьминог появлялся и в самой первой версии Почты в 1998 году как образ почтальона, который справляется с большим количеством писем благодаря количеству рук.
Перед нами стояла серьезная задача: переделать веб-интерфейс Почты так, чтобы он стал единым для всех платформ. И тем самым заложить новый подход для всех остальных продуктов компании.
Чтобы решить в какую сторону двигаться, мы использовали подход Double-Diamond. Когда мы сперва расходимся в вариантах решений, а потом сужаемся до конкретного, таких подходов может быть несколько, пока не получим подходящий результат.
Нам нужно было получить побольше интересных концептов и идей, чтобы оставить в итоге что-то одно. Для такой генерации мы использовали дизайн-сессии, когда дизайнеры со всех отделов собираются и решают одну задачу. Мы часто используем такой подход в компании, это помогает копнуть задачу поглубже, а дизайнерам пофантазировать и переключиться с основного рабочего проекта.
Дизайн-отдел во время презентации одной из идей.
Сперва каждый дизайнер взялся за задачу в одиночку и без каких-то ограничений нарисовал свой вариант нового интерфейса Почты. Так мы получили довольно много разных концептов. Мы рассмотрели все идеи, оставили сильные подходы, объединили похожие варианты — так сформировалось несколько команд.
Концепт всплывающих окон
Первая группа решила пофантазировать, что будет, если письмо или написание письма открывать всплывающим окном. Ведь на десктопе работа чаще всего происходит со списком писем, это главный экран для пользователя. Остальное — дополнительные экраны и их состояния.
Концептуальная схема для разных проектов и разных экранов.
Мы решили попробовать не уводить пользователя с основного экрана, а вместо этого дать ему возможность решать все задачи через всплывающие окна: это экономит время взаимодействия с интерфейсом и оставляет человека в контексте его основного экрана.
Например, пользователь может бесконечно долго скроллить список писем, потом написать новое письмо во всплывающем окне и вернуться к тому же состоянию списка писем, что и до написания.
Slice, Slide & Scroll
На любом сайте компании присутствует блок с портальной навигацией, где собраны ссылки на все проекты. Мы подумали, что если пересмотреть эту структуру и отдать продукту все пространство страницы. Разделить всё на модули (slice), выстроить это горизонтально с возможностью перемещения по ним (slide), где первым поставить список всех проектов. При этом оставить привычное перемещение в вертикальной плоскости (scroll).
Slice, Slide & Scroll — это более смелый взгляд одной из наших команд на масштабируемость и контрастность визуала, ребята с самого начала не стали себя ограничивать и фантазировали на «все деньги». Хотя некоторые решения так и остались в рамках «концепт-каров», но команда продумала десятки интерфейсных мелочей и микроанимаций и поэкспериментировала с типографикой и «воздухом». Это дало эффект не только для конкретной задачи, но и разошлось на другие проекты.
Flex и Touch
Было ещё два подхода, которые начинали две разные команды, но пришли к очень похожим результатам.
Подход Flex хорошо проработал адаптивность: было понятно как будет выглядеть продукт на любом устройстве. При этом были учтены реальные данные и бизнес-требования. Т.е. он получался самым реалистичным, если бы дело дошло до разработки.
Другой подход (Touch) дополнил внешний вид трехколоночным режимом и удобным видом узкой колонки с папками. Это придавало гибкости интерфейсу и закрывало пробелы в масштабировании на определенных разрешениях экрана.
Важным преимуществом подхода было то, что там использовалось много мобильных паттернов. Например, явно укрупненный размер блоков, который делал интерфейс на вебе пригодным для тач-использования. Дополнительным импульсом стало появление десктопных устройств с поддержкой тач-управления, это значило, что с интерфейсом должно быть удобно управлять пальцем везде, а не только на планшете и телефоне.
Принципы нового интерфейса
По итогам дизайн-сессий получился комбинированный подход: за основу мы взяли подходы Flex и Touch.Mail.ru, дополнив удачными решениями из остальных концептов. Как говорится в известном мультфильме, мы многое поняли из проделанной работы и смогли сформировать дизайн-принципы, на которых собрали новый интерфейс.
- Адаптивность: веб-версия Почты должна быть доступна на всех устройствах, от десктопа до мобильного телефона
- Универсальность: внешний вид подстраивается под конкретные задачи
- Эффективность: возможность работы с интерфейсом в одном окне и ускорение работы с привычными задачами
- Релевантность: поддерживать контекст ситуации и показывать только необходимое
- Чистота и простота: меньше визуального шума и лишних элементов
- Интеллект в интерфейсе: возможность Почты решать рутинные задачи за пользователя.
Адаптивность интерфейса
Нам важно было сохранить единый пользовательский опыт на любом устройстве, поэтому адаптивность интерфейса была крайне важна. У человека не должно возникать дискомфорта, когда он открывает Почту в мобильном браузере после планшета или десктопа, элементы управления должны сразу находиться на экране.
Список писем.
На старой почте мы поддерживаем сразу три веб-версии проекта: для десктопа, мобильного телефона и планшета. Сейчас мы подходим к единому виду.
Задача непростая, ведь продукт очень сложный, поэтому в бета-версии интерфейс адаптируется только до вьюпорта портретной версии планшета (видимая пользователю область веб-страницы равная разрешению планшета). Адаптация под мобильный вьюпорт уже на подходе, а пока мы показываем старую версию в этом виде.
Универсальность интерфейса
Нам необходимо было сделать единый интерфейс не только в рамках веба, но и связать его с нашими мобильными приложениями, поэтому по умолчанию элементы интерфейса крупнее, поддерживают комфортное нажатие пальцем даже на ноутбуках или больших планшетах с сенсорными экранами. Это позволяет сохранить единую размерность на всех устройствах.
Но мы знаем, что многим пользователям на десктоп-разрешениях важно количество информации на экране, поэтому мы оставили еще и компактное отображение интерфейса.
Компактная версия всегда была в наших интерфейсах, это важный момент для продуктивной работы. Но теперь логика такого вида хорошо проработана и стала частью нашей дизайн-системы. Смена вида доступна в настройках Почты.
В настройках внешнего вида также доступен еще один вид для пользователей, которым необходимо ускорить работу с письмами — вид с колонкой письма. Благодаря исследованиям мы знаем, что наши пользователи, которым важна продуктивность, часто переходят, например, на Microsoft Outlook, потому что там есть именно этот режим отображения, когда видно и список писем, и открытое письмо, что крайне удобно в рабочих переписках.
В старых версиях Почты Mail.ru когда-то уже был такой вид, он назывался pro.mail.ru, жил отдельно и в итоге потерялся в попытке упростить интерфейс. Теперь его можно легко найти в настройках вида вашего почтового ящика.
Эффективность интерфейса
Мы знаем, что огромное количество наших пользователей используют Почту в рабочих целях. И большинство переписки в Почте сегодня — это именно деловая переписка.
Раньше, чтобы писать письмо и использовать список писем одновременно, необходимо было открыть написание в новом окне. Тоже самое происходило, когда нужно было написать несколько писем одновременно.
На UX-исследованиях текущей версии Почты мы часто видели, что люди пишут письмо в новой вкладке браузера. Поэтому мы сразу рассчитывали на то, что человеку может понадобиться информация из его ящика, например, из определенного письма. А на случай если ему нужно будет писать сразу несколько писем одновременно, мы дополнили окно возможностью сворачивания.
Сейчас всё это можно делать в одном окне и возвращаться к списку писем в любой момент, сворачивая и разворачивая письмо. Также можно писать несколько писем одновременно. То есть мы не уводим человека куда-либо, а даем возможность выполнять все в одном окне.
Также работает создание фильтра для писем. Оно доступно прямо из письма, открываясь в всплывающем окне и не уводя человека на отдельный экран. В будущих версиях мы также добавим сюда возможность сворачивания окна.
Релевантность интерфейса
Релевантность в нашей ситуации — это возможность отсечь ненужное, оставить только необходимое и подчеркнуть важное.
Например, мы использовали этот принцип в верхнем синем меню, которое в новой версии стало содержать основные действия с письмами и стало контекстным, чтобы выводить только то, что необходимо в данный момент.
Например, если мы находимся в открытом письме, то в меню отображаются основные действия с письмом.
Если выделяем несколько писем, то видим набор групповых действий.
Такое взаимодействие с меню мы хорошо знаем по мобильным приложениям. Так проект больше становится похож на полноценное веб-приложение, чем на веб-сайт с бесконечными слоями из меню.
Чтобы разгрузить интерфейс, мы поработали со списком писем. Например, мы решили убрать чекбоксы выбора конкретного письма. Хотя чекбокс и выглядит очевиднее, мы решили выбрать легкость, тем более такой паттерн уже прижился в наших мобильных приложениях.
Это тот самый случай эволюции зрелого продукта, когда некоторые вещи становятся очевидными и можно попробовать их убрать, при этом все будет работать.
Шапка письма стала компактнее, чтобы содержимое было выше, тем самым делая акцент на само сообщение, а не на то, от кого оно. Это можно считать отсылкой к мессенджерам, где переписка работает по похожей логике.
Чистота и простота интерфейса
Мы поработали с самими элементами интерфейса, чтобы у в них стало меньше визуального шума. Мы ввели стиль кнопок без фона, которые выглядят не такими тяжелыми. Этот тренд пришел из мобильных приложений, когда сам контекст подсказывает назначение кнопки. Фон или подчеркивание можно опустить, и действия все равно будут считываться.
Так как продукт постоянно рос и иногда менялся кусками, то в стилях появился беспорядок, цветов стало слишком много и в разных оттенках. Разобрать, где использовать один или другой цвет было не просто, что усложняло работу.
В восьмой версии мы поддержали дизайн-систему Paradigm, благодаря чему смогли обойтись всего 9 цветами.
Интеллект в интерфейсе
Современная почта становится действительно умной и помогает пользователю разнообразными способами. А нас выручает наша сильная команда машинного обучения.
Все почтовые клиенты страдают не только от спама, но и от большого количества рассылок, на которые мы сами же и подписались. Они могут быть действительно полезными, но при этом создают в почте хаос.
В новой версии мы сделали метатреды, с помощью которых рассылки скрываются в умную папку, которую можно раскрыть прямо на списке писем. Так действительно важные письма, например, переписки с людьми не теряются среди большого количества рассылок.
Машинное обучение помогло нам и с ответами на письма. Теперь мы можем предлагать готовые заготовки фраз, которые можно быстро отправить. Всегда есть три варианта: положительный, отрицательный и нейтральный.
Тестирование
Процесс тестирования был разбит на несколько этапов, на каждом мы проверяли определенную выборку людей и как они решают свои задачи.
UX-исследования в лаборатории
Нам нужно было проверить как работают те принципы, которые мы использовали в новом интерфейсе. С этим нам помогла серия исследований в нашей UX-лаборатории.
Для исследований мы собирали определенных респондентов: одна группа людей, которая использует только веб-версию проекта и вторая, у которой добавляются ещё и мобильные приложения. Так как веб-интерфейс содержал много мобильных паттернов, нам нужно было проверить их на разных типах пользователей.
Респондент с аналитиком-исследователем в процессе теста.
Все респонденты выполняли базовые задачи, например, написание письма, выделение писем, ответ на письмо. Стандартные сценарии мы разбавили задачами с новыми возможностями, например, писать два письма одновременно, использовать готовый быстрый ответ на письмо, создать фильтр на отправителя прямо в письме.
Из всех нововведений самым проблемным оказалось выделение писем по аватарам, причем именно для пользователей, не знакомых с нашими мобильными приложениями, где уже давно используется такое решение. По опыту приложений мы знаем, что пользователи со временем привыкают к такому выделению писем, для обучения новому походу мы дополнили интерфейс выводом явной кнопки выбора всех писем и подсказкой на старте использования.
Также возникали сложности с новой формой написания письма, где мы попробовали поменять местами поля темы письма и адресатов. Так написание повторяло структуру полей при чтении письма, но респонденты по привычке вводили адресата в тему письма и никакие подсказки в интерфейсе не могли помочь, потому что большинство людей не смотрит на экран, когда что-то вводит. В итоге мы вернули классический порядок полей.
По основным сценариям больше проблем не возникало. Респонденты позитивно оценивали внешний новой почты, говорили о чистоте и простоте интерфейса, сравнивали его с мобильными и десктоп-приложениями почтовых клиентов, а именно этого мы и добивались.
Тестирование на корпоративных пользователях
Mail.ru Group — большая компания с огромным штатом сотрудников, поэтому коллеги получают одними из первых возможность посмотреть новые продукты, а мы получаем от них полезные отзывы. Для большинства Почта — это основной рабочий инструмент, поэтому такой сценарий становится хорошей проверкой на опытных пользователях, и можно увидеть проблемы по всему набору инструментов, а не только в базовых сценариях.
Показав продукт внутри, мы получили ряд пожеланий. Например, в первом подходе кнопка написания письма была контекстной и скрывалась при переходе в поиск или выделении писем в списке. Необходимость постоянного доступа к этой кнопке — важный пункт для профессиональных пользователей. Осознав тот факт, что она должна быть доступна всегда, мы сделали ее сквозной.
Мы здорово проверили адаптивность, потому что в компании присутствует огромное количество разных мониторов и ноутбуков. Мы стали сразу получать отзывы, на каких пограничных разрешениях у нас что-то сломалось.
На этом этапе мы не запускали настройки вида и по умолчанию показывали крупный вид. Самым главным запросом среди опытных пользователей была просьба вернуть компактное отображение. После этого стало очевидно, что такой вид нужно делать как можно скорее, если мы не хотим просесть в рамках этой аудитории.
Также корпоративные пользователи сразу обратили внимание на мелочи, к которым привыкаешь при активной работе с письмами и без них становится действительно дискомфортно. Например, человек пишет о вложениях в письме, но не прикладывает их. Раньше мы спрашивали, не забыл ли он приложить их, а в новой версии это упустили. Так пользователи снова начали совершать подобные ошибки и рассказали нам об этом.
Бета-сообщество
Тесты в корпоративных условиях получаются однобокими, ведь это опытные пользователи, активно использующие продукт для работы. В UX-лаборатории мы встречаем как раз обычных пользователей, но выборка очень маленькая для количественных выводов. А нам нужно было узнать, что не нравилось или чего не хватало обычным пользователям. Поэтому следующим этапом стала проверка на бета-сообществе — мы предлагаем подключиться к нему каждому пользователю Почты и тестировать новые возможности до того, как они попадут в основной интерфейс.
Например, много запросов поступило на перевод писем, который мы хотели отложить, но пересмотрели ситуацию и добавили в интерфейс чуть быстрее.
Не хватало перехода к созданию папок — в старой версии была ссылка в списке папок. Мы вернули эту возможность, но ускорили процесс. Теперь создавать папку можно прямо в списке, поднимая всплывающее окно, а не уходить на отдельную страницу как раньше.
Также мы запустили опрос новых пользователей, чтобы услышать их мнение о новом интерфейсе. Среди прочего пользователи отмечали, что им понравился дизайн, близость к десктопным клиентам, возможность настройки внешнего вида ящика и бесконечный скролл писем.
Были и критические отзывы, например, многим новый интерфейс оказался просто непривычен, что часто бывает с редизайном зрелых продуктов — пользователям сложно в один миг поменять привычки и перестроиться под новый интерфейс.
Нам важно было услышать об ощущениях от длительного использования продукта — это метрика качества. По предыдущим отзывам мы знали, что переход на новый интерфейс вызывает дискомфорт. Но еще больший дискомфорт — это возвращение в старый, когда уже провел время в новом. Как результат, мы видим, что процент возврата в старый интерфейс среди подключенных пользователей неуклонно снижается по мере обновлений продукта.
Кроме качества мы проверяли еще и количественные метрики — главное для нас как часто пользователи возвращаются в интерфейс для решения своих задач (retention rate). И этот показатель вырос. Кроме того, пользователи начали активнее взаимодействовать с письмами, например, стало почти в половину больше ответов и открытий вложенных файлов.
Первые итоги
Почта — большой и зрелый проект с огромной аудиторией, и мы не понаслышке знаем, как сложно делать такой редизайн. Мы не торопимся и аккуратно двигаемся к тому, чтобы сделать бета-версию основным почтовым клиентом, но первые выводы уже можно сделать.
Новый веб-интерфейс вместе с мобильными приложениями помог выстроить продукт как единую систему, где сохраняется визуальный стиль и взаимодействие с элементами. Это изменило подход к работе внутри команды: исчезло разделение на мобильного и веб-дизайнера, сегодня это человек отвечающий за отрисовку всего продукта. Но самое главное, это дает единый опыт взаимодействия пользователям Почты и делает максимально бесшовным переход с одного устройства на другое.
Новый интерфейс доступен по ссылке: octavius.mail.ru.
Автор: Артём Гладков
