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

Стокс Элиот Джей

Веру Ли

Эндрю Рэйчел

Фадеев Дмитрий

Балкан Арэл

Хейлманн Кристиан

Боуг Пол

Эдвардс Марк

Уолтер Аарон

Шварц Бен

Кларк Энди

Хей Стивен

Стори Дэвид

Переделка сайта с использованием индивидуальности

Автор: Аарон Уолтер

Рецензент: Дениз Джекобс

 

 

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

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

Неважно, для кого вы делаете сайт: для клиента, или для себя. Если вы бьетесь в поисках своего решения, скорее всего, вы не с того начали. Вдохновение, которого вы жаждете, вы не там ищите. Оно не в блоге с заголовком «25 поразительно великолепных сайтов». Оно не в ленте вашего Twitter и не в Facebook. Но даже не в Сети. Оно прямо там, где вы! Это – вы сами.

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

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

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

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

 

Кто они?

 

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

Есть вероятность того, что даже если вы провели мало времени за дизайном, то слышали о персонажах. Может быть, вы даже создали несколько. Мы спрашиваем себя: «Кто же они?» с момента, когда Алан Купер представил персонажей в интерактивном дизайне в 1995 году, и с тех пор они стали главным продуктом дизайна, ориентированном на пользователя. Если персонажи для вас неосвоенная территория, вы можете найти краткое введение по теме в «The Project Guide to UX Design» Руса Унгера и Каролин Чендлер. Если вы желаете покопаться глубже в исследовании пользователей, раздобудьте специализированную книгу Алана Купера «The Inmates Are Running the Asylum».

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

Рисунок 8.1. Персонаж описывает портрет основного пользователя в нашей целевой аудитории и одушевляет наши дизайнерские решения. Этот пример создал Тод Заки Ворфел из

 

Индивидуальность

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

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

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

 

Давным-давно, в далекой-далекой галактике

Не так давно те из нас, кто публиковался в Сети, были вынуждены выглядеть более пафосно перед публикой. У вас был сайт во время бума доткомов в конце 1990-х? У меня – да, и, уподобляясь многим, я писал тексты для моих сайтов с королевским «мы», чтобы создать впечатление того, что моя корпорация такая же огромная, как iXL или Razorfish (дети, спросите у родителей!). Выбросите стоковые фотографии фиктивных партнеров и встреч, и вы превратитесь в одиночку, который сидит в своей спальне и выдает себя за «всемирную корпорацию».

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

Рисунок 8.2. И Carbonmade, и Photojojo имеют яркую индивидуальность, которая выделяет их среди конкурентов и привлекает страстных поклонников

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

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

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

Компания General Electric, компания из списка Fortune-100 со штатом в 287 000 сотрудников (хм, людей в 36 раз больше, чем в городе, где я вырос), выглядит гигантом по сравнению с почти любой компанией на планете. Многие корпоративные монстры любят размещать на своем сайте стандартные тексты, стоковые фотографии и обещания. Но GE пробует кое-что другое. Она рассказывает истории устами своих сотрудников о том, как изменяет мир.

В видео на домашней странице GE рабочие из Дарема (штат Северная Каролина, США) делятся с нами вкратце рассказами о своей работе, о том, как они создают мощные реактивные двигатели, которые поднимают коммерческие самолеты на высоту 1000 метров над землей. Это видео не о том, насколько сложны технологии, заложенные в двигатели, а собрание личных историй Сеза, Марка, Карима, Тома и их коллег, которые вкладывают душу в свою работу.

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

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

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

Все поглощены тем зрелищем, как лайнер набирает высоту.

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

 

Продукция и люди – одно и то же

 

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

Стивен Пинкер, профессор кафедры психологии Гарвардского университета в своем бестселлере «How the Mind Works» («Работа ума») отмечает: «Многие изменения в личности – около пятидесяти процентов – имеют генетические корни». И это так! В момент, когда вы входите в этот мир, половина качеств вашей личности уже предрешены свыше.

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

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

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

Есть четыре основных выгоды от выражения вашей личности через дизайн:

• На переполненном рынке индивидуальность поможет вам отделиться от конкурентов.

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

• Личность привлекает тех, кто понимает вас, и удерживает на расстоянии всех остальных.

• Индивидуальность вызывает у пользователей страсть, и они становятся самым мощным маркетинговым каналом.

Теперь каждый пункт рассмотрим в отдельности.

 

Один из этих сайтов не похож на другие

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

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

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

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

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

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

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

 

Я помню

 

Эмоциональные переживания оставляют глубокий отпечаток в нашей памяти. И возникновение эмоций, и их запоминание происходят в лимбической системе – совокупности отделов головного мозга. Есть хорошая причина, по которой лимбическая система объединяет эти важные функции. Мозг объединяет эмоцию и долговременную память потому что, в противном случае, человек был бы обречен на повторение негативных впечатлений и не мог бы осознанно повторять позитивные. Как Джон Медина разъясняет в своей книге «Brain Rules: Principles of Surviving and Thriving at Work, Home and School» («Правила мозга: 12 принципов выживания и процветания на работе, дома и в школе») наш мозг тонко подмечает эмоционально наполненные события:

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

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

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

 

Люблю и ненавижу

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

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

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

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

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

В нашей личной жизни есть несметное количество случайных лиц, которых мы и в глаза не видели. Конечно, тяжело осознавать, что некоторые люди не принимают наш образ на ура. Глупо пытаться подстраиваться под желания всех, с кем нас так или иначе сводит судьба. Самое лучшее, что мы можем сделать, оставаться самими собой и верить, что есть люди на планете, которые принимают нас такими, какие мы есть. (Бог мой! По-моему, мы под шумок внесли лекцию о жизни в книгу о дизайне, вам не кажется?)

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

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

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

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

Проследив, как он используется, мы обнаружили, что только 0,007 % нашей аудитории отключают наш персонаж. Из этого урока мы вынесли то, что незначительная критика – далеко не причина для того, чтобы менять себя.

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

 

Наши пользователи умеют обращаться со слухами

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

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

Записи в Twitter, посты в блогах и простая молва привлекли новых пользователей более эффективно, чем баннеры. Неизбитый дизайн сайта, остроумный текст и озорник Динозаврик резко выделяют Wufoo в среде конкурентов, которые с большой неохотой используют образы. Пользуясь сайтом Wufoo, мы легко можем увидеть образы тех людей, кто его создавал. Владение продуктом, любимым пользователями и который постоянно растет за счет сарафанного радио, сделало Wufoo привлекательным и ценным приобретением для компании SurveyMonkey, что купила его в 2011 году приблизительно за 35 миллионов долларов.

 

Образ: уже не только для дизайнеров

Уважаемые дизайнеры пользовательского опыта, такие как Стивен Андерсон и Энди Бад, размышляют и говорят о связи между образами, эмоциями и дизайном вот уже несколько лет. Тема нашла поддержку в дизайнерской среде. Но мы не единственные, кто осознает силу образов на переполненном рынке. Люди, которые создают стартапы, тоже понимают это.

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

Дейв Мак-Клер, «инвестор-ангел» и основатель бизнес-инкубатора из 500 мелких компаний, придерживается того же мнения. Он рассматривает образы и эмоции как важныe факторы успеха продукции. В своей речи на конференции Warm Gun conference в 2011 году Мак-Клер обратился к дизайнерам и предпринимателям: «Будьте собой, суперсамими собой. В чем вы можете быть искренними и где вам уютно? Ищите свою сущность и расширяйте ее. Найдите чувство или эмоции, которые вы можете поддерживать».

Бизнес-СМИ также раскрывают роль образов в дизайне. Спонсор журнала Forbes Энтони Винг Коснер подтверждает, что образы могут сделать сайт более запоминающимся:

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

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

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

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

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

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

Вот для чего именно нужны персонажи.

 

Определяем ваш образ с помощью дизайн-персонажа

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

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

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

Дизайн-персонаж состоит из девяти частей [93]

1. Название бренда

Название вашей компании или продукта.

2. Обзор

Краткий обзор образа вашего бренда. В чем его уникальность?

3. Образ индивидуальности/личности

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

4. Качества бренда

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

5. Схема образа

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

6. Речь

Если бы ваш бренд мог говорить, как бы он это делал? Что бы он сказал? Разговаривал бы он компанейским простым языком, или утонченным?

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

7. Примеры текста

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

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

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

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

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

 

Разработка дизайн-персонажа

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

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

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

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

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

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

1. Веселый, но не по-детски.

2. Забавный, но не тупой.

3. Функциональный, но не сложный.

4. Неформальный, но не разгильдяйский.

5. Простой, но не простецкий.

6. Надежный, но не нудный.

7. Неформальный, но не чуждый.

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

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

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

При создании образа для вашего сайта помните одно важное правило.

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

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

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

Название бренда

MailChimp.

Обзор

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

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

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

Характеристики бренда

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

Голос

Голос MailChimp знакомый, дружелюбный, а главное – человеческий. Понятно, что за брендом на самом деле стоят образы людей. MailChimp отпускает шуточки (вы сможете рассказать их маме), рассказывает истории и говорит в непринужденной манере, в какой вы могли бы разговаривать со старым приятелем. MailChimp употребляет конструкцию don’t вместо do not, потому что так говорят нормальные люди. MailChimp вставляет неформальные междометия типа «хм-м-м», когда думает, и «Блин! Это ужасно!» – чтобы выразить сочувствие.

Примеры текста

• Сообщение об успехе: «Дай пять! Твой список импортирован».

• Сообщение об ошибке: «Упс! Кажется, ты забыл ввести адрес электронки».

• Критический отказ: «Один из наших серверов временно не работает. Наши инженеры уже работают и скоро все исправят. Спасибо за понимание».

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 

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

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

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

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

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

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

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

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

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

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

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

 

Заключение

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

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

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

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

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

 

Об авторе

* * *

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

 

О рецензенте

* * *

Дениз Джекобс (р. 1968) родилась в Спрингфилде (штат Огайо, США). Окончила Стэндфордский университет, Университет Вашингтона в Сиэтле и Университет Поля Валери во Франции. Ее жизненное кредо: «Глаза боятся – руки делают». Дениз живет в небольшом домике недалеко от города Корал-Гейблс в Майами (штат Флорида, США). Она почти полностью обустроила ландшафт своего дворика в 2009, но затем села писать книгу. Она с тех пор так и не смогла вернуть своему саду былую славу, но все же у нее растут банановые деревья, а соседских авока-до – просто в изобилии.

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

Самый важный урок, который усвоила Дениз, – нельзя объять необъятное.

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