Управляем вниманием: как мы делали редизайн мобильной Почты Mail.ru

Рассказываем, как на мобильную Почту повлиял plus size, чем нам помог хакатон, и куда завел пользователей «мультипаспорт».

Управляем вниманием: как мы делали редизайн мобильной Почты Mail.ru

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

Почти 60% владельцев ящиков на Mail.ru проверяют почту со смартфонов. Все больше mobile only пользователей, которые в принципе заходят только с телефонов.

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

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

Добавили воздуха

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

Управляем вниманием: как мы делали редизайн мобильной Почты Mail.ru

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

Внимание пользователя — ценный ресурс для productivity-сервисов,и дизайн должен помогать расходовать его с умом.

Управляем вниманием: как мы делали редизайн мобильной Почты Mail.ru

Мы уделили много внимания экрану списка писем и правильной расстановке акцентов в нем, поработали с типографикой, чтобы улучшить читабельность писем, выделили основное действие «Написать письмо».

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

Управляем вниманием: как мы делали редизайн мобильной Почты Mail.ru

Поместили навигацию под палец

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

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

Управляем вниманием: как мы делали редизайн мобильной Почты Mail.ru

Сделали легче доступ к папкам

Переключение между папками – одно из самых частых действий. Мы разместили их сразу под пальцем. Сейчас список папок раскрывается так, чтобы большинство нужных действий сразу находилось в «зеленой зоне».

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

Управляем вниманием: как мы делали редизайн мобильной Почты Mail.ru

Вынесли настройки аккаунта на один экран

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

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

Управляем вниманием: как мы делали редизайн мобильной Почты Mail.ru

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

Управляем вниманием: как мы делали редизайн мобильной Почты Mail.ru

Разработали прототипы

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

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

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

В результате хакатона появились два варианта навигации:

  • Новый: вниз переезжают все основные действия.
  • Консервативный: настройки папок и аккаунта остаются сверху, вниз переезжает только контрол написания письма.
Управляем вниманием: как мы делали редизайн мобильной Почты Mail.ru

Провели UX-тестирование

Мы обратились в UX-лабораторию Mail.ru Group и провели классический юзабилити-тест. Респондентам предлагалось выполнить задание в прототипе интерфейса, а после рассказать, что они думают об изменениях и с какими трудностями столкнулись при взаимодействии с новыми UX-паттернами.

Тесты показали, что навигация снизу воспринимается непривычно, но существенных трудностей в использовании интерфейса и восприятии изменений не возникает.

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

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

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

<i>Первые отзывы</i>
Первые отзывы

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

Пока мы обновили интерфейс частично, начав с навигации. Но вектор на будущее задан: мы планируем серьезную работу над персонализацией приложения. Появятся темы из веб-версии Почты, dark mode, в разделе аккаунта можно будет получить легкий доступ к новым умным возможностям продукта и к остальным сервисам.

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

1111
5 комментариев

выглядит свежо и в стиле "минимализм", мне нравится)

5
Ответить

Вы бы еще занялись декстопный версией а то там сейчас ад и п*здец. Куча ненужной рекламы и неудобный, неочивидный перегруженный интерфейс. Пользуюсь через силу только потому что одну из рабочих почт мне дали именно на мэйле и нужна иногда писать именно с нее. По сравнению с декстопом gmail небо и земля.
ИМХО: А моб версия просто стала похожа на gmail. Но тут без претензий потому что сложно да и незачем придумывать что то инновационное в дизайне моб почты, тут главное удобство и функционал а gmail просто можно рассматривать как эталон дизайна моб почты.

2
Ответить

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

Наша бета-версия доступна по ссылке https://octavius.mail.ru

2
Ответить

не очень удобно переключать аккаунты

1
Ответить

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

Ответить