Ветров - Rauf Aliev

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