Source: The UX Reader: книга о работе UX-команды MailChimp

Введение

Команда MailChimp любит делиться результатами своей работы, что впоследствии дает удивительный эффект. Это помогает нам внимательнее относиться к тому, чем мы занимаемся: «Посмотрим, как же нам это удалось? И почему мы решили, что это – наилучший метод?».

Мы выделяем эффективные подходы к решению тех или иных задач: «Мы сэкономили кучу времени, решив это таким образом». Публикация таких подходов порождает интересное обсуждение: «Значит, вы это сделали именно так? Интересно, а почему?».

Это помогает нам не зазнаваться: «Да, вы правы. Мы могли бы реализовать это иначе». Скромность и открытость для новых идей – источник для нашего профессионального роста: «Хорошо, мы руководствовались данным методом, но решили его пересмотреть и провести эксперимент. В результате мы пришли к тому, что есть и более эффективные подходы».

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

Все заработанные на этой книге деньги мы направим RailsBridge, которые очень много сил тратят на обучение программированию групп людей, исторически составляющих меньшинство в общей массе разработчиков. Формат этой книги соответствует нашим представлениям о работе с пользовательским опытом. Мы начинаем с рассмотрения аспектов совместной и командной работы, далее следует наша UX-тройка: исследования, дизайн и разработка. В заключительных статях мы решили рассмотреть вопрос доработок и улучшений, которыми можно заниматься без конца и края, конечно.

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

Аарон Уолтер, директор по UX в MailChimp

Формирование UX-команды

«Пользовательский опыт» – довольно размытый по своей сути термин. Он может использоваться в качестве своего рода контейнера, включающего в себя исследования, дизайн, разработку и даже техническую поддержку. Исходя из этой неопределенности, встает вопрос о формировании эффективной команды.

В 2008 году UX-команда MailChimp состояла из одного человека – меня, и мне приходилось заниматься всем: дизайном интерфейсов, front-end разработкой, прототипированием, интервьюированием клиентов и юзабилити-тестами. Комбинирование данных дисциплин в своей работе позволило мне понять, какую UX-команду я хотел бы сформировать.

Эта команда должна уметь думать и воплощать в жизнь свои идеи. В крупных компаниях UX-команды зачастую сфокусированы на работе с каркасами (wireframe-прототипами) и процессами (workflows), при этом им не хватает компетенций для непосредственной работы с интерфейсами. Слабое место такого подхода заключается в потере части идей и смыслов при передаче результатов деятельности одного отдела другому. Команда специалистов, не обладающих междисциплинарным опытом, порождает несогласованность работ, что в итоге приводит к затягиванию итераций, ведет к увеличению энтропии и в конечном счете – к посредственному пользовательскому опыту.

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

Мы умышленно работаем в рамках небольшой команды из 12 человек: четверо занимаются дизайн-исследованиями, двое – дизайном интерфейсов, еще одна четверка – front-end разработкой, есть еще один человек, занимающийся версткой и оформлением почтовых рассылок, и я. Небольшая численность сотрудников облегчает общение внутри команды, не говоря о понимании того, что ты работаешь с умными и способными людьми.

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

Нанять человека легко, а уволить – сложно

Поиск подходящего кандидата на должность – занятие не из легких. Оно требует неимоверных временных затрат. Задачи такого рода зачастую кажутся невыполнимыми, но являются ключевыми в процессе формирования UX-команды (или любой другой команды). Заурядных специалистов найти не составляет труда, а вот уволить их гораздо сложнее.

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

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

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

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

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

В процессе подбора сотрудников можно дойди до крайности в своем стремлении найти лучших из лучших. К сожалению, такие ребята довольно часто испытывают трудности во взаимодействии с командой и могут без какого-либо злого умысла оказывать психологическое давление на коллег. Нанимая нового сотрудника, задайтесь вопросом: «Сможет ли этот человек сказать «мы» вместо «я»? Не «перетянет ли он одеяло» на себя? Хватит ли у этого человека воли делегировать продолжение работ по самым лучшим своим проектам кому-либо еще?» Если ответы на все эти вопросы положительные, то у вас в руках действительно хороший сотрудник.

Уважительное отношение

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

Это относится как к отдельным сотрудникам, так и к командам, а в итоге и к их компаниям. В чем заключается причина? Ответ прост: отсутствие уважения друг к другу.

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

Уважительное отношение позволяет легче обмениваться идеями и формирует атмосферу доверия. Можно достигать гораздо большего, начиная свою фразу с «Да, и можно было бы…», чем со слова «нет».

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

Автономия

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

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

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

Тем не менее в данном вопросе необходимо чувствовать меру: абсолютная автономия ведет к хаосу.

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

Многие довольно часто демонизируют встречи, но и в них есть польза, если это короткие регулярные обсуждения проделанной работы. Каждый из сотрудников, принадлежащий к той или иной автономной команде, должен быть в курсе того, чем занимаются его коллеги. Краткий обзор текущей деятельности позволяет сотрудникам помогать друг другу и быть в курсе происходящего. Даже простое общение за чашкой кофе помогает синхронизировать работу. У нас в MailChimp все именно так и происходит.

Параллельные циклы разработки и проведения исследований

Гибкие методологии разработки (Lean и Agile) являются своего рода религией технологических компаний, пытающихся опередить конкурентов за счет осуществления быстрых итераций в разработке продуктов. Такой подход обладает и слабыми сторонами, например, недостаточной исследовательской проработкой решений. Таким образом, ставка на скорость работы не всегда приводит к реализации тех решений, которые действительно можно было бы считать эффективными.

Команда MailChimp придерживается данных методологий, но делает это без фанатизма. “Быстрая реализация и корректировка ошибок” – девиз, кратко описывающий наш подход.

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

Дизайн-исследователи работают над длительным изучением ключевых аспектов работы наших сервисов, и эта работа требует интервьюирования большого числа наших клиентов, проведения опросов, этнографических исследований и т.д. Для всего этого требуется время. Цикл детального исследования гораздо дольше 5-недельного цикла разработки, и мы ведем их параллельно друг другу.
Теория теряет свой смысл без подтверждения на практике, и параллельная работа данных циклов не должна вести к полной автономии рабочих групп. Наши исследователи постоянно обмениваются результатами своих изысканий с дизайнерами и разработчиками, а не просто ждут месяцами для того, чтобы поделиться своими наработками. При этом исследователи не ожидают немедленного воплощения своих рекомендаций – они формируют контекст, в котором и идет работа над продуктом.

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

Культура эмпатии

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

Для работы по улучшению чего-либо необходима мотивация. Лучшая мотивация для UX-команды – это те сложности в работе с приложением, с которыми сталкиваются пользователи. Время от времени мы приглашаем наших клиентов в офис MailChimp и предлагаем им поучаствовать в юзабилити-тестировании наших продуктов. Ребята из отдела технической поддержки и нашей UX-команды всегда очень переживают, наблюдая за проведением такого тестирования. В особенности в те моменты, когда пользователи сталкиваются со сложностями в выполнении той или иной задачи. В итоге нам просто становится настолько неудобно перед нашими клиентами, что мы с удвоенной силой принимаемся за работу по улучшению наших продуктов.

Помимо этого мы проводим и дистанционные юзабилити-тестирования и опросы, отвечаем на вопросы в Twitter и разбираем тысячи отзывов наших клиентов, в том числе и отказавшихся от дальнейшего использования продуктов MailChimp. Данной работой занимается наша исследовательская группа, но дело не обходится и без участия front-end разработчиков. Они общаются с клиентами с глазу на глаз и изучают их подходы к использованию наших продуктов.

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

Делитесь историями

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

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

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

Продолжайте совершенствоваться

Я работаю в рамках UX-команды, занимаясь управлением и подбором сотрудников уже многие годы, но мне так и не удалось разобраться со всеми аспектами нашей деятельности. Кажется, что от нас постоянно ускользает универсальное решение, поиском которого заняты многие из моих коллег. Может быть такого решения и вовсе нет. Точное определение понятия «пользовательский опыт» так и не сформулировано, так почему же должен существовать универсальный подход к работе над созданием и управлением UX-командой?

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

Совместная работа

Пару месяцев назад я был в Стэнфорде, где мне посчастливилось провести лекцию для студентов Энрике Аллена. Они работали над прототипами, выстраивали сбор отзывов пользователей и итеративный рабочий процесс. Этот курс был полон духом стартапа.

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

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

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

Посещение Стэнфорда изменило то, как я представлял себе рабочие помещения. И относительно вовремя. В это время Рон Льюис, наш креативный директор, и Марк ДиКристина, директор по маркетингу, как раз проектировали для нас новую дизайн-студию в Атланте.

Проектирование студии MailChimp

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

Экспериментируйте с расположением рабочих мест

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

Для нашей студии мы подобрали большой открытый офис (open-space) на четвертом этаже здания. Мы не стали отделять рабочие группы друг от друга и решили объединить коллег с самой различной специализацией. Аналитиков мы посадили рядом с дизайн-исследователями, специалистов по front-end разработке – рядом с маркетологами, а дизайнеров – рядом со специалистами по контенту.

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

Проектируйте для движения

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

У нас есть и специальное место для дизайнеров, желающих продуктивно поработать, приезжая в Атланту в качестве гостей. У нас уже успели поработать Джеймс Виктор, Дэн Бенжамин, Брэд Фрост и многие другие эксперты в своей отрасли. Такие люди заглядывают к нам всего на пару часов, но их бодрость и энергетика нас здорово вдохновляют.

Создайте пространство для работы с идеями

Рону удалось побывать в офисе Iron Yard в Гринвилле, стены которого выполняли еще и функцию огромной доски. Нам понравилась эта идея, и мы воплотили её в жизнь в нашей студии. В результате мы заметили, что люди охотнее делятся своими идеями, обладая необходимым инструментарием для того, чтобы донести их другим. Так совместная работа стала еще приятнее и продуктивнее.

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

Оставьте место для конвергенции

У нас есть и общее место для обеда и общения. Сердце этого места – кофе-бар с машиной LaMarzocco Linea. Хороший кофе привлекает не только дизайнеров, но и ребят из других подразделений компании. Тут мы встречаем инженеров, бухгалтеров, коллег из технической поддержки, обменивающихся последними новостями.

Конвергенция объединяет сотрудников компании, о чем и написал Грегг Бернстейн, старший дизайн-исследователь, в своей статье в UX Mag. Наши дизайн-решения привели к более плотной совместной работе. Таким образом, относительно дорогие покупки вроде кофе-машины сами себя окупили.

Выделите пространство для спокойного размышления

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

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

Пространства для синтеза знаний

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

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


Свистать всех наверх!

Джун Ли

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

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

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

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

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

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

Все это – составляющие идентичности нашей компании, но общие собрания особенно заряжают энергией. В этот день нам удалось разделаться со всеми обращениями, и трек You’re The Best Around звучал по всему офису. Мало что может так хорошо сплачивать людей как совместная работа и достижение общей цели.

Обращение за помощью к коллегам

Фернандо Година

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

Я понимал все это с самого начала работы, но убедился в этих умозаключениях на практике. Наша UX-команда работала над тремя различными проектами, сроки сдачи которых стремительно надвигались. Исследователи вели сразу несколько параллельных опросов, требующих рассылку тысяч сообщений клиентам. Дизайнеры и разработчики верстали один из свежих выпусков нашей UX-рассылки, им помогали и исследователи. Мы работали во всю силу, но очевидно не могли справиться со всем самостоятельно. Оставался только один способ завершить всю работу в срок – обратиться за помощью к нашим коллегам.

Передайте эстафету

Работая над исследованием с участием клиентов, использующих наш сервис по скоростной доставке электронных писем Mandrill, вместе с Лариссой Вольфрам-Гвас мы искали способ внедрения merge-тегов в тело нашей анкеты. Они требовались для трансляции данных о клиентах MailChimp в формате сервиса для проведения анкетирования SurveyMonkey. Столкнувшись с трудностями в процессе разрешения данной задачи, мы обратились за помощью к коллегам из команды исследователей, которые в довольно сжатые сроки помогли нам настроить передачу метаданных.

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

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

Тем временем часть UX-команды работала над очередным выпуском нашей UX-рассылки, которую нужно было отредактировать и привести в должный вид. Эту задачу успешно закрыл наш исследователь и дизайнер, хоть в итоге они и упустили одну незначительную опечатку.
Понимая уровень экспертизы и специализацию наших коллег, мы можем рассчитывать на более плавное течение рабочих процессов, перехватывая задачи друг друга. Конечно, это здорово облегчает работу и делает её приятнее.

Не закрывайтесь от других

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

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

Каждый из UX-команды специализируется на определенном предмете, но и не закрывается от других. Такой подход принят во всей компании, он позволяет нам решать самые различные задачи, используя силу нашего коллектива. Если речь идет об улучшении MailChimp, мы не стесняемся обратиться за помощью.

Добросовестная работа

Грегг Бернстейн

Юрист, специалист по контенту, разработчик, дизайнер и исследователь заходят в зал… Хорошо, это не одна из тех самых не очень удачных шуток, а просто рассказ о том, как мы попытались сделать понятнее описание условий использования сервисов MailChimp.

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

Команда MailChimp трепетно относится ко всем материалам, доступным для просмотра нашими клиентами. В 2013 году Кейт Кифер Ли, наш специалист по работе с контентом, и Валери Уорнер Дэнин, наш юрист, решили, что пришла пора пересмотреть оформление условий использования сервисов MailChimp. Согласно этой инициативе, наша UX-команда, юридическая служба и отдел маркетинга принялись за разработку шаблонов для юридической документации всех наших бизнесов, включая TinyLetter и Mandrill.

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

Не усложняйте

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

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

Ставьте на разборчивость

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

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

Структурируйте контент

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

В итоге мы сегментировали разделы нашей документации, определенные с учетом того, к какой юридической информации наши клиенты обращаются наиболее часто, и использование каких сервисов (например, API) они [разделы] охватывают.

Мы разработали так называемую «юридическую посадочную страницу», на которой собраны все эти разделы в понятном для восприятия виде.

Обратитесь за помощью к коллегам

Упростив подход к изложению материала и сделав его разборчивее, мы определили разделы, которые все еще могли показаться нашим клиентам не очень внятными. Для них мы привели дополнительные комментарии напротив каждого из пунктов. Их цель – не просто саммари, а формирование контекста с соответствующими примерами. Подобный подход мы использовали и в другом проекте – Email Genome Project.

Разобравшись с рекомендациями по оформлению материалов, мы привлекли к работе нашего арт-директора Дэвида Сайзмора и font-end разработчика Стивена Слоана. Дэвид подготовил дизайн и иконки, а Стивен разобрался с вариантами оформления подсказок.

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


Радикализация данных

Грегг Бернстейн

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

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

Ваши клиенты умнее вас

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

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

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

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

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

The ReWired Group предлагает похожий подход, когда клиенты «нанимают» продукты и сервисы для решения тех или иных задач, а исследователи пытаются понять мотивы в принятии решений о выборе того или иного продукта или сервиса. Мы всегда придаем экспертный статус отзывам и предложениям наших клиентов, стараемся разобраться в каждой конкретной ситуации и проповедуем открытый подход в работе с данными.

Проверяйте гипотезы клиентов

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

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

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

Делитесь результатами ваших исследований

Ларисса Вольфрам-Гвас

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

Что происходит далее? Как мы транслируем результаты исследований в планы по разработке? Как использовать инсайты исследований на практике?

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

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

Постеры

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

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

Офисные часы

Утром по пятницам мы все вместе собираемся на «кофе с экспертом» – в рамках таких мероприятий спикеры делятся своим опытом организации творческой работы, журналистики, дизайн-находками и просто анекдотами. Иногда к ним присоединяется и наша команда исследователей, которая делится свежими результатами своей работы, принимая эстафету у предыдущих докладчиков. Обычно речь идет об общих трендах, охватывающих основную массу наших клиентов, а значит имеющих отношение ко всей компании.

Итогами таких посиделок мы делимся и с помощью Google Drive или Evernote, в котором обычно ведем основную часть работ, связанных с исследованиями, но предпочитаем рассказывать о результатах в ходе личного общения.

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

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

Корпоративная рассылка

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

Конечно, этого не всегда достаточно для формального представления данных, но достаточно для базового понимания. Помимо этого мы прикрепляем ссылки на дополнительные источники по теме рассылки.

Мини-фильмы

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

Отчеты на Google Drive

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

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

Евангелисты исследований

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

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

Исследовательский дух

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

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

Как нам удалось обработать 506 тысяч ответов респондентов

Фернандо Година, Ларисса Вольфрам-Гвас

Обратная связь – важнейший элемент в работе компании, обеспечивающий принятие обоснованных решений в процессе улучшения наших продуктов. В 2013 году мы решили провести эксперимент и разослали опросник с 46 вопросами. За неделю мы получили ответ от более чем 11 тысяч респондентов. Это целых 506 тысяч ответов, которые нужно обработать.

Фернандо: Первичная обработка

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

К изучению данных мы привлекли Джона Формана, возглавляющего команду исследователей. Джон продемонстрировал нам пару своих приемов в Excel, но это уже совсем другая история.

Итак, перед нами стояла задача обработки тысяч ответов респондентов в свободной форме, и мы решили посмотреть на эту задачу с точки зрения работы по сборке большого паззла – нам было необходимо сопоставить данные и выделить зависимости. Таким образом, мы решили классифицировать ответы, обладающие общими признаками и вместо того, чтобы получить по 1966 ответов на вопрос, мы получили по 14 так называемых «корзин», отражающих определенные типы ответов. Далее мы ранжировали эти группы, получив более конкретные ответы на поставленные вопросы, которыми уже можно было поделиться с коллегами.

Ларисса: Поиск смысла в хаосе

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

Определитесь с тем, что вы хотели бы узнать

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

Классифицируйте данные

Как было отмечено ранее, «открытые» вопросы – отличный инструмент для сбора мнений клиентов, но с ростом числа ответов на такие вопросы усложняется и процесс анализа.

Конечно, мне всегда хочется побыстрее узнать ответы наших клиентов, и я сразу начинаю пролистывать ответы для удовлетворения своего любопытства. Закончив с этим, я избавляюсь от тех ответов, которые не несут в себе какой-либо ценности – это могут быть либо прочерки, либо ответы тех людей, кто хотел побыстрее перейти к следующему вопросу. Такие ответы попадают в корзину «Без ответа».

Далее – я просматриваю ответы на предмет общих ключевых слов в зависимости от цели моего исследования. Это может быть и функционал MailChimp (шаблоны, профили пользователей, автоответчик), задача пользователей (импорт данных, сегментирование, синхронизация) или другое ПО (Excel, EventBrite, различные CRM). SurveyMonkey как раз позволяет производить поиск по ключевым словам. Таким образом, можно быстро распределить ответы по категориям.

Тестовый анализатор SurveyMonkey позволяет автоматически находить часто используемые в ответах респондентов слова или словосочетания. Этот функционал не дает идеальных результатов, но иногда помогает узнать что-то новое о ваших данных и достаточно быстро провести классификацию ответов. Далее остается только обработать ответы, не попавшие в выборку анализатора.

Уточните полученную классификацию

Завершив классификацию, я просматриваю ответы в каждой из «корзин». Иногда приходится уточнять, разбивать или объединять группы ответов. Например, ответ может находиться в группе «интерфейс», но по своей сути относиться к группе «контент».

Определитесь с кандидатурами для проведения интервью

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

Обратите внимание на исключительные случаи

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

Научитесь двигаться вперед

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

Не торопитесь с выводами

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

Открытое интервью

Стеф Троит

Есть множество способов проведения интервью в рамках дизайн-исследования: по телефону, дистанционно с помощью видеосвязи, очно в различной обстановке (изолированном кабинете, шумном офисе или кафе) и т.д. И это если говорить только о видах помещений.

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

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

До интервью

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

Обратите внимание на цель исследования

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

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

Установите взаимодействие с интервьюируемым

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

В процессе интервью

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

Атмосфера

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

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

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

Строгое соблюдение формального характера интервью всегда вызывало у меня сомнения, ибо оно фактически сводится к рассмотрению интервьюируемого человека в качестве «черного ящика», с которым разговаривают в формате «вопрос-ответ». Это больше походит на допрос, а мы склонны к использованию подхода, ориентированного на открытость обсуждения с необходимыми уточнениями по ходу беседы.

История

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

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

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

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

После интервью

Конечно, достаточно сложно сразу приступить к обработке результатов интервью, которое проводилось без соблюдения жесткой структуры, но есть некоторые приемы, призванные помочь вам в этом. По мере завершения интервью стоит сразу записать все ключевые для вас моменты, которые вам удалось запомнить. При проведение интервью в командном режиме мы выделяем некоторое время как раз для составления подобных саммари. Наша память – это совершенный инструмент, выделяющий самое важное, почему бы не воспользоваться этим?

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

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


Скетчинг: зачем и как

Федерико Холгадо

Скетчи – один из наиболее эффективных инструментов, с помощью которого дизайнеры обмениваются идеями. Если я попадусь вам на глаза в офисе MailChimp, вы обязательно заметите скетчбук или iPad в моих руках. Я не сомневался в значимости скетчинга и до работы в MailChimp, но за последние несколько лет мои убеждения укрепились в еще большей степени. Конечно, за это время я научился паре приемов в Photoshop и с CSS, которые помогают мне работать с UX/UI-идеями. Об этом я и расскажу.

Больше скетчей – меньше размахивания руками

Во время учебы в Технологическом Институте Джорджии мы уделяли значительное внимание скетчингу. Нам просто вбили в голову правило, которое требует описания какого-либо функционала только с помощью визуализации. Если тебе требуется прибегать к словесному описанию, то твою модель уже нельзя назвать удачной. Все работает аналогичным образом и в случае описания интерфейса – можно быстро нарисовать скетч и продемонстрировать в точности то, что вы придумали. Чем быстрее ваши коллеги поймут суть вашей идеи, тем быстрее вы сможете её обсудить и внести необходимые изменения.

У скетчей должен быть фокус

Скетчи (как и любой другой продукт вашей работы) требуют доработок для улучшения тех или иных аспектов UI-идей. На ранних стадиях работы над проектом вы будете готовить десятки и сотни скетчей для того, чтобы определиться с направлением дальнейшей работы. Как только наступает ясность, вы переходите к проработке и детализированию ваших скетчей.

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

Обмен идеями – залог успеха

В MailChimp я работаю с двумя UI-дизайнерами: Тайриком Кристианом и Калебом Эндрюсом. Вместе нам удалось выработать относительно быстрый процесс подготовки подборок скетчей в Photoshop.

Мы начинаем с обсуждения идей, делая зарисовки по ходу дела. На проработку одной идеи уходит от 5 до 10 скетчей, которые я фотографирую и загружаю в Evernote. Таким образом, нам удается достаточно успешно обмениваться информацией о наших наработках. Когда Тайрик переходит к проработке деталей в Photoshop, у него уже есть схема работы, дополненная заметками и примерами того, что мы хотели бы сделать.

Определитесь со своим инструментарием

Я работаю в большом Moleskin (клетка). Его формат и клетка способствуют аккуратной работе, соблюдению пропорций и организованному хранению скетчей. Моя ручка: Pilot Razor Point. Она относительно слабо подвержена высыханию, позволяет работать достаточно тонко и при этом дает цельные и прорисованные штрихи.

Конечно, бумага и ручка в некоторой степени ограничивают ваше творчество, и наш процесс с загрузкой скетчей в Evernote может показаться утомительным и неэффективным. Для этих случаев есть iPad.

Я пользуюсь приложением Paper на своем iPad (Retina), iPad Mini мне не совсем подходит в силу более скромного экранного пространства. В качестве стилуса я использую Adonit Jot Pro, мне он кажется наиболее точным в работе на iPad. Ну а синхронизация Paper и Evernote – дело пары секунд.

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

Есть и минусы: работа в Paper всегда чуть медленнее чем на бумаге, нужно привыкать к стилусу и избегать случайного вызова меню телефона. А возможность отмены последнего действия всегда ведет к тому, что я трачу дополнительное время и внимание на то, чтобы все сделать как мне хотелось бы.

Будущее скетчинга

Я начал работу в Paper всего пару недель назад, но я уже в полном восторге от этого инструмента. Конечно, я иногда делаю зарисовки в своем молескине, но красота скетчей в Paper и простая синхронизация с Evernote делают свое дело, перетягивая меня на сторону цифрового инструментария.

Эволюция библиотеки паттернов

Джейсон Бирд

Иногда кажется, что жизнь в Сети измеряется в собачьих годах, скорость изменения техник и технологий настолько велика, что дизайн, выполненный пару лет назад, выглядит десятилетним. Вот так выглядела панель управления MailChimp, когда я пришел в компанию (это был 2010 год):

В то время наши стили для каждого из компонентов приложения были написаны с нуля. Мы использовали обычные классы для кнопок и сетки, но рыжеватые тона, градиенты и стили шрифтов были «запечены» в CSS. Короче говоря, все это и близко не походило на то, что Брэд Фрост назвал бы атомарным дизайном. Мы понимали, что нужно многое менять, и в 2010-м решили сделать редизайн.

Наша работа началась за несколько месяцев до того, как мы увидели первый скриншот проекта, над которым колдовала наша дизайн-команда. Нашей основной задачей на подготовительном этапе был рефакторинг нашего CSS, что мы и сделали, объединив элементы интерфейса в паттерны для многоразового использования. Критерием нашей работы был размер CSS, и за 6 месяцев до завершения работ по редизайну мы срезали около 120kb.

Вот так выглядела панель управления MailChimp после редизайна (в 2011-м):

Разобравшись с паттернами, мы составили и соответствующую документацию для тех, кто работал над front-end разработкой.

В 2012 году мы решили продолжить работу по атомизации нашего приложения. Наши задачи состояли из работ по улучшению пользовательского опыта. Вот так выглядел результат, который мы получили в 2013-м:

К моменту запуска нового MailChimp у нас уже работала публичная (открытая) библиотека паттернов. Зачем публиковать что-то подобное? Мы любим делиться своими сложностями и способами их решения, которые могут вдохновить других. Конечно, мы не предлагаем идеальные решения, но пока они работают достаточно неплохо.


Разбираемся с библиотекой паттернов

Федерико Холгадо

Книга «Refabricating Architecture», написанная Стефеном Кираном и Джеймсом Тимберлейком, в значительной степени повлияла на мое понимание дизайна. Авторы этой книги сравнивают архитектуру с автомобильной, аэрокосмической и кораблестроительной индустрией, обсуждая практически полную неизменность строительных процессов (с фундаментальной точки зрения) в рамках последних 80-ти лет на контрасте со стремительными переменами в других отраслях производства и дизайна.

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

Киран и Тимберлейк сравнивают этот процесс с аналогами из других сфер деятельности. Например, в автомобилестроении совмещаются сразу несколько процессов, что позволяет оптимизировать производство, сократить затраты и повысить качество производимой техники. Компоненты автомобиля не производят в рамках одного завода, а заказывают у сторонних подрядчиков. Модульный подход отлично зарекомендовал себя и в кораблестроении, и в аэрокосмической сфере.

Когда мы начали работать над редизайном нашего приложения в 2013-м, мы решили применить аналогичную разбивку процессов и модулей. В результате мы должны были получить систему, состоящую из взаимозаменяемых частей или «атомов» – наименьших компонентов. Более крупные компоненты должны были состоять из таких «атомов» и составлять ядро приложения. При этом была необходима последовательность в структуре и дизайне страниц и подсистем приложения.

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

Практика

Занявшись редизайном, мы начали с наиболее популярного раздела приложения – панели управления. В старой версии мы отображали данные по простой сетке, но поработав со скетчами и прототипами, решили внести изменения. Мы попробовали ввести два режима: с красивыми карточками и более информативной сеткой. «Визуальный» подход не сработал в силу того, что большинство кампаний наших пользователей выглядят достаточно похоже. При этом мы знали, что нашим клиентам очень важно иметь возможность сортировки кампаний по их атрибутам, что исключило и «табулярный» подход.

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

Мы применили реечную систему в целом ряде разделов приложения, которым ранее не уделялось достаточно внимания с точки зрения дизайна, но с именно паттерны позволили встроить эти разделы в общую дизайн-концепцию и обеспечить работу даже на очень скромном экранном пространстве. Еще один плюс такого подхода заключается в том, что мы смогли распределить человеческие ресурсы команды и организовать параллельную работу как над реечной системой, так и над общей структурой страниц, навигацией и т.д. Часть команды работала на базой, а другая часть занималась оформлением, при этом все были в курсе происходящего.

Что еще было сделано

Благодаря использованию такого подхода, нам удалось обеспечить модульность не только реечной системы, но и практически всех частей приложения: форм, кнопок, таблиц, элементы редактора и т.д. На первом этапе работ было достаточно сложно размышлять в такой концепции, когда ты уже привык готовить отдельные UI-элементы для каждой из новых идей. Таким образом, мы пришли к относительно хаотичному CSS, разнородному оформлению и различиям в программной реализации элементов.

Инвестиции в виде затраченного времени окупились, а мы многому научились, заимствуя опыт из других индустрий: модульный подход, организация процессов разработки и т.д. В процессе работы наша команда постоянно обменивается идеями – front-end разработчики всегда поддерживают контакт с инженерами. Наши дизайнеры помогли нам разобраться с принципами вертикального и горизонтального ритма, позволившего упростить верстку страниц. Теперь и back-end разработчики могут готовить универсальные системы, которые можно использовать повторно. Конечно, это позволяет сократить временные затраты на разработку, обеспечивая понимание стандартных состояний интерфейса.

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

SVG, садись, 5!

Калеб Эндрюс, Альваро Санчез

Мы достаточно долго и внимательно исследовали процесс использования нашего приложения клиентами. Не только для того, чтобы сделать наш продукт лучше, но и для общего понимания ощущений и мыслей клиентов, возникающих в процессе работы с ним. Исходя из такого опыта, мы понимаем, что отправка новостной рассылки – это достаточно волнительный процесс в силу сжатых сроков и необходимости исключить возможные ошибки. Чего только не делают люди перед отправкой писем своим подписчикам: кусают губы, потирают ладони и иногда чуть ли не потом обливаются. Мы и сами через все это проходим, работая над собственной рассылкой UX Newsletter.

Понимая эмоциональный контекст данного процесса, мы хотели поддержать наших клиентов, продемонстрировав им свое понимание происходящего. Мы решили, что в этом нам может помочь Фредди [талисман MailChimp], который по задумке «дает пять» всем, кто успешно справился с отправкой. Ранее мы отображали статичную ладонь Фредди и решили слегка оживить этот момент с помощью SVG-анимации.

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

Калеб: «Более лучшая» SVG

Начнем с подготовки файлов. Для начала необходимо разобраться с иерархией слоев.

Она является ключевым элементом в работе над SVG-иллюстрациями в Illustrator. Мы решили делить анимационные фреймы на группы так, чтобы на каждой иллюстрации не было ничего лишнего: только самое необходимое. Важно быть аккуратным с выбором названий для групп, чтобы понимать, для чего предназначены элементы, которые в них содержатся, и правильно прописывать путь к ним в текстовом редакторе (что придется сделать в процессе написания скрипта).

Удаление лишних опорных точек

Чем меньше точек, контуров и их групп содержит каждый слой, тем «легче» будет исполняться SVG-код. А если установить набор скриптов для Illustrator от Хироюки Сато, лишние опорные точки можно будет удалить, просто открыв вкладку Файл > Скрипты > Удалить опорные точки.

Маски хороши, но только в меру

На рисунке выше жест «дай пять» от Фредди был создан из 3 групп элементов, объединенных в один SVG-файл без использования масок. Эти группы представляют собой анимационные фреймы, которые можно скрыть или, наоборот, сделать видимыми тогда, когда это становится необходимо. Впоследствии мы решили создать маски, чтобы сделать SVG-анимацию более контролируемой и «чистой».

Отключите возможность редактирования в Illustrator

Теперь вам нужно экспортировать ваши рисунки из Illustrator как SVG-файл. Этот момент легко упустить: сохраняя файл в формате SVG, не забудьте отключить функцию «Сохранять возможность редактирования в программе Illustrator» во вкладке «Опции». Это позволит вам сделать итоговый файл гораздо легче – в браузере эти возможности вам не понадобятся. Такую процедуру надо производить только с финальной версией иллюстрации – как несложно догадаться, после этого файл будет уже не так-то просто снова открыть и отредактировать в Illustrator.

Фигуры против контуров

Вы можете открыть свой SVG-файл в текстовом редакторе и оценить созданный код. В примере мой SVG-файл содержит два элемента – прямоугольник и контур. В теории это два одинаковых прямоугольника, но код, генерирующий их, принципиально отличается. Если вам непривычно работать с контурами, их можно легко преобразовать с помощью команды «Объект» > «Разобрать».

Вывод

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

Альваро: что скрывает жест «дай пять»

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

Подготовка

Когда я только взялся за проект с анимацией Фредди, мне дали ее прототип, сделанный в After Effects, а затем экспортированный в GIF. Калеб помог мне воссоздать в Illustrator объекты из прототипа: лапку Фредди, мех и т.д. После того, как я расположил элементы каждый на нужном слое, я экспортировал их как SVG-файлы. В итоге у нас получилось 3 SVG-файла по одному на каждое изображение лапки Фредди. Затем я задумался над тем, как анимировать созданные образы.

Немного покопавшись в библиотеках JavaScript, я решил работать с Snap.svg. Snap поддерживает такие функции как создание масок, обрезка и выравнивание, создание узоров, градиентов, группировка элементов. Он также предоставляет простой и интуитивно понятный API для анимации.

Имплементация функции анимирования – «mina» (это «anim» [от слова «animation»] наоборот) использует запрос AnimationFrame, благодаря чему анимация воспроизводится в браузере без сбоев, как объяснил Пол Айриш (Paul Irish).

(Между прочим, если вы используете библиотеку, которая не поддерживает запрос AnimationFrame для анимации элементов, учитывайте возможность возникновения такого явления как «layout thrashing». Оно возникает, когда JavaScript снова и снова добавляет и удаляет элементы из DOM, тем самым замедляя работу браузера).

Анимация движения

Я создал анимацию жеста «дай пять» из 3 отдельных изображений лапки Фредди, каждое из которых отражало разную ее (лапки) позицию. Чтобы финальное изображение выглядело как единый объект, принимающий разные положения, мне нужно было создать «сглаженные» переходы из одного положения в другое. Для этого я применил технику пошаговой анимации и связал три основные изображения дополнительными «переходами». (Почему я не анимировал просто одно-единственное изображение? Учет всех точек на покрытой шерстью лапке Фредди, подсчет и настройка угла «скривления» лапки в каждом положении оказались слишком сложными в условиях сжатых сроков проекта).

Чтобы загрузить все три изображения, я использовал функцию Snap.load. Поначалу я вызывал эту функцию для каждого из изображений в отдельности. В результате итоговая картинка неплохо анимировалась в Firefox, но в Google Chrome с анимацией возникли проблемы. В итоге я понял, что Firefox «распознавал» все переходы и изначально заданные значения вне зависимости от того, сколько раз я вызывал функцию Snap.load. Chrome, однако, не сохранял информацию о переходах и заданных значениях, потому что каждый новый вызов Snap.load создавал новый SVG-фрагмент с собственной областью просмотра и системой координат. Я решил этот вопрос, сохранив все исходные материалы (3 вариации положения лапки Фредди) в одном SVG, поэтому мне понадобилось вызвать функцию только один раз вместо трех.

Следующим шагом мне нужно было определить порядок появления элементов в финальной версии анимации.

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

// Order of grouping is important!!!
// s = SVG canvas created by Snap
var group = s.group(
    circleBG,
    hand1,
    hand2,
    hand3
);

Группировка также задает порядок расположения элементов в стеке: элемент circleBG будет находиться в самом низу, а 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" });

Чтобы применить маску к элементам группы, я добавил к ней (группе) атрибут маски:

group.attr( {mask: circleMask} );

Как только мы создали и применили маску, я задал позицию каждого элемента и сделал нужные из них видимыми на итоговом изображении. Для нашего жеста «дай пять» я загрузил 3 элемента, которые я анимировал, один за другим и с разными интервалами.

Я задал позицию лапки в каждом из ее положений с помощью строки трансформации:

// Initialize position.
arm1.transform(
    "s0.6r-30t-100, 280"
);

Каждая буква – это команда: «s» – для масштабирования [«scale»], «r» – для поворота [«rotate»], «t» – для команды translate.

Используя эту нотацию, я сделал элемент arm1 на 40% меньше, я повернул его на -30 градусов и расположил его вне границ маски так, чтобы он не был видимым.

Я применил похожие команды для инициализации элементов arm2 и arm3, но скрыл их, выставив значение показателя «непрозрачность» на 0.

// Set opacity to 0
arm2.attr( {opacity: 0} );

Объединение элементов

Завершив эти операции, я начал анимировать изображения и создавать переходы между ними. Тут начинается самое интересное.

В Snap.svg есть функция Animate. Она получает следующие атрибуты:

Element.animate(
    attrs,
    duration,
    [easing],
    [callback]
);

Вот пример первой анимации для жеста «дай пять»:

    arm1.animate(
    {transform:'t-50,60'},
    400,
    mina.backout,
    function(){
        // callback code here
    }
);

Используя атрибуты трансформации и новые значения в качестве первого из параметров функции, я запрограммировал движение элемента arm1 от позиции -100px до -50px по оси Х и от 280px до 60px по оси Y.

Второй атрибут (400) – общая длительность анимации в миллисекундах.

Третий атрибут (mina.blackout) – функция тайминга, подобная mina.linear, mina.easein, mina.easeout и т.д. Функция mina.blackout создает эффект «взмаха», делая движение более естественным.

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

Например, при переходе между элементами arm1 и arm2 я скрываю arm1, используя функцию обратного вызова первоначальной трансформации. Как только процесс завершается, элемент arm1 перестает быть видимым (display:none), и начинается процесс анимирования элемента arm2.

Это все происходит очень быстро – «затухание» первого элемента длится 30 миллисекунд, а появление второго – 10 миллисекунд.

Вот часть кода, описывающая указанные callback-функции:

arm1.animate(
    {transform: 't-50,60'},
    400,
    mina.backout,
    function(){
        //400ms
        arm1.animate(
            {opacity: 0},
            30,
            mina.linear,
            function(){
                // hide arm1
                arm1.attr(
                    {display: "none"}
                );
                // Chain/Start
                // animation for arm2
                _highFive.animate02();
                // fadein 10ms
    });
}, 100);

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


Создание системы адаптивной рассылки

Фабио Карнейро

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

Такой адаптивный шаблон не создавался специально под MailChimp, поэтому мне пришлось работать над ним с учетом самых разных ситуаций, в которых email-дизайнеры могли его использовать. В итоге я сформулировал два тезиса: 1) письма должны создаваться так, чтобы их можно было адаптировать под различные задачи и цели и 2) шаблон должен быть доступным на как можно большем количестве почтовых клиентов.

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

Требование к возможности подстраивать шаблон под разные задачи было более сложным испытанием. Проектирование и разработка шаблона рассылки для конкретной задачи – вещь довольно простая: можно не ограничивать себя в вопросах дизайна и использовать специализированный HTML-код и CSS для того, чтобы воплотить задуманное в жизнь. Это все потому, что вам известен контекст: вы в курсе, для чего создается письмо, какого рода контент в нем будет представлен, и – в идеале – какими почтовыми клиентами это письмо будет открыто. Но когда вам нужно создать шаблон для того, чтобы с ним могли работать широкие группы людей, цели которых мы далеко не всегда можем заранее описать, такого контекста просто не существует.

Чтобы преодолеть это отсутствие контекста, я решил следовать процессу, подобному тому, который я использовал, чтобы создать шаблоны писем в MailChimp:

  1. Очертите наиболее общий круг вариантов использования рассылки.
  2. Для этих вариантов использования создайте дизайн-шаблоны.
  3. Разработайте систему независимых объектов в HTML.
  4. Дополните полученный код возможностью поддержки разных почтовых клиентов.
  5. В коде указывайте комментарии для лучшего его понимания, используйте понятную разметку.

И вот как я это сделал:

Очертите общий круг вариантов использования

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

Практически все электронные письма можно отнести к одной из 4 широких категорий:

  • «Прочти меня» – это могут быть, например, новостные рассылки, смысл которых состоит в доведении до адресата информации на основе текста или изображений;
  • «Купи меня» – это письма из сферы e-commerce, нацеленные на то, чтобы читатель потратил некоторую сумму;
  • «Присоединись ко мне» – информация о мероприятиях или приглашения, освещающие некоторую активность и содержащие призыв к действию для участия в ней;
  • «Пойми меня» – это письма, отражающие некоторые транзакции, например, чеки или информацию о заказе, и содержащие важные детали и данные и, как правило, ничего больше.

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

Создайте дизайн-шаблоны

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

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

Разработайте систему объектов в HTML

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

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

Чтобы соответствовать всем этим требованиям, я написал HTML-код так, чтобы все контент-блоки были одинаково структурированы, а код таким образом можно было легко изучить и понять. Каждый из дизайн-шаблонов для различных видов контента был размещен в отдельной строке таблицы – благодаря этому была достигнута модульная структура итоговой модели. Отдельные элементы стало возможным дублировать или перемещать, просто копируя или перемещая соответствующую строку.

Кроме того, весь проект был построен на минималистичном CSS: всего 4 ruleset’а в стандартном CSS и еще 4 в media query. Помимо этого была использована базовая стилизация самого контента, которая повлияла только на оформление текста и цвет фона. Таким образом, дизайнеры получили возможность написания своего CSS без необходимости ломать голову над влиянием на функциональную составляющую рассылки.

Дополните полученный код

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

Outlook 2007/2010 и мобильное приложение Gmail для Android – это просто кошмар. С Outlook возникло множество проблем из-за его графического движка на базе Microsoft Word, а приложение Gmail, несмотря на то, что оно – мобильное, не поддерживает media queries. Написание версии письма для Outlook требовало создания очень негибкого, тщательно выверенного кода, а для почтового клиента Gmail нужен был очень «рыхлый» код: неадаптивный, но относительно гибкий.

Обычно мы считаем, что лучше перестраховаться, стараемся сделать нашу рассылку более надежной и учитываем возможность поддержки Outlook – в конце концов, Microsoft железной хваткой держит рынок почтовых приложений для ПК. Но поскольку наша адаптивная модель была задумана для email-дизайнеров, немного разбирающихся в технологиях, я решил встать на противоположную сторону и решил заняться максимальной поддержкой мобильных устройств. Это означало создание множества контент-блоков с использованием выравнивания таблиц. Теперь с приложением Gmail на Android все в порядке.

Вы можете подумать: «А почему только Gmail для Android? Есть ведь и приложение для iOS!» Оно, конечно, есть, но работает оно еще хуже – и не поддерживает вообще ничего. Письма отображаются нормально, но на сегодняшний день о поддержке мобильного приложения можно забыть.

Тем не менее, использование выравнивания таблиц для Gmail – отличное решение для обеспечения гибкости, но оно недостаточно надежно и ведет к сбоям в расположении элементов в (несложно догадаться) Outlook 2007/2010. Проблемы упирались в один исключительно коварный баг в Outlook, который автоматически вставляет разрыв страницы в любой документ длиннее 22 дюймов (или 1700px). Когда это происходит, выровненные таблицы, обладающие при этом свойством float, начинают расползаться. К счастью, эта проблема, кажется, была решена в Outlook 2013.

Одно из решений – использовать условные CSS и создать отдельный стиль, чтобы преодолеть проблемы с Outlook. В данном случае я решил не усложнять и просто повторил все то, что было сделано ранее с помощью media query для мобильных клиентов. Условные CSS – вещь необязательная, но это неплохой вариант решения проблемы.

После того, как я разобрался с поддержкой Outlook 2007/2010 и Gmail для Android, модель стала надежно работать с большинством почтовых клиентов и при этом обладала достаточным уровнем гибкости.

Обучение с помощью комментариев

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

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

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

Мы надеемся, что эта модель в сочетании с нашей библиотекой email-шаблонов сможет развеять ауру таинственности и заблуждений, окружающую дизайн писем в HTML. Мы, конечно, еще не закончили нашу работу: и библиотека референсов, и модели писем – проекты, которые я планирую развивать и улучшать на основе полученного фидбека.

Уплотнение текста и относительные размеры шрифтов

Мардав Вала

Редизайн MailChimp в 2013 году дал нам возможность тщательно подобрать типографику приложения. Модульной системой верстки («версткой с сеткой») никого сейчас не удивишь, но достичь вертикального ритма в сети (это еще один способ сказать «выровнять контент по модульной сетке») все еще не так-то просто, особенно когда типы отображаемого контента достаточно сильно варьируются. Но после решения проблемы изначального несоответствия дизайна и кода, которая возникает в основном из-за различий в том, как мы воспринимаем (или не воспринимаем) межстрочные интервалы и интерлиньяж в печатных изданиях и веб-медиа, наши команды по дизайну и фронт-энд-разработке начали говорить на одном языке.

Уплотнение текста

Как отметил Ричард Раттер (Richard Rutter), вертикальный ритм любой веб-страницы может быть достигнут за счет аккуратной работы с межстрочными интервалами, границами между объектами и расстоянием между содержимым элемента и его границей. Суть в том, чтобы найти подходящий межстрочный интервал, который задает основу для вычисления размеров полей и отступов.

Хотя приложение MailChimp содержит большой объем контента, крайне небольшая его часть содержит большое количество абзацев текста – почти вся информация представлена в виду списков, форм, таблиц, графиков или блоков данных. Поэтому вместо того, чтобы начинать с больших межстрочных интервалов, которые повлекут за собой большие размеры полей и отступов, мы начали с минимально возможного значения межстрочного интервала – 6px для каждого элемента приложения. Наша модульная сетка основана на этом значении в 6px.

Почему 6px? Мы экспериментировали с большим количеством базовых значений, но поняли, что 6px путем умножения очень элегантно превращаются в 12px, 18px, 242px и так далее, давая нам отличный диапазон различных значений размеров шрифтов и отступов. Это значение также оказалось отлично применимо к небольшим элементам, таким как кнопки и поля форм. Это обеспечило нам гибкость, необходимую для создания практически любого интерфейса.

В MailChimp изменения происходят постоянно – мы выпускаем новые функции и обновления нашего UI каждые 4 недели – поэтому в наших поисках вертикального ритма нам необходимо было обеспечить системе достаточный уровень гибкости. Ранее в процессе проектирования мы решили применять отступы только внизу элементов, чтобы облегчить процесс создания вертикального ритма. Таким образом, новые модули можно было бы размещать, не нарушая визуальную иерархию на странице. Использование «однонаправленных» отступов помогло нам достичь этой цели.

Простая математика

Поскольку наш интерфейс спроектирован на шестипиксельной модульной сетке, все размеры межстрочных интервалов, отступов и полей должны были быть кратны 6, чтобы задать вертикальный ритм. Размер шрифтов при этом, однако, можно устанавливать любой – не опасаясь нарушить этот вертикальный ритм. Наш основной шрифт имеет размер 15px – такой шрифт, как нам кажется, оказывается читабелен во всех ситуациях и при этом не перегружает интерфейс.

Согласно лучшим практикам, межстрочный интервал для улучшения читабельности должен в полтора раза превышать высоту шрифта. Если размер нашего шрифта составляет 15px, то межстрочный интервал в таком случае должен равняться 22,5px. Но поскольку шаг нашей модульной сетки был величиной в 6px, мы «растянули» межстрочный интервал до 24px, создавая прямую зависимость между межстрочными интервалами, отступами и полями для всех модулей. Разобравшись с вычислениями, мы начали применять эти пропорции к элементам нашего приложения.

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

h1 {
    font-size: 40px;
    line-height: 48px;
}

.small-meta {
    font-size: 13px;
    line-height: 18px;
}

Исключения из правил

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

Элементы, имеющие границы, также могут выйти за рамки модульной сетки, так как их размеры добавляются к основным вычислениям, а не встраиваются в систему. Но тут выход простой: вычисляйте высоту элементов с учетом их границ (этот подход может повлечь уменьшение полей над или под элементом на величину границ).

Конечно, пуристы могут возразить, что такой подход приведет к визуальному дисбалансу если высота границ элемента будет больше 1px – и они будут совершенно правы. Усилия по выравниванию горизонтальных линий и элементов, имеющих границы, по модульной сетке не всегда оправдывают себя, поскольку горизонтальные линии и границы не могут повлиять на вертикальный ритм при правильном подходе к отступам, межстрочным интервалам и полям.

Вот пример того, как мы сократили поля элементов списка на высоту границы в 1px:

@base-unit: 6px;
.dotted-list {
    margin-bottom: (@base-unit * 2);
    li {
        padding-top: (@base-unit * 2)
        padding-right: 0;
        // 1px less padding bottom
        padding-bottom: ((@base-unit * 2) - 1);
        padding-left: 0;
        border-bottom: 1px dotted #c0ffee;
    }
}

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

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

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

Мы обнаружили, что «тонкая настройка» вертикальных промежутков на уровне модулей – проектирование «вне контента» как рекомендует Марк Боултон (Marc Boulton) – процесс гораздо более осмысленный, нежели внесение изменений на глобальном, «постраничном» уровне. Если отдельные модули подогнаны друг к другу по модульной сетке, неважно, где именно они расположены: вертикальный ритм и визуальная иерархия будут автоматически соблюдаться.

Относительные размеры шрифтов

При использовании относительных размеров шрифтов, измеряемых в em (относительная единица длины, равная размеру текущего шрифта), для создания гибкого, масштабируемого проекта, …может оказаться сложнее, чем при указании абсолютных размеров шрифтов в пикселях.

Перевод значений из пикселей в относительные единицы (em) раньше был довольно утомительным занятием. К счастью, мы можем упростить процесс, используя объединенные возможности препроцессоров CSS и повсеместно используемое правило Итана Маркотта (Ethan Marcotte): target ÷ context = result.

Ключ к сохранению порядка среди всей этой путаницы с относительными размерами шрифтов состоит в концентрации на контексте. Для вложенных элементов с относительным размером шрифта контекстом является размер шрифта родительских элементов, выраженный в пикселях, для родительских элементов контекст – размер шрифта основного текста по умолчанию (16px, если говорить только об основном тексте).

Вот пример HTML-кода на основе этого примера от Treehouse:

<h1>Title: <span>Tagline</span></h1>

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

// default body font-size
@baseFontSize: 16;
@h1Size: 24;
@h1SpanSize: 18;

h1 {
    #pxtoem > .font-size(@h1Size, @baseFontSize);
    // 24 ÷ 16 = 1.5em
    > span {
        #pxtoem > .font-size(@h1SpanSize, @h1Size);
        // 18 ÷ 24 = .75em
    }
}

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


Итерации и баланс между количеством и качеством функций

Джейсон Бирд

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

Когда пользователи натыкаются на баг или когда некоторые функции приложения их смущают и отнимают у них время, их доверие к вашему продукту снижается. Кроме того, в результате увеличивается нагрузка на службу поддержки. Можете представить себе дыры в ведре: большие снижают доверие быстро, а много маленьких – медленно и постепенно. Так или иначе, когда доверие подорвано, его уже не вернуть.

Даже несмотря на то, что мы постоянно вкладываем все свои силы в наше приложение, MailChimp не застрахован от багов. И я готов признать, что в нашем «ведре» были как большие, так и мелкие «дыры».

Ищите «дыры», защитите свое «ведро»

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

Мы просматриваем социальные сети, такие как Twitter и Facebook, комментарии к постам в блоге, и наша команда поддержки отмечает тэгами все сообщения и почту, чтобы помочь нам обнаружить распространенные проблемы. И как написал Аарон Уолтер, наш UX-директор, мы узнали о причинах наиболее резкого снижения доверия, когда проводили опрос ушедших от нас пользователей.

Расставляйте приоритеты и исправляйте ошибки

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

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

Превращайте свои слабости в сильные стороны

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

Выделите время на улучшение

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

Мыслите локально… и глобально

Когда мы занимаемся поиском багов и улучшением, мы просто можем чего-то не заметить и не увидеть всей картины: того, как наши изменения влияют на опыт пользования MailChimp вообще. Работа над новыми масштабными проектами позволяет нам видеть картину в целом, но иногда мы упускаем мелкие детали, не можем предугадать, как люди с ними справятся, или открываем для себя то, что не замечали раньше. Самое главное – то, что мы продолжаем обращать внимание на все это, поэтому наше «ведро» становится больше и лучше – в нем остается все меньше «дыр».

Как мы сделали MailChimp более доступным

Мардав Вала

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

«Email-маркетинг чрезвычайно важен как для моего бизнеса, так и для клиентов, с которыми я взаимодействую каждый день, – рассказал нам Джастин. – Так как я слеп и завишу от технологий озвучивания текста на экране, мне не всегда легко найти ту опцию, которая мне нужна и которая полностью доступна. Однако команда MailChimp достаточно неплохо в этом преуспела».

К нашему счастью, Джастин обращался с подобным вопросом и раньше и предложил свою помощь в улучшении MailChimp. Он не поленился и отправил нам несколько видеозаписей, на которых показаны проблемные места в приложении. После просмотра этих записей и прочтения нескольких статей [1, 2, 3], мы поняли, что можем значительно улучшить специальные возможности приложения, если сосредоточимся на 2 целях: создании и предоставлении контекста для элементов с использованием функций и свойств стандарта WAI-ARIA или атрибута title в HTML, и контроля за тем, чтобы вся разметка была семантически верной. (На тот момент эти приемы не применялись при оформлении списков подписчиков в MailChimp, где мы использовали верстку div-блоками).

Улучшение панели управления

Еще до получения сообщений от Джастина мы начали заниматься улучшением специальных возможностей панели управления MailChimp. Эти незначительные, но эффективные доработки добавили необходимый контекст элементам панели, используемым экранными дикторами для озвучивания текста.

Все элементы на панели MailChimp отображаются с помощью «реечных» паттернов, состоящих из семантически верных элементов списка, включая чекбокс, заголовок со ссылкой на дополнительную информацию и выпадающий список с перечнем задач. Кроме того, некоторые панели управления содержат счетчик подписчиков, а также счетчик показателей кликабельности.

На тот момент дополнительная информация на панели о типе кампании и имени списка недостаточно проясняла назначение этих элементов. Тип кампании «Обычный» и имя списка «Тестирование 1» были не совсем понятными. Для решения проблемы мы воспользовались атрибутом aria-label, чтобы добавить описание кампании и информацию о списке. Благодаря этому экранный диктор смог озвучивать текст, стоящий после слов «тип кампании» или «имя списка». Еще мы добавили атрибут aria-label к иконкам на панели мониторинга, чтобы озвучивался текущий статус кампании.

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

Улучшение списка подписчиков

Работая над улучшением специальных возможностей, мы заметили, что нам нужно переделать и список подписчиков. Сейчас он представлен в виде семантически грамотной таблицы данных. Как показано в этом примере, наш список подписчиков можно пролистывать горизонтально, а фиксированным остается лишь один столбец слева. Первоначально мы использовали теги th, thead и tbody в связке с этим закрепленным столбцом, но из-за этого VoiceOver озвучивал по 2 имени для каждого столбца. Пользователям VoiceOver приходилось работать с таблицей, полностью сдвинутой влево. Для решения проблемы мы теперь используем лишь элементы с тегом td в таблице и присваиваем роль columnheader заголовкам столбца. В осуществлении таких изменений нам помогло видео Yahoo! о внедрении таблиц со специальными возможностями.

Более того, мы применили атрибут title к чекбоксам на странице профиля подписчика, что позволило экранному диктору произносить почтовый адрес подписчика при наличии флажка на чекбоксе. А еще мы настроили рейтинг-лист активности клиентов для специальных возможностей с помощью ролей и подписей ARIA (взгляните на список подписчиков CodePen).

Итог

Обеспечение семантической согласованности и добавление описания к элементам – довольно простые приемы, которые могут сделать работу вашего приложения вместе с экранным диктором приятной для пользователя. В случае с JavaScript рекомендуется использовать один из доступных фреймворков. Мы пользуемся Dojo и всеми UI-виджетами со встроенными специальными возможностями из его UI-библиотеки.

После всех исправлений мы спросили мнение Джастина и получили его положительный ответ: «Ничто не надоедает и не выглядит странным. Все считывается так, как и ожидалось. Мне нравится!»

Устраняем проблему оттока клиентов с помощью Google Analytics

Эллисон Урбан

Будучи веб-аналитиком, я много работаю с визуальным отображением данных. Одним из моих любимых инструментов является Next Page Paths в Google Analytics. В этом небольшом отчете указано, куда пользователи переходят после просмотра определенной страницы. Если говорить о UX, то это один из самых быстрых способов для определения того, когда пользователи прекращают движение по воронке конверсии.

Приведу пример с воронкой активации аккаунта. После того, как пользователь зарегистрировался, ему необходимо пройти проверку на правильность ввода captcha перед тем, как зайти в свой аккаунт. Последовательность действий, которую мы ожидали увидеть в Google Analytics, выглядела примерно так: регистрация > успешная регистрация > получение подтверждения > login.mailchimp.com.

Однако мы обнаружили, что 32% пользователей после успешной регистрации пытаются перейти сразу на login.mailchimp.com, минуя получение подтверждения. Если бы можно было зайти в свой аккаунт без captcha-проверки, проблем бы не возникло, но эта проверка обязательна. Оказывается, что раньше можно было перейти в свой аккаунт до завершения captcha-проверки, но наши разработчики запретили этот переход в целях обеспечения безопасности.

Так почему кто-то продолжал пытаться самостоятельно попасть в свой аккаунт вместо того, чтобы следовать инструкциям для подтверждения его получения? Как раз потому, что пользователей привлекала яркая кнопка «Войти». После того, как мы убрали ее со страницы успешного завершения регистрации, процент пользователей, переходящих прямо на страницу подтверждения, вырос с 63% до 79%. Наша команда поддержки стала принимать на 25% меньше обращений по поводу активации аккаунта, и в итоге мы стали получать меньше таких вопросов, чем когда-либо.
Неплохо для нескольких минут, потраченных на исследование.

Учимся на своих ошибках

Тайрик Кристиан

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

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

В 2013 году UX-команда MailChimp начала масштабный редизайн своего веб-приложения. Трафик мобильного веб-приложения рос быстрыми темпами, и исследование аудитории пользователей показало, что людям хотелось получать доступ к MailChimp с нескольких устройств и в разное время, где бы они ни находились. Интервью с клиентами и углубленное изучение влияния мобильных устройств на современную культуру помогли нам составить план развития MailChimp. Для того, чтобы рассказать нашей команде историю о пользовательском опыте, который мы бы хотели воссоздать, мы написали сценарий, наняли актеров и записали небольшое видео о вариантах использования и рабочих процессах нашего будущего приложения. В видео был показан не новый интерфейс, а всего лишь методы работы с ним.

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

Работая с приложением MailChimp, пользователи получают краткий обзор основных данных своего аккаунта с нескольких панелей управления. В процессе редизайна мы экспериментировали с таблицами и картинками, чтобы найти способ лучше представить эти данные. Спустя несколько недель экспериментов мы решили, что у нас есть интересные идеи, но мы не были уверены в том, что за ними последуют подходящие решения. Таблицы были ясными, но скучными. Картинки смотрелись неплохо – они «оживляли» списки и отчеты и позволяли легко работать с кампаниями – но они занимали много места, и из-за них информация располагалась не слишком компактно. Они были красивыми, но непрактичными.

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

Тогда мы сделали эскизы каждой «рейки» в панелях Отчеты, Кампании, Списки и Автоответчик. Мы начали с оформления текста заголовков и метаданных и постепенно добавляли такие элементы, как кнопки, чекбоксы и индикаторы состояний. После нескольких итераций со скетчами, мы могли переходить к работе с Photoshop. Создать первоначальный вариант блоков было несложно, так как для каждого элемента у нас были установлены определенные паттерны. Самой проблематичной оказалась страница Кампании: мы хотели сделать индикатор состояний визуально привлекательным, но нужно было учитывать такие факторы, как структура контента и выбор цветовой гаммы. В итоге после ряда итераций мы решили, что будем использовать иконки для отображения статуса каждой из кампаний, используя соответствующие цвета.

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

Например, до редизайна на панели отчетов отображалось общее число просмотров и кликов; после редизайна на панели отчетов отображались показатели кликабельности для каждой кампании. Узнав мнение пользователей, мы пошли на компромисс и стали отображать общее число просмотров и кликов по запросу пользователя. Создание и улучшение «реек» – лишь один из вариантов применения итеративного подхода в нашем редизайне. Тот же процесс использовался и при работе над другими элементами библиотеки паттернов, а также во всех бизнес-процессах и на каждой странице приложения MailChimp.

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

Улучшение через редизайн

Тайрик Кристиан

В ноябре 2012 года меня попросили взглянуть на MailChimp как на адаптивное приложение. В связи с тем, что таких масштабных адаптивных приложений как MailChimp немного, у меня было не так много источников вдохновения. Я собрал вещи со своего стола и переехал из офиса UX-команды в другое помещение вместе с DesignLab, командой маркетологов и несколькими досками для маркеров. Уже здесь наш креативный директор Рон Льюис поручил мне заняться исследованием и созданием дизайна без каких-либо ограничений.

Это был мой первый адаптивный проект. MailChimp – приложение масштабное, а я был единственным UI-дизайнером в команде. Как же я собирался со всем этим справиться?

Для начала мне нужно было провести одно исследование. Я перечитал «Адаптивный веб-дизайн» Итана Маркотта, просмотрел коллекцию паттернов «адаптивного дизайна» Брэда Фроста и изучил примеры гибких сеток в адаптивной верстке и самих адаптивных сайтов. Кроме этого, я прикреплял на нашу офисную стену вдохновляющие дизайнерские решения: примеры красочных иллюстраций, шрифтов и паттернов.

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


Разновидности основных элементов библиотеки паттернов


Шаблоны типографики

Как только мы согласовали небольшой набор паттернов, я начал проектировать навигацию приложения – это помогло бы создать фреймворк для его [приложения] последующей разработки. Нашей целью было создание достаточно гибкой навигации, которая бы работала на любом устройстве, до определенной степени поддерживала бы возможности кобрендинга и в первую очередь решала бы вопросы поиска, чтобы пользователи в любой момент могли обратиться к нужной им информации.

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


Примеры горизонтальной навигации на раннем этапе процесса редизайна


Варианты дизайна вертикальной навигации

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


Пример отображения информации в виде списка и в виде блоков на панели управления кампанией


Шаблоны плиток для блочного формата отображения информации на панелях управления кампаниями, панелях списков и отчетов

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

После нескольких недель экспериментов и обсуждений мы решили сменить курс. Мы с Федерико обсудили предыдущий дизайн, и пришли к единому мнению. Нам нравилась идея практичной таблицы, и мы решили сделать так, чтобы контент можно было отсортировывать, быстро просматривать и листать как вертикально, так и горизонтально. Как только мы это поняли, стало ясно, что нам нужны списки, стилизованные в виде таблиц, или «рейки» (Фед рассказывал о них ранее). Вскоре мы реализовали эти идеи в виде скетчей, дизайна и прототипа.


Скетчи Федерико


Созданные скетчи и дизайн были переданы коллегам для создания прототипа

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

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

Источники

От команды Mailchimp:

Книги:

[ Материалы по управлению проектами и развитию стартапов в нашем блоге на Megamozg.ru ]

 

 

 

Комментарии запрещены.