Сайт должен стать решением задачи, а не самой задачей!

Юзабилити: Что? Где? Когда?
rab_poshta
Если у Вас есть сайт или Вы имеете непосредственное отношение к интернет-индустрии, о юзабилити слышали наверняка.
   Однако знаете ли Вы, что юзабилити (usability), как критерий оценки качества, это только одна из составляющих формулы успешного веб-ресурса? Другой равнозначной переменной является функциональность (utility) или полезность сайта. Веб-ресурс, который не решает задачи пользователей, но удобен в использовании - бесполезен, как и сайт, требующий от пользователя значительных усилий для достижения цели.
юзабилити: ищите баланс между юзабилити и функциональностью


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

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

юзабилити: 5 составляющих


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


Когда необходимо работать над юзабилити сайта?

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

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

  3. Для действующего сайта, если при его создании или редизайне работа над юзабилити не проводилась.

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

Оригинал статьи: http://adlabs.com.ua/news/503-yuzabiliti-chto-gde-kogda-/

GOOGLE TAG MANAGER: ОТСЛЕЖИВАНИЕ СОЦИАЛЬНЫХ АКТИВНОСТЕЙ В GA
rab_poshta
Отслеживание Facebook

  • Генерируем код кнопки нажатием "Get Code" и переходим на вкладку XFBML


  • Код <html xmlns:fb="http://ogp.me/ns/fb#"> вставляем в тег <html> (самый первый тег на странице)


  • Код кнопки <fb:like send="true" width="450" show_faces="true"></fb:like> устанавливаем в желаемом месте страницы.


  • Нижеуказанный код вставляем после <body>, можно возле кнопки:






<div id="fb-root"></div>




<script>(function(d, s, id) {




var js, fjs = d.getElementsByTagName(s)[0];




if (d.getElementById(id)) return;




js = d.createElement(s); js.id = id;




js.src = "//connect.facebook.net/ru_RU/all.js#xfbml=1";




fjs.parentNode.insertBefore(js, fjs);




}(document, 'script', 'facebook-jssdk'));</script>




  • В Google Tag Manager создаем тег GA в котором указываем идентификатор веб-ресурса в формате UA-XXXXXXXX-X, тип отслеживания "Социальный сети", в параметрах отслеживания социальной активности обязательно указываем наименование социальной сети и социального действия: like, unlike,share и т.д. Для активации тега устанавливаем правило "Все страницы", если кнопки будут отображаться на всех страницах или указываем конкретные страницы или группу страниц.



  • Создаем Пользовательский HTML тег, в котором указываем следующий код:

<script>
window.fbAsyncInit = function() {
_ga.trackFacebook();
};
</script>

  • Создаем новую версию и публикуем.



Отслеживание Twitter

  • В Google Tag Manager создаем тег GA в котором указываем идентификатор веб-ресурса в формате UA-XXXXXXXX-X, тип отслеживания "Социальный сети", в параметрах отслеживания социальной активности обязательно указываем наименование социальной сети и социального действия: like, unlike,share и т.д. Для активации тега устанавливаем правило "Все страницы", если кнопки будут отображаться на всех страницах или указываем конкретные страницы или группу страниц.

  • Создаем Пользовательский HTML тег, в котором указываем следующий код:

<script>
(function(){
console.log('123');
var twitterWidgets = document.createElement('script');
twitterWidgets.type = 'text/javascript';
twitterWidgets.async = true;
// Setup a callback to track once the script loads.
twitterWidgets.onload = _ga.trackTwitter;
document.getElementsByTagName('head')[0].appendChild(twitterWidgets);
})();
</script>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>

  • Создаем новую версию и публикуем.



Отслеживание Vkontakte
<!-- Put this div tag to the place, where the Like block will be -->
<div id="vk_like"></div>
<script type="text/javascript">
VK.Widgets.Like("vk_like", {type: "full"}, );
</script>

  • Вставляем возле кода кнопки код:

<!-- НАЧАЛО VK.like button + GA.tracking -->
<div id="vk_api_transport"></div>
<script type="text/javascript">
window.vkAsyncInit = function() {
VK.init({apiId: 1234567, onlyWidgets: true});
VK.Widgets.Like("vk_like", {type: "button"});
_ga.trackVkontakte();
};
setTimeout(function() {
var el = document.createElement("script");
el.type = "text/javascript";
el.async = true;
document.getElementById("vk_api_transport").appendChild(el);
}, 0);
</script>
<div id="vk_like"></div>
<!-- КОНЕЦ VK.like button + GA.tracking -->
ВНИМАНИЕ: Не забудьте изменить apiId указанный в примере на


Успехов в реализации GTM!

GOOGLE TAG MANAGER (GTM): ОТСЛЕЖИВАНИЕ ВИДЕО YOUTUBE
rab_poshta

  • Реализовываем код GA через GTM: указываем тип тега "Google Analytics", тип отслеживания "Просмотры страниц";

  • Создаем пользовательский HTML тег следующего содержания:

<script>
    // Load the IFrame Player API code asynchronously.
    var tag = document.createElement('script');
    tag.src = "http://youtube.com/iframe_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
    var YT_GA = YT_GA || {};
    function onYouTubePlayerAPIReady() {
        // Replace the 'ytplayer' element with an <iframe> and
        // YouTube player after the API code downloads.
        var playerOptions = {
           height: 315,
width: 560,
videoId: 'LS37dThfm0M',
playerVars: {},
events: {
              'onReady': onPlayerReady,
              'onStateChange': onPlayerStateChange
          }
        };
        YT_GA.player = new YT.Player('ytplayer', playerOptions);
    }
    function onPlayerReady(event) {
        YT_GA.progress25 = false;
        YT_GA.progress50 = false;
        YT_GA.progress75 = false;
        YT_GA.url = YT_GA.player.getVideoUrl();
        YT_GA.videoPlayed = false;
        YT_GA.videoCompleted = false;
    }
    function onPlayerStateChange(event){
        if (typeof _gaq === 'undefined') {
            return;
        }
        // Calculate percent complete
        YT_GA.timePercentComplete = Math.round(YT_GA.player.getCurrentTime() / YT_GA.player.getDuration() * 100);
        if (event.data === YT.PlayerState.PLAYING && !YT_GA.videoPlayed) {
            console.log('Started video');
            _gaq.push(['_trackEvent', 'YouTube', 'StartedVideo', YT_GA.url, 1, true]);
            YT_GA.videoPaused = false;
            YT_GA.videoPlayed = true; //  Avoid subsequent play trackings
        } else if (event.data === YT.PlayerState.PAUSED && (YT_GA.timePercentComplete < 92 && !YT_GA.videoPaused)) {
            console.log('Paused video');
            _gaq.push(['_trackEvent', 'YouTube', 'PausedVideo', YT_GA.url, 1, true]);
            YT_GA.videoPaused = true; // Avoid subsequent pause trackings
        } else if (event.data === YT.PlayerState.ENDED && !YT_GA.videoCompleted) {
            console.log('Completed video');
            _gaq.push(['_trackEvent', 'YouTube', 'CompletedVideo', YT_GA.url, 1,  true]);
            YT_GA.videoCompleted = true; // Avoid subsequent finish trackings
        }
    }
      console.log('end');

  • Указываем в коде значение videoId: отслеживаемого видео, которое содержится в URL адресе видео ролика. URL адрес видео ролика данного примера http://www.youtube.com/watch?feature=player_embedded&v=LS37dThfm0M

  • В результате в отчете GA по событиям увидим следующую картину:

  • Для активации тега указываем правило "Все страницы" или URL адрес страницы/группы страниц, на которых данное видео будет транслироваться;

  • Создаем новую версию контейнера и публикуем.


GOOGLE TAG MANAGER: ОТСЛЕЖИВАНИЕ СОБЫТИЙ БЕЗ ВМЕШАТЕЛЬСТВА В КОД
rab_poshta
В Google Tag Manager (далее GTM):

1. Создаем отдельный макрос для каждого параметра события: category (required), action (required), label (optional), value (optional). Тип макроса - переменная уровня данных.
GTM_создание макроса события

2. Создаем тег GA, в котором указываем идентификатор веб-ресурса "UA-XXXXXXXX-X", тип отслеживания "Событие". В параметрах отслеживания события выбираем соответствующие каждому конкретному параметру макросы. Для активации тега создаем новое правило: {{event}}содержитGAevent
GTM_тег события

3. Создаем пользовательский HTML тег, в котором размещаем код jQuery с указанием id элемента (кнопки, ссылки, поля формы), для которого будет создано событие. Для активации тега устанавливаем правило "Все страницы"
GTM_пользовательский тег события

4. Создаем новую версию и публикуем. Проверить корректность произведенных настроек можно немедленно через отчет GA "В реальном времени".



Успехов в реализации GTM!

GOOGLE TAG MANAGER: НАСТРОЙКА МЕЖДОМЕННОГО/СУБДОМЕННОГО ОТСЛЕЖИВАНИЯ
rab_poshta
В Google Analytics (далее GA):
1. Создаем аккаунт GA или используем уже имеющийся;

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


В Google Tag Manager (далее GTM):

1. Создаем 1 общий контейнер;

2. Размещаем код контейнера на всех доменах и/или поддоменах, которые будут участвовать в междоменном отслеживании;

3. Создаем тег GA , в котором указываем идентификатор веб-ресурса "UA-XXXXXXXX-X", тип отслеживания "Просмотры страниц". В дополнительных настройка в пункте "Домены и каталоги" устанавливаем "Разрешить связывание" и указываем имя домена none. Для активации тега выбираем правило "Все страницы"


4. Создаем новую версию и публикуем. Проверить корректность произведенных настроек можно немедленно через отчет GA "В реальном времени".



Успехов в реализации GTM!

Проблемы юзабилити (usability) сайта или чего делать не нужно!
rab_poshta
   Кейс 2: Не вводите пользователя в заблуждение!
   

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

   Описание проблемы юзабилити (usability): Интернет-магазин занимается продажей угги и ботинок Timberland, о чем свидетельствует незамысловатый логотип в виде текстовой надписи в шапке сайта "Интернет-магазин угги и ботинки Timberland". Непосредственно ботинкам Timberland посвящен раздел с одноименным названием: 
                                                   Скриншот 1: - Страница  раздела ботинок Timberland   
www_multibrend_net_collection_timberland
После "полотна" текста весьма комического содержания я вижу всего одну позицию товара "Ботинки Timberland мужские желтые из нубука", стоимостью ни много ни мало 7500 руб. Уже исключительно из любопытства совершаю следующий шаг конверсионного пути - перехожу непосредственно на карточку товара:
                         Скриншот 2: - Карточка товара "Ботинки Timberland Мужские желтые из нубука"
www_multibrend_net_карточка товара
  На карточке товара вижу краткое описание обуви, в котором, кроме материала, из которого изготовлены ботинки, указаны размеры: 41,42,43,44,45 и краткая инструкция: "Для того чтобы купить ботинки Timberland, положите выбранный размер в корзину и укажите ваши данные". Но возможности выбрать размер, и как выразились авторы текста, "положить его в корзину " нигде нет. Нет возможности выбрать размер и после клика по кнопке действия "Купить", и после перехода в корзину, и после клика по кнопке действия "Оформить заказ"... 

Собственно, проблемы юзабили здесь видны, как говорится, невооруженным глазом. Пройдя всего несколько этапов конверсионного пути, я столкнулась со следующими трудностями:
  • Первое впечатление от сайта БРЕНДОВОЙ (а значит не дешевой) обуви - не вызывает доверия, даже не потрудились сделать элементарный логотип.
  • Абсолютно нечитабельное "полотно текста" при написании которого, автор скорее задался целью рассмешить потенциального покупателя, а не мотивировать к покупке.
  • Скудный ассортимент: выбирать не из чего;
  • Описание обуви на карточке товара зрительно отрезано от его изображения и расположено ниже кнопки действия "Купить";
  • Нарушена логическая последовательность действий: сначала пользователю предлагается купить, а потом уже прочитать, о том, что он покупает;
  • Не смотря на описанную в инструкции возможность выбора необходимо размера - потенциальный покупатель ничего выбрать не может;
  • На странице оформления заказа от пользователя требуют обязательно ввести следующие данные: ФИО, контактный номер телефона, адрес доставки, это при том, что содержимое страницы контактов интернет-магазина следующее: 
          Адрес Интернет-магазина угги Москва
          Наш интернет-магазин угги находится в центре Москвы.

Покупка не состоялась! Надеюсь Вы не удивлены?!

Я бы порекомендовала, как минимум:
  1. Создать уникальный логотип и слоган.
  2. Детализировать контактную информацию
  3. Потратить время, усилия и, возможно, деньги на создание качественного описания брендовой обуви, которое будет мотивировать посетителя сайта на совершение покупки. 
  4. Потратить время, усилия и, возможно, деньги на качественные фото товара в целом, текстуры материала, швов и т.п., всего, на что мог бы обратить внимание покупатель офлайн магазина.
  5. Расширить функционал и добавить обещанную возможность выбора размера, поскольку универсального еще никто не придумал.

      







Проблемы юзабилити (usability) сайта или чего делать не нужно!
rab_poshta

Кейс 1: Не создавайте длинных страниц!

Скриншот 1 – вот таким образом выглядит страница каталога марок авто представленных на  сайте:

Каталог марок авто представленных на сайте

Описание проблемы юзабилити (usability): «Длинна» этой страницы примерно 15 экранов прокрутки для ноутбука с разрешением 1366*768. На данной странице нет ни формы поиска, ни сортировки, которые могли бы помочь пользователю в поиске интересующей его марки авто. При этом среднее время просмотра данной страницы составляет всего 35 секунд. Практически весь поток кликов приходятся на марки авто, которые расположены в пределах первых двух экранов прокрутки.

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

Я бы порекомендовала:

1.    Реализовать форму поиска по каталогу, которая позволит производить поиск марок авто по наименованиям, как на оригинальном языке, так и транслитерацией, например «Toyota», «Тойота», а также по наименованиям с опечатками, например «Тайота», предлагать возможные правильные варианты написания при поиске по наименованиям с ошибками, например: «Таёта».

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

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


Не разочаровывайте посетителей своих веб-сайтов!
rab_poshta

На текущем этапе развития WEB и online конкуренции на первый план (наконец-то) выходит не создание сайта как самоцель, а удобство его использования.

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

И как бы ни хотелось углубляться в проблемы юзабилити, все равно придется - ведь за улучшением пользовательских факторов следят сами поисковые машины и их роботы.
Хочешь, чтоб твой ресурс в выдачи поисковых систем находили пользователи - думай о них, думай как они, помогай им в решении задач и проблем, а не создавай их! 
Конечно, есть и другие источники трафика, кроме условно бесплатного поиска (хотя и не такие дешевые) но следует помнить, что привлечение посетителей на сайт - это амбарный замок на дверях, ведущих к успеху, открыть которые сможет ключ – удержание посетителей на сайте
Как раз проблемами удержания посетителей на сайте и занимается usability (юзабилити).


Одно из моих любимых определений этой науки следующее: юзабилити (usability) - это желаемый, ожидаемый и действительный опыт пользователя с сайтом. 


Желаемый опыт взаимодействия формирует WEB. Ожидаемые опыт формируется уже на самом сайте, на основании увиденного. Действительный опыт - формируется непосредственно после взаимодействия с теми или иными элементами интерфейса.

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

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


видео с Воленской лужи
rab_poshta
Originally posted by makiaveli at видео с Воленской лужи


?

Log in