Презентация части интерфейсной команды Mail.Ru (Юрий Ветров, Алексей Кандауров, Александр Киров, Алексей Сергеев, Наталья Спрогис) на конференции User Experience Russia 2012.
UXRussia 5: Юзабилити-экспертиза в прямом эфире (Юрий Ветров, Александр Хмеле...
User Experience 2012: Как меняется Mail.Ru — Продукты, процессы, команда
1. Как меняется Mail.Ru
продукты, процессы, команда
Юрий Ветров, Алексей Кандауров, Александр Киров, Алексей Сергеев, Наталья Спрогис
2. О чем этот рассказ?
Несколько лет назад дизайн стал одним из
приоритетных направления для Mail.Ru.
Мы расскажем о том, что произошло за
последний год – рабочем процессе, новых
версиях ключевых продуктов.
А также новой команде, инструментарии и
куче других интересных вещей.
Об этом часть команды Mail.Ru расскажет в
своей большой презентации.
2
5. Через три года ресурсы компаний Port.ru и netBridge
объединились в портал Mail.Ru. Который
постепенно начал обрастать дополнительными
продуктами и сервисами.
5
6. В конце 2010 года был образован холдинг Mail.Ru
Group, который стал еще обширнее – в него вошли
игровые компании, Одноклассники, e-commerce,
доли в крупнейших западных сервисах.
6
7. Сейчас Mail.Ru Group это 40 продуктов в 5
подразделениях – стратегические продукты,
социальные сети, игры, мессенджеры и e-commerce.
Плюс пачка продуктов у дочерних компаний.
7
8. В 2009 году в компании было принято решение, что
UX является одним из стратегических направлений
развития.
Основные сложности
1. Продукты очень большие (аудитория,
функционал…)
2. Нужен новый процесс разработки
3. Нет стандартов и гайдлайнов для
различных проектов
4. Нужна команда
8
9. Это было связано с приходом Алексея Сергеева. А
в течении 2010 года и первой половины 2011 года в
компанию начали приходить сильные люди.
9
10. Наряду с внутренними работами мы начали
сотрудничество по крупным задачам с сильными
подрядчиками, такими как Usethics, Турбомилк,
NotaMedia.
10
11. Мы начали работать над стандартизацией, запустили новую единую
навигацию и шапки проектов. Началось обновление интефейсов
различных продуктов.
11
14. Процесс стал включать в себя регулярные UX-
исследования. Раньше проводились только
маркетинговые, либо простейшие юзабилити-тесты.
1. Юзабилити-тестирования
2. Глубинные интервью
3. Этнографические исследования
4. Нестандартные техники (например, co-
discovery)
14
15. В прошлом году я вместе с коллегами из UI
Modeling Company стал частью новой интерфейсной
команды Mail.Ru.
15
16. За год с небольшим мы усилили и обновили
коллектив дизайнеров и проектировщиков. Вырос
фронт работ, во многом благодаря мобильным
приложениям.
coming
soon
16
17. Мы занимается стратегическими продуктами и
задачами – это Почта, главная страница,
общепортальные правила, контент-проекты и
Ответы.
1. Авто 10. Погода
2. Афиша 11. Помощь
3. Дети 12. Почта
4. Главная 13. Портал
5. Гороскопы 14. Спорт
6. Здоровье 15. новые продукты
7. Леди
8. Новости
9. Ответы
17
18. Выстраиваем пул постоянных подрядчиков и
фрилансеров. К ним можно быстро обратиться,
если в штате человек с такой специализацией
сейчас не нужен. Или свои ресурсы перегружены.
18
19. Хорошая слаженная команда – основа всего
процесса и прогнозируемого результата. Держусь за
нее и стараюсь делать все что можно для ее
развития.
19
20. Еще одно знаковое событие – покупка в 2010 году
Одноклассников и приход Алишера Якупова
руководителем дизайнеров. Он построил отличный
процесс системной работы над интерфейсами. А
сервис вновь стал активно расти после спада.
20
21. Развиваются дизайнерские группы и в других
подразделениях – e-commerce, месседжинг, поиск.
Усилилась команда Моего Мира, Видео. А вот игры
стоят немного отдельно, про них мы знаем меньше.
21
22. В прошлом году совместно с Антоном Артемовым и
Ксенией Стерниной мы создали полноценную UX-
лабораторию. Она помогает проверять интерфейсные
решения и изучать поведение пользователей.
22
23. Сейчас в лаборатории сравнительно небольшая
команда, но потребность в исследованиях растет. В
ней есть и классические инструменты, и eye
tracking, и даже инструменты по сбору биофидбека.
23
24. За год плотной работы мы пообщались с сотнями
респондентов, изучили массу продуктов и сервисов.
Но все еще есть задачи по интеграции
исследований в процессы разработки.
Исследования
24
25. В прошлом году мы начали проводить открытую
микро-конференцию UX-Среда про интерфейсы.
Это отличный способ повышения квалификации и
обмена идеями. Сегодня она в гостях у UXRussia :)
25
26. А весной сделали первый московский Dribbble
Meetup. Это мероприятие уже для дизайнеров, на
которое мы приглашаем небольшие интересные
студии и продуктовые команды.
26
27. В своем аккаунте на Dribbble мы выкладываем
свежее и интересное из того что сделала наша
команда, подрядчики и другие подразделения.
27
28. Команда Одноклассников запустила конкурс для
отечественных дизайнеров Russian Design Cup.
Собралось около сотни участников и
интереснейший набор заданий для них.
28
31. За основу мы берем классический подход к проектированию и
дизайну интерфейсов. Полный цикл – от понимания целевой
аудитории и проблемы до поиска и реализации решения.
Детальное Поддержка
Исследования Концепция Дизайн
проектирование разработчиков
Проверка решений
31
32. Но процесс гибкий – может корректироваться по
ситуации на каждом из этапов. Где-то срезаем углы,
где-то наоборот – копаем глубже. Важен результат,
а не бюрократия.
32
33. Задачи двух типов – развитие текущих версий
1 продуктов и их новые релизы. Процесс тут
похожий, но отличается в деталях. Причем эти
работы могут идти параллельно.
новая
функция
новая новая
функция функция
33
34. Долгосрочное планирование. Весь пул задач по
2 продуктам известен, хотя приоритеты между ними
часто меняются. Форс-мажоры и внезапные
срочные задачи – сравнительно редко.
34
35. Много общения с менеджерами проектов и
3 продуктов, топ-менеджерами компании. Это
самостоятельный процесс, который мы
оптимизируем.
35
36. Часть работы по дизайну перекладываем на
4 проектировщика. В этом помогают паттерны,
шаблоны и гайдлайны. Снимает угнетающую рутину
с дизайнера и ускоряет процесс.
36
37. Вовлечение команды в процесс исследований.
5 Живое наблюдение за интервью и участие в этом
процессе часто важнее подробного отчета.
37
38. Еженедельные презентации. Каждую пятницу
6 команда презентует результаты работы за неделю.
Это отличный способ собрать фидбек и просто быть
в курсе того, что происходит в компании.
38
39. У нас есть матрица продуктов – продукты vs платформы. Это наш
фронт работ на ближайшее будущее.
Веб Веб (моб.) Веб Android Bada iPhone J2ME Symbian WP iPad Win8 Android ТВ
(планшеты) Tablet
Авто
Афиша
Дети
Главная
Гороскопы
Здоровье
Леди
Новости
Ответы
Погода
Помощь
Почта
Портал
Спорт
***
39
40. Интересные кейсы за год
1. Главная страница
2. Новости
3. Проект Икс
4. Почта
5. Портальные правила
6. Агент
7. Futubra
42. Одним из первых крупных проектов, запущенных
при участии новой команды, стала новая главная
страница Mail.Ru. Она стартовала в начале этого
года.
42
43. Причем задача далеко не только интерфейсная и
дизайнерская. Это тонкий и политический вопрос – на
главную завязаны очень многие продукты компании.
Она – точка входа и критична для любого портала.
43
44. Каждый представленный здесь продукт получает
трафик, а значит прибыль. Любая ссылка на
главной имеет денежную стоимость. Попробуйте
убрать хотя бы одну!
44
45. Отсюда и основная задача – лучше и логичнее
представить ключевые продукты. А значит и четче
регулировать распределение трафика между ними.
45
46. Вторая цель – сделать страницу более
современной, обновить ее стилистику и сделать
визуально чище.
46
47. Мы изучили отдельные ключевые аспекты. Например,
как воспринимают новостной блок на главной
странице. А также подняли данные предыдущих
исследований, а также исследования по предыдущим
продуктам.
47
48. В ходе проектирования мы опробовали массу концепций,
радикальных и консервативных. Для упрощения прототипирования
подготовили сет бумажных блоков, из которых можно было быстро
собрать любую вариацию компоновки.
48
49. Это помогло скоординировать позиции топ-
менеджеров. Мы устроили большую сессию
бумажного прототипирования, в ходе которой
каждый из них собрал свою версию страницы.
49
50. Новая структура страницы стала более логичной. Под
каждый проект и пользовательскую задачу выделены
отдельные зоны. Можно играть с контентом каждого
блока и изменять его показатели.
50
51. Одним из жестких требований была необходимость
вписать весь контент в один экран. Для этого было
предложена адаптивность, включающая много
уровней для самых разных разрешений.
51
52. Хотя современные компьютеры все чаще имеют широкоэкранные
мониторы, по высоте ситуация мало поменялась. Вьюпорты
достаточно зажаты и это сильно влияет на видимую область
страницы.
10% 11% 29% 14% 11%
90
80
70
60
670px
576px
765px
830px
633px
% 50
40
30
20
10
0
550 600 650 700 750 800
52
53. Для пользовательского тестирования это была
любопытная задача. Как исследовать одну
страницу, завязанную на кучу деятельностей? В итоге
получился скорее эмоциональный тест, чем
сценарный.
53
54. Поняли основные болевые точки при переходе на
новый дизайн – она стала логичнее и чище, но при
этом потеряла часть привычной пользователям
яркости.
54
55. Более мелкие проблемы – возвращение кнопки
«выход» в блок Почты, переработка иконок
информеров, замена заголовка точки входа в Почту
и еще с десяток небольших доработок.
55
56. Мы посмотрели на то, какие блоки на главной
странице наиболее заметны, но в данном случае
больше ориентировались на сплит-тесты и карты
кликов, чем на eye-tracking.
56
57. Главная страница – это лицо компании, так что ее
редизайн стал одним из символов изменений в
Mail.Ru. Это большой и приятный шаг вперед.
57
59. В дополнение к основной версии главной страницы
идет работа над ее «сателлитами». В конце прошлого
года был запущен хаб для WP7 – эта концепция
платформы отлично подходит для порталов.
59
60. Интересные кейсы за год
1. Главная страница
2. Новости
3. Проект Икс
4. Почта
5. Портальные правила
6. Агент
7. Futubra
62. Весной нашему подразделению передали контент-
проекты – это 11 сервисов, покрывающих самые
разные тематики. Их переделку мы начали с одного
из самых популярных – Новостей.
Авто Новости
Афиша Погода
Дети Рассылки
Гороскопы Спорт
Здоровье ТВ
Леди
62
63. Необходимо было повысить глубину
просмотра, упростить навигацию и обновить
внешний вид сервиса. А также в целом улучшить
восприятие проекта пользователями.
63
64. Одна из главных проблем – «желтизна» новостей. К
счастью, ее начали решать задолго до
редизайна, при запуске новой главной. Поэтому к
моменту нашей работы с контентом все было
хорошо.
64
65. Другая проблема – обилие медийной и партнерской
рекламы. Сложно перекроить интерфейс, если
большинство из них останется. Но с помощью
коммерческих инструментов ее также решили.
65
66. При работе над новым дизайном сфокусировались
на трех направлениях, чтобы превратить продукт в
удобное и комфортное место для поиска и чтения
новостей.
66
67. Четкое разделение зон чтения. Сама новость и
1 связанные с ней материалы, реклама и партнерские
ссылки, собственный интересный контент –
разделены по понятным и наглядным зонам.
67
68. Упрощение навигации. Старая версия предлагала
2 пользователю несколько пересекающихся между
собой меню. В новой остался один простой и
наглядный способ навигации.
68
69. Более медийная и эмоцональная подача
3 контента. Яркое представление
фотогалерей, контекстные фоновые
изображения, красочная картина дня.
69
70. Адаптивный дизайн учитывает разброс разрешений
экрана. На маленьких декорации и иллюстрации
уменьшены, на больших – увеличены
шрифты, представлено больше контента.
70
71. Фон страницы – контекстный. Это эмоциональная
составляющая и потенциальное стилистическое
объединение продуктов. Прототипировали разные
варианты его поведения и продумывали алгоритмы
сглаживания – картинка должна быть качественной.
71
72. Правда, технологичный дизайн плохо сказался на
производительности. Пришлось отключить часть
эффектов, чтобы не было проблем у пользователей
на старых компьютерах.
72
73. Еще один эксперимент – ссылки без выделения и
подчеркивания – предсказуемо уронил
кликабельность. Вернулись к более привычному
варианту.
73
74. Другие решения, которые в теории должны были
улучшить UX, оказались проблемными на практике.
Например, решение убрать промежуточную
страницу у фотогалерей.
74
75. Нужно помнить, что баланс между деньгами и UX
играет важную роль. Важно не забывать о том что
мы работаем не только для пользователя, но и для
успеха бизнеса.
75
76. И опять интересная задача на пользовательское
исследование. Нет смысла давать задания, важно
понять модели поведения читателей, ведь с точки
зрения логики интерфейс Новостей очень прост.
76
77. Зато неоценимым оказался eye tracking. В отсутствии
четких сценариев только он давал понимание, чем
сейчас занимается респондент. А при такой
информационной насыщенности очень важно
осознавать, какие элементы остаются незамеченными.
77
78. Пользовательское исследование показало разные
сценарии работы с новостями и подходы к их чтению.
Оказалось, что для ряда пользователей интерфейс
вообще не важен – они ходят по броским заголовкам и
им не важно, какой сайт их предоставляет.
78
79. А вот те, кто интересуется определенной
темой, хорошую подачу информации и помощь в ее
поиске очеь ценят. И это одно из направлений
оптимизации интерфейса.
79
82. Вторая задача по перезапуску Новостей – линейка
мобильных приложений. Нужно покрыть максимум
платформ на смартфонах и планшетах.
Android Android Tablet
Bada iPad
iPhone Windows 8
Symbian/MeeGo
Windows Phone
82
83. По прогнозам аналитиков к 2015 году более 60%
используемых мобильных устройств будут
составлять смартфоны и планшетные компьютеры.
83
84. Приток новых пользователей с мобильных
устройств – все больше. Планшеты и смартфоны
становятся доступными широкой аудитории (как по
стоимости, так и с точки зрения UX).
84
85. Для нас важно дать пользователям возможность
читать новости «на ходу», всегда и везде. А также
охватить большинство востребованных в России и
СНГ платформ.
85
86. Хороший дизайн особенно важен для успеха
приложения. После того как мы поработали над
приложением для Windows 8, родилась сильная
концепция для iPad на ее основе.
86
87. Использование модульных сеток – активный в
последние годы тренд в создании информационных
проектов в вебе и планшетных приложениях. Нам
удалось предолжить свежие решения для Win8 и iPad.
87
88. Подрядчиками сделан дизайн линейки смартфонных
приложений для Android, Bada, iPhone, Symbian и
MeeGo, Windows Phone. Новости будут доступны на
всех востребованных в России платформах.
88
89. Интересные кейсы за год
1. Главная страница
2. Новости
3. Проект Икс
4. Почта
5. Портальные правила
6. Агент
7. Futubra
91. Mail.Ru перезапускает один из продуктов. Он не
похож на другие сервисы компании. Здесь мы
пробуем другой визуальный стиль и новые подходы
к взаимодействию пользователя с интерфейсом.
91
92. К сожалению, нам пришлось исключить детали из
презентации незадолго до конференции – готовится
официальный анонс продукта. Ждать осталось
совсем недолго и скоро вы все узнаете.
92
93. Интерфейс прошел три этапа развития, в ходе
которых мы опробовали разные подходы к
интерфейсу. Видение продукта и понимание задачи
заметно поменялись в ходе этой работы.
93
94. Первый прототип был собран на основе текущих
1 паттернов. Это помогло быстро получить
понимание предметной области и обкатать
требования.
94
95. На втором этапе мы решили исследовать
2 пространство решений и проверили самые
сумасшедшие идеи. Родились необычные
концепции, использующие модные интерфейсные
решения.
95
96. Третий вариант интерфейса стал реалистичным.
3 Пользовательское исследование концепций
показало, что мы в корне не правы – деятельность
пользователей обстоит совсем не так как мы думали.
96
97. После утверждения концепции проектировщик
работает в режиме консультанта – прорабатывает
детали в паре с дизайнером. Что-то делается в виде
скетчей, что-то обсуждается на словах, что-то
проверяется уже в макетах.
97
98. Многие боятся признаться себе и другим, что
персонажи – инструмент достаточно ограниченной
полезности. Часто на них затрачиваются силы, а
они в итоге «пылятся на полках».
98
99. А вот в связке с Customer Journey Map их можно
заставить работать. Они описывают модель поведения
пользователей и важные этапы взаимодействия с
продуктом – там, где можно повлиять на experience.
99
100. Первое тестирование прошло на сотрудниках. Это
простой и быстрый способ выявить самые важные
проблемы и подтвердить ключевые гипотезы до
проведения полноценного теста.
100
101. Станет ли этот сервис новым стилем продуктов
Mail.Ru? Время покажет, но мы работаем над этой
возможностью и пачкой альтернативных подходов.
101
102. Интересные кейсы за год
1. Главная страница
2. Новости
3. Проект Икс
4. Почта
5. Портальные правила
6. Агент
7. Futubra
104. Летом прошлого года была запущена текущая
версия Почты Mail.Ru. Это заметный рывок
вперед, который решил массу застаревших проблем
и сделал интерфейс современным.
104
105. Одновременно с редизайном шел крупный
технический рефакторинг, поэтому к моменту запуска
новый интерфейс получили только ключевые экраны –
список писем, письмо, написание письма.
105
106. Сейчас мы ведем эволюционное развитие продукта.
За прошедший с момента запуска год были
доведены до ума те функции, которые не успели
переработать в ходе запуска редизайна.
106
108. Форма написания письма совершенствуется. Мы
уходим от визуального оформления устаревших
текстовых редакторов и продолжаем двигаться в
сторону современных стилистических тенденций.
108
109. Значение файлов в почте усиливается. О размерах
вложений уже давно можно не заботиться. А теперь
упрощаются поиск и просмотр большинства
востребованных форматов файлов прямо из сервиса.
109
110. Недавно темам Почты исполнился год. За этот год
мы успели подарить пользователям множество
интересных оформлений продукта в различных
стилистиках на любой вкус.
110
111. Сейчас в закрытом режиме тестируются еще ряд
ключевых функций, которые были приведены в
соответствие с новым дизайном. А также новые
вещи, двигающие Почту вперед.
111
112. В работе над этими функциями помогает
исследование активности их использования. Эти
данные подсказывают, какие действия в интерфейсе
стоит улучшать, а что мало востребовано и может
быть пессимизировано.
112
113. Параллельно с развитием текущей версии мы
работаем над будущим продукта. Ведется
множество экспериментов и исследований того, как
и куда развиваться Почте.
113
114. Мы провели большое исследование на сегментацию
пользователей. Оно показало интересные и
необычные паттерны использования Почты. А также
помогло проверить ряд свежих концепций.
114
115. Летом состоялся совместный проект с Британкой.
Студенты курса дизайн-мышление исследовали
будущее почты и предложили концепцию ее развития.
Это помогает по-новому взглянуть на задачу.
115
117. Исторически сложилось, что мобильное
приложение Почты было частью Агента. На тот
момент это было удобное для компании
решение, хотя сейчас продукты полностью
разнесены.
117
118. Трудно выпустить мобильный продукт для сервиса с
многомиллионной аудиторией под большинство
мобильных платформ, но безумно интересно было
сделать это с нуля.
118
119. В мобильных у нас сложился отличный от
остальных задач подход – дизайнер выступает еще
и в роли проектировщика. В мобильных это
помогает достичь более интересных результатов.
119
120. В первой версии мы активно экспериментировали с
механиками взаимодействия. Часть оказались
удачными. Например, сайдбар для списка папок мы
внедрили на ранних стадиях его популярности.
120
121. Другие механики в жизнь не попали.
Например, быстрая отметка писем прочитанными
по свайпу из списка писем, хотя оно и понравилось
некоторым пользователям.
121
122. У меня часто спрашивают, как долго работать над
одним продуктом и не сойти с ума. Есть большая
разница между работой над разными проектами или
одним в течении долгого времени – за почти год моей
работы мы выпустили Почту под целый ряд платформ.
122
123. Мы также активно исследуем разные направления
развития мобильной Почты, много экспериментируем
с подходами к интерфейсу и визуальной стилистике.
Что-то из этого потом попадает в основную версию.
123
124. Сильно упростило работу и сказалось на
продуктивности появление технического дизайнера.
Он занимается нарезкой графики для разработчиков и
гайдлайнами с отступами, рисует вспомогательные
экраны и сам собирает XML-фронтэнд для Android.
124
125. Также очень помогает отвлечься переключение на
задачи других продуктов (мобильная главная и
контент-проекты). Взгляд перестает замыливаться и
появляются новые интересные идеи, а также
мотивация развивать продукт дальше.
125
126. Параллельно с работой над приложениями мы
запустили веб-почту для современных тачфонов и
обновили версию для более старых телефонов.
126
127. И продолжаем увеличивать охват платформ –
активно занимаемся версиями Почты для
оставшихся устройств и ОС.
127
128. Интересные кейсы за год
1. Главная страница
2. Новости
3. Проект Икс
4. Почта
5. Портальные правила
6. Агент
7. Futubra
130. В 2011 году была запущена единая портальная
навигация. Процесс длился год и потребовал долгих
переговоров, зато дал мощный толчок к унификации
продуктов компании.
130
131. Мы двигаемся дальше поэтапно, охватываем кусок за
куском – футер, формы, иконки. Нельзя просто так
взять и переделать большой портал. Хотим запустить
это на всех, но начинаем со своих продуктов.
131
132. Иконки стандартизируются – в результате у всех
продуктов будет одинаковые символы
конверта, пользователя и т.п. А также переходят в
вектор – это одно из условий ретинизации и
комфортной поддержки дизайна.
132
134. Важно максимально упростить работу над
стандартными решениями, не изобретать
велосипед каждый раз заново. Но помнить о
том, что у каждого продукта может быть своя
стилистика.
134
135. Результат – комплект PSD-макетов с
расставленными размерами, а так же простой
возможностью редактирования и стилизации форм.
135
136. А также спецификация в Confluence, которая
описывает детали использования каждого из
элементов. Мы также работаем над переводом
гайда в единую базу кода.
136
138. Этим летом запущена новая версия главной Mail.Ru
для мобильных. Получился простой и легкий
стиль, который состоит из хорошо масштабируемых
базовых элементов.
138
139. Поэтому когда мы занялись переделкой мобильных
контент-проектов, было решено базироваться на
этой же стилистике и логике интерфейса.
139
140. Нам всем нравится фреймворк Twitter
Bootstrap, поэтому он стал прообразом нашего
подхода к унификации мобильного веба. А также
отличным инструментом для быстрого редизайна.
140
141. Получившийся конструктор позволил собирать
максимально похожие на дизайн прототипы в
InDesign силами проектировщиков, что сильно
экономит время дизайнеров и ускоряет работу.
141
142. Он включает все возможные блоки и элементы
управления, которые могут использоваться в
мобильных интерфейсах. И пополняется при
появлении новых задач.
142
143. А гайдлайн в Confluence описывает все нюансы
дизайна для разработчиков и менеджеров –
шрифты и цвета, отступы и сетки, иконки и
вспомогательную графику.
143
144. Кроме того, он учитывает разные возможности
браузеров – iOS, Android и WP7, старые
смартфоны, не-тач телефоны. В будущем появится
механизм автоматической деградации.
144
145. Параллельно с этим разработчики создают единую
базу CSS, которая облегчит внедрение редизайна для
каждого продукта, а также зафиксирует
унифицированную стилистику. И самое главное –
позволит обновлять гайдлайн сразу везде.
145
146. Правда, такой подход усложняет брендирование
отдельных продуктов. Но мы проработали несколько
подходов, которые позволят решить эту задачу, так что
каждый сервис сможет иметь свою стилистику.
146
147. Интересные кейсы за год
1. Главная страница
2. Новости
3. Проект Икс
4. Почта
5. Портальные правила
6. Агент
7. Futubra
149. Новая версия мессенджера Агент запущена весной
этого года. Это самый популярный в России сервис
мгновенных сообщений – им пользуются более 20
миллионов человек.
149
150. Накануне этого Агент был передан в другое
подразделение, но всю работу над его интерфейсом
и дизайном выполнил наш отдел. Этот процесс
стартовал около двух лет назад.
150
151. Поводом для редизайна стало множество
проблем, выявленных юзабилити-тестированием.
Вместе с компанией Usethics был спроектирован
интерфейс, а дизайном занялся Turbomilk.
151
152. Однако вскоре измненились бизнес-
требования, необходимо было добавить работу с
социальными сетями. А тулбар сравнительно
недавно вышедшей Windows 7 потребовал единого
окна программы.
152
153. Провели этнографию для оценки ожиданий
пользователей. Важно было понять, готовы ли они к
единому окну, каковы их паттерны использования. В
итоге сформировали новые требования к интерфейсу.
153
154. Еще одним способом изучения единого окна стал
интерактивный прототип, подгружающий реальные
данные пользователя. Это позволило проверить
интерфейс единого окна на реальных данных.
154
155. Для Агента было проведено, возможно, самое
большое количество пользовательских исследований.
Это десктопное приложение и ошибки сложно
исправить после релиза в отличие от веба.
155
156. В какой-то момент работы по проектированию и
дизайну перешли внутрь компании. И тут здорово
помог InDesign и подход с максимально похожими на
дизайн прототипами. Он упрощает обсуждения и
решает часть задач за дизайнера.
156
157. Важно было также запустить новый движок с
поддержкой видео-звонков на базе собственной
разработки. Эта функциональность стала одной из
ключевых в новой версии Агента.
157
159. Мессенджер интегрирован в часть продуктов Mail.Ru.
Интересная задача, но много сложностей с
внедрением. Важно понимать, в каком контексте
пользователь может работать с мессенджером на
конкретном проекте.
159
160. Быстрое тестирование выявило ряд легко решаемых
проблем: отсутствие ссылки на анкету при запросе
авторизации, слишком быструю реакцию поиска на
двойной клик, непонятную метафору настроек и т.д.
160
162. Перед передачей Агента в специализированное
подразделение Instant Messaging мы успели
поработать над его мобильными приложениями.
Начали редизайн версии для Android.
162
163. Также запустили первое приложение Mail.Ru для
Windows Phone. В нем получилось значительно
облегчить интерфейс, насыщенный множеством
функций.
163
164. Интересные кейсы за год
1. Главная страница
2. Новости
3. Проект Икс
4. Почта
5. Портальные правила
6. Агент
7. Futubra
166. В первые недели года запустилась бета-версия
нового продукта Mail.Ru – микроблоггингового
сервиса Futubra.
166
167. Для ускорения запуска продукта и фокуса на
ключевых функциях команда следовала идеологии
mobile first. С мобильной версии было проще начать, а
также проводить эксперименты с концепцией.
167
168. Дальше интерфейс развивался с помощью техник
адаптивного дизайна и progressive enhancement.
Это позволило охватить широкий спектр мобильных
устройств, начиная от самых примитивных.
168
169. В дополнение к большому и мобильному вебу
появились приложения для Android, iPhone, Symbian
и WP7.
169
171. Как меняются
большие компании
1. Без чего нельзя добиться успеха
2. Что нам предстоит сделать
172. В прошлом году я рассказывал о наших планах и
первых достижениях. Многое удалось
осуществить, что-то еще не успели, какие-то
предположения оказались неверными.
172
174. Команда. Без сильных специалистов, которые не
1 разрываются между пятью проектами, очень сложно
делать хорошие вещи.
174
175. Доверие. Менеджеры продуктов и руководители
2 направлений должны доверять решениям
дизайнеров. А дизайнеры должны уметь сами
«продавать» эти решения и доносить свои идеи.
175
177. Продуктовая работа и работа на заказчика – это
4 огромнейшая разница. Многие кто к нам приходит –
перестраиваются. Я и сам долго ломал себя после
четырехлетнего опыта клиентской рабты в UI Modeling.
177
178. Многофункциональные специалисты. Жесткое
5 разделение на дизайнеров и проектировщиков
плохо работает – это усложнение цепочки создания
дизайна и размывание ответственности за него.
178
179. Проектировщик как консультант. Не нужно
6 рисовать детальный прототип на каждый чих – для
многих задач достаточно сделать дизайнеру скетч
или просто объяснить на словах.
179
180. Нет универсального процесса. Под каждую
7 задачу и ситуацию строится свой процесс на основе
его идеального видения. Это уменьшает
бюрократию и делает работу динамичнее.
180
181. Первое время очень сложно. Нужно решать текущие
8 задачи и одновременно готовить новые версии продуктов.
При этом приходится работать по-старому и одновременно
внедрять новый процесс. Нельзя остановиться и сказать
«сейчас мы придумаем как сделать все правильно».
181
182. Stefan Klocek описал свое видение интерфейсных
реформ в больших компаниях. Оно перекликается с
тем, что делаем мы. Хотя любая модель упрощает
реальность – ее внедрение не идет гладко.
182
184. Работа с KPI продуктов. Важно отслеживать не
1 просто частные метрики, а понимать их влияние на
успешность продукта по разным показателям.
184
185. Модели поведения пользователей для всех
2 продуктов. Они помогут нам проектировать не
просто фичи, а решать потребности пользователей.
185
186. Интерфейсные гайдлайны на уровне единой базы
3 кода. Они не так хорошо работают в виде статичной
документации – важна быстрая возможность менять
паттерны во всех продуктах сразу.
186
187. Интеграция исследований в процессы разработки
4 интерфейсов на каждом этапе. Внедрение быстрых
методик исследований, не требующих длительной
подготовки и обработки.
187
188. Повысить скорость работы с подрядчиками.
5 Часть задач мы отдаем наружу и во многих случаях
получаем отличнейший результат. Но работы
зачастую затягиваются из-за медленных итераций.
188
189. Максимально заполнить матрицу проектов.
6 Обновление ключевых продуктов и запуск
новых, редизайн или рестайлинг контент-
проектов, подготовка мобильных версий и
приложений.
189
190. 30 октября состоится большой анонс крупных
обновлений ключевых продуктов и новых сервисов.
Презентация могла бы приятно расшириться за счет
этих кейсов :)
190
191. Спасибо!
Юрий Ветров Алексей Кандауров
www.jvetrau.com twitter.com/4annel
twitter.com/jvetrau
Александр Киров Алексей Сергеев
www.pyromind.ru twitter.com/alekser
twitter.com/alexanderkirov
Наталья Спрогис
twitter.com/Natalia_Sprogis
Все иллюстрации, использованные в данной презентации, принадлежат их уважаемым владельцам. В случае, если вы
являетесь их правообладателем и против размещения этих иллюстраций – напишите, пожалуйста, письмо по адресу
jvetrau@gmail.com и я уберу их из слайдов.
Использование алгоритмов для получения хорошей фоновой картинки (блюр и текстура). Прототипировали разные концепции поведения фона, чтобы выбрать хороший вариант. Предусмотрели его адаптивность
Пример нового USA Today, когда они тоже убрали кучу декораций и эффектов.
Пошутить про то, что нас могут уволить, если мы про него расскажем.Как жить с тем, что полгода что-то делаешь, а показать не можешь.Шутить на тему того, что готовили крутой кусок презентации, а потом не получилось показать.
Когда я пришел в компанию, мобильных приложений для стратегических продуктов, таких как почта, еще не было, поэтому было достаточно трудно выпустить мобильный продукт для сервиса с многомиллионной аудиторией под большинство мобильных платформ, но вместе с этим, безумно интересно было сделать это с нуля.
сайдбар, который сейчас стал практически стандартом для мобильных интерфейсов, на момент разработки нашего приложения был достаточно инновационным решением и оно успешно прижилось, а в дальнейшем его стало применять все больше и больше приложений
Провели тестирование, узнали что много проблем. Сделали прототип с Usethics, начали работу над дизайном. Но по ходу этого поменялись бизнес-задачи, появились соц.сети, требование единого окна (но это не копирование Скайпа, а реальность Win7 – в тулбаре плохо показывается)