Юзабилити пользовательского интерфейса: как сделать невидимое видимым?

Posted on by riasevastopol

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

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

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

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

Вы так как осознаёте, чем это угрожает?

  • Примеры юзабилити интерфейса пользователя

Ожидания пользователей (User Expectancy)

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

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

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

  • Пользовательский опыт и юзабилити на сайтах eCommerce

Индикаторы-триггеры

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

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

1. пространственные индикаторы и Указательные стрелки

Данный тип индикаторов достаточно распространен, и один из вариантов его применения вы имеете возможность видеть на рисунке ниже:

Основное меню на сайте американской телевизионной компании Fox выполнено именно с применением стрелок, говорящих о наличии скрытого контента.

Как вы имеете возможность видеть, первые два блока («Shows» (телепрограммы) и «Watch Full Episodes» (наблюдать эпизоды полностью)) снабжены таковой стрелкой, и они содержат скрытый контент, в то время как последний блок меню таковой стрелки не имеет, как и скрытого содержания.

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

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

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

  • 3 принципа оптимизации конверсии и юзабилити веб-дизайна

2. Метафоры

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

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

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

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

3. иллюстрации и Иконки

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

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

4. Затухание текста

Как бы необычно не звучало наименование этого индикатора, он употребляется везде. И связан он не с трансформацией внешнего вида самого триггера, а с трансформацией визуального представления скрытого контента. К примеру, на страницах вебмагазина Amazon эта разработка употребляется вместе с хорошим триггером «Read More» (с англ. — определить больше).

Текст как бы затухает и говорит о наличии скрытого содержимого.

5. Обзор контента

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

  • Из-за чего слайдер — самый ненужный элемент дизайна?

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

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

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

Помните тестировать все догадки.

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

По данным baymard.com

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

Прототип пользовательского интерфейса


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

riasevastopol

More Posts