Mail.ru Group
2499

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

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

В закладки

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Первые отзывы

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

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

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

{ "author_name": "Mail.ru Group", "author_type": "editor", "tags": [], "comments": 5, "likes": 16, "favorites": 11, "is_advertisement": false, "subsite_label": "mailrugroup", "id": 76958, "is_wide": true, "is_ugc": false, "date": "Fri, 26 Jul 2019 11:25:15 +0300" }
{ "id": 76958, "author_id": 198687, "diff_limit": 1000, "urls": {"diff":"\/comments\/76958\/get","add":"\/comments\/76958\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/76958"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 198687, "last_count_and_date": null }
5 комментариев

Популярные

По порядку

4

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

Ответить
1

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

Ответить
2

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

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

Ответить
1

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

Ответить
0

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

Ответить
0
{ "page_type": "article" }

Прямой эфир

[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "240х200_mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "flbq" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "bscsh", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-1104503429", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=bugf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Плашка на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudx", "p2": "ftjf" } } }, { "id": 16, "label": "Кнопка в шапке мобайл", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byzqf", "p2": "ftwx" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvc" } } }, { "id": 19, "label": "Тизер на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "p1": "cbltd", "p2": "gazs" } } } ]
Приложение-плацебо скачали
больше миллиона раз
Подписаться на push-уведомления
{ "page_type": "default" }