Новая главная страница Mail.Ru

© Mail.ru Group

новая главная страница Mail.Ru

Новая главная страницаMail.Ru

© Mail.ru Group


© Mail.ru Group


предпосылки для редизайна

Не соответствовала реалиям компании.

Не была отображена стратегия Communitainment.Была перенасыщена графическими элементами.«Рекламный» формат части блоков проектов, многие - в ротации.

Имела устаревший визуальный стиль.

© Mail.ru Group


roadmap

запуск

анализ и исследования, сбор требований

создание нескольких концепций

выбор одной, детализация

разработка

тестирование

тюнинг

© Mail.ru Group


анализ текущей ситуации

Сбор требований и общение с топ-менеджерами.

Анализ статистики использования и распределения кликов.Анализ потребностей аудитории.

Общение с реальными пользователями.

© Mail.ru Group


начало работ над концепцией

Серия брейнштормов и выработка идей. Развитие и детализация нескольких направлений. Креативная сессия с топ-менеджментом.

© Mail.ru Group


© Mail.ru Group


требования к новому интерфейсу

Легкость - чистый, современный дизайн.

Удобство – соответствие потребностям пользователей.Сфокусированность на ключевых продуктах.

Информативность - актуальная картина дня, пробки, погода, котировки.

Адаптивность - интерфейс должен быть одинаково хорош под разные разрешения экрана.Скорость - высокая скорость загрузки и рендеринга.

© Mail.ru Group


© Mail.ru Group


Легкость - чистый, современный дизайн.

© Mail.ru Group


Удобство – соответствие потребностям пользователей.

© Mail.ru Group


Сфокусированность на ключевых продуктах.

© Mail.ru Group


Информативность - актуальная картина дня, пробки, погода, котировки.

© Mail.ru Group


Адаптивность - интерфейс должен быть одинаково хорош под разные разрешения экрана.

© Mail.ru Group


Скорость - высокая скорость загрузки и рендеринга.

© Mail.ru Group


адаптивность

© Mail.ru Group


что такое viewport

© Mail.ru Group


5505635765896026156286416546676806937067197327457587717847978108238360

10

20

30

40

50

60

70

80

90

Разрешение Максимальный за сеанс

px

%

замеры вьюпортов пользователей

25%10% 11% 29% 14% 11%5

76

px

63

3 p

x

67

0 p

x

76

5 p

x

83

0 p

x

© Mail.ru Group


576px – 21% пользователей

© Mail.ru Group



© Mail.ru Group



© Mail.ru Group



© Mail.ru Group



© Mail.ru Group


Реализовали адаптивность под разные разрешения на технологии media queries.Перешли на новый javascript-шаблонизатор.Реализовали поблочную загрузку страницы.

Перешли на получение «чистых» данных в виде json от сервисов.

технологии

© Mail.ru Group


тестирование

Количественное тестирование на 2% пользователей.

Качественные исследования в юзабилити-лаборатории.

© Mail.ru Group


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

* процесс записи положения взгляда либо движения глаз по отношению к голове.

исследования

© Mail.ru Group


отзывы респондентов

«Старый друг лучше новых двух. Привычно, по-домашнему — на старой, поэтому она больше доверия вызывает»…

«Стала более светлая, больше пространства, нет такой цветовой загруженности»…

«Все рядышком, компактненько, удобно... Спокойный, не пестрит, приятный довольно-таки такой»…

«Полезно и сразу видно. Это удобнее, чем на почту даже [уведомления]»…

«Впечатления положительные. Все оптимизировано, но нужны доработки. Без доработок лучше старая»…

© Mail.ru Group


изменения в ответ на пожелания

Сделали акцент на казуальных играх в блоке Игр.

Вернули ссылку «Выход» в блок Почты.

Сделали ярче информеры Погоды, Пробок и котировок.Доработали коммуникационный блок.

Увеличили размер основного шрифта.

© Mail.ru Group


с марта пользователи могли переключаться на новый интерфейс самостоятельно

© Mail.ru Group


самостоятельно переключилось более 2 млн. человек

© Mail.ru Group


собирали отзывы про новый интерфейс

© Mail.ru Group


сегодня – на 100% аудитории

© Mail.ru Group


что дальше?

Локальный контент.

Мобильная версия главной страницы.

Адаптивность под совсем большие мониторы.Персонализация блоков на главной.

Актуальные события.

© Mail.ru Group


© Mail.ru Group


Q&A

Новая главная страница Mail.Ru

Technology

Новая главная страница Mail.Ru