Интуитивный веб-дизайн: как сделать лендинг пейдж удобным для пользователя?

Posted on by riasevastopol

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

Значительной частью того, что принято именовать «простота в применении», есть интуитивное познание пользователем web-интерфейса лендинга/отдельной страницы сайта. Так мы подходим к определению интуитивного дизайна (Intuitive design): в то время, когда визитёр видит таковой дизайн, он совершенно верно знает, что ему делать.

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

Интуитивный дизайн фокусируется на хорошем пользовательском опыте (User eXperience, UX), что, в итоге, совершает его фактически синонимом научного дизайна.

Эксперт по оптимизации конверсии (Conversion rate optimization) Пип Лайя (Peep Laja) приводит таковой пример: «Предположим, что вы приходите в пункт проката машин, заказываете один, подходите к нему и планируете сесть в салон. Но вот незадача — на двери нет ручки! Ну и как пробраться вовнутрь автомобиля?».

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

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

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

А вот неинтуитивный дизайн сразу же привлекает внимание, заставляя визитёров сосредоточиться на элементах web-интерфейса, не связанных с ответом конверсионной задачи.

Содержание

Неприятность с проектированием интуитивных интерфейсов: интуитивно понятный для кого?
Актуальные знания VS Требующиеся знания
Абстрактные модели
В то время, когда лендинг возможно применять интуитивно?
Интуитивно понятные поиск и навигация по сайту
Люди выполняют солидную часть собственного времени на вторых сайтах, не на вашем
Неоправданный риск редизайна
Вместо заключения

  • 3 принципа научного дизайна: лендинг для красоты либо конверсии?

Неприятность с проектированием интуитивных интерфейсов: интуитивно понятный для кого?

Из-за чего существует так много лендингов/сайтов, каковые заставляют людей ломать голову над исполнением конверсионной задачи? Из-за чего бы не сделать все веб-ресурсы интуитивно понятными? Это так как то, что желает любой — потенциальный клиент, маркетолог, веб-дизайнер?

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

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

Большая часть лендингов/сайтов созданы с благими намерениями: никто не желает осложнить жизнь визитёрам. Эти лендинги кроме того интуитивно понятны — но, в большинстве случаев, дизайнеру! Простой разработчик редко в то время, когда тратит время, дабы взглянуть, как средней представитель целевой аудитории будет пользоваться его веб-продуктом.

Человек постоянно смотрит на мир со своей собственной точки зрения, и в то время, когда он проектирует что-то, он неосознанно конструирует данный объект (не имеет значение, независимый лендинг либо SaaS-платформу как таковую) «под себя», другими словами для людей, владеющих приблизительно таким же уровнем компьютерных навыков, примерно таким же опытом применения интерфейсов аналогичного типа и т. д.

Интуитивный веб-дизайн: как сделать лендинг пейдж удобным для пользователя?

Принципиально важно усвоить вот что: разработка интуитивного дизайна начинается с понимания пользователей (target group): необходимо узнать, что для них интуитивно ясно, а что нет.

Познание целевой аудитории нереально без знания концепции «актуального/текущего уровня знания против требуемого уровня знаний» (Current Knowledge VS. Target Knowledge).

  • Дизайн Landing Page: с чего начать?

Актуальные знания VS Требующиеся знания

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

Это то, что Джаред Спул (Jared Spool), выдающийся эксперт по юзабилити веб-интерфейсов, именует «текущим уровнем знаний» (Current Knowledge).

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

Слева направо: No Knowledge — никаких знаний; Current Knowledge — текущий уровень знаний; Target Knowledge — требуемые знания; All Knowledge — максимальные знания.

Отличие между этими двумя уровнями — Current Knowledge и Target Knowledge — именуется разрывом в знаниях (Knowledge Gap). Задача дизайнера содержится в разработке интерфейса, минимизирующего разрыв в знаниях у визитёров — в это же время, что они знали, перед тем как показались на ресурсе, и тем, что им надлежит знать, дабы применять веб-страницу подобающим образом.

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

Чем меньше несколько, тем несложнее задача дизайнера, и напротив. Ясно, что сведения о target group он обязан приобретать от маркетолога, опытного собственный целевой рынок.

  • Первое чувство имеет значение, либо Из-за чего ответствен качественный дизайн

Абстрактные модели

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

Поясним на примере: допустим, имеется некто, ни при каких обстоятельствах не получавший товары online, но владеющий опытом приобретений offline. Мы усаживаем его перед компьютером, показываем ему web-интерфейс Amazon.com и говорим: «Можешь брать товары тут!».

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

Но вот в случае если пользователь уже пользовался онлайн-шоппингом, но на втором веб-ресурсе, то его абстрактная модель сайта eCommerce будет различаться от вышеупомянутой: быть может, что интерфейс Amazon.com не оправдает его интуитивные ожидания.

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

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

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

Знайте собственных пользователей!

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

Существуют два действенных метода оценки уровня знаний целевой аудитории:

  • «Полевые изучения» (Field studies): вы к своим потенциальным клиентам и замечаете их поведение в сети в привычной для них «среде обитания». Этого достаточно, дабы составить представление об их текущем уровне знаний.
  • Юзабилити-тест типа «Стоя за плечом» (Over the shoulder usability tests): пригласите пара представителей собственной target group учавствовать в тесте, попросите их выполнить комплект задач на ваших страницах. Пускай пользователи комментируют собственные действия вслух, говоря все, что они думают. Подобный тест возможно совершить и в удаленном режиме.

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

  • Как протестировать юзабилити landing page?

В то время, когда лендинг возможно применять интуитивно?

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

Упоминавшийся ранее Джаред Спул еще в 2005 году совершил изучения на эту тему, результатом чего стала статья «Что делает дизайн интуитивно понятным?» (What Makes a Design Seem ‘Intuitive’?).

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

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

Иначе говоря вы или делаете ваши лендинги такими простыми, что исполнение конверсионных задач не потребует от визитёра обучения, или снабжаете веб-страницы руководствами, рекомендациями, перечнями довольно часто задаваемых вопросов (FAQ), прекрасно заметными и вправду талантливыми «на ходу» научить пользователя.

Лучшее подтверждение правоты первого тезиса — интерфейс поискового гиганта Гугл. Вы никак не сможете применять его неправильно, в том месте попросту нет «кривой обучения» (Learning Curve) — любому пользователю кроме того с минимальным уровнем знаний ясно, что делать.

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

Получается, что существует два метода создать интуитивный дизайн.

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

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

Но, возможно в один момент применять оба способа.

  • Мама-тест — разработка оптимизации конверсии лендинг пейдж

Интуитивно понятные поиск и навигация по сайту

3 года назад Майк Вольпе (Mike Volpe), специалист по входящему маркетингу, создал круговую диаграмму, наглядно иллюстрирующую запросы, предъявляемые визитёрами к дизайну веб-ресурсов (ясно, что диаграмма была результатом тщательных изучений).

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

Вот тут и кроется основной вопрос: в случае если на вашем сайте расположено огромное количество контента, то как грамотно структурировать/каталогизировать его?

Пип Лайа рекомендует применить еще один способ оптимизации offline, так называемый «карточный способ сортировки контента» (Card sorting), сродный чем-то с настоящей карточной игрой с несложными правилами: участникам опыта раздают картонные карточки с заглавиями категорий: «различное», «товары для дома» и т. д.

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

Звучит, быть может, и смешно, но способ данный обрисован в статье «Card sorting: a definitive guide» (2004) Донны Спенсер (Donna Spencer), австралийского эксперта с мировым именем по оптимизации пользовательского опыта.

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

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

Самое время отыскать в памяти о так именуемом «Законе Кассельса» (CassellsLaw), названном так в честь специалиста по CRO Гугл Шейна Кассельса (Shane Cassells):

50 % всех пользователей не берут, по причине того, что они не смогут отыскать то, что они ищут.

50% of all users don t buy because they can t find what they re looking for

Как раз исходя из этого иметь хороший поиск по контенту не просто серьёзен, а архиважен!

На вашем ресурсе должен быть поиск, и его, со своей стороны, должно быть легко отыскать.

У гиганта электронной торговли Amazon громадный ассортимент офферов, потому-то и поиск занимает центральное место в его web-интерфейсе. Но вы воображаете, как Amazon имел возможность бы трудиться по-второму?

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

  • Муха на писсуаре, либо 5 правил убеждающего веб-дизайна

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

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

Общепринятые (конвенциональные, утвердившиеся, стереотипные) элементы восприятия веб-страниц таковы:

  • нажатие на логотип (в левом верхнем углу) постоянно возвращает пользователя на основную/домашнюю страницу;
  • последний пункт в горизонтальном меню навигации обязан именоваться «Контакт/Свяжитесь с нами» (или это нижний пункт вертикального меню);
  • контактная информация обязана размешаться в футере страницы (footer, «подвал»);
  • стремитесь к постоянству и последовательности: навигация и другие ответственные элементы должны оставаться на одном и том же месте на любой странице ресурса;;
  • ссылки должны быть легко отличимы от простого текста;
  • в случае если пользователи смогут и должны скроллить страницу, полоса прокрутки должна быть видна и отличима от фона;
  • в государствах, которыми владел к европейской цивилизации в широком смысле, пользователь вначале прочтёт контент, расположенный слева на странице;
  • размещайте уведомления и справочные сообщения на странице блоками;
  • применяйте самые понятные слова: «Контакты» вместо «Коммуникации».

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

Так мы медлено подходим к последнему пункту отечественного поста.

  • Как расширить прибыль на 80% без привлечения новых клиентов?

Неоправданный риск редизайна

На конференции An Event Apart в 2012 году Джаред Спул озвучил новый тезис:

редизайн ведет к разрыву уровня знаний пользователей веб-ресурсов.

Закон Парето беспощадно трудится и в данной сфере людской бытия: те 20% пользователей, что приносят 80% доходов, категорически не приемлют никакой редизайн любимого предприятия eCommerce. Они уже привыкли к тому, как все трудится, и в то время, когда вы меняете дизайн сайта, вы меняете его против самых платежеспособных, «золотых» клиентов.

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

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

Лучший метод — перманентный малозаметный редизайн по типу «итерация за итерацией» (иначе говоря «эволюционный», Evolutionary Site Redesign, ESR). Данный метод разрешит вам скоро отреагировать на хороший либо отрицательный итог, вызванный новыми трансформациями.

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

Вместо заключения

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

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

По данным conversionxl.com

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

Как сделать Landing page, для веб студии за 1 час Урок от профи


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

riasevastopol

More Posts