Usability сайта: что это, анализ, примеры и чек-лист

что это, анализ, примеры и чек-лист

• 1. Почему важно соблюдать основные принципы юзабилити?
• 2. 3 преимущества для бизнеса после аудита юзабилити
• 3. 5 действенных способов проверки
• 4. Чек-лист по юзабилити: что нужно проверять?
• 5. ТОП-6 инструментов для самостоятельного аудита

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

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

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

Почему важно соблюдать основные принципы юзабилити?

Соблюдение основных принципов юзабилити положительно влияет на два основных фактора:

• посещаемость;
• конверсия.

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

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

Основные моменты влияния юзабилити на посещаемость и конверсию:

1. Анализ Kissmetrics показал, что более 40 % читателей уйдут с сайта, если скорость загрузки страниц составит более 3 секунд. Это же исследование показало — если нет контактной информации, почти 45% клиентов тут же уйдет к конкурентам.
2. Данные анализа Landauer указывают на то, что предварительно проведенное тестирование юзабилити в дальнейшем снижает расходы на поддержку веб-сайта более чем в три раза.
3. Исследование Creative Good доказало: интуитивно понятный путь для оформления заказа увеличивает количество покупателей на 40 %, средняя сумма заказа повышается на 10 %.
4. Аналитики User Interface Engineering в своем исследовании показали: если клиенты получают полную информацию о товаре/услуге, общий объем продаж увеличивается в среднем на 25%.

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

Попадая на главную нашего сайта, вы сразу можете понять, чем занимается наша студия

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

Факторы, на которые стоит обратить внимание:

• низкий показатель глубины просмотров;
• жалобы посетителей на проблемы в работе веб-ресурса и сложности взаимодействия;
• высокий процент отказов;
• отсутствие целевых действий от посетителей: нет звонков, оформления товаров, регистрации на сайте и т. д.

При этом аудит сайта стоит проводить регулярно: тестирование юзабилити поможет вовремя исправлять ошибки и идти в ногу с трендами в современной интернет-индустрии.

3 преимущества для бизнеса после аудита юзабилити

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

Конкурентное преимущество

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

Поисковое продвижение и целевой трафик

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

Качественная оптимизация — вот что увеличивает входящий целевой трафик.

Еще одно важное преимущество для любого бизнеса — сокращение расходов на продвижение.

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

Лояльность и повторные продажи

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

5 действенных способов проверки

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

Анализ статистики

В этом могут помочь Яндекс.Метрика, GoogleAnalytics, статистика Bitrix и другие аналогичные сервисы. Это бесплатно, но есть минусы — полученные с их помощью выводы имеют обобщенный характер и требуют понимания всех процессов для поиска и исправления ошибок.

Владельцам сайтов на Bitrix доступна собственная статистика

Отзывы

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

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

Тестируют сайты фокус-группы с помощью специализированных инструментов аудита:

1. Нанимаются по определенным критериям люди, входящие в фокус-группу по тестированию (этим занимаются специальные компании).
2. Им выдаются задания на выполнение определенных действий на сайте.
3. Полученные результаты анализирует специалист по тестированию.

Плюс — этот способ позволяет найти решения на основе точных статистических данных. Минус — подобные исследования достаточно сложно реализовать.

Наблюдение за действиями посетителей

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

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

Проведение экспертизы

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

Чек-лист по юзабилити: что нужно проверять?

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

Навигация

Структура

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

Хлебные крошки

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

Это обязательный элемент любого интернет-магазина

Путь к покупке

Исследование Baymard institute показало, что более 25 % пользователей отказываются от покупки из-за сложного процесса оформления. Потому так важно, чтобы путь к оформлению заказа был простым и понятным: нет принуждения к регистрации на сайте, подтверждения через почту и смс и т. д.

Выбор товара

Еще одно исследование, в этот раз от Web site design survey, показало, что более 80 % пользователей уйдут, если приходится тратить слишком времени на поиск товара на сайте. Поэтому путь от оформления корзины до приобретения должен быть максимально простым.

Поиск

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

• лучше всего располагать его в правом верхнем углу;
• длина запроса — около 30 символов;
• адаптивный поиск (если нет точного совпадения, поиск должен предлагать альтернативные варианты).

Реализация поиска на Amazon

Информация

Качество контента

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

Советы по улучшению контента:

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

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

Подача товара

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

Контакты

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

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

Вот так выглядят контакты на нашем сайте

Интерфейс

Дизайн

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

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

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

Скорость загрузки

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

Полезные советы:

1. Откажитесь от использования большого количества графических элементов. Если без них не обойтись, например, в онлайн-магазинах, важно уменьшать их размеры: видео преобразовывать в GIF, загружать фото в формате WEBP.
2. Удалите анимированные вставки, работающие на Flash. Обилие таких элементов отвлекает пользователей, а некоторых — очень раздражает.
3. Снизьте до минимума количество рекламных баннеров — они тоже увеличивают вес страниц, действуют раздражающе.

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

PageSpeed Insights — один из инструментов, который не только поможет узнать скорость загрузки, но и покажет проблемы, влияющие на этот показатель.

Сайт: PageSpeed Insights

Страница 404

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

Отсутствие битых ссылок

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

Адаптивная версия

Сайт должен корректно отображаться на любых устройствах — это важный принцип юзабилити.

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

ТОП-6 инструментов для самостоятельного аудита

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

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

Яндекс.Метрика и Google Analytics

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

Останется проанализировать полученную информацию:

1. Тепловая карта. Она показывает те области на страницах, на которые кликают чаще всего.
2. Карта скроллинга. Позволяет «глазами» пользователя увидеть, что он делает на сайте, например, просматривает контент или прокручивает вниз.
3. Аналитика форм. С ее помощью можно анализировать взаимодействие пользователей с формами: можно увидеть, на какие вопросы они чаще всего не отвечают и исключить либо переработать их.

Сайт: Яндекс.Метрика

Сайт: Google Analytics

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

Hotjar

Помогает в сборе обратной связи (взаимодействие с формами, тепловые карты, тепловизор и т. д.). Лучше всего использовать в качестве дополнительного инструмента с Google Analytics или Яндекс.Метрика.

Главное преимущество — легкая интеграция сайта и сервиса, достаточно ввести ID. После этого пользователям будут доступны следующие данные:

• поведение посетителей на страницах сайта;
• карта передвижения мыши;
• данные о наиболее кликабельных частях страниц.

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

Есть бесплатная тестовая версия, которой можно пользоваться 15 дней после регистрации. Если этого времени на аудит не хватит, воспользуйтесь расширенной версией сервиса с многочисленными инструментами. Правда, Hotjar стоит достаточно дорого — 99 € в месяц.

Сайт: hotjar.com

UsabilityHub

UsabilityHub предлагает 3 инструмента для онлайн-тестирования сайта или приложений. Нужно просто загрузить скриншоты:

• Navflow дает оценку удобства навигации;
• Fivesecondtest тестирует интерфейс;
• ClickTest формирует карту кликов.

Тестирование с помощью UsabilityHub напоминает Usabilla:

1. Загрузите скриншоты, коротко опишите содержимое страниц.
2. Укажите 5 вопросов, на которые пользователям нужно ответить при их изучении.
3. Укажите количество страниц для просмотра.

Останется изучить полученный отчет. У сервиса есть бесплатная версия, но также как и у Usabilla у нее ограниченный функционал.

Сайт: usabilityhub.com

OptimalWorkshop

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

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

Сайт: optimalworkshop.com

SitePolice

Завершает список SitePolice. Есть возможность переключения на российский язык.

Тестирование с его помощью организовано следующим образом:

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

Сервис достаточно качественный, помогает увидеть основные ошибки. Главный минус — он платный, нет тестовой версии.

Сайт: sitepolice.ru

Полный чек-лист для аудита юзабилити сайта: основные принципы usability

Время прочтения: 7 минут

О чем статья?

• Почему важно соблюдать принципы юзабилити сайтов?
• Принципы юзабилити web-ресурса
• Тестирование юзабилити

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

Почему важно соблюдать принципы юзабилити сайтов?

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

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

Принципы юзабилити web-ресурса

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

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

1. Дизайн — залог доверия к сайту

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

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

Пример сайта, перенасыщенного графикой. Дизайн пестрит рассеивающими внимание цветовыми сочетаниями, обилием картинок.

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

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

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

3. Важная информация — в левом углу

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

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

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

Попав на такую страницу 404, пользователь не растеряется и, скорее всего, не сразу покинет ресурс.

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

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

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

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

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

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

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

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

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

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

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

Удачное решение — когда пользователь видит все разделы, в которые может перейти, т.к. в любой момент может быстро сориентироваться, где находится и как вернуться обратно. Если на сайте планируется много контента — резонно предусмотреть горизонтальное верхнее, вертикальное меню (и то, и другое — возможно, с подразделами), а также «подвал». Если речь идет о минималистичной «визитке» или landing page — достаточно только верхнего горизонтального меню.

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

Пример удачной карты сайта

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

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

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

Соответствующая кнопка — лучший помощник посетителя. Особенно если речь идет о крупном ресурсе. Строку поиска пользователь должен обнаружить без труда. Чтобы при первом знакомстве он не тратил на обнаружение соответствующей строки даже несколько секунд.

Еще один важный момент — длина поля поиска. Согласно исследованию Якоба Нильсена, в среднем туда вмещается 18 символов, а оптимальная длина — 27 символов. В 90% случаев сюда поместится даже длинный запрос, чтобы пользователь его полностью увидел и исправил при надобности. Для установки нужной ширины используйте относительную единицу «em», равную размеру используемого шрифта.

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

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

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

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

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

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

Новый интерфейс оценивается с двух позиций:

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

Тестирование проводится самостоятельно либо при помощи специальных сервисов — к примеру, Яндекс.Метрики. Чтобы оценить юзабилити своими силами, нужно  набрать группу из 5-6 человек из категории целевых пользователей, подготовить для них задания и вопросы по работе ресурса, сделать выводы из полученных результатов, исправить найденные ошибки. После внесенных изменений следует заново собрать фокус-группу.

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

Автор: Виктория Закирова, копирайтер<br> Соавтор: Алевтина Данилова, руководитель отдела юзабилити «Ашманов и партнёры»

Что такое юзабилити или 7 основных правил юзабилити сайта | by Ринат Шайхутдинов

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

Иллюстрация Lily: https://dribbble.com/shots/4880858-Video-Background

Вы читаете перевод фундаментальных исследований Nielsen Norman Group, которые они описали в статье “Top 10 Mistakes in Web Design”. Над переводом работали: Ольга Жолудова и Ринат Шайхутдинов.

Юзабилити — это качественный показатель простоты и удобства использования сайта. Юзабилити оценивается по 5 качественным критериям:

1. Легкость в изучении: насколько просто новым посетителям веб-сайта совершать элементарные действия, т.е. не мешает ли им навигация, различные всплывающие окна, реклама или видео;
2. Эффективность: насколько быстро пользователь может ориентироваться на сайте и совершать необходимые ему действия;
3. Запоминаемость: насколько легко пользователь может сориентироваться на сайте после того, как он вернется спустя месяц;
4. Ошибки: как много ошибок совершают пользователи и как легко они разбираются в чем дело;
5. Удовлетворенность: уровень удовольствия от пользования сайтом. На него влияет множество аспектов, среди них: история, навигация, подача и другие.

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

• Полезность — дает ли сайт то, что ищет пользователь;
• Юзабилити — насколько легок и удобен сайт в использовании;
• Практичность сайта = юзабилити + полезность.

Если сайт сложно использовать — посетитель его закроет. Если главная страница не отвечает на вопросы “что именно тут предлагают?” и “это похоже на то, что я искал?”, то пользователь тоже закроет сайт.

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

Просто запомните одно простое правило — первое правило электронной коммерции: если пользователь не может найти товар — он не сможет его купить.

Интересуетесь свежими статьями по дизайну? Вступайте в группу на Facebook | Instagram, Telegram

Ищите системное погружение в тему? Загляните в блог для дизайнеров.

Существует множество способов улучшения юзабилити сайта, самым результативным считается юзабилити тестирование сайта, которое состоит из 3 компонентов:

1. Собрать группу представителей потенциальной аудитории сайта; у них действительно должна быть потребность разобраться с каким-либо вопросом;
2. Дать группе задание. Задачи должны находиться на пересечении интересов пользователей и бизнес-целей. К примеру задача может звучать так: вашему сыну нужен велосипед, зайдите на сайт и купите подходящий;
3. Наблюдать за действиями тестируемых, что у них получилось/не получилось сделать, с какими трудностями они столкнулись, что оказало влияние на их поведение (вебвизор, карта кликов, карта скроллинга в этом вам помогут).

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

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

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

1. Протестируйте старый сайт прежде чем тестировать новый вариант сайта, т.к. это поможет выявить сильные и слабые стороны предыдущей версии и не упустить их из виду при разработке новой версии.
2. Проведите оценку сайтов конкурентов — это хороший (а главное — бесплатный!) способ получить конкурентоспособные данные, которые помогут тебе сделать сайт лучше и лучше чем у конкурентов.
3. Проведите полевое исследование, чтобы понять, как испытуемые ведут себя в их привычных условиях.
4. Создайте напечатанные версии интерфейсов сайта и протестируй их. Помните: потратить время на корректировку бумажных прототипов в разы экономнее, чем тестировать и вносить правки в живую систему.
5. Отметьте успешные правки. Правки после внесения которых показатель юзабилити сайта становится лучше. По мере устранения ошибок и усовершенствования интерфейса, проводите тест уже не на бумаге, а на компьютере. И тестируй сайт после каждого нового исправления.
6. Проверь окончательный вариант сайта на соответствие с общепринятыми нормами юзабилити сайта и со своими предыдущими результатами тестирования.
7. Проведите тестирование еще раз напоследок, после того, как все правки были внесены, сайт уже начал свою «новую» жизнь. Потому что самые коварные нюансы могут появиться как раз после того, как вы выложите сайт на живой.

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

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

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

Если у вас есть на примете какая-нибудь классная статья по UX и не только — скиньте нам ссылку, и мы будем рады над ней поработать.

Нас можно найти в Facebook: Ольга Жолудова и Ринат Шайхутдинов.

Подкидывает идеи, как привлечь, удержать и направить внимание пользователя.

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

Скачать приложение в Appstore →

https://itunes.apple.com/ru/app/mental-notes/id993592407?l=ru&ls=1&mt=8

Вас ждет плотная проектная практика по анимации интерфейсов, дизайну сайтов, а также мобильных и веб-приложений. Под руководством наставников в стиле «смотри и повторяй»!

Breezzly — это среда для тренировки digital-навыков. Здесь вы встретите комплекты видеокурсов в актуальных инструментах интерактивного дизайна, среди них Figma, Principle и Invision Studio. А каждый проект — это живой кейс с историей, собранной по горячим следам!

Посмотреть каталог курсов →

breezzly. ru

что это такое, основные принципы и правила usability тестирование сайта – Wezom

Юзабилити. Что это за «зверь» и почему все так с ним носятся? Что сделать для того, чтобы «usability» получилось идеальным? Как оно вообще влияет на работу сайта и поисковое продвижение в целом? Очень много вопросов, поэтому сразу перейдем к делу.

Что такое юзабилити сайта?

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

Представьте, что вы пришли в новый супермаркет закупаться крупами. Гречка находится в одном месте, рис — почти в конце зала. «Ну какой умник расставлял товары?» — возмутитесь вы. Размещалось бы все в одном месте — выбирать было бы гораздо удобнее.

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

Почему важно соблюдать принципы юзабилити сайтов

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

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

Соблюдать основные принципы юзабилити нужно и по причине посещаемости. Пользователь будет возвращаться на сайт лишь тогда, если ему понравилось с ним работать. А для этого необходимо всесторонне адаптировать ресурс к предпочтениям посетителей: тексты, навигацию, интерфейс, последовательность действий и т. д. Главное — не усложняйте!

Как юзабилити влияет на SEO-продвижение

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

Прямое влияние юзабилити на посещаемость и конверсию не подвергается сомнениям. Прорабатываете его = добавляете эффективности раскрутке = повышаете продажи.

Принципы юзабилити веб-сайта

Дизайн web-сайта

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

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

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

Антипример дизайна сайта:

Логическая структура сайта

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

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

Важная информация на сайте

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

Убедитесь в этом сами:

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

Навигация по веб-сайту

Желательно, чтобы навигация была одинаковой на протяжении всех страниц. Это улучшит восприятие, не будет сбивать посетителя с толку.

Вот пара советов насчет повышения удобства навигации:

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

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

3. Ссылки оставляйте заметными. Пользователь должен видеть, что анкор кликабельный и по нему можно перейти. Не нужно «сливать» ссылки с остальным текстом, так как они будут незаметными, следовательно, бессмысленными.

Упомянутые рекомендации актуальны и для интернет-магазина, и для сайта услуг.

Коммуникация с пользователем

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

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

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

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

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

Хороший пример:

Упрощенная форма регистрации и заказа

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

Посмотрите на эти два примера:

Разница всего в несколько полей, но первую форму заполнять хочется меньше.

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

Дайте человеку возможность найти поисковую строку без труда. Желательно указать прямо в ней или рядом слово «поиск», чтобы пользователю было проще сориентироваться, как здесь:

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

Скорость загрузки сайта

В наше время пользователи очень нетерпеливы, медленная загрузка страниц их раздражает. Убедитесь, что на вашем сайте нет такой проблемы. Проверить скорость можно с помощью бесплатных инструментов PageSpeed Insight, Pingdom Website Speed Test, Load Impact. Вы сможете оценить текущую ситуацию и понять, стоило ли работать над увеличением скорости.

Как повысить юзабилити сайта?

Есть много способов улучшения удобства ресурса. Самый эффективный — провести тест и определить точки роста.

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

Оно будет включать три шага:

1. Сбор группы. Это должны быть представители ЦА, у которых на самом деле есть потребность разобраться с работой ресурса.
2. Выдача заданий. Задачи ставятся разные, максимально приближенные к реальности, например: вашей дочери нужно купить ноутбук для школы; зайдите на сайт и закажите подходящий.
3. Наблюдение за процессом. Модератор отслеживает взаимодействие респондента с сайтом, смотрит, с какими трудностями он сталкивается.

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

Чек-лист по юзабилити сайта

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

Навигация:

1. Структура. Уже упоминалось о том, что она должна быть простой. При разработке сайта сразу делайте все так, чтобы пользователь интуитивно предвидел дальнейшие действия.

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

3. Путь к заказу. Согласно исследованиям Baymard institute, свыше 25% посетителей отказываются от покупки из-за сложной процедуры оформления. Сделайте путь простым и понятным, без принуждений к регистрации, подтверждения по почте и т. д.

4. Поисковая строка. Упрощайте поиск и помогайте покупателям быстрее найти товар и оформить заказ.

Все это важные конверсионные элементы.

Информация:

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

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

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

Это поможет закрыть возражения и вопросы пользователя.

Интерфейс:

1. Дизайн. О нем мы вспоминали выше. Удобный, простой и современный, а не как из начала нулевых.

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

3. Адаптивная версия. Сайт должен корректно отображаться на любых устройствах. Если блоки съезжают при просмотре через смартфон, шрифт слишком мелкий, кому-то следует поработать над адаптивностью.

Вот эти «три кита» помогут проверить юзабилити сайта.

Инструменты для самостоятельного юзабилити аудита

Проверять удобство ресурса вручную — пустая трата времени. Для этого есть много полезных сервисов.

Google Analytics

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

Hotjar

Сервис прекрасно справляется со сбором обратной связи, но лучше работает в сочетании с двумя упомянутыми. То есть пользуйтесь им как дополнительным инструментом аудита. Hotjar легко интегрируется в сайт по ID. После этого вам становятся доступными следующие данные:

• поведение пользователей на страницах;
• карта передвижения мышки;
• сведения о самых кликабельных частях страницы.

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

UsabilityHub

В этом инструменте доступно 3 сервиса онлайн-тестирования веб-сайтов и приложений. Вам только необходимо:

• загрузить скрины и кратко описать содержимое страницы;
• задать 5 вопросов, на которые нужно ответить респондентам;
• указать число страниц для просмотра.

Останется проанализировать сформированный отчет.

SitePolice

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

Учтите, что инструмент полностью платный. Тестовой версии нет.

Optimal Workshop

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

В заключение

Хороший сайт без юзабилити — ничто. Улучшая удобство использования ресурса, вы увеличиваете показатели конверсии. А кому нужен сайт без конверсий? Суть закономерна.

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

У вас остались вопросы?

Оставьте ваши контактные данные. Наш менеджер свяжется и проконсультирует вас.

3.2857/5

Полезность

Проголосовали 7

Как вам статья?

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

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

Что такое юзабилити сайта

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

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

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

Основные параметры и единицы измерения

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

1. Обучаемость — легко ли пользователям выполнить ряд основных задач при первом взаимодействии с незнакомым интерфейсом.
2. Эффективность — насколько быстро пользователи выполняют основные задачи при повторном взаимодействии с интерфейсом ресурса.
3. Запоминаемость — как быстро пользователь научиться взаимодействовать с интерфейсом снова, если на время перестанет посещать ресурс.
4. Ошибки — какое количество ошибок совершит пользователь, будут ли они серьезными и можно ли их исправить.
5. Удовлетворенность — приятно ли пользователю взаимодействовать с интерфейсом ресурса, удобен и понятен ли он ему.

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

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

Каким должен быть сайт: рекомендации от Якоба Нильсена

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

Навигация

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

• размещения на каждой странице ресурса логотипа с активной ссылкой на главную;
• добавления контактной информации в хедере и футере;
• создания меню первого уровня на всех страницах сайта;
• реализации «хлебных крошек».

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

Внутренний поиск на сайте

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

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

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

Дизайн сайта

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

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

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

Тексты

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

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

Чтобы пользователям хотелось возвращаться на сайт и изучать контент, нужно:

• Публиковать интересные для целевой аудитории материалы. Пользователи будут читать как короткие заметки, так и лонгриды, если они будут им интересны.
• Размещать важную информацию в самом верху. Не стоит делать длинных подводок, начинать издалека, постепенно переходя к смыслам. Если контент в течение 3–5 секунд не зацепит посетителей, они закроют вкладку и никогда больше не зайдут на сайт.
• Структурировать тексты. Тексты, разбитые на логические абзацы, дополненные списками и уместными изображениями, читать приятнее и интереснее, чем длинные простыни.
• Дополнять каждый материал оглавлением. Оно необходимо тем, кто привык читать по диагонали, быстро отыскивая нужную информацию. Если пользователь будет долго скроллить материал, но так и не найдет интересного для себя контента, то он закроет сайт и не станет переходить на него в будущем.
• Вычитывать тексты перед публикацией. Орфографические, пунктуационные, речевые и стилистические ошибки негативно скажутся на репутации ресурса и компании.

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

Как улучшить юзабилити сайта: план действий и пять основных правил

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

1. Подобрать фокус-группу. Тестировщиков подбирают в соответствии с портретами ЦА (целевой аудитории) сайта. Например, будет неразумно спрашивать у группы мужчин, насколько удобен и полезен сайт с форумом для будущих мам.
2. Составить план тестирования. У тестирования юзабилити сайта должен быть четкий план, иначе будет сложно обрабатывать полученные данные. Лучше сформировать список вопросов и задач в соответствии с тематикой и типом ресурса. В плане тестирования интернет-магазина обязательно должны быть такие пункты, как удобство поиска товара и релевантность результатов, добавление и удаление товара из корзины, сложность связи с онлайн-консультантом.
3. Проконтролировать работу тестировщиков. Специалистам необходимо действовать по плану, но при этом отмечать все недочеты. Глобальные и незначительные ошибки юзабилити нужно зафиксировать.
4. Исправить выявленные ошибки юзабилити. Недочеты на сайте нужно устранить. Если бюджет ограничен, то каждой ошибке можно присвоить оценку по 10-балльной шкале, а затем начать устранять в соответствии с приоритетом.
5. Провести повторное тестирование. После исправления ошибок юзабилити необходимо провести повторное тестирование.

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

Правило № 1: 7 пунктов

Человеческий мозг не способен концентрировать внимание на более чем 5–9 объектах. Яркий тому пример — списки в текстах. Если в них больше 5–7 пунктов, вы начинаете забывать о том, что было в начале этого списка.

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

Правило № 2: две секунды

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

Правило № 3: три клика

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

Правило № 4: закон Фиттса

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

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

Правило № 5: перевернутая пирамида

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

---

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

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

Что такое юзабилити: критерии, примеры — Определение

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

На нашем YouTube-канале в записи вебинара Мария Зайцева, руководитель отдела интернет-маркетинга Bquadro Agency, рассказала о юзабилити, структуре сайта и технической оптимизации.




Почему юзабилити так важно?

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

Например, первое впечатление пользователей на 94% зависит от дизайна. Более того, 48% посетителей считают его показателем надежности бизнеса. Согласно статистике, человек оценивает внешний вид сайта всего 2-3 секунды. Поэтому, у вас есть буквально мгновение, чтобы произвести хорошее первое впечатление на посетителей, заинтересовать их и удержать.

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

Критерии оценки юзабилити сайта

Выделяют пять критериев оценки юзабилити. Ниже вы подробнее ознакомитесь с каждым из них.

• Легкость в изучении. По этому критерию оценивают простоту работы с сайтом. Изучают удобство навигации и наличие отвлекающих факторов таких как реклама или множественные pop-up.
• Эффективность. На основании этого критерия оценивают насколько быстро пользователь может ориентироваться на сайте и решать свои задачи.
• Запоминаемость. Этот критерий помогает оценить, насколько легко посетители ориентируются на сайте спустя месяц.
• Ошибки. На основании этого критерия изучают количество ошибок, сделанных пользователями и выявляют, насколько легко они смогли их решить.
• Удовлетворенность. Этот критерий помогает оценить, насколько пользователи довольны работой с сайтом.

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

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

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

• Проанализируйте скорость загрузки сайта. По статистике, 79% клиентов откажутся от повторной покупки в интернет-магазине, если у него долго загружаются страницы. Среднее время загрузки сайта не должно превышать 2-3 секунды. Однако, у высозагруженных приложений данный показатель выше. Поэтому, стоит провести анализ сайтов конкурентов и высчитать среднее время загрузки.
• Оцените удобство функционала. Изучите меню, качество поиска по сайту, проверьте все кнопки. Убедитесь, что при нажатии на логотип клиенты смогут попасть на главную страницу.
• Проанализируйте дизайн. Оцените цветовую гамму сайта и всех его элементов. Убедитесь, что ссылки оформлены в едином стиле. Проанализируйте соотношение размеров изображений, расположение текстовых блоков и их удобочитаемость. Помните, в дизайне главное, чтобы пользователь мог легко найти на сайте нужный продукт или услугу и решить свою проблему. Ничто не должно отвлекать или мешать ему выполнить конверсионные действия.
• Проведите маркетинговый анализ и выявите существующие проблемы. Оцените работу службы поддержки, удобство каналов коммуникации и найдите те препятствия, которые мешают купить товар или услугу. На этом этапе также можно изучить сайты конкурентов, чтобы увидеть, что можно улучшить.
• Составьте отчет и разработайте план по улучшению сайта. Систематизируйте собранные данные и проанализируйте их. Продумайте пошаговый план действий для решения выявленных проблем и повышения юзабилити.

При самостоятельном тестировании сайта можно использовать Google Analytics Content Experiments. Он позволяет проанализировать различные изменения и увидеть, как они влияют на уровень конверсии и показатель отказов. Чтобы узнать поведенческие факторы пользователей, выявить наиболее и наименее кликабельные элементы сайта, используют «Карту кликов» Яндекс.Метрики и статистику Google Analytics.

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

Как повысить юзабилити сайта?

Для повышения удержания посетителей на сайте и увеличения продаж, следуйте рекомендациям ниже:

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

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

Примеры сайтов с хорошим юзабилити

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

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

Образовательный журнал Tilda Education содержит руководства, статьи, видеоуроки и курсы на такие темы как SEO, SMM, контент-маркетинг, дизайн сайтов и так далее. Чтобы пользователи не потерялись среди обучающих материалов и легко находили необходимые темы, на первом экране сайта есть строка поиска, которая позволяет всего за несколько секунд найти нужные ответы. У сайта Tilda Education легкая навигация, грамотно продуманный дизайн и структура.

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

Ресурсы

1. На этом сайте вы ознакомитесь с базовыми критериями полноценного юзабилити.
2. В Serpstat узнаете о сервисах для проверки юзабилити.
3. В этой статье прочитаете о преимуществах анализа юзабилити для бизнеса.
4. На сайте vc.ru ознакомитесь с правилами юзабилити.

Обновлено: 15.04.2022

принципов юзабилити сайта | 5 ключевых принципов хорошего юзабилити веб-сайта

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

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

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

Это не означает, что удобство использования стало менее важным.

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

Юзабилити означает дизайн, ориентированный на пользователя.

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

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

1. Наличие и доступность

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

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

Вот несколько основных сведений о доступности.

• Время безотказной работы сервера . Важно убедиться, что ваши посетители не получат сообщение об ошибке при попытке загрузить ваш сайт. Инвестируйте в хороший хостинг. Инвестируйте в хороший хостинг. Мы никогда не экономим здесь, найдите хорошего веб-хостинга, на который вы можете положиться.
• Неработающие ссылки — Дважды проверьте, что на вашем сайте нет мертвых ссылок. Инструменты SEO, такие как Ahrefs и Screaming Frog, просканируют ваш сайт и найдут все неработающие ссылки.
• Адаптивность к мобильным устройствам –  Убедитесь, что ваш сайт поддерживает различные размеры экранов и медленные соединения. Google также перешел на индекс «сначала мобильные», что означает, что они индексируют мобильные версии сайтов. Таким образом, отличный мобильный сайт поможет вам улучшить результаты поиска.

Amazon.com

Amazon.com — прекрасный пример доступного веб-сайта по нескольким причинам.

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

Во-вторых, у Amazon.com почти нет простоев. Очевидно, это то, что вы ожидаете от компании такого размера. Тем не менее, история постоянной доступности делает Amazon надежной и заслуживающей доверия сервисной платформой.

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

2. Ясность

Можно сказать, что в основе удобства использования лежит ясность.

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

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

Ясный и удобный дизайн может быть достигнут с помощью:

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

Apple

Компания Apple известна своими экономичными и удобными продуктами.

Крайняя простота бренда и акцент на том, что действительно важно, также можно найти на их веб-сайте.

Общий вид очень элегантный и минималистичный. Здесь много пустого пространства, и только соответствующий контент представлен в чистом и прямолинейном виде. Классическое верхнее навигационное меню содержит логотип и кнопку «Домой», магазин, различные категории товаров, ссылку на страницу поддержки и функцию поиска. Нижний колонтитул сайта содержит классические вторичные ссылки, такие как Условия использования и Политика конфиденциальности.

Ничто не отвлекает, что упрощает достижение целей на сайте.

Например, выбрав категорию «Mac» в верхней панели навигации, вы получите визуальный обзор различных доступных продуктов Mac. Кроме того, вы получаете дополнительную навигацию со списком всех сопутствующих товаров, относящихся к этой категории. Четкий дизайн делает веб-сайт таким же интуитивно понятным в использовании, как и все другие продукты Apple.

3. Обучаемость

Обучаемость — еще один важный аспект удобства использования.

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

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

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

Microsoft

Компания Microsoft изменила дизайн своего веб-сайта в прошлом году.

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

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

Сайт очень чистый и удобный. Знакомая раскладка помогает людям быстро найти то, что они ищут.

4. Достоверность

Достоверность является важным аспектом любого веб-сайта.

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

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

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

Л’Ореаль

Бренд L’ORÉAL отлично справляется с созданием доверия в Интернете.

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

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

Помимо фактического исследования, бренд также использует отзывы экспертов и фотографии знаменитостей, таких как Джулия Робертс, чтобы убедить людей в качестве и популярности своей продукции. Еще одним показателем доверия является то, что с L’ORÉAL очень легко связаться. Бренд доступен не только через социальные сети, но также легко найти физический адрес и номер телефона.

5. Релевантность

И последнее, но не менее важное: релевантность способствует удобству использования веб-сайта.

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

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

Nike

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

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

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

Удобство использования означает тестирование, тестирование и еще раз тестирование

Хорошее удобство использования не достигается за одну ночь.

Это требует тщательного исследования пользователей и итеративного подхода постоянного тестирования и уточнения.

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

Введение в юзабилити-тестирование веб-сайта

You are here: Home / Терминология / Введение в юзабилити-тестирование веб-сайта

Томас Черм

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

Что такое

Юзабилити ?

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

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

Почему веб-сайт

Юзабилити важен?

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

Юзабилити-тестирование используется для тестирования всех форм взаимодействия людей с устройствами (Изображение предоставлено Mediamatic)

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

Что такое

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

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

Результат тестирования юзабилити с использованием устройства слежения за взглядом показывает, куда пользователь смотрел и сколько времени он смотрел (Изображение предоставлено — User Vision)

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

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

Типы

Юзабилити-тестирования Методы

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

(Примечание: как вы заметили, большинство этих методов предполагают наблюдение за пользователями. В качестве набора советов о том, как вы можете пригласить пользователей для участия в тестах юзабилити с помощью электронной почты, я бы порекомендовал прекрасную статью Эдди Джеймса «Приглашение заинтересованных сторон». Кому Юзабилити Сеансы: 14 советов и рекомендаций по рассылке приглашений по электронной почте“)

• Тестирование в коридоре: Использование случайных людей для тестирования веб-сайта, а не людей, обученных и имеющих опыт тестирования веб-сайтов. Этот метод особенно эффективен для тестирования нового веб-сайта в первый раз во время разработки.
• Удаленное Юзабилити Тестирование: Тестирование юзабилити веб-сайта с участием людей, которые находятся в разных странах и часовых поясах. Иногда удаленное тестирование выполняется с помощью видеоконференцсвязи, а иногда пользователь работает отдельно от оценщика. В настоящее время доступно различное программное обеспечение по относительно низкой цене, которое позволяет удаленно тестирование юзабилити должно проводиться даже наблюдателями, которые не являются юзабилити экспертами. Как правило, места кликов и потоки пользователей автоматически записываются, а также записываются любые критические инциденты, которые произошли во время использования сайта, а также любые отзывы, отправленные пользователем. Удаленное тестирование удобства использования позволяет записывать время, которое потребовалось каждому тестировщику для выполнения различных задач. Это хороший метод тестирования, потому что тесты проводятся в обычной среде пользователя, а не в контролируемой лаборатории.
  Существует широкий спектр программного обеспечения для удаленного тестирования удобства использования. На этом снимке экрана показано одно из таких программ — Usabilla
.
• Экспертная оценка: Эксперта в данной области просят оценить удобство использования веб-сайта. Иногда эксперта доставляют в испытательный центр для тестирования объекта, в то время как в других случаях тесты проводятся удаленно, а автоматические результаты отправляются обратно для проверки. Автоматизированные экспертные тесты, как правило, не такие подробные, как другие типы тестов.0182 удобство использования тестов, но их преимущество в том, что их можно выполнить быстро.
• Тестирование бумажного прототипа: Проще говоря, этот метод тестирования удобства использования включает в себя создание грубых, даже нарисованных от руки чертежей интерфейса для использования в качестве прототипов или моделей дизайна. Наблюдение за пользователем, выполняющим задачу с использованием таких прототипов, позволяет протестировать дизайнерские идеи с чрезвычайно низкими затратами и до того, как будет выполнено какое-либо кодирование. Дополнительные сведения о тестировании бумажных прототипов см. в статье « Бумажный прототип Как Юзабилити-тестирование Техника“
  Бумажный прототип приложения для iPhone (изображение предоставлено Golem.de)
• Анкеты и интервью: Благодаря своему характеру один на один, интервью позволяют наблюдателю задавать прямые вопросы пользователям (помимо двойной проверки того, что они на самом деле делают). Точно так же наблюдатель также может задавать вопросы с помощью вопросников. Преимущество анкет в том, что они позволяют более структурировать сбор данных . Однако они носят жесткий характер, в отличие от интервью.
  Юзабилити-тестирование Анкеты обычно передаются нам после того, как пользователь попытался выполнить данное задание (Изображение предоставлено Docstoc)
• Пошаговое руководство «Сделай сам»: Как следует из названия, в этом методе наблюдатель создает юзабилити тестовую ситуацию, создавая реалистичные сценарии. Затем он или она самостоятельно выполняет работу, как это сделал бы пользователь. Разновидностью этого метода является групповой обход, когда наблюдатель имеет несколько участников, выполняющих обход.
• Контролируемые эксперименты: Подход, аналогичный научным экспериментам, обычно включающий сравнение двух продуктов с тщательной статистической балансировкой в ​​лаборатории. Это может быть самый сложный метод «в реальном мире», но из-за его научной природы он дает очень точные результаты, которые в конечном итоге могут быть опубликованы. У-Сентрик)
• Автоматизация Юзабилити Оценка: Вероятно, Святой Грааль юзабилити тестирования. Были разработаны различные академические статьи и прототипы, чтобы попытаться автоматизировать тестирование удобства использования веб-сайта , и все они с разной степенью успеха. В этом блоге обсуждался один интересный подход — USEFul Framework Джастина Мифсуда. Вы можете прочитать об этом в статье «USEFul: платформа для автоматизации веб-сайта . Юзабилити . Оценка».0182 удобство использования рекомендации

Что делать после завершения

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

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

Хотите узнать больше?

Если вы хотите…

1. узнайте все подробности юзабилити-тестирования
2. получите простые в использовании шаблоны
3. научитесь правильно оценивать удобство использования системы/услуги/продукта/приложения и т. д.
4. научитесь сообщать результаты своему руководству Курс Проведение юзабилити-тестирования.

   Если, с другой стороны, вы хотите освежить в памяти основы UX и юзабилити, подумайте о том, чтобы пройти онлайн-курс User Experience. Удачи на вашем пути обучения!

   (Главное изображение: Depositphotos)

   В рубрике: Терминология С тегами: Юзабилити, Юзабилити-тестирование

   О Томасе Черме

   Эта статья была написана от имени OnlineClock.net, компании, которая занимается онлайн-будильником. Online Clock очень заботится об удобстве использования веб-сайта. Именно по этой причине они делают свои бесплатные онлайн-инструменты учета рабочего времени такими простыми в использовании и минималистичными. Зайдите на веб-сайт Online Clock сегодня, чтобы открыть для себя отличные примеры удобных веб-страниц!

   Юзабилити 101: Введение в юзабилити

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

   Что — определение юзабилити

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

   Удобство использования определяется 5 компонентами качества :

   • Обучаемость : Насколько легко пользователям выполнять основные задачи при первом знакомстве с дизайном?
   • Эффективность : Как быстро пользователи изучат дизайн, как быстро они смогут выполнять задачи?
   • Запоминаемость : Когда пользователи возвращаются к дизайну после периода его неиспользования, насколько легко они могут восстановить свои навыки?
   • Ошибки : Сколько ошибок совершают пользователи, насколько серьезны эти ошибки и насколько легко они могут исправить ошибки?
   • Удовлетворение : Насколько приятно пользоваться дизайном?

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

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

   • Определение Utility = предоставляет ли он необходимые вам функции .
   • Определение Удобство использования = насколько легко и приятно использовать эти функции.
   • Определение Полезный = удобство использования + полезность .

   Почему удобство использования важно

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

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

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

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

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

   Как повысить удобство использования

   Существует множество методов изучения юзабилити, но самым основным и полезным является пользовательское тестирование , которое состоит из 3 компонентов:

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

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

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

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

   Когда работать над удобством использования

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

   1. Прежде чем приступить к работе над новым дизайном, протестируйте старый дизайн , чтобы определить хорошие части, которые следует сохранить или выделить, а также плохие части, которые создают проблемы для пользователей.
   2. Если вы не работаете с интрасетью, протестируйте разработки своих конкурентов , чтобы получить дешевые данные о ряде альтернативных интерфейсов, которые имеют функции, аналогичные вашему собственному. (Если вы работаете с интрасетью, прочтите ежегодник по дизайну интрасети, чтобы узнать о других разработках.)
   3. Провести полевое исследование , чтобы увидеть, как пользователи ведут себя в своей естественной среде обитания.
   4. Сделайте бумажных прототипов одной или нескольких новых дизайнерских идей и протестируйте их. Чем меньше времени вы потратите на эти дизайнерские идеи, тем лучше, потому что вам нужно будет изменить их все на основе результатов тестирования.
   5. Усовершенствуйте проектные идеи, которые лучше всего тестируются, путем многократных итераций , постепенно переходя от низкоточных прототипов к высокоточным представлениям, которые запускаются на компьютере. Тестируйте каждую итерацию.
   6. Проверьте дизайн на соответствие установленным рекомендациям по удобству использования , будь то ваши собственные предыдущие исследования или опубликованные исследования.
   7. После того, как вы определитесь с окончательным проектом и реализуете его , протестируйте его еще раз. Тонкие проблемы с юзабилити всегда возникают во время реализации.

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

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

   Где проверить

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

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

   Логотипы, веб-сайты и многое другое…

   Логотипы, веб-сайты, обложки книг и многое другое…

   Получить дизайн

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

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

   Иллюстрация OrangeCrush

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

   • • Что такое удобство использования веб-сайта?
     • 5 принципов веб-юзабилити
     • Удобство использования и доступность
     • Дизайн для удобства использования веб-сайта
     • Тестирование на удобство использования
     • Удобство использования — важная часть отличного дизайна веб-сайта

   Что такое удобство использования веб-сайта?

   
   —

   Начнем с основ: что такое юзабилити сайта?

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

   Ясность и полезность — две цели удобства использования веб-сайта. Дизайн от akorn.creativeПростота – ключ к удобству использования. Дизайн Bluesjay

   Однако помимо этого основного определения кроется множество сложностей. На самом деле, вы быстро поймете, что сделать ваш сайт удобным для использования (сделав его простым!) — одна из самых сложных задач в веб-дизайне.

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

   5 принципов веб-юзабилити

   
   —

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

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

   Эти пять принципов являются наиболее важными аспектами удобства использования веб-сайта. Но может быть трудно увидеть, как эти элементы реализованы в реальном мире, поэтому давайте рассмотрим пример. Пожалуй, лучший пример удобства использования веб-сайта: Amazon.com.

   Через Amazon

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

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

   Юзабилити веб-сайта в сравнении с доступностью и UX

   
   —

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

   Инновационное сочетание изображения и текста может улучшить доступность и удобство использования. Дизайн Spoon lancer

   Доступность, как мы более подробно объясняем в нашей статье о доступном веб-дизайне, означает разработку веб-сайтов и приложений таким образом, чтобы они были доступны для людей с ограниченными возможностями. Это может означать обеспечение совместимости веб-сайта с различными вспомогательными устройствами или просто использование продуманного дизайна. По данным за 2012 год, почти каждый пятый американец имеет ту или иную инвалидность. Во всем мире примерно один миллиард человек, или 15 процентов населения мира, живут с инвалидностью. Делая свой веб-сайт доступным, вы избегаете потенциального отчуждения пользователей.

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

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

   UX означает обеспечение согласованных интерфейсов на нескольких устройствах. Дизайн Майка Барнса

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

   Дизайн для удобства использования веб-сайтов

   
   —

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

   Четкая навигационная структура является ключом к удобству использования в Интернете. Дизайн MercClass

    

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

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

   1. Исследование пользователей

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

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

   Например, пользователи, которым нужна подписка на доставку тортов, должны знать, как работает подписка. Дизайн веб-сайта от DSKY

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

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

   По своей сути домашняя страница Microsoft имеет очень простую структуру. Через Microsoft.com

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

   2. Структура

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

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

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

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

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

   Отличным примером простого, но эффективного структурного дизайна является веб-сайт Nike.

   Как и на веб-сайте Microsoft, навигация Nike очевидна. Через Nike.com

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

   3. Наймите веб-дизайнера

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

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

   Проверка юзабилити веб-сайта

   
   —

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

   Дайте пользователю то, что он хочет. Дизайн Мила Джонс Канн

   По этой причине юзабилити-тестирование является первым и последним шагом в процессе веб-дизайна.

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

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

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

   Удобство использования — важнейшая часть отличного дизайна веб-сайта

   
   —

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

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

   Нужен веб-дизайн, который выглядит великолепно и учитывает потребности пользователей?

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

   Получить дизайн сайта

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

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

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

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

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

   Плохой пользовательский опыт влияет на показатель отказов вашего сайта, рейтинг кликов и (в конечном итоге) вашу прибыль. Если пользователь недоволен веб-сайтом, он просто найдет другой веб-сайт, который соответствует его потребностям.

   Как только они уходят, их уже нет: 88% онлайн-пользователей вряд ли вернутся на веб-сайт после неудачного опыта.

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

   Большинство владельцев веб-сайтов не осознают, что их сайт неудобен для пользователя.

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

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

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

   Как убедиться, что ваш веб-сайт удобен для пользователя

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

   • Оптимизация для мобильных устройств
   • Следуйте стандартам WCAG
   • Придерживайтесь общих элементов дизайна
   • Создать визуальную иерархию
   • Упростить навигацию
   • Установить доверие
   • Убедитесь, что содержимое разборчиво
   • Будьте последовательны

   Давайте углубимся.

   Оптимизация для мобильных устройств

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

   Это дико, ведь 92% всех интернет-пользователей выходят в интернет с мобильного устройства.

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

   Ожидается, что к 2021 году мобильная коммерция вырастет на 22,3% или на 3,56 триллиона долларов. На самом деле, если вы не будете искать за границей, вы можете оставить много денег на столе. Например, примерно 75% продаж электронной коммерции в Китае приходится на мобильные устройства.

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

   Существует множество способов сделать свой веб-сайт удобным для мобильных устройств. Например, возможно, самый быстрый способ — использовать адаптивную тему для своего сайта. Это темы, которые адаптируют ваш контент к разным размерам экрана (см. ниже).

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

   Это не относится к мобильным устройствам, где 75% пользователей перемещаются и кликают, используя большой палец, а 49% кликают одной рукой. Подумай об этом. Как часто вы пользуетесь телефоном одной рукой, особенно когда идете или занимаетесь чем-то другим?

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

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

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

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

   Следуйте стандартам WCAG

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

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

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

   Слуховая инвалидность

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

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

   Когнитивные

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

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

   Физические

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

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

   Речь

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

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

   Зрение

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

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

   WCAC руководствуется четырьмя основными принципами соблюдения своих стандартов веб-доступности.

   Если ваш веб-сайт воспринимается, работает, понятен и надежен как можно большему количеству людей, вы соответствуете этим стандартам.

   Придерживайтесь общих элементов дизайна

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

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

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

   Чего вы ожидаете, когда заходите в сеть ресторанов быстрого питания, таких как McDonald’s? Вы стоите в очереди, делаете заказ на кассе, а когда еда будет готова, вам звонят. Это довольно стандартный опыт.

   Но что, если вы пришли в McDonald’s, и сотрудник усадил вас за столик. Они принесли вам несколько меню и спросили, что вы хотите выпить. Затем они вернулись через пять минут, чтобы принять ваш заказ, имитируя изысканный ужин.

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

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

   Согласно этому исследованию, это наиболее стандартные элементы, которые люди ожидают увидеть при посещении веб-сайта:

   • Логотип в верхней части экрана
   • Контактная информация в правом верхнем углу экрана
   • Горизонтальная навигация по главному меню в заголовке вверху каждой страницы
   • Строка поиска в шапке
   • Социальные сети следуют за значками в нижнем колонтитуле

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

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

   Вот хороший пример от наших друзей из Crazy Egg.

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

   Создать визуальную иерархию

   Глазу человека требуется 2,6 секунды, чтобы остановиться на области веб-сайта, которая вызовет его первое впечатление. Это то, что происходит непроизвольно.

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

   Представьте себе, что вы попали на веб-сайт с 20 изображениями на главной странице. Куда смотреть в первую очередь? Вот хороший пример плохого дизайна от наших друзей из штата Олд Лайн:

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

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

   Вот пример. Посмотрите на эти четыре круга и расположите их в порядке важности.

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

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

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

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

   • Размер. Чем больше, тем лучше.
   • Цвет. Яркие цвета привлекут внимание посетителей.
   • Контраст. Разнообразные цвета могут подчеркивать (или ослаблять) элементы на вашей странице.
   • Негативное пространство. Пространства, которые вы не используете, так же важны, как и те, которые вы используете.
   • Выравнивание. Посетители обычно читают сверху вниз и слева направо, когда они попадают на веб-страницу по образцу F.

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

   Упрощение навигации

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

   Как пользователь переходит с главной страницы на страницу оформления заказа? Сколько времени это занимает? Сколько кликов им нужно сделать?

   Все эти факторы необходимо учитывать. Посмотрите на 10 главных причин отказа от корзины.

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

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

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

   Допустим, вы ведете простой блог. Как посетители попадают с главной страницы на ваш блог? Как организованы записи в вашем блоге? Могут ли они искать определенный пост?

   Все это связано с навигацией.

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

   Завоевание доверия

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

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

   Вот чего ожидают люди, когда попадают на домашнюю страницу.

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

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

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

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

   Создание четких и видимых элементов безопасности (HTTPS/SSL, значки и т. д.) также имеет большое значение для установления доверия. Как только вы завоюете доверие к своему веб-сайту, ваши посетители будут чувствовать себя непринужденно.

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

   Убедитесь, что ваш контент читабелен

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

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

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

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

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

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

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

   Будьте последовательны

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

   Например, давайте проанализируем эту страницу продукта от Lululemon.

   Вы увидите все эти элементы на страницах товаров:

   • Изображения товаров слева
   • Название продукта вверху справа
   • Цена ниже наименования продукта
   • Описание справа
   • Выбор цвета ниже описания
   • Добавить в корзину справа внизу

   Все очень просто и понятно. В этом макете нет абсолютно ничего плохого.

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

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

   Заключение

   Удобство использования веб-сайта может создать или разрушить его успех. Если у посетителей не будет хорошего опыта, они не вернутся.

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

   • Оптимизация для мобильных устройств. Держите элементы веб-сайта в пределах досягаемости большого пальца.
   • Доступность веб-сайта. Убедитесь, что ваш веб-сайт может быть прочитан и доступен большему количеству людей.
   • Общие элементы дизайна. Знакомый дизайн позволяет новым посетителям легко ориентироваться на вашем сайте.
   • Визуальная иерархия. Помогает вашим читателям сосредоточиться на самом важном на вашем веб-сайте.
   • Простая навигация. Убедитесь, что все ваши навигационные кнопки используются специально, и направляйте своих читателей по правильному пути.
   • Достоверность. Оправдайте ожидания ваших читателей на каждой из ваших страниц.
   • Разборчивое и сканируемое содержимое. Не забивайте читателя кучей текста, который он не будет читать.
   • Согласованность от страницы к странице. Сохраняйте единую тему, макет и цвет на всем веб-сайте.

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

   Введение в удобство использования и взаимодействие с пользователем в веб-дизайне

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

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

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

   Почему удобство использования и взаимодействие с пользователем имеют жизненно важное значение

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

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

   Давайте разберемся, почему оба эти элемента так важны:

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

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

   4 Основы юзабилити в веб-дизайне

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

   1. Очистить навигацию

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

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

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

   Однако сайт Moller не является идеальным примером удобства использования. Постоянное использование видеофона может повлиять на производительность на некоторых устройствах. Это может быть проблемой, поскольку производительность также влияет на удобство использования.

   2. Производительность

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

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

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

   3. Читаемость

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

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

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

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

   4. Отзывчивость

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

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

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

   Заключение

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

   Что касается удобства использования, то для достижения наилучших результатов необходимо помнить о четырех основных принципах:

   1. Четкая навигация:  Чем проще просматривать ваш сайт, тем счастливее будут ваши пользователи.
   2. Производительность:  Медленные веб-сайты теряют посетителей, поэтому вам необходимо оптимизировать производительность.
   3. Удобочитаемость:  Ваш контент должен легко читаться, чтобы он не смущал и не раздражал.