1. Как создаются интерфейсы
в Mail.Ru
процесс, команда, инструменты и другие детали
Юрий Ветров

2. О чем этот рассказ?
— Как создается дизайн продуктов Mail.Ru –
все детали процесса.
— Новая интерфейсная команда – зачем она
создана и что именно делает.
— Инструментарий и технологический
процесс – как мы автоматизируем
производство.
— Прогнозируемый процесс развития
дизайна – как интерфейсные гайдлайны и
паттерны помогают сохранять единую
стилистику.
2

3. 1. Вводная
2. Команда
3. Процесс работы
4. Инструменты и технологический
процесс
5. Паттерны и гайдлайны
6. Тестирование и исследования
7. Творческие планы

4. Вводная часть
4

5. Летом 2011 года в Mail.Ru была создана новая
команда проектирования и дизайна интерфейсов.
Был усилен старый состав, началась оптимизация
процесса работы. Планы большие и амбициозные.
5

6. Я руковожу новой командой. До этого имел
разносторонний опыт работы по специальности –
был и частью компании-подрядчика, и продуктовой
организации.
6

7. В первом случае много разных заказчиков. Нужно
быстрое включение в новый проект, причем он может
быть на любой стадии. Проще обучить клиента, чем
каждый раз глобально менять процесс.
7

8. В продуктовой компании работу прогнозировать
проще, возможно долгосрочное планирование.
Небольшое количество постоянных менеджеров-
заказчиков, стоит подстроиться под них для большей
эффективности.
8

9. Зачем так много слов о процессе? Это гарантия
повторяемого результата прогнозируемого качества.
Он должен быть понятным и предсказуемым. Но не
превращаться в бюрократию.
9

10. 1. Вводная
2. Команда
3. Процесс работы
4. Инструменты и технологический
процесс
5. Паттерны и гайдлайны
6. Тестирование и исследования
7. Творческие планы

11. Команда
11

12. В Mail.Ru Group есть сразу несколько дизайн-команд в
разных продуктах и подразделениях – стратегические
продукты, социальные сети, многопользовательские
игры, юзабилити-лаборатория, поиск, ICQ и другие.
12

13. Основные специализации – дизайнеры,
проектировщики интерфейсов, юзабилити-
исследователи. Стремимся к не совсем четкому
разделению ролей – так эффективнее.
13

14. Нельзя делать одно большое внутреннее дизайн-
агентство – важна плотная работа с командами
продуктов. Темп работы и скорость изменений
большие, нужно быть рядом с разработкой.
14

15. Моя команда работает над общепортальными
правилами, главной страницей, Почтой, Агентом и
их мобильными сайтами и приложениями. Плюс
новые коммуникационные продукты.
15

16. С июля команда выросла в два раза, но еще не
весь штат укомплектован. На каждом продукте
должны быть трое – проектировщик и два
дизайнера (для основной и мобильных версий).
coming
hiring
soon
hiring hiring
16

17. Зачем так много? Важно обеспечить скорость
выдачи дизайна и его отличное качество. Также
проверяем много концепций – ищем интересные
интерфейсные решения, поэтому работы хватает.
17

18. Выстраиваем пул постоянных подрядчиков и
фрилансеров. К ним можно быстро обратиться,
если в штате человек с такой специализацией
сейчас не нужен. Или свои ресурсы перегружены.
18

19. Стараемся постоянно повышать квалификацию и
опыт в команде. Важно, чтобы люди росли и
усиливали команду – стараемся брать только тех,
кому интересно развиваться профессионально.
1. Конференции
2. Тренинги
3. Внутренняя конференция UX-Среда
4. Демонстрации результатов работ по
проектам
5. Обзоры свежих материалов
6. Парное проектирование и дизайн
7. Переключение между проектами чтобы
не застаиваться
19

20. Хорошая слаженная команда – основа всего
процесса и прогнозируемого результата. Держусь за
нее и стараюсь делать все что можно для ее
развития.
20

21. 1. Вводная
2. Команда
3. Процесс работы
4. Инструменты и технологический
процесс
5. Паттерны и гайдлайны
6. Тестирование и исследования
7. Творческие планы

22. Процесс работы
22

23. Мы используем классический подход к проектированию и дизайну
интерфейсов. Полный цикл – от понимания целевой аудитории и
проблемы до поиска и реализации решения.
Детальное Поддержка
Исследования Концепция Дизайн
проектирование разработчиков
Проверка решений
23

24. Много общения с менеджерами проектов и
1 продуктов, топ-менеджерами компании. Это
самостоятельный процесс, который мы
оптимизируем. Так решения попадают в жизнь.
24

25. Задачи двух типов – развитие текущих версий
2 продуктов и их новые релизы. Процесс тут
похожий, но отличается в деталях. Причем эти
работы могут идти параллельно.
новая
функция
новая новая
функция функция
25

26. Долгосрочное планирование. Весь пул задач по
3 продуктам известен, хотя приоритеты между ними
часто меняются. Форс-мажоры и внезапные
срочные задачи – сравнительно редко.
26

27. Значительную часть работы по дизайну
4 перекладываем на проектировщика. В этом
помогают паттерны, шаблоны и гайдлайны. Снимает
угнетающую рутину с дизайнера и ускоряет процесс.
27

28. Процесс гибкий – может корректироваться по
ситуации на каждом из этапов. Где-то срезаем
углы, где-то наоборот – копаем глубже. Важен
результат, а не бюрократия.
28

29. 1. Вводная
2. Команда
3. Процесс работы
4. Инструменты и
технологический процесс
5. Паттерны и гайдлайны
6. Тестирование и исследования
7. Творческие планы

30. Инструменты и
технологический процесс
30

31. Используем связку Adobe InDesign + Photoshop.
Есть неплохие альтернативы –
Fireworks, Visio, Omnigraffle, MS
Sketchflow, Axure, Balsamiq. Но наш вариант
считаем оптимальным.
31

32. Мощная автоматизация производства. Можно
1 создавать сложные скрипты и плагины для
сокращения ручной работы.
Например, автоматическая выгрузка макетов в вики.
32

33. (Почти) единая рабочая среда для
2 проектировщика и дизайнера. Наследование
документов, сложные библиотеки
элементов, похожий интерфейс, командная работа.
33

34. Проектировщик может делать максимально
3 приближенные к дизайну прототипы интерфейса.
Это ускоряет процесс и упрощает приемку –
меньше уровней абстракции.
34

35. Используем связку Jira + Confluence + Git. Работаем
над автоматизацией работы с ними. Например, в
InDesign можно будет нажать CTRL+S и макеты
автоматически попадут в вики.
35

36. Меньше ручной работы – больше
производительность команды. И времени на
создание интересных интерфейсных решений.
Процесс публикации готового дизайна
1. Сохранить текущий документ
2. Экспортировать макеты в PNG и PDF
3. Дать правильные имена макетам
4. Синхронизироваться с репозитарием
5. Выложить макеты в вики
6. Приложить макеты к задаче в таск-трекере
7. Запросить комментарии у менеджера задачи
36

37. Быстрая публикация нового дизайна упрощает
приемку и другие процессы. Например, возможно
быстрое итеративное прототипирование +
юзабилити-тестирование.
менеджер
дизайнер или
проектировщик
пользователь
37

38. Критично, чтобы автоматизация была
действительно автоматизированной. Большие
накладные расходы по ручной публикации –
нерегулярность процесса и его затухание.
38

39. 1. Вводная
2. Команда
3. Процесс работы
4. Инструменты и технологический
процесс
5. Паттерны и гайдлайны
6. Тестирование и исследования
7. Творческие планы

40. Интерфейсные гайдлайны
40

41. Интерфейсные гайдлайны и библиотеки паттернов
– лучший способ работы над интерфейсами пакета
крупных продуктов. Что они дают?
41

42. Единая визуальная стилистика для всех
1 продуктов. Это отличная поддержка бренда. И
просто хороший способ обеспечить прогнозируемое
качество дизайн-решений.
42

43. Привычный интерфейс для пользователей.
2 Проще работать сразу с несколькими продуктами
компании и пробовать новые. Меньше усилий на
обучение – больше комфорта и лояльности.
43

44. Быстрее и проще поддержка и развитие
3 продукта. Типовые задачи решаются легко и
быстро. Не нужно каждый раз заново изобретать
велосипед.
новая
функция
текущая
версия
новая
функция
44

45. Новые проектировщики и дизайнеры быстрее
4 включаются в процесс и разбираются в продуктах.
И меньше косячат в первое время работы.
Отличный способ сохранения и передачи знаний.
45

46. Сейчас мы создаем гайдлайны по всем продуктам в
нашей юрисдикции. Процесс небыстрый, но скоро
финишируем и работать станет намного проще.
1. Агент
2. Главная страница
3. Почта
4. Общепортальные правила
5. Мобильные сайты и приложения
46

47. Кто и как будет использовать гайдлайны? Важно
понимать это при создании. Мы пишем не
абстрактную спецификацию, а готовим рабочий
инструмент.
Пользователи гайдлайнов
1. Проектировщики
2. Дизайнеры
3. Разработчики
4. Менеджеры проектов и продуктов
47

48. Из чего состоит гайдлайн? Он должен описывать
интерфейс и дизайн на разных уровнях и слоях.
Отсюда и его содержание.
1. Общая 5. Цвета
компоновка 6. Шрифты
страницы 7. Пиктограммы
2. Сетки страниц 8. Текстуры и
3. Типовые иллюстрации
страницы
4. Основные блоки
48

49. Кто и как будет поддерживать и развивать
гайдлайны? Нужно понимать это сразу. Иначе они
быстро станут неактуальными и даже вредными.
49

50. Библиотека паттернов
50

51. Библиотека паттернов собирает типовые элементы
управления и информационные блоки, которые
используются в интерфейсе. Чем они помогают на
практике?
1. Списки
2. Описание объекта
3. Формы
4. Медиа-объекты
5. Диалоговые окна
6. Сводные страницы и дашборды
51

52. Лучшее дополнение гайдлайнов. Собирают все
1 примеры реализации описываемых принципов.
Упрощают трактовку гайдлайнов.
блок пользователя
обычное состояние
блок пользователя
недоступен
блок пользователя
выделен
блок пользователя
скрыт
52

53. Делаются в виде шаблонов для InDesign, которые
2 используются проектировщиками ежедневно. А
значит все общаются на одном языке. И можно
повторно использовать наработки.
53

54. Позволяют быстро собрать первую версию
3 прототипа интерфейса и дешево
экспериментировать с ним. Это быстрый выход на
рынок и более интересные решения.
54

55. В библиотеке паттернов также критичен процесс ее
регулярного обновления. Должно быть легко не
только взять из библиотеки элемент, но и положить
в нее новый.
55

56. Первыми полезность хорошей библиотеки паттернов
осознали в Yahoo! Много продуктов, которые нужно
было развивать единообразно. Это и сейчас одна из
лучших библиотек, доступна публично.
56

57. Хотя слово «производство» звучит немного
угнетающе в контексте дизайна и вообще
творческой работы, при хорошей организации оно
убирает рутину, а не рождает ее.
57

58. 1. Вводная
2. Команда
3. Процесс работы
4. Инструменты и технологический
процесс
5. Паттерны и гайдлайны
6. Тестирование и исследования
7. Творческие планы

59. Тестирование и исследования
59

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

61. Юзабилити-лаборатория – это внутреннее
агентство, которое проводит исследования для
коммуникационных сервисов, социальных сетей и
многопользовательских игр.
61

62. Важно, чтобы лаборатория синхронизировалась с
нашим темпом работы над продуктами. Могла
проводить много разных исследований для всей
группы продуктов и их версий.
62

63. Задачи для лаборатории разные – где-то обычное
юзабилити-тестирование или eye-tracking, где-то
более неформализованные вещи –
например, выбрать подходящие звуки для Агента.
1. Юзабилити-тестирование
2. Eye-tracking
3. Измерение физиологических
параметров человека
4. Глубинные интервью
5. Опросы
6. Фокус-группы
7. Дневниковые исследования
63

64. Собрано много интересного оборудования, которое
вместе дает комплексную картину – включая
физиологические показатели. В вебе это не
нужно, а вот игровикам очень помогает.
1. Компьютеры для записи сессий
юзабилити-тестирования
2. Eye-tracking
3. КГР (кожно-гальваническая реакция)
4. ЭЭГ (электроэнцефалография)
5. ЭКГ (электрокардиография)
6. Noldus Observer
64

65. Помимо лаборатории активно используется сплит- и
бета-тестирование. Сравниваем разные дизайн-
решения, обкатываем новую функциональность.
65

66. Очень помогает мощная внутренняя система
статистики RB. Можно отслеживать огромное
количество действий в интерфейсе.
66

67. Исследования помогают нам создавать более
проработанные решения, соответствующие
ожиданиям пользователей. А также объяснять
менеджерам причины появления этих решений.
67

68. 1. Вводная
2. Команда
3. Процесс работы
4. Инструменты и технологический
процесс
5. Паттерны и гайдлайны
6. Тестирование и исследования
7. Творческие планы

69. Творческие планы
69

70. Прошло 4 месяца с момента создания новой
команды и наладка процесса еще в середине пути.
Но многое уже успели.
70

71. Готовятся запуски новых продуктов и новые
1 релизы старых. К новому году нам будет что
показать.
71

72. Планируем закончить автоматизацию процесса
2 работы дизайнеров и проектировщиков. Это
значительно повысит нашу продуктивность и
качество.
72

73. Должны завершить работу над гайдлайнами и
3 библиотеками паттернов. Это ускорит и удешевит
процесс дизайна.
73

74. Более тесная интеграция с менеджерами и
4 командами разработки. Важно понимать и
доверять друг другу. И говорить на одном языке.
74

75. Отслеживать KPI работы отдела. Важно
5 соответствовать ожиданиям от нашей работы. А
еще лучше их предвосхищать и превышать.
75

76. Наш манифест
1. Команда и ее развитие
2. Баланс скорости и качества работы
3. Интеграция в команды разработки и
график продуктовых релизов
4. Интересные интерфейсные решения
для наших продуктов
5. Систематизация знаний об интерфейсе
и наработок по нему
6. Автоматизация производства
76

77. Было приятно видеть вас! Вопросы?
Юрий Ветров
www.jvetrau.com
twitter.com/jvetrau
www.mail.ru
facebook.com/pages/MailRu
Все иллюстрации, использованные в данной презентации, принадлежат их уважаемым владельцам. В случае, если вы являетесь их
правообладателем и против размещения этих иллюстраций – напишите, пожалуйста, письмо по адресу jvetrau@gmail.com и я уберу их из слайдов.