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

Юрий Ветров

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

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

2

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

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

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

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

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

1. Вводная

2. Команда

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

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

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

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

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

4

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

5

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

6

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

7

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

8

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

9

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

1. Вводная

2. Команда






11

Команда

12

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

13

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

14

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

15

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

16

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

hiring hiring

coming soon

hiring

17

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

18

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

19

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

1. Конференции

2. Тренинги

3. Внутренняя конференция UX-Среда

4. Демонстрации результатов работ по проектам

5. Обзоры свежих материалов

6. Парное проектирование и дизайн

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

20

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

1. Вводная

2. Команда






22

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

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

23

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

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

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

24

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

25

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

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



26

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

27

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

28

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

1. Вводная

2. Команда






30

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

31

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

32

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

33

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

34

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

35

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

36

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

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

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

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

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

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

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

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

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

37

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

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

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

менеджер

38

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

1. Вводная

2. Команда






40

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

41

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

42

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

43

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

44

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

текущаяверсия



45

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

46

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

1. Агент

2. Главная страница

3. Почта

4. Общепортальные правила

5. Мобильные сайты и приложения

47

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

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

1. Проектировщики

2. Дизайнеры

3. Разработчики

4. Менеджеры проектов и продуктов

48

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

1. Общая компоновка страницы

2. Сетки страниц

3. Типовые страницы

4. Основные блоки

5. Цвета

6. Шрифты

7. Пиктограммы

8. Текстуры и иллюстрации

49

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

50

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

51

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

1. Списки

2. Описание объекта

3. Формы

4. Медиа-объекты

5. Диалоговые окна

6. Сводные страницы и дашборды

52

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

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

блок пользователянедоступен

блок пользователявыделен

блок пользователяскрыт

53

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

54

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

55

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

56

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

57

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

1. Вводная

2. Команда






59

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

60

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

61

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

62

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

63

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

1. Юзабилити-тестирование

2. Eye-tracking

3. Измерение физиологических параметров человека

4. Глубинные интервью

5. Опросы

6. Фокус-группы

7. Дневниковые исследования

64

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

1. Компьютеры для записи сессий юзабилити-тестирования

2. Eye-tracking

3. КГР (кожно-гальваническая реакция)

4. ЭЭГ (электроэнцефалография)

5. ЭКГ (электрокардиография)

6. Noldus Observer

65

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

66

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

67

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

1. Вводная

2. Команда






69

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

70

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

71

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

72

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

73

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

74

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

75

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

76

Наш манифест

1. Команда и ее развитие

2. Баланс скорости и качества работы

3. Интеграция в команды разработки и график продуктовых релизов

4. Интересные интерфейсные решения для наших продуктов

5. Систематизация знаний об интерфейсе и наработок по нему

6. Автоматизация производства

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

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

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

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

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

http://www.jvetrau.com/

http://twitter.com/jvetrau

http://twitter.com/jvetrau

http://www.mail.ru/

http://www.facebook.com/pages/MailRu

http://www.facebook.com/pages/MailRu