Top Banner
© Mail.ru Group новая главная страница Mail.Ru Новая главная страница Mail.Ru
35

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

Nov 28, 2014

Download

Technology

 
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: Новая главная страница Mail.Ru

© Mail.ru Group

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

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

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

© Mail.ru Group

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

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

© Mail.ru Group

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

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

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

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

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

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

© Mail.ru Group

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

roadmap

запуск

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

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

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

разработка

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

тюнинг

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

© Mail.ru Group

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

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

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

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

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

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

© Mail.ru Group

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

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

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

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

© Mail.ru Group

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

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

© Mail.ru Group

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

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

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

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

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

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

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

© Mail.ru Group

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

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

© Mail.ru Group

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

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

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

© Mail.ru Group

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

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

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

© Mail.ru Group

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

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

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

© Mail.ru Group

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

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

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

© Mail.ru Group

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

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

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

© Mail.ru Group

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

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

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

© Mail.ru Group

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

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

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

© Mail.ru Group

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

что такое viewport

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

© Mail.ru Group

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

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

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

© Mail.ru Group

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

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

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

© Mail.ru Group

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

633px – 29% пользователей

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

© Mail.ru Group

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

670px – 14% пользователей

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

© Mail.ru Group

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

765px – 11% пользователей

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

© Mail.ru Group

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

830px – 25% пользователей

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

© Mail.ru Group

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

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

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

технологии

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

© Mail.ru Group

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

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

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

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

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

© Mail.ru Group

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

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

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

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

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

© Mail.ru Group

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

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

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

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

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

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

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

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

© Mail.ru Group

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

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

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

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

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

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

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

© Mail.ru Group

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

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

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

© Mail.ru Group

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

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

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

© Mail.ru Group

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

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

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

© Mail.ru Group

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

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

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

© Mail.ru Group

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

что дальше?

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

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

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

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

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

© Mail.ru Group

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

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

© Mail.ru Group

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

Q&A