2. О чем этот рассказ?
— Как создается дизайн продуктов Mail.Ru –
все детали процесса.
— Новая интерфейсная команда – зачем она
создана и что именно делает.
— Инструментарий и технологический
процесс – как мы автоматизируем
производство.
— Прогнозируемый процесс развития
дизайна – как интерфейсные гайдлайны и
паттерны помогают сохранять единую
стилистику.
2
3. 1. Вводная
2. Команда
3. Процесс работы
4. Инструменты и технологический
процесс
5. Паттерны и гайдлайны
6. Тестирование и исследования
7. Творческие планы
6. Немного обо мне и прошлом опыте. Чем отличается
процесс в компании-подрядчике и продуктовой
компании.
6
7. Подрядчик – много разных заказчиков, нужен
быстрый старт нового проекта и ранние первые
результаты. Проще обучить клиента, чем каждый
раз менять процесс.
7
8. Продуктовая компания – небольшое количество
постоянных менеджеров-заказчиков, проще
подстроиться под них для большей эффективности.
8
9. 1. Вводная
2. Команда
3. Процесс работы
4. Инструменты и технологический
процесс
5. Паттерны и гайдлайны
6. Тестирование и исследования
7. Творческие планы
11. В Mail.Ru Group есть сразу несколько дизайн-команд в
разных продуктах и подразделениях – стратегические
продукты, социальные сети, многопользовательские
игры, юзабилити-лаборатория, поиск и другие.
11
12. Основные роли и специализации –
дизайнеры, проектировщики интерфейсов, юзабилити-
исследователи. Стремимся к не совсем четкому
разделению на проектировщиков и дизайнеров – так
эффективнее.
12
13. Нельзя делать одно большое внутреннее дизайн-
агентство – важна плотная работа с командами
продуктов, внедрение в них.
13
14. Моя команда работает над общепортальными
правилами, главной страницей, Почтой, Агентом и
их мобильными сайтами и приложениями. Плюс
новые коммуникационные продукты.
14
15. С июля команда выросла в два раза, но еще не
весь штат укомплектован. На каждом продукте
должны быть трое – проектировщик и два
дизайнера (для основной и мобильных версий).
15
16. Зачем так много людей? Важно обеспечить скорость
выдачи дизайна и его отличное качество. Также
проверяем много концепций, чтобы находить
интересные интерфейсные решения, поэтому работы
хватает.
16
17. Подрядчики и фрилансеры. Можно ли говорить про
них? Выстраиваем пул постоянных
подрядчиков, чтобы можно было закрывать задачи
при отсутствии собственных ресурсов.
17
18. 1. Вводная
2. Команда
3. Процесс работы
4. Инструменты и технологический
процесс
5. Паттерны и гайдлайны
6. Тестирование и исследования
7. Творческие планы
20. Мы используем классический подход к проектированию и дизайну
интерфейсов – в большинстве компании он выглядит аналогично.
Но есть нюансы.
Детальное Поддержка
Исследования Концепция Дизайн
проектирование разработчиков
Проверка решений
20
21. Много общения с менеджерами проектов и
1 продуктов, топ-менеджерами. Это отдельный
самостоятельный процесс, который мы также
выстраиваем.
21
22. Задачи двух типов – развитие текущих версий
2 продуктов и их новые релизы. Процесс похожий, но
отличается в деталях.
22
23. Долгосрочное планирование – весь пул задач по
3 продуктам известен, хотя приоритеты между ними
часто меняются. Форс-мажоры и внезапные
срочные задачи сравнительно редки.
23
24. Стараемся значительную часть работы по дизайну
4 переложить на проектировщика. В этом помогают
паттерны, шаблоны и гайдлайны. Снимает
угнетающую рутину с дизайнера и ускоряет процесс.
24
25. Процесс гибкий и может корректироваться по
ситуации на каждом из этапов. Где-то срезаем
углы, где-то наоборот – копаем глубже.
25
26. 1. Вводная
2. Команда
3. Процесс работы
4. Инструменты и
технологический процесс
5. Паттерны и гайдлайны
6. Тестирование и исследования
7. Творческие планы
28. Используем связку Adobe InDesign + Photoshop.
Есть неплохие альтернативы –
Fireworks, Visio, Omnigraffle, MS
Sketchflow, Axure, Balsamiq. Но наш вариант
считаем оптимальным. Почему?
28
29. Позволяет сделать мощную автоматизацию
1 производства – можно создавать сложные скрипты
и плагины для сокращения ручной работы.
Например, автоматическая выгрузка в вики.
29
30. Дает дизайнеру и проектировщику (почти) единую
2 рабочую среду. Наследование документов, сложные
библиотеки элементов, похожий
интерфейс, командная работа с файлом.
30
31. Проектировщик может делать максимально
3 приближенные к дизайну прототипы интерфейса.
Это ускоряет процесс и упрощает приемку –
меньше уровней абстракции.
31
32. Используем связку Jira + Confluence + Git. Также
работаем над автоматизацией работы с ними.
Например, нажимая в InDesign CTRL+S –
автоматически обновятся макеты в вики.
32
33. Меньше ручной работы – больше
производительность команды и времени на
создание интересных интерфейсных решений.
Процесс публикации готового дизайна:
1. Сохранить текущий документ
2. Экспортировать макеты в PNG и PDF
3. Дать правильные имена макетам
4. Синхронизироваться с репозитарием
5. Выложить макеты в вики
6. Приложить макеты к задаче в таск-трекере
7. Запросить комментарии у менеджера задачи
33
34. Быстрая публикация нового дизайна упрощает
приемку и другие процессы. Например, быстрое
итеративное прототипирование + юзабилити-
тестирование.
менеджер
дизайнер или
проектировщик
пользователь
34
35. Критично, чтобы автоматизация была
действительно автоматизированной – большие
накладные расходы по ручной публикации приведут
к ее нерегулярности.
35
36. 1. Вводная
2. Команда
3. Процесс работы
4. Инструменты и технологический
процесс
5. Паттерны и гайдлайны
6. Тестирование и исследования
7. Творческие планы
41. Быстрее и проще поддержка и развитие продукта –
3 типовые задачи решаются легко и быстро.
41
42. Новые участники команды быстрее разбираются в
4 продуктах компании и меньше косячат в первое
время работы.
42
43. Сейчас мы создаем гайдлайны по всем продуктам
под нашим началом. Процесс небыстрый, но скоро
финишируем и работать станет намного проще.
43
44. При создании гайдлайнов важно понимать, как и кем
они будут использоваться. Мы пишем не абстрактную
спецификацию, а готовим рабочий инструмент для
проектировщиков, дизайнеров, разработчиков и
менеджеров.
44
45. Из чего состоит гайдлайн? Описание сеток, типовых
элементов, цветов, шрифтов, принципов
использования иллюстраций и т.п. Т.е. он описывает
разные слои интерфейса.
45
46. Нужно сразу понимать, кто и как будет
поддерживать и развивать гайдлайны. Иначе они
быстро становятся неактуальными и даже
вредными.
46
48. Библиотека паттернов собирает типовые элементы
управления и информационные блоки, которые
используются в интерфейсе. Чем они помогают на
практике?
48
50. Сделаны в виде шаблонов для InDesign, которые
2 используются проектировщиками ежедневно. А
значит все общаются на одном языке.
50
51. Позволяют быстро собрать первую версию
3 прототипа интерфейса и дешево
экспериментировать в дальнейшем.
51
52. В библиотеке паттернов также критичен процесс ее
регулярного обновления. Важно, чтобы было просто
не только взять из библиотеки элемент, но и
положить в нее новый.
52
53. Первыми полезность хорошей библиотеки паттернов
осознали в Yahoo! Много продуктов, которые нужно
было развивать единообразно. Это и сейчас одна из
лучших библиотек, доступна публично.
53
54. 1. Вводная
2. Команда
3. Процесс работы
4. Инструменты и технологический
процесс
5. Паттерны и гайдлайны
6. Тестирование и исследования
7. Творческие планы
56. Пользовательское тестирование и исследования
критичны для получения хорошего массового
продукта. Мы выстраиваем процесс плотного
взаимодействия с юзабилити-лабораторией.
56
57. Юзабилити-лаборатория – это внутреннее
агентство, которое проводит исследования для
коммуникационных сервисов, социальных сетей и
многопользовательских игр.
57
58. Важно, чтобы лаборатория синхронизировалась с
нашим темпом работы над продуктами – могла
проводить много разных исследований для всей
пачки продуктов и их версий.
58
59. Задачи для лаборатории разные – где-то обычное
юзабилити-тестирование или eye-tracking, где-то
более неформализованные вещи – например, выбрать
подходящие звуки для Агента. Также
опросы, интервью, другие предварительные
исследования.
59
60. В лаборатории собрано много интересного
оборудования, которое вместе дает комплексную
картину – включая физиологические показатели
(кардиограмма, мозговые импульсы, дыхание и т.п.). В
вебе это не так важно, а вот игровикам очень нужно.
60
61. Помимо лаборатории активно используется сплит- и
бета-тестирование. Сравниваем разные дизайн-
решения, обкатываем новую функциональность.
61
62. Очень помогает мощная внутренняя система
статистики RB – можно отслеживать огромное
количество действий в интерфейсе.
62
63. 1. Вводная
2. Команда
3. Процесс работы
4. Инструменты и технологический
процесс
5. Паттерны и гайдлайны
6. Тестирование и исследования
7. Творческие планы
71. Было приятно видеть вас! Вопросы?
Юрий Ветров
www.jvetrau.com
twitter.com/jvetrau
www.mail.ru
facebook.com/pages/MailRu
Все иллюстрации, использованные в данной презентации, принадлежат их уважаемым владельцам. В случае, если вы являетесь их
правообладателем и против размещения этих иллюстраций – напишите, пожалуйста, письмо по адресу jvetrau@gmail.com и я уберу их из слайдов.
