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

4,480 views

Published on

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

Published in: Design
3 Comments
25 Likes
Statistics
Notes
No Downloads
Views
Total views
4,480
On SlideShare
0
From Embeds
0
Number of Embeds
687
Actions
Shares
0
Downloads
0
Comments
3
Likes
25
Embeds 0
No embeds

No notes for slide
  • (с) 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/
  • 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.RuGroup, который стал еще обширнее – в него вошлиигровые компании, Одноклассники, 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. В прошлом году я вместе с коллегами из UIModeling Company стал частью новой интерфейснойкоманды Mail.Ru.15
    16. 16. За год с небольшим мы усилили и обновиликоллектив дизайнеров и проектировщиков. Выросфронт работ, во многом благодаря мобильнымприложениям. coming soon16
    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. Сейчас в лаборатории сравнительно небольшаякоманда, но потребность в исследованиях растет. Вней есть и классические инструменты, и eyetracking, и даже инструменты по сбору биофидбека.23
    24. 24. За год плотной работы мы пообщались с сотнямиреспондентов, изучили массу продуктов и сервисов.Но все еще есть задачи по интеграцииисследований в процессы разработки. Исследования24
    25. 25. В прошлом году мы начали проводить открытуюмикро-конференцию UX-Среда про интерфейсы.Это отличный способ повышения квалификации иобмена идеями. Сегодня она в гостях у UXRussia :)25
    26. 26. А весной сделали первый московский DribbbleMeetup. Это мероприятие уже для дизайнеров, накоторое мы приглашаем небольшие интересныестудии и продуктовые команды.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 80052
    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 Phone82
    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. Нам всем нравится фреймворк TwitterBootstrap, поэтому он стал прообразом нашегоподхода к унификации мобильного веба. А такжеотличным инструментом для быстрого редизайна.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. Futubra165
    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 и я уберу их из слайдов.

    ×