3 Уровня визуального и эмоционального дизайна посадочных страниц

Posted on by riasevastopol

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

Из-за чего так оказалось? По причине того, что в сети простые человеческие чувства утонули в холодном цифровом море рациональных понятий: эффективность и функциональность. Люди были так заняты, пробуя приспособиться к World Wide Web как новой среде обитания, что на какое-то время забыли о ответственной части людской натуры — чувствах.

Рассудок взял верх над эмоциями.

Вместо того, дабы применять интернет на отечественных условиях, мы сами принялись приспособиться к его технологической — соответственно, безличной — природе. И если бы не отечественные предусмотрительные современники, такие как Дон Норман (Don Norman) либо Аарон Уолтер (Aarron Walter), все мы — от гигантов киберпространства до простых пользователей, включая, очевидно, веб-дизайнеров и маркетологов — делали бы упор на совершенствовании технологических процессов, пренебрегая потенциалом эмоционального дизайна.3 Уровня визуального и эмоционального дизайна посадочных страниц

В собственной книге «Эмоциональный дизайн» (Emotional Design, 2004) Норман растолковывает, из-за чего «привлекательное трудится лучше». Согласно точки зрения автора, взор на прекрасные вещи пробуждает в человеке творческое начало и расширяет диапазон восприятия окружающего, тем самым в один момент минимизируя действие небольших недочётов тех же вещей.

  • Лендинг пейдж индустрии красоты — эмоциональный дизайн, что реализовывает

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

По окончании практических изысканий Норман пришел к концепции «3 уровней визуального дизайна» (three levels of visual design), при соответствии которым лендинг будет одновременно и удобным для пользователя (usable), и прекрасным. Иначе говоря в собственный книге гуру «юзабилити как сплава когнитивистики, инженерного расчёта и дизайна» (и один из основателей Nielsen Norman Group) вдребезги разбил аргументацию собственных оппонентов, представив ее как фальшивую задачу (фальшивую дихотомию), чем, в неспециализированном-то, она и есть. 🙂

Аарон Уолтер, эксперт и дизайнер по оптимизации пользовательского опыта (User Experience), написал еще одну великую книгу новой эры веб-дизайна — «Проектируя чувство» (Designing for Emotion).

В собственном труде он определяет чувстве «как неспециализированный язык человечества», как язык, привычный любому человеку с момента рождения. Уолтер растолковывает, из-за чего эмоциональные переживания серьёзны для пользовательского опыта (что для маркетологов свидетельствует — для конверсии): чувства оставляют глубочайший отпечаток в долгосрочной памяти, как раз они заставляют человека ощущать, что второй стороной интеракции в Глобальной сети есть такой же человек, не машина.

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

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

Теоретические базы качественного дизайна

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

И в том и другом случае нужен прочный фундамент, на котором возможно возводить стенки. Чтобы заложить прочную базу, вы должны знать 3 вещи:

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

Итак, приступим к заливке фундамента. 🙂

  • Эмоциональный дизайн как оптимизация продаж

Внутренние цели дизайна

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

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

Потенциальные визитёры

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

Контекст применения

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

3 уровня визуального дизайна по Норману

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

Норман вместе с 2 сотрудниками по американскому Северо-Западному университету (Northwestern University, США) совершил изучение механизмов происхождения чувств, продемонстрировавшее, что разные уровни отечественного мозга формируют самые отличительные и самые передовые качества людской личности.

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

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

  • интуитивный уровень (visceral level),
  • поведенческий уровень (behavioral level),
  • рефлекторный уровень (reflective level).

Сейчас разглядим их в данной последовательности.

Интуитивный уровень

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

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

Норман назвал деятельность, инициируемую на интуитивном уровне, «поведением типа снизу-вверх».

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

Хороший интуитивный дизайн заставляет нас ощутить хоть что-то, а в совершенном случае — приводит в восхищение.

Привлекательный футер от Vimeo. У дизайна нет никакой функции, не считая привлечения внимания.

Поведенческий уровень

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

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

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

Сплит-клавиатура Ipad с «фантомными кнопками». Если вы привыкли вводить букву Y левой рукой, вы все еще имеете возможность это сделать.

Рефлекторный уровень

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

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

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

Карта шоссе США, представленная в виде схемы метро — прекрасный пример рефлекторного дизайна.

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

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

К примеру, внешний вид конструкции страницы образовывает лишь один уровень — интуитивный. То, как продукт трудится — это область поведенческого дизайна, а долгосрочное действие («все-таки прекрасная вещь!») — рефлекторного. Сочетание всех 3 уровней в верной пропорции — вот что такое качественный дизайн.

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

Действенный — руководите вниманием пользователя, убедитесь, что он отыскал, что искал.

Прекрасный — разрешите пользователю оценить ваш лендинг и взять наслаждение.

Запоминающийся — выстройте отношения с пользователем, обеспечьте ему приятные воспоминания о вас и вашем ресурсе.

Имплементация чувств в дизайн

Как же дизайнерам и маркетологами применить эти знания на практике? Как имплементировать эмоции в дизайн?

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

Вот на них мы и обратим на данный момент внимание.

Юмор

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

Однако, юмор — дело узкое, по причине того, что тяжело поддается обобщению: что для одного смешно, для другого — оскорбительно. Перед тем как применять юмор на вашей целевой странице/сайте/маркетинговой кампании, не забудьте выполнить вот что: на самой первой стадии изучите целевую аудиторию и выясните контекст применения вашего веб-ресурса. А сейчас поразмыслите, оценит ли ваша target group такое чувство юмора?

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

Помните, что наличие юмора на сайте будет оказывать влияние на то, как визитёры будут вас принимать. В книге «Designing for Emotion» Уолтер иллюстрирует пример имплементации юмора на примере мультяшного талисмана сервиса почтовых рассылок MailChimp. Красивую обезьянку кличут Фредди фон направляться (Freddie von Chimpenheimer) и, согласно точки зрения Уолтера, она превосходно подходит на роль дружелюбного хозяина, приветствующего гостя и помогающего ему ощущать себя как дома.

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

Талисман трудится, по причине того, что Фредди забавно перешучивается с визитёром, но одновременно с этим он ни при каких обстоятельствах не делается на пути вашего рабочего процесса. Это принципиально важно. Юмор обязан завлекать, но не злить.

Фредди фон Чимпенхаймер — самая известная имплементация юмора в дизайн SaaS-решения 🙂

Узнавание

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

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

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

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

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

Уолтер обрисовывает персонализацию веб-ресурса как ключ к созданию «более человечного» дизайна.

Twitter знает толк в «золотом сечении»

Диссонанс

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

Консультант по юзабилити Тодд Фоллансби (Todd Follansbee) в собственной прекрасной статье «Мозги, соглашайтесь! Дело о правилах юзабилити сайта» (Brains Agree: The Case for Website Usability Guidelines) аргументированно растолковывает, из-за чего люди так обожают стереотипы и шаблон, из-за чего ищут их online так же настойчиво, как и в реальности. Руководящие правила юзабилити основаны на глубоком понимании того, как обрабатывается информация в отечественном сознании.

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

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

  • Из-за чего стереотипныe лендинги и сайты конвертируют лучше?

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

Реакция визитёров во многом зависит от того, что они собой воображают, и от контекста, в котором они применяют вашу целевую страницу.

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

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

Сайт брендингового агентства SubPlot: несложный макет, но «крайне необычная» забавная и нестандартная навигация вовлекает визитёров, оставаясь эргономичной в пользовании.

  • Когнитивный интернет и диссонанс-маркетинг

Интонация общения

Интонация общения, применяемая на вашей целевой странице/сайте есть серьёзным эмоциональным причиной. То, как вы общаетесь с пользователями, очень многое говорит о ваших отношениях с ними. В то время, как вы словами передаете им определенные сообщения, ваша интонация говорит о том, что вы думаете о них, и то, что вы желаете, дабы думали о вас — по крайней мере, так утверждает психолог Фридеман Шульц фон Тун (Friedemann Schulz von Thun).

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

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

Wufoo неповторимо обладает интонацией голоса

Вовлечение

Эргономичный лендинг, прекрасный снаружи и с красивой юзабилити — и неожиданно нежданно большой показатель отказов (Bounce Rate) и низкое число лидов. В чем тут неприятность, растолковывает в собственной лекции «наука и Искусство соблазнительного сотрудничества» (The Art and Science of Seductive Interactions) веб-консультант и дизайнер по юзабилити Стивен Андерсон (Stephen Anderson). Прочные и долгосрочные отношения, равно как и хороший пользовательский опыт, утверждает он, смогут строится лишь на вовлечении и привлечении людей.

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

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

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

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

На сайте Slavery Footprint визитёры смогут определить о взаимоотношениях с таким позорным университетом в историикак рабовладение вовлекающим интерактивным методом.

Заключение

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

Аарон Уолтер

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

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

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

Высоких вам конверсий!

По данным smashingmagazine.com, image source Milapsinh Jadeja

Случайные статьи:

Пошаговый алгоритм создания Landing Page (посадочных страниц)


Подборка похожих статей:

riasevastopol

More Posts