Никита Сергеев
Контент-маркетолог

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

Немного о термине

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

Маша Албегова
Маша Албегова
редактор блога

Немного статистики: согласно исследованию компании Blue Corona 38% пользователей покинут сайт, если посчитают его непривлекательным и сложным. А по данным Kinesis 94% юзеров первое впечатление связывают именно с дизайном, а 75% переносят его на компанию.

Посмотрите на Google Chrome – всего одна строка для ввода запросов и пара ссылок на ресурсы, которыми мы часто пользуемся. Если уж сами лидеры выдачи все так упрощают, то рядовым вебмастерам это нужно делать обязательно.

гугл

Мы ежедневно пользуемся соцсетями, мессенджерами и другими приложениями, но почти не замечаем, что с каждым днем они становятся проще в использовании. Любой элемент в них разрабатывается с учетом удовлетворения пользователя – в экономии времени, быстрых доступов, визуальной простоте. А перед выходом обновлений разработчики проходят серию тестов на удобство. Уровень юзабилити – это важнейший показатель, на котором строится современный UI/UX дизайн.

Привлечем целевых пользователей из Яндекс и Google. Работаем над внутренними и внешними факторами ранжирования и видимостью сайта в поисковиках. Вы получаете рост посещаемости и высокий охват среди потенциальных клиентов.
Оставить заявку
Подробнее…

Основы web usability сайта: что это такое и из чего состоят

Удобный интерфейс должен отвечать 5 требованиям, определяющим качество пользовательского опыта – это главные критерии, по которым принято оценивать UX:

  1. Эффективность. Насколько быстро люди могут адаптироваться к интерфейсу и совершать целевые действия при первом посещении ресурса. Это важный аспект для всех типов площадок в интернете, но особенно для магазинов.
  2. Запоминаемость. Какой процент аудитории возвращается и чувствует себя комфортно на страницах спустя какой-то период времени. 
  3. Функциональность. Кнопки и другие интерактивные элементы очень важны – это основной способ взаимодействия с ресурсом, который помогает людям совершать покупки, отправлять заявки, проходить регистрацию. Они должны правильно работать и не конфликтовать с кодом. 
  4. Польза. Если аудитории полезен ваш контент, то они останутся на нем длительное время и будут периодически возвращаться.
  5. Доступность для всех групп населения. Важно учитывать, что на площадку заходят разные пользователи, в том числе с ограниченными возможностями. Например, голосовой поиск поможет незрячим в навигации по разделам, а укрупненные элементы и яркий шрифт облегчат чтение материалов посетителям в возрасте. Многие используют функцию субтитров при просмотре видео, чтобы понимать содержание ролика, не беспокоя других. Подумайте, какие специальные функции нужно внедрить у вас на сайте, чтобы людям с разными возможностями было одинаково комфортно его использовать. Обратите внимание, что практически каждый смартфон имеет подобный функционал.
смартфон
Спец.возможности на Pixel.
страница
Пример версии для слабовидящих.

Почему это важно или что является основным принципом веб юзабилити проектирования 

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

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

Визуализация данных: виды и методы визуального предоставления информации Читайте также Визуализация данных: виды и методы визуального предоставления информации

В чем и как измеряется юзабилити: что означает это понятие на самом деле

Автоматического инструмента для измерения удобства пользования веб-площадками не существует. Но есть стандарт ISO 9241. Его еще называют «эргономика взаимодействия человек-система». Он состоит из нескольких частей, которые описывают разные аспекты работы человека с компьютером. 

В этом документе для определения качества советуют опираться на следующие метрики.

  • Итоговая оценка. Самый простой способ измерения. Рассчитывается по положительному и отрицательному результату. То есть, достигают ли посетители своих целей (1) или нет (0). Различают прямую оценку, которая рассматривается в стандарте ISO 9241-11 и косвенную ISO/IEC 25010.
  • Анализ ошибок UI (могут быть ранжированы по степени важности). Вычленяется проблема и отмечается, какой процент аудитории с ней столкнулся. Особое внимание уделяется сегментации ЦА – если знать, кто именно ошибается на кликах по кнопкам и элементам, то можно сделать полезные выводы и внедрить инструменты в помощь посетителям. Например, на сайте клиники ЭКО женщины могут ошибаться при расчете дня зачатия ребенка, так как неверно рассчитывают период овуляции. А если создать вот такой удобный калькулятор, как на Babyblog, то все станет намного проще.
календарь
  • Расчет времени на решение задачи. Нужно зафиксировать, сколько минут или секунд требуется пользователю для достижение цели. Допустим, речь идет об интернет-магазине по продаже мобильных устройств. За какое время среднестатистический покупатель заходит в раздел смартфонов Samsung, выбирает соответствующую модель и покупает ее? Это отработка конкретного сценария. Еще можно сделать углубленный анализ, изучив подробно каждую страницу – общая категория товаров, модельный ряд, корзина, форма оплаты. И таким способом понять, где дольше задерживаются клиенты, что им мешает, когда они закрывают вкладку.
фильтр
Фильтр – хороший способ помочь пользователям сориентироваться. Источник.

Основы, принципы и правила юзабилити web сайта 

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

Проведем полный, комплексный SEO аудит сайта, включая: техническая проверку, оптимизацию, коммерческие факторы, внешние характеристики. Никакой воды в отчете! Только описание существующих проблем и их эффективных решений.
Оставить заявку
Подробнее…

1. Минималистичный дизайн 

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

2. Логичный структурированный контент

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

3. Важная информация на виду

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

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

4. Общение с пользователем или System Status Visibility

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

5. Отмена действия

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

форма

6. Ненавязчивое предложение помощи

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

7. Разговор на понятном языке

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

8. Отказ от резких перемен

Неожиданная смена шаблона или какого-то функционала вряд ли понравится целевой аудитории. Люди привыкают к меню, кнопкам, футеру, сайдбару. Они начинают теряться и нервничать, когда все меняется. Например, биржа ETXT.RU перешла на современную верстку, но из-за массовых недовольств по этому поводу оставила пользователям возможность самим переключаться на старый/новый дизайн. И эта опция доступна уже более нескольких лет. Кардинально все изменить биржа пока не решается.

9. Все возможности видно

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

10. Форма регистрации и заказа: чем лаконичнее — тем лучше

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

11. Заметное и длинное поле поиска

Оно должно быть хорошо просматриваемым, чтобы пользователь полностью видел вводимую фразу. Как пишет в своей книге про веб-дизайн, признанный во всем мире специалист в области интерфейсов Якоб Нильсен – в эту строку должно помещаться 18-27 символов.

12. Больше свободного пространства

Каждый избыточный элемент в интерфейсе отвлекает внимание от нужного. Поэтому блог лучше не переполнять информацией – мало того, что не должно быть лишнего, но даже полезный контент нужно делать лаконичным, насколько это возможно. Именно поэтому опытные seo-специалисты не рекомендуют создавать больше 5-6 разделов и помещать на главную страницу все подряд. Иначе посетители будут в заблуждении и не поймут, на что обратить внимание. 

Анализ сайта онлайн: бесплатные инструменты для проверки Читайте также Анализ сайта онлайн: бесплатные инструменты для проверки

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

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

Юзабилити-тестирование проводится по нескольким основным причинам:
  • обнаружение проблем со сложными элементами, кнопками и разделами;
  • получение объективной обратной связи от ЦА;
  • добыча информации, которая поможет улучшить общий пользовательский опыт.

Этапы UX-тестирования: 

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

Когда начинать работать над юзабилити 

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

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

Заключение

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

Оставить заявку
Оставить заявку
Получите консультацию и персональное предложение по развитию вашего бизнеса.
У меня есть промокод
Заявка отправлена!
Мы свяжемся с вами в ближайшее время.
0 0 голоса
Рейтинг статьи
Подписаться
Уведомить о
1 Комментарий
Старые
Новые Популярные
Межтекстовые Отзывы
Посмотреть все комментарии
Августа Ванина
Августа Ванина
9 месяцев назад

Дам небольшой комментарий про поведенческие факторы и почему они так важны, про которые говорилось в пункте про общение с пользователями. ПФ — это действия посетителей на ресурсе, которые показывают востребованность сайта, оцениваются:
Глубина просмотров — количество страниц, которые пользователь посетил за одну сессию. Лучший вариант, когда человек погулял по нашему сайту, посмотрел каталог, почитал о нас и перешёл на страницу контактов для связи.Отказы и время сессии — как долго пользователь пробыл на странице. Если зашёл только на одну страницу и провёл на ней менее 15 секунд, регистрируется «отказ».Действия посетителей — что именно посетитель делал на наших страницах. Как водил мышкой, открывал ли ссылки, кликал по рекламе и заполнял ли формы расчета/обратной связи и тд.Если эти показатели хорошие (много гуляют по страницам, проводят на них много времени, кликают по кнопкам), при прочих равных мы обойдем конкурентов по позициям.

Последний раз редактировалось 9 месяцев назад Августа Ванина ем