Управляем вниманием: как мы делали редизайн мобильной Почты 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-лабораторию Mail.ru Group и провели классический юзабилити-тест. Респондентам предлагалось выполнить задание в прототипе интерфейса, а после рассказать, что они думают об изменениях и с какими трудностями столкнулись при взаимодействии с новыми UX-паттернами.

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

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

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

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

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

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

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