Юрий Ветров

Как создаются интерфейсыв Mail.Ru

процесс, команда, инструменты и другие детали

2

О чем этот рассказ?

— Как создается дизайн продуктов Mail.Ru – все детали процесса.

— Новая интерфейсная команда – зачем она создана и что именно делает.

— Инструментарий и технологический процесс – как мы автоматизируем производство.

— Прогнозируемый процесс развития дизайна – как интерфейсные гайдлайны и паттерны помогают сохранять единую стилистику.

1. Вводная

2. Команда

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

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

5. Паттерны и гайдлайны

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

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

4

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

5

Новая команда, новый процесс, большие планы

6

Немного обо мне и прошлом опыте. Чем отличается процесс в компании-подрядчике и продуктовой компании.

7

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

8

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

1. Вводная

2. Команда

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

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

5. Паттерны и гайдлайны

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

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

10

Команда

11

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

12

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

13

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

14

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

15

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

16

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

17

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

1. Вводная

2. Команда

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

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

5. Паттерны и гайдлайны

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

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

19

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

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

20

Исследования Концепция Детальное проектирование Дизайн Поддержка

разработчиков

Проверка решений

21

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

22

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

23

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

24

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

25

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

1. Вводная

2. Команда

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

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

5. Паттерны и гайдлайны

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

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

27

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

28

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

29

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

30

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

31

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

32

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

33

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

Процесс публикации готового дизайна:

1. Сохранить текущий документ

2. Экспортировать макеты в PNG и PDF

3. Дать правильные имена макетам

4. Синхронизироваться с репозитарием

5. Выложить макеты в вики

6. Приложить макеты к задаче в таск-трекере

7. Запросить комментарии у менеджера задачи

34

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

дизайнер или проектировщик

пользователь

менеджер

35

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

1. Вводная

2. Команда

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

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

5. Паттерны и гайдлайны

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

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

37

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

38

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

39

Единая визуальная стилистика – поддержка бренда.1

40

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

41

Быстрее и проще поддержка и развитие продукта – типовые задачи решаются легко и быстро.3

42

Новые участники команды быстрее разбираются в продуктах компании и меньше косячат в первое время работы.4

43

Сейчас мы создаем гайдлайны по всем продуктам под нашим началом. Процесс небыстрый, но скоро финишируем и работать станет намного проще.

44

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

45

Из чего состоит гайдлайн? Описание сеток, типовых элементов, цветов, шрифтов, принципов использования иллюстраций и т.п. Т.е. он описывает разные слои интерфейса.

46

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

47

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

48

Библиотека паттернов собирает типовые элементы управления и информационные блоки, которые используются в интерфейсе. Чем они помогают на практике?

49

Лучшее дополнение гайдлайнов – собирают все примеры реализации описываемых принципов.1

50

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

51

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

52

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

53

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

1. Вводная

2. Команда

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

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

5. Паттерны и гайдлайны

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

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

55

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

56

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

57

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

58

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

59

Задачи для лаборатории разные – где-то обычное юзабилити-тестирование или eye-tracking, где-то более неформализованные вещи – например, выбрать подходящие звуки для Агента. Также опросы, интервью, другие предварительные исследования.

60

В лаборатории собрано много интересного оборудования, которое вместе дает комплексную картину – включая физиологические показатели (кардиограмма, мозговые импульсы, дыхание и т.п.). В вебе это не так важно, а вот игровикам очень нужно.

61

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

62

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

1. Вводная

2. Команда

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

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

5. Паттерны и гайдлайны

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

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

64

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

65

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

66

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

67

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

68

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

69

Тесная интеграция с менеджерами и командами разработки.4

70

KPI отдела. Хотим отслеживать показатели нашей эффективности.5

Было приятно видеть вас! Вопросы?

Юрий Ветровwww.jvetrau.comtwitter.com/jvetrau

www.mail.rufacebook.com/pages/MailRu

Все иллюстрации, использованные в данной презентации, принадлежат их уважаемым владельцам. В случае, если вы являетесь их правообладателем и против размещения этих иллюстраций – напишите, пожалуйста, письмо по адресу jvetrau@gmail.com и я

уберу их из слайдов.