Что такое юзабилити сайта: критерии, особенности, советы
Время прочтения: 7 минут
О чем статья?
- Почему важно соблюдать принципы юзабилити сайтов?
- Принципы юзабилити web-ресурса
- Тестирование юзабилити
Юзабилити (от английского usability — удобство использования) — это качественная оценка простоты и комфорта работы с сайтом. Пользователь должен без труда находить нужную информацию, не теряясь в функционале и многочисленных страницах, и при этом получать эстетическое удовольствие от работы с ресурсом.
Почему важно соблюдать принципы юзабилити сайтов?
- Конверсия. Правильно продуманная навигация подтолкнет пользователя выполнить целевое действие: позвонить в компанию, скачать прайс-лист, заказать товар, воспользоваться услугой и т.д. Важно грамотно выстроить повествование и структуру, ведь если посетитель задумается хотя бы на несколько секунд или не сразу поймет, что делать дальше — можно его потерять.
- Посещаемость. Пользователь вернется на сайт только в том случае, если ему понравится с ним работать. А потому ресурс должен быть удобным и понятным со всех позиций: текст, навигация, интерфейс, последовательность действий и т.д. Благодаря обилию выбора современному потребителю не приходится долго разбираться в тонкостях работы с сайтом: сложно здесь — он перейдет к конкурентам, у которых понятнее и проще.
Анализ юзабилити важен для того, чтобы исправить недоработки текущего сайта и повысить продажи, и еще важнее — чтобы с самого начала разработать удобный для пользователей сайт.
Принципы юзабилити web-ресурса
Разработка юзабилити сайта базируется на главном правиле: «чем проще — тем лучше».
Чем более привычную структуру и интерфейс видит пользователь — тем легче ему сориентироваться и тем меньше времени он потратит, чтобы найти нужный раздел, т.к. будет чувствовать себя более уверенно.
1. Дизайн — залог доверия к сайту
Не перегружайте визуальную часть множеством деталей, цветов и динамичных элементов. Пользователя ничего не должно отвлекать от восприятия информации. А при длительном нахождении на ресурсе он не должен уставать от обилия контраста, плохой читабельности текста, разноплановой графики. Упор — на минималистичный дизайн: в сумме с уникальностью следует продумать сочетание цветов фона и шрифта, число и вид изображений.
Еще один важный момент: грамотно продуманный «внешний вид» сайта — залог доверия со стороны потребителя, попавшего к вам впервые.
Пример сайта, перенасыщенного графикой. Дизайн пестрит рассеивающими внимание цветовыми сочетаниями, обилием картинок.
2. Логичный структурированный контент
Один из главных факторов юзабилити — удобное восприятие текстов. Структура, оформление, информативность, логическая разбивка, оптимизация, отсутствие ошибок — все эти параметры важно учитывать при написании статьи. Если это длинный текст-руководство — сделайте оглавление в виде ссылок, чтобы пользователь мог быстро найти нужный раздел.
Согласно отчетам компаний Clicktale и CX Partners, длина страницы не влияет на то, будет ли пользователь изучать контент ниже или нет. Важнее грамотно продуманная структура графики и текста: выделение приоритетной информации, последовательность расположения.
3. Важная информация — в левом углу
Посетители просматривают web страницу по F-образному шаблону: внимание концентрируется в верхнем левом углу и ограничивается первыми несколькими абзацами текста в убывающем порядке. Потому при распределении важной информации использование такой схему увеличит вероятность того, что посетитель быстро найдет нужные данные, увидит самое важное, бегло пробежавшись по разделу взглядом.
4. Общение с пользователем
Успешная регистрация, принятый заказ, несуществующая страница — человек должен быть всегда в курсе происходящего. Причем во всех подробностях. Если он зарегистрирован в системе — расскажите, что делать дальше, если заказ принят: укажите номер, время ожидания звонка, контактные данные; если попал на страницу 404 — как найти нужную информацию или куда вернуться.
Попав на такую страницу 404, пользователь не растеряется и, скорее всего, не сразу покинет ресурс.
5. Отмена действия
У человека должна быть возможность передумать. К примеру, социальная сеть ВКонтакте позволяет восстановить страницу после ее удаления. Некоторые интернет-магазины — изменить или удалить заказ после его оформления, откорректировать способ доставки и оплаты. Все это — составные части юзабилити веб сайта.
6. Ненавязчивое предложение помощи
Не нужно настаивать на общении. Большие выскакивающие окна с предложением помочь в выборе, цветная полоска с номером телефон, занимающая треть экрана — подобные элементы не только смотрятся навязчиво, отталкивают посетителя, но и закрывают часть функционала. В примере ниже — форму подбора товара. Окно помощи должно легко скрываться, потому крестики и другие подобные значки нужно делать заметными, а не полупрозрачными или сливающимися с фоном.
Лучше, чтобы изначально данная форма была в свернутом состоянии, но при этом заметной — к примеру, в виде яркой боковой вкладки.
И при этом не перекрывала часть контента на странице. Последнее относится и к кнопкам социальных сетей.
7. Разговор на понятном языке
Не делайте упор на специализированные термины — говорите проще, чтобы пользователю не пришлось тратить время на толкование непонятного слова. Если без узких понятий, пояснений не обойтись — разрабатывайте всплывающие окна. Это же касается заполнения форм: если вы диктуете определенные условия в виде длины имени, пароля, формата телефона, допустимой географии — укажите это в виде подсказок.
8. Отказ от резких перемен
Это касается пунктов меню, названия и вида кнопок, их расположения. Представьте перестановку в любимом супермаркете: после года ежедневных покупок вы вдруг замечаете, что руководство решило поменять местами отделы, товары, сделать редизайн. И теперь молоко стоит на прилавке для сметаны, каши — там, где раньше были масла, а вместо замороженной вишни вы находите свиные почки.
То же самое относится к веб-дизайну: пользователь не только потратит больше времени, но и разочаруется, заметив, что вместо значка корзины теперь — «Добавить товар», вместо «Каталог» — «Продукция», а привычные объемные кнопки обтекаемой кнопки стали плоскими и рублеными. Потому задумав «перестановку», не шокируйте посетителя — изменения должны быть постепенными и не менять кардинально привычную структуру.
9. Все возможности — на виду
Удачное решение — когда пользователь видит все разделы, в которые может перейти, т.к. в любой момент может быстро сориентироваться, где находится и как вернуться обратно. Если на сайте планируется много контента — резонно предусмотреть горизонтальное верхнее, вертикальное меню (и то, и другое — возможно, с подразделами), а также «подвал».
Если категорий очень много — добавьте пункт «Карта сайта», который позволит пользователю сориентироваться, какие разделы содержит ресурс и как ему туда попасть. Не стоит пренебрегать «хлебными крошками» — навигационной цепочкой в верхней части блока контента, которая подсказывает, по какой схеме человек попал на страницу.
Пример удачной карты сайта
10. Форма регистрации и заказа: чем лаконичнее — тем лучше
Чем больше полей для заполнения — тем меньше пользователю хочется тратить на это время. Причем компоновка полей, надписей, подбор шрифтов могут быть идеальными, а вот длина — отталкивающей. Современные основы юзабилити заставляют веб-разработчиков сокращать длину этих форм до минимума, нещадно выкидывая вопросы об образовании, уровне дохода, профессии и т.д. Но! Сравните две формы: несмотря на наличие всего пары дополнительных полей, заполнять первую хочется меньше, чем вторую.
11. Заметное длинное поле поиска
Соответствующая кнопка — лучший помощник посетителя. Особенно если речь идет о крупном ресурсе. Строку поиска пользователь должен обнаружить без труда. Чтобы при первом знакомстве он не тратил на обнаружение соответствующей строки даже несколько секунд.
Еще один важный момент — длина поля поиска. Согласно исследованию Якоба Нильсена, в среднем туда вмещается 18 символов, а оптимальная длина — 27 символов. В 90% случаев сюда поместится даже длинный запрос, чтобы пользователь его полностью увидел и исправил при надобности. Для установки нужной ширины используйте относительную единицу «em», равную размеру используемого шрифта.
Строка поиска — не в шапке сайта, а под презентацией, внизу страницы. Не самый удобный вариант, учитывая, что пользователь автоматически ищет эту опцию в верхней части сайта.
12. Больше свободного пространства
Сайт можно сравнить с жилой комнатой: если каждый квадратный метр чем-то занят — человек будет чувствовать себя неуютно. Аналогично и здесь: если страница будет переполнена полезными блоками, разделами, ремарками и прочей информацией — посетитель потеряется и не поймет, куда устремить внимание в первую очередь. Современный дизайн склонен к минимализму: на странице — только самое важное.
Множество блоков с практически незаметными рамками, обилие разнообразной графики, отсутствие выделения приоритетной информации не дают понять, на что обращать внимание в первую очередь при попадании на сайт.
После того как все принципы юзабилити учтены, переходят к тестированию, которое проводится постоянно, т.к. любая ошибка может оттолкнуть потенциального клиента.
Тестирование юзабилити
Новый интерфейс оценивается с двух позиций:
- Качественная.
В данной категории анализируется функциональность ресурса, целевая направленность, грамотность составления структуры и подготовки контента, а также другие параметры, перечисленные в предыдущем разделе. Важно проверить сайт на ошибки: битые ссылки, редиректы, внешний вид страницы 404 и т.д. - Количественная. Здесь оценивается скорость загрузки страниц, время отклика, перехода между страницами, поиска нужного раздела или кнопки.
Тестирование проводится самостоятельно либо при помощи специальных сервисов — к примеру, Яндекс.Метрики. Чтобы оценить юзабилити своими силами, нужно набрать группу из 5-6 человек из категории целевых пользователей, подготовить для них задания и вопросы по работе ресурса, сделать выводы из полученных результатов, исправить найденные ошибки. После внесенных изменений следует заново собрать фокус-группу.
Важно применять правила юзабилити не в самый последний момент: чем раньше разработчик начнет планировать структуру и внешний вид будущего ресурса — тем больше аспектов продумает, более качественный результат получит и сможет без спешки внести все коррективы.
Предварительно следует проанализировать сайты конкурентов, выявив их слабые и сильные стороны, а также оценить предыдущий ресурс при его наличии, обнаружив моменты, требующие улучшения.
Автор: Виктория Закирова, копирайтер<br> Соавтор: Алевтина Данилова, руководитель отдела юзабилити «Ашманов и партнёры»
Юзабилити сайта 📱, основные принципы и правила юзабилити веб-ресурса
Юзабилити сайта – это удобство использования ресурса, адаптация для пользователей. Сайт может быть красивым, но в это же время люди не должны испытывать сложности при работе с ним. Удобство сайта включает в себя целый набор функций, принципов: навигация, правильное расположение панели управления, большие иконки, другие.
Ключевые принципы юзабилити сайта
К основным принципам юзабилити стоит отнести:
- удобную навигацию,
- быструю загрузку веб-страниц,
- минимальное время отклика,
- упрощенные формы регистрации,
- горизонтальные, вертикальные панели управления,
- акцентные зоны,
- крупные и хорошо заметные иконки,
- упрощенную структуру,
- наличие перелинковки.
Удобство веб-ресурса не только привлекает пользователей, но и выполняет другие важные функции:
- вызывает интерес у клиентов или читателей, способствуя тому, чтобы они провели на сайте максимальное количество времени, осуществляли переходы по внутренним страницам;
- повышает лояльность поисковых систем, что способствует привлечению естественного трафика;
- оказывает положительное влияние на общие показатели конверсии.
Позаботиться об удобстве стоит еще на стадии front-end разработки. В будущем web-ресурс необходимо постоянно тестировать, обновлять, дополнять виджетами, прочими интересными новинками. Рассмотрим основные правила юзабилити сайта, которые помогут существенно улучшить ресурс.
Читайте также:
Юзабилити-аудит сайта, как первый шаг к увеличению дохода
#SEO продвижение #SEO аудит #Юзабилити #Продажи
Правильный дизайн – всему голова
Дизайн должен полностью соответствовать тематике ресурса.
При выборе цвета для оформления стоит обратиться к психологам, ведь:
- красные оттенки вызывают раздражение, но в это же время повышают аппетит, снижают уровень концентрации внимания. Последний фактор может стать причиной увеличения объема импульсных покупок;
- фиолетовый вызывает депрессию;
- голубой, зеленый, белый, черный, синий цвета – универсальные, они позволяют сохранить баланс между красотой и престижностью.
В дизайн стоит вплетать элементы брендирования, а также уникальные торговые предложения – название вашей торговой марки или компании клиент запомнит на подсознательном уровне.
- При работе с дизайном стоит избегать следующих ошибок:
- непонятные, слишком витиеватые шрифты;
- отсутствие адаптивности, версии для слабовидящих;
- слишком мелкие и плохо заметные иконки: корзина, обратный звонок, купить сейчас, другие;
- отсутствие четкой структуры;
- плохая навигация;
- огромное количество рекламы в рамках монетизации.
Рекламные объявления не только раздражают посетителей, но и существенно замедляют загрузку-веб страниц.
Не стоит забывать о добавлении кнопок социальных сетей, с помощью которых посетители смогут расшаривать информацию, бесплатно повышая индекс цитирования. Веб-ресурсы, перегруженные обилием цветов или рекламы, отталкивают людей, отвлекая их от выбора товара или изучения информации.
Качественный контент
Работая над удобством юзабилити сайта, вы должны повышать качество контента:
- четкая структура, включающая заголовки, подзаголовки. Можно выделять жирным шрифтом или курсивом самые важные цитаты. Стоит вшивать в тексты ссылки, которые помогут пользователям быстро найти тематическую информацию;
- добавление содержания статьи, что позволит разделить ее на логические блоки — это в целом улучшает восприятие;
- дополнение контента картинками, фотографиями, видео, схемами, другими материалами. Все это улучшает читаемость, а также существенно повышает релевантность.
Короткие тексты малоинформативные, слишком длинные – практически никто не дочитывает до конца. Поэтому стоит соблюдать баланс, а также учитывать ошибки конкурентов, регулярно выполняя аналитику.
Коммуникация, как важный элемент юзабилити веб-сайта
Не каждый человек является гуру в вопросах работы в интернете, поэтому для неопытных юзеров стоит внедрить ряд мер, направленных на коммуникацию:
- добавление онлайн-консультанта;
- внедрение тематических блоков: с этим ищут, ТОП-10 популярных товаров, с этим покупают, выбор пользователей в этом месяце, другие;
- использование функции обратного звонка, форм обратной связи.
Однако предложения о помощи не должны быть слишком агрессивными, ведь навязчивость чаще раздражает, чем радует.
Экспертность
Более 50% пользователей обращают внимание на отзывы, мнения других клиентов. Поэтому стоит дополнить веб-ресурс системой рейтингов, блогом, звездами для оценки товаров.
Также стоит отказаться от слишком сложных и длинных капч, большого количества ссылок на одной веб-странице.
Подведем итоги
Пользователь сразу же оценивает сайт. Около 10-15% потерь клиентов происходят в первые 3-5 секунд коммуникации человека с интерфейсом. Оттолкнуть людей может медленная загрузка, отсутствие гарантий безопасности, слишком яркая расцветка – любые факторы. Веб-сайты необходимо постоянно тестировать, подключая контрольные группы. Независимые эксперты смогут быстро найти причины, которые отталкивают потенциальных клиентов. Тестировка выполняет поэтапно:
- подбор тестировщиков, понимающих специфику вашей работы, проблемы целевой аудитории;
- составление пошагового плана тестирования;
- выполнение работы, изучение отчетов, ликвидация ошибок, повторение процесса тестировки.
Устранение ошибок позволит улучшить юзабилити, что положительно скажется на количестве уникальных посетителей и месте в поисковой выдаче!
Статей, видеороликов, отчетов, учебных курсов и онлайн-семинаров по веб-юзабилити от NN/g
- Самые последние
- Только видео
- Только статьи
Чтобы создать доступные визуальные элементы, учитывайте цветовой контраст, не полагайтесь только на цвет, сделайте интерактивные элементы легко идентифицируемыми, предоставьте полезный альтернативный текст для изображений и протестируйте свои визуальные элементы с реальными пользователями.
Инструкции по калибровке должны быть четкими, контрастными, описательными и дополнены однозначными наглядными примерами. Пользователям должна быть предоставлена четкая обратная связь о результатах их действий и о ходе калибровки.
Сетки помогают дизайнерам создавать согласованные макеты, позволяя конечным пользователям легко просматривать и использовать интерфейсы. Хорошая сетка адаптируется к разным размерам и ориентациям экрана, обеспечивая согласованность на разных платформах.
Обучаемость — важнейший компонент UX для сложных и новых интерфейсов. Когнитивные пошаговые руководства могут выявить проблемы дизайна, которые сбивают с толку новых пользователей.
Проверьте свои знания в области юзабилити, пройдя наш тест.
Все вопросы и ответы основаны на статьях, опубликованных нами в прошлом году.10 эвристик юзабилити Nielsen можно использовать для анализа UX приложений, поддерживающих сложные рабочие процессы в предметной области.
Сегодняшние пользователи перегружены множеством всплывающих окон, инициируемых сайтами и браузерами, с содержанием, не связанным с их текущей задачей.
Болевые точки — это проблемы, возникающие на разных уровнях клиентского опыта: на уровне взаимодействия, на уровне взаимодействия с клиентом или на уровне взаимоотношений.
Чтобы создавать доступные визуальные элементы, учитывайте цветовой контраст, не полагайтесь только на цвет, делайте интерактивные элементы легко идентифицируемыми, предоставляйте полезный альтернативный текст для изображений и тестируйте свои визуальные элементы с реальными пользователями.
Инструкции по калибровке должны быть четкими, контрастными, описательными и дополнены однозначными наглядными примерами. Пользователям должна быть предоставлена четкая обратная связь о результатах их действий и о ходе калибровки.
Сетки помогают дизайнерам создавать согласованные макеты, позволяя конечным пользователям легко просматривать и использовать интерфейсы. Хорошая сетка адаптируется к разным размерам и ориентациям экрана, обеспечивая согласованность на разных платформах.
Обучаемость — важнейший компонент UX для сложных и новых интерфейсов.
Когнитивные пошаговые руководства могут выявить проблемы дизайна, которые сбивают с толку новых пользователей.Проверьте свои знания в области юзабилити, пройдя наш тест. Все вопросы и ответы основаны на статьях, опубликованных нами в прошлом году.
10 эвристик юзабилити Nielsen можно использовать для анализа UX приложений, поддерживающих сложные рабочие процессы в предметной области.
Сегодняшние пользователи перегружены множеством всплывающих окон, инициируемых сайтами и браузерами, с содержанием, не связанным с их текущей задачей.
Болевые точки — это проблемы, возникающие на разных уровнях клиентского опыта: на уровне взаимодействия, на уровне взаимодействия с клиентом или на уровне взаимоотношений.
Проверьте свои знания в области юзабилити, пройдя наш тест. Все вопросы и ответы основаны на статьях, опубликованных в прошлом году.
Инструменты дополненной реальности для электронной коммерции относительно новы, поэтому они должны быть легко обнаруживаемыми и простыми в освоении. Проблемы с калибровкой множатся, и пользователи должны уделять особое внимание взаимодействию с этой незнакомой функцией.
Дополненная реальность — захватывающая технология, но опыт ее использования не впечатляет, что ухудшает общее восприятие ее полезности.
Внимательно изучите контекст пользователя, поставленную задачу и следующие шаги, когда решаете, открывать ли ссылки на документы и внешние сайты в той же или новой вкладке браузера.
Исследования, проведенные за 20 лет, доказывают, что PDF-файлы проблематичны для онлайн-чтения. Тем не менее, они по-прежнему распространены, и пользователи продолжают теряться в них.
Они неприятны для чтения и навигации и остаются непригодными для отображения цифрового контента.Принуждение пользователей к просмотру PDF-файлов вызывает разочарование и замедляет выполнение задач по сравнению со стандартными веб-страницами. Используйте PDF только для документов, которые пользователи будут распечатывать. В таких случаях следование 10 основным рекомендациям сведет к минимуму проблемы с удобством использования.
С 1995 по 2001 год Якоб Нильсен написал 250 статей с ранними выводами о юзабилити, которые по-прежнему верны, но также содержали прогнозы желаемых изменений, которые не произошли.
Несмотря на увеличение скорости Интернета, скорость веб-страниц со временем не улучшилась.
Списки и раскрывающиеся списки — это компактные элементы управления пользовательского интерфейса, которые позволяют пользователям выбирать параметры. Списки сразу же предоставляют параметры и поддерживают множественный выбор, в то время как раскрывающиеся списки требуют щелчка, чтобы увидеть параметры, и поддерживают только одиночный выбор.
Люди все чаще находят важную информацию в Интернете без активного поиска, но такая информация имеет плохой контекст и может вызывать сомнения в достоверности.
Подумайте, как ваша аудитория будет использовать визуальные эффекты, чтобы определить оптимальный угол камеры, задать правильный тон, выбрать правильный реквизит и удерживать внимание.
У людей с нормальным зрением (или зрением скорректированным до нормального) зрительные функции, как правило, улучшаются в светлом режиме, в то время как у некоторых людей с катарактой и связанными с ней расстройствами лучше работает темный режим. С другой стороны, длительное чтение в легком режиме может быть связано с близорукостью.
Топ-10 ошибок веб-дизайна (видео)
Резюме: Якоб Нильсен осуждает 10 ужасных недостатков дизайна, которые мешают современным веб-сайтам, по мнению аудитории на его программном докладе Virtual UX Conference.
от 2021-10-29 21
- Якоб Нильсен
- Якоб Нильсен
Темы:
основной доклад, ошибки проектирования, веб-тенденции, веб-юзабилити, веб-дизайн / дизайн пользовательского интерфейса
- Веб-юзабилити Веб-юзабилити
Поделиться этой статьей:
https://www.youtube.com/watch?v=VGxze7xMYJs
Для отображения видео у вас должны быть включены JavaScript и файлы cookie.
Связанный артикул
10 основных ошибок веб-дизайна
Крупномасштабное исследование юзабилити выявило самые распространенные и вредные ошибки современного веб-дизайна.
