Идеально! Как создать и переделать свой сайт. Правильный подход и передовые техники разработки - Элиот Стокс

Рисунок 8.6. Досье дизайн-персонажа, созданное для образа сайта MailChimp

Визуальный словарь

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

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

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

Методы привлечения

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

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

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

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

Рисунок 8.7. Талисман Фредди фон Чимпенхаймер IV, талисман (лицо) MailChimp

Рисунок 8.8. Схема образа MailChimp

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

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

Задание голоса и адаптация тона

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

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

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

Стали бы вы шутить, чтобы утешить вдову на похоронах? Или использовать неформальную речь на встрече с королевой Англии? Думаю, что нет! Естественно, вы бы захотели настроить свой тон по ситуации.

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

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

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

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

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

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

Заключение

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

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

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

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

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

Об авторе

Аарон Уолтер родился после динозавров, но до появления Интернета, в городе, недалеко от места, где через 200 лет родится капитан Кирк. Его образование включает степень бакалавра изобразительных искусств, Университет Айовы в США, степень магистра изящных искусств, Тайлерская школа искусств (штат Техас, США). Он живет в Афинах (штат Джорджия, США) где музыка такая же прекрасная, как и люди. Аарон – ведущий дизайнер пользовательских интерфейсов в команде MailChimp. Он написал две книги, последняя – «Эмоциональный веб-дизайн» (Designing for Emotion, 2011). До прихода в MailChimp в 2008 г. восемь лет он проводил по стране интерактивные дизайнерские курсы для нескольких колледжей. Его любимый цвет – черный. Он мечтает стать бариста (специалист по приготовлению кофе), когда подрастет. Его совет читателям: «Пробовать лучше, чем спрашивать: „А что если?..“»