Upload
yury-vetrov
View
8.899
Download
4
Embed Size (px)
DESCRIPTION
Презентация Юрия Ветрова "Как создаются интерфейсы в Mail.Ru" с конференции Форум Технологий Mail.Ru 2011.
Citation preview
Юрий Ветров
Как создаются интерфейсыв Mail.Ru
процесс, команда, инструменты и другие детали
2
О чем этот рассказ?
— Как создается дизайн продуктов Mail.Ru – все детали процесса.
— Новая интерфейсная команда – зачем она создана и что именно делает.
— Инструментарий и технологический процесс – как мы автоматизируем производство.
— Прогнозируемый процесс развития дизайна – как интерфейсные гайдлайны и паттерны помогают сохранять единую стилистику.
1. Вводная
2. Команда
3. Процесс работы
4. Инструменты и технологический процесс
5. Паттерны и гайдлайны
6. Тестирование и исследования
7. Творческие планы
4
Вводная часть
5
Летом 2011 года в Mail.Ru была создана новая команда проектирования и дизайна интерфейсов. Был усилен старый состав, началась оптимизация процесса работы. Планы большие и амбициозные.
6
Я руковожу новой командой. До этого имел разносторонний опыт работы по специальности – был и частью компании-подрядчика, и продуктовой организации.
7
В первом случае много разных заказчиков. Нужно быстрое включение в новый проект, причем он может быть на любой стадии. Проще обучить клиента, чем каждый раз глобально менять процесс.
8
В продуктовой компании работу прогнозировать проще, возможно долгосрочное планирование. Небольшое количество постоянных менеджеров-заказчиков, стоит подстроиться под них для большей эффективности.
9
Зачем так много слов о процессе? Это гарантия повторяемого результата прогнозируемого качества. Он должен быть понятным и предсказуемым. Но не превращаться в бюрократию.
1. Вводная
2. Команда
3. Процесс работы
4. Инструменты и технологический процесс
5. Паттерны и гайдлайны
6. Тестирование и исследования
7. Творческие планы
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. Команда
3. Процесс работы
4. Инструменты и технологический процесс
5. Паттерны и гайдлайны
6. Тестирование и исследования
7. Творческие планы
22
Процесс работы
Мы используем классический подход к проектированию и дизайну интерфейсов. Полный цикл – от понимания целевой аудитории и проблемы до поиска и реализации решения.
23
Исследования Концепция Детальное проектирование Дизайн Поддержка
разработчиков
Проверка решений
24
Много общения с менеджерами проектов и продуктов, топ-менеджерами компании. Это самостоятельный процесс, который мы оптимизируем. Так решения попадают в жизнь.1
25
Задачи двух типов – развитие текущих версий продуктов и их новые релизы. Процесс тут похожий, но отличается в деталях. Причем эти работы могут идти параллельно.2
новаяфункция
новаяфункция
новаяфункция
26
Долгосрочное планирование. Весь пул задач по продуктам известен, хотя приоритеты между ними часто меняются. Форс-мажоры и внезапные срочные задачи – сравнительно редко.3
27
Значительную часть работы по дизайну перекладываем на проектировщика. В этом помогают паттерны, шаблоны и гайдлайны. Снимает угнетающую рутину с дизайнера и ускоряет процесс.4
28
Процесс гибкий – может корректироваться по ситуации на каждом из этапов. Где-то срезаем углы, где-то наоборот – копаем глубже. Важен результат, а не бюрократия.
1. Вводная
2. Команда
3. Процесс работы
4. Инструменты и технологический процесс
5. Паттерны и гайдлайны
6. Тестирование и исследования
7. Творческие планы
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. Команда
3. Процесс работы
4. Инструменты и технологический процесс
5. Паттерны и гайдлайны
6. Тестирование и исследования
7. Творческие планы
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. Команда
3. Процесс работы
4. Инструменты и технологический процесс
5. Паттерны и гайдлайны
6. Тестирование и исследования
7. Творческие планы
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. Команда
3. Процесс работы
4. Инструменты и технологический процесс
5. Паттерны и гайдлайны
6. Тестирование и исследования
7. Творческие планы
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] и я
уберу их из слайдов.