Diese Präsentation wurde erfolgreich gemeldet.
Die SlideShare-Präsentation wird heruntergeladen. ×

User Experience 2012: Как меняется Mail.Ru — Продукты, процессы, команда

Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige

Hier ansehen

1 von 191 Anzeige

User Experience 2012: Как меняется Mail.Ru — Продукты, процессы, команда

Презентация части интерфейсной команды Mail.Ru (Юрий Ветров, Алексей Кандауров, Александр Киров, Алексей Сергеев, Наталья Спрогис) на конференции User Experience Russia 2012.

Презентация части интерфейсной команды Mail.Ru (Юрий Ветров, Алексей Кандауров, Александр Киров, Алексей Сергеев, Наталья Спрогис) на конференции User Experience Russia 2012.

Anzeige
Anzeige

Weitere Verwandte Inhalte

Diashows für Sie (20)

Andere mochten auch (20)

Anzeige

Ähnlich wie User Experience 2012: Как меняется Mail.Ru — Продукты, процессы, команда (20)

Weitere von Yury Vetrov (14)

Anzeige

Aktuellste (20)

User Experience 2012: Как меняется Mail.Ru — Продукты, процессы, команда

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

Hinweis der Redaktion

  • (с) http://www.lib.utexas.edu/maps/historical/historic_tex_cities.html
  • http://corp.mail.ru/about/history/http://www.secretuspexa.com/istorii-uspexa/istoriya-mail-ru/http://www.release-me.ru/history/mailru.phphttps://corp.mail.ru/press/pubs/353
  • © http://www.flickr.com/photos/reilly_contractors__civil_engineers__perth_wa/5668711972/sizes/l/in/photostream/
  • ©
  • ©
  • © http://www.flickr.com/photos/roxocubes/5786665820/sizes/l/in/photostream/
  • © http://www.flickr.com/photos/slimjim/5004687965/sizes/l/
  • Разбираем интересные кейсы за год
  • http://habrahabr.ru/company/mailru/blog/142193/http://corp.mail.ru/press/news/1330
  • Данных прошлых исследований хватило надолго.
  • Социальный блок
  • Эксперимент с максимальным расположением блоков, когда они уходили под скроллинг, сильно уронил позиции тех что остались вне первого экрана.
  • © http://www.flickr.com/photos/rudymiculescu/3976352031/sizes/l/
  • Использование алгоритмов для получения хорошей фоновой картинки (блюр и текстура). Прототипировали разные концепции поведения фона, чтобы выбрать хороший вариант. Предусмотрели его адаптивность
  • Пример нового USA Today, когда они тоже убрали кучу декораций и эффектов.
  • © http://www.flickr.com/photos/chipsmitmayo/3526561190/sizes/o/
  • © http://www.flickr.com/photos/haaveilla/4609129854/sizes/l/
  • © http://marketingland.com/its-a-post-pc-world-smartphones-tablets-outpace-traditional-pc-growth-8951
  • © http://gigaom.com/mobile/average-smartphone-cost-135-dollars/http://www.wired.com/gadgetlab/2011/11/smartphone-price-points/
  • © http://www.pacificprime.com/blog/5-reasons-your-smart-phone-is-causing-you-issues.html
  • Пошутить про то, что нас могут уволить, если мы про него расскажем.Как жить с тем, что полгода что-то делаешь, а показать не можешь.Шутить на тему того, что готовили крутой кусок презентации, а потом не получилось показать.
  • © http://www.flickr.com/photos/atog/4165156229/sizes/o/
  • © http://www.flickr.com/photos/chromjuwelen/6352546403/sizes/l/
  • © http://www.flickr.com/photos/uempe/3720579753/sizes/o/
  • Когда я пришел в компанию, мобильных приложений для стратегических продуктов, таких как почта, еще не было, поэтому было достаточно трудно выпустить мобильный продукт для сервиса с многомиллионной аудиторией под большинство мобильных платформ, но вместе с этим, безумно интересно было сделать это с нуля.
  • сайдбар, который сейчас стал практически стандартом для мобильных интерфейсов, на момент разработки нашего приложения был достаточно инновационным решением и оно успешно прижилось, а в дальнейшем его стало применять все больше и больше приложений
  • © http://www.flickr.com/photos/dcmaster/7452490560/sizes/l/
  • © http://www.flickr.com/photos/nhankamer/5525695925/sizes/l/
  • © http://itechwik.com/
  • © http://www.flickr.com/photos/hhimages/6662938461/sizes/z/
  • © Chris Barr, http://www.docstoc.com/docs/7185708/Using-a-CSS-Framework-or-How-to-spend-less
  • © http://joezeffdesign.com/portfolio/branding/pepsico/
  • Провели тестирование, узнали что много проблем. Сделали прототип с Usethics, начали работу над дизайном. Но по ходу этого поменялись бизнес-задачи, появились соц.сети, требование единого окна (но это не копирование Скайпа, а реальность Win7 – в тулбаре плохо показывается)
  • © http://danijel.kurincic.si/testiranje-uporabnosti-usability-testing/
  • © http://austintoombs.com/wp-content/uploads/2011/02/DSC_7808-Copy.jpg
  • Не пришлось рисовать макеты для многих экранов и состояний, поскольку все это уже было в прототипе.
  • © http://www.flickr.com/photos/qinn/3691377928/sizes/l/Имели много проблем изначально, когда доверие было не налажено. Дизайнеров меньше слушали, приходилось переделывать решения много раз.
  • © http://www.flickr.com/photos/kathyprints/2513527801/sizes/l/in/photostream/
  • © http://www.flickr.com/photos/21135206@N05/2099576382/sizes/m/При этом в России не так много собственных продуктов, а где иначе набраться такого опыта?
  • © http://victorinox.boffo.ru/p7-camper-victorinox.html
  • © http://www.flickr.com/photos/conagua/3990595054/sizes/z/
  • http://uxdesign.smashingmagazine.com/2012/09/27/fixing-broken-user-experience/
  • © http://www.flickr.com/photos/edwardappleby/627765531/sizes/l/
  • © EffectiveUI
  • © http://www.flickr.com/photos/usacehq/6283240235/sizes/l/
  • © http://www.flickr.com/photos/usacehq/6283240235/sizes/l/

×