Форум Технологий Mail.Ru 2011: Юрий Ветров — Как создаются интерфейсы в Mail.Ru

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

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

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

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

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

4

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

5

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

6

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

7

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

8

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

9

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

12

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

13

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

14

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

15

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

coming
hiring
soon

hiring hiring

16

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

17

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

18

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

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

19

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

20

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

22

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

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

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

23

Много общения с менеджерами проектов и

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

24

Задачи двух типов – развитие текущих версий

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

новая
функция

новая новая
функция функция

25

Долгосрочное планирование. Весь пул задач по

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

26

Значительную часть работы по дизайну

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

27

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

28

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

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

30

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

31

Мощная автоматизация производства. Можно

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

32

(Почти) единая рабочая среда для

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

33

Проектировщик может делать максимально

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

34

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

35

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

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

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

36

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

менеджер

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

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

37

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

38

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

40

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

41

Единая визуальная стилистика для всех

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

42

Привычный интерфейс для пользователей.

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

43

Быстрее и проще поддержка и развитие

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

новая
функция

текущая
версия
новая
функция

44

Новые проектировщики и дизайнеры быстрее

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

45

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

1. Агент
2. Главная страница
3. Почта
4. Общепортальные правила
5. Мобильные сайты и приложения

46

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

Пользователи гайдлайнов

1. Проектировщики
2. Дизайнеры
3. Разработчики
4. Менеджеры проектов и продуктов

47

Из чего состоит гайдлайн? Он должен описывать
интерфейс и дизайн на разных уровнях и слоях.
Отсюда и его содержание.

1. Общая 5. Цвета
компоновка 6. Шрифты
страницы 7. Пиктограммы
2. Сетки страниц 8. Текстуры и
3. Типовые иллюстрации
страницы
4. Основные блоки

48

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

49

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

50

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

1. Списки
2. Описание объекта
3. Формы
4. Медиа-объекты
5. Диалоговые окна
6. Сводные страницы и дашборды

51

Лучшее дополнение гайдлайнов. Собирают все

1 примеры реализации описываемых принципов.
Упрощают трактовку гайдлайнов.

блок пользователя
обычное состояние

недоступен

выделен

скрыт

52

Делаются в виде шаблонов для InDesign, которые

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

53

Позволяют быстро собрать первую версию

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

54

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

55

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

56

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

57

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

59

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

60

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

61

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

62

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

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

63

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

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

64

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

65

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

66

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

67

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

69

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

70

Готовятся запуски новых продуктов и новые

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

71

Планируем закончить автоматизацию процесса

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

72

Должны завершить работу над гайдлайнами и

3 библиотеками паттернов. Это ускорит и удешевит
процесс дизайна.

73

Более тесная интеграция с менеджерами и

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

74

Отслеживать KPI работы отдела. Важно

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

75

Наш манифест

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

76

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

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

www.mail.ru
facebook.com/pages/MailRu

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

Форум Технологий Mail.Ru 2011: Юрий Ветров — Как создаются интерфейсы в Mail.Ru

Related slideshows

More Related Content

Форум Технологий Mail.Ru 2011: Юрий Ветров — Как создаются интерфейсы в Mail.Ru

Editor's Notes