Юзабилити сайта: что такое и как понять хороший ли сайт?

В сентябре 2021 года в Челябинске проходил масштабный курс по рекламе и маркетингу «Маркетинг практикум», одним из организаторов и спикеров которого является наш руководитель Василий Долгушев. В этой статье приводим краткую выжимку из выступления по теме «Юзабилити сайта и веб-аналитика»

– Что такое юзабилити? Кто знает, кто что думает?

– Удобство пользования сайтом.

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

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

Давайте с вами поиграем. Я покажу название, расскажу как это выглядит на сайтах. А вы какой-то пример придумаете, например, из Windows или из реального мира, подходящий под эту эвристику.

Эвристики юзабилити

1. Первая эвристика – строка состояния, понятное состояние системы. Что это значит? Что в любой момент времени человек должен понимать, что происходит с системой, на какой стадии мы сейчас находимся – ждем чего-то, не ждем чего-то. На сайтах обычно это отображается как какое-то действие, тулбар, который крутится, что-то думает сайт. Это может быть уведомление, что товар добавлен в корзину, если это интернет-магазин. Это может быть на Яндекс Диске - процесс загрузки, на YouTube тоже “загружено столько-то процентов”. Такие понятные состояния системы. Пример из Windows.

   – Загрузка. Файлы скачиваются.

   – У Windows есть юзабилити все таки. На самом деле да. Потому что никто не будет спорить, что Windows все-таки лидер сейчас по операционным системам для пользователей. По сравнению с тем, что было, когда была раньше консольная система, да и DOS, которая тоже в принципе была от Microsoft. А то, что они сделали Windows 3.11 – это был достаточно большой прогресс.




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

   
   

   Вот 2 примера. Сайт стоматологии. Верхний пример. Примерно понятно. Там лечение кариеса – небольшая дырка. Лечение пульпита – побольше проблема. Коронку даже как-то нарисовали.

   И нижний пример. На нижнем примере иконки понятны? Немного непонятны. То, что они мелкие – это пол проблемы. С циркониевой коронкой я не понял немножко. Там как-то рассматривать будут сначала или как?

   – А отбеливание, что там за грузовик?

   – Ну да, дизайнер немного схалтурил и какие были иконки - такие и вставил.

   – Все подписано, да. Все равно должно быть соответствие. Также, например, по поводу подписано. В некоторых приложениях вы можете видеть, что даже, если иконки понятны, они все равно прописаны текстом под ними. То есть, чтобы тоже не гадать, что значит конкретно, к примеру, в приложении банка: “карточка” – что это значит. Эти переводы денежные, вклад или еще что-то? То есть обычно тоже подписывают иконки. Это тоже к этой эвристике относится. Пример из Windows?

   – Папки подписаны. “Мой компьютер”. Иконки вставить и подписано.

   – Да, по поводу Windows - раньше был «Мой компьютер», а теперь “Этот компьютер”, теперь уже не мой. А еще из примеров, это курсор. То есть такая стрелочка, водишь по экрану и когда наводишь на ссылку, он превращается в руку. Сейчас буду нажимать. То есть меняется иконка.

3. Следующая эвристика – пользовательский контроль свободы действий. Что значит? Это значит, что любое действие можно отменить. Удаленный файл можно восстановить. Есть корзина. В тех же самых Яндекс, Google Дисках. Относительно сайта, что это значит? Это значит, что, если нажали кнопку «Заказать звонок», и у окошка, которое появляется, есть крестик, на который можно нажать и закрыть. Правила хорошего тона – если не только нажимая на крестик в этом окошечке, которое появляется. То есть в любом месте вне этого поля, если двигаешь, то это окошко должно закрываться. Не все сайты это применяют. Поняли, про что я говорю?

   – Что такое правила хорошего тона?

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

   
   

   – Вот реклама, например. Показывают рекламу. Там нужно подождать таймер, чтобы не мог ее закрыть.

   – Это деньги за это платят.

   – С одной стороны бесит, а с другой тот же YouTube мы же бесплатно используем. Если не премиум. Платим тем, что смотрим рекламу.

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

   
   

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

   – Пишет то это кто?

   – Кто первый разрабатывает дизайн. Новые скриншоты я на этой неделе делал. Отдельная проблема, что акции не обновляются. Пример из Windows или из реального мира?

   – Если мы Windows берем, у них внизу панель управления. Там одного размера значки, они стилизованы. Если мы тыкаем туда, там тоже шрифты везде одинаковые.

   – Да, как минимум - в Windows шрифты одинаковые используют. Вот пример со шрифтами. Я специально залез в код: вот это один шрифт, это второй шрифт, это третий шрифт. Не только размерами отличается. Это все на одной странице было. Буквально подряд.

   – Ниже четвертый размер.

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

   – О двух шрифтах, вы имеете ввиду названия шрифтов? Или кегель тоже важен?

   – Кегель тоже важен.

   – Если использую какой-то один шрифт. Я же могу разный кегель использовать? Для выделения.

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

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

   – Можно тогда уточнить по сайту. Сколько размеров шрифтов можно использовать на одном сайте? На странице?

   – Размеров шрифтов?

   – Размеров, да.

   – Я дальше про заголовки, подзаголовки буду говорить. То есть, если мы используем там хорошо разбитый текст, с несколькими подзаголовками, со стилями. Если говорить про один шрифт – 4-5. Там жирный. Главный заголовок, второй заголовок и так далее. Третьего уровня.

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

   – Это если про визуал. А если про роботов говорить. Они же сейчас тоже анализируют, что у тебя выделено, как.

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

   
   

5. Предотвращение ошибок. То есть, когда вы хотите какую-то информацию от пользователя получить, и если вам нужно строго определенные размеры, определенные форматы, то нужно об этом сообщить. Чтобы не было ошибок. Сейчас уже за стандарт взяли в форме заявки, в поле номера телефона добавляется маска ввода. Туда не ввести больше цифр, чем нужно, и буквы туда не ввести. Например, на YouTube, если попробовать выбрать логотип, там другого размера и какого-то другого формата, то он ожидаемо скажет: «Ошибка. Я же вам говорил. Вот еще раз прочитайте». В принципе, если прежде сначала прочитать, а потом делать, то ошибок, как таковых и не случается. Сразу готовый, нужный файл. Из Windows пример какой-нибудь?

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

   – Точно хотите отформатировать жесткий диск?

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

   
   

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

   – Или в Play Market, если мы в приложение заходим, там сразу подписывается. Отзывы на него. Платный, бесплатный контент.

   
   

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

   
   

   Другие примеры как не надо

   – А как надо?

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

   
   

   Например, разный функционал и разные особенности для новичков и для опытных пользователей. Часто, когда регистрируешься, там предложение перейти в “Режим эксперта” либо в “Мастер создания” в Яндекс.Директе.

   
   

   Например, в Яндекс.Директе, если вы первый раз, то адрес сайта свой вводите и он там у вас все создает автоматически, надо только подредактировать. Если перейти “Режим эксперта” – можно перейти, если вы не первый раз это делаете. Там больше настроек и там найдете вы то, что в простом режиме не найдете.

8. «Эстетика/минимализм». Тут понятно, да? Первый Google сделал свой сайт в таком минималистическом стиле. Потом Яндекс его повторили на страничке ya.ru. Google с тех времен не меняется, если говорить про Яндекс, хотя что он там выводит: новости, Яндекс.Дзен, такое все остальное. Вот Google – минимализм.

   
   

   – У них же есть также минималистическая страница, есть расширенная, так же и у Google.

   – Да есть. Но основная-то страница yandex.ru. Если вбить в поиск «Яндекс», то откроется yandex.ru. Google даже одно время хотели убрать кнопку «Мне повезет», чтобы в сторону минимализма еще уменьшать количество лишнего. Но потом пользователи взбунтовались, потому что, оказывается, этой кнопкой пользуются. Знаете, что за кнопка вообще? Ты когда вбиваешь, жмешь на «Мне повезет», и он автоматически переходит по первой ссылке сразу. Не надо выбирать ответы, читать, что написано – сразу «Мне повезет» – и по первой ссылке сразу перешел. Оказывается, некоторые пользователи использовали это. Или они даже, может, и не пользуются, но кнопочка, что «Мне повезет» подбадривает. Вот поэтому они это вернули; давно, конечно, было.

   К чему это относится еще? Это относится вот к таким формам, например. Видели такие формы на некоторых сайтах?

   
   

   – Это лид-формы что ли?

   – Это форма заявки. Понятное дело, что бывают ситуации, когда эта информация необходима для просчета менеджерами, для составления нормального коммерческого предложения. Но в таком случае лучше делать – вот пример из Тинькофф – разбивать формы на несколько экранов. Опять же, тут вот видно – сколько заполнено процентов. Сначала спрашиваем то, что в первую очередь надо. Причем данные формы сохраняются каждый раз, когда «Далее» нажимаем. То есть, если пользователь у нас слетел после того, как ввел свои данные – ничего страшного, мы ему все равно позвоним: вам эти данные пришли. Если он слетел после 5-го раза нажатия данных – 30% только заполнил – у нас побольше информации, мы ему все равно позвоним. Таким образом, пользователь не потеряется. Понятно, что если кредитную карту хотим – то там надо и паспортные данные, и все остальное указать, чтобы они провели анализ.

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

   
   

   И вот такой пример: «Подтвердите действие». Понятно, что за ошибка, что неправильно?

   – Номер телефона введен неправильно

   – Да, если немножко web-мастер, и по-английски читаешь: «Error name, Error E-Mail». Имя и E-Mail не ввел, оказывается. Кому-то понятно, кому-то непонятно.

   – А может, сайт считает, что твое имя - ошибка?

   – Это, знаете, сейчас, на Фейсбуке*. Знаете такое – ИА Панорама? Из последнего вышло: Facebook* заблокировал Hochland Россия, потому что оскорбление. Это фейк такой. Но все равно какие-то слова Facebook* все же блокирует, потому что думает, что они оскорбительные.

   Понятная информация об ошибках. Если нельзя такие символы использовать – то значит, нельзя такие символы использовать. Использовать какой-то из таких символов – не надо.

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

    
    

    Часто обращали, не обращали внимания – такие поисковые подсказки. Знакомство с системой. Вот здесь у нас это находится, здесь это. Такой краткий экскурс, потому что прямо в справку вряд ли кто-то пойдет. А вот после того, как зарегистрировался, если сервис сложноватый – то можно так всплывающими окошками показать. Такие значки-вопросики – в Яндекс.Метрике мы посмотрим. Там если обратить внимание – все в вопросиках усыпано. Вообще говоря, в каждый термин, там все понятно становится, если время немножко потратить и почитать. Поэтому справка должна быть всегда под рукой.

    
    

С эвристиками все понятно? Что дальше с этим делать?

Тестирование Юзабилити

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

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

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

Яндекс Взгляд

Руслан на прошлой лекции рассказывал про Яндекс.Взгляд – там много чего можно сделать в Яндекс.Взгляд. Можно и опросы по количественному исследованию сделать, например. Но там также они добавили и другие шаблоны. Это, например, «Тестирование UX-дизайнов». Выглядит очень просто, даже не надо сайт туда загружать. На моменте дизайна можно это все протестировать, до 5 картинок засовываете. Говорите, какое задание нужно, чтобы пользователь сделал.

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

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

– Вопрос по сервису. Неизвестно, на основании чего они это проверяют? Это скидывается какими-то пользователям?

– Да, отсылается людям. Причем это у них фикс стоит 999 рублей именно такой стандартный. Они гарантируют, что не менее 100 или 200 пользователей – минимум 100 пользователей – пройдут, посмотрят, потыкают по картинкам.

У них есть такой сервис Яндекс.Толока. Кто-нибудь знает? Они этим пользователям и дают задания. Те за деньги выполняют – для вас. Соответственно, вы оплачиваете все это. Для нас 999 рублей за 1 тест. Максимум 5 картинок можно сделать. Можете какую-то прописать задачу на 3 картинки, на 2 картинки. Максимум 5 картинок. Удобный сервис для UX-дизайна.

Яндекс Вебвизор

Это – встроенный в Яндекс сервис «Вебвизор». Раньше это был стартап. Давным-давно Яндекс его купил и присоединил к себе. В Google Analytics такой штуки нету, поэтому Яндекс.Метрика тут впереди. Есть аналоги, но они платные – за рубежом, я имею в виду. Они стоят приличных денег достаточно, а Яндекс Вебвизор свой бесплатно всем раздает.

Что это такое? Пользователь, когда заходит на сайт, совершает какие-то действия – и Яндекс эти все действия записывает. Есть, конечно, ограничения – не больше 150 000 человек в день и не больше 15 дней хранятся записи. Постоянно надо это проверять. Если какое-то действие вам понравится, вы его можете отметить, и он сохранится, не будет удаляться. В этом месте мы на практике чуть-чуть попозже посмотрим. Запускаете Play и там курсор мыши и какое действие, что он там совершил.

– Это привязываешь к своему сайту?

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

Рассказать, что это такое? Мы попробуем это все сделать вместе. Если коротко – это целевое действие, которое вам было бы полезно, чтобы пользователь сделал. Это может быть итоговое действие – например, отправка заявки или добавлен в корзину какой-то товар – но и промежуточные какие-то действия тоже могут быть. Например, подписка на рассылку либо человек был на сайте. Если это информационный сайт – допустим, он был на сайте у вас 3 минуты, если вы за этим следите; или посмотрел больше 3-5 страниц. Какие-то промежуточные конверсии можно добавлять. Можно добавлять: начал взаимодействовать с формой, не отправил заявку. Начал что-то вбивать, но не отправил заявку – тоже такое, как промежуточная конверсия, можно это вбить. Потом можно будет в метрике посмотреть таких пользователей, почему они до конца не дошли.

Но в данном случае пример – интернет-магазин шин, как взаимодействует он с каталогом. Там вбил один, второй параметр – тут вообще говоря, ошибок не было никаких. Достаточно долго 1,5 минуты на сайте пробыл, по фильтру подобрал, что ему надо. Фильтр прошел тестирование очень хорошо.

Заключение

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

Подробнее: https://creative.bz/audit/

* Meta Platforms Inc (владелец Facebook* и Instagram*) — организация признана экстремистской, её деятельность запрещена на территории России по решению Тверского суда Москвы от 21.03.2022.