Юзабилити текста: Юзабилити Тестирование Сайта — Plerdy — Заработок в сети Интернет. Как заработать на дому в Интернете. Удаленная работа в сети.

Содержание

Юзабилити Тестирование Сайта — Plerdy

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

Как провести юзабилити-тестирование сайта?
Что такое юзабилити-тестирование сайта? Как написать заголовок для юзабилити-тестирования сайта?
Какие виды юзабилити-тестирования мне следует проводить на сайте?
Как провести юзабилити-тестирование веб-сайта до его создания?
Что проверять при тестировании юзабилити сайта?
Сколько вы можете заработать на тестировании юзабилити веб-сайта?

Андрей Чорный, CEO Plerdy. Тема: Юзабилити сайта: поколение Z и что изменилось в восприятии сайта?

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

Что такое юзабилити-тестирование

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

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

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

Разница между UI и UX на примере бутылки с кетчупом.

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

Разница между UI и UX на примере пешеходных дорожек.

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

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

Варианты исследования пользовательского поведения	Компоненты комплексного аудита веб-сайта
Интервью	Технический аудит
Онлайн опросы	Аудит контента сайта
Анкетирование	Проверка семантического ядра
Дерево испытаний	Аудит целевой страницы
Карточки	Проверка работы аналитических служб
А/Б тесты	Ссылочный аудит
Создание персон	Анализ конкурентов
Тест кликов	Проверка качества внутренней оптимизации
Навигационный тест	Маркетинговый аудит
Текст 5 секунд	Аудит возможностей развития
Тестирование юзабилити	Юзабилити аудит

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

На практике взаимосвязь между UI-дизайном, UX-тестом и юзабилити аудитом проявляется по следующей схеме:

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

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

Почему юзабилити-тестирование важно

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

1 $ вложенный в вопросы UX-тестирования возвращает обратно 100 $.

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

К чему приводит отсутствие юзабилити-тестов.

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

Если же вместо аудита пользовательского интерфейса вы решите заказать дополнительную рекламу и проигнорируете мнение посетителей, то произойдет следующее:

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

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

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

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

Юзабилити-тест — это возможность возобновить неудачные стартапы.

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

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

Как проверить юзабилити сайта: разбираем готовый кейс

Из этого раздела вы узнаете, что такое юзабилити-тестирование на примере. Мы проанализируем интернет-магазина wesco-shop.us и дадим рекомендации по его улучшению. Если планируете запускать Google Ads, заниматься SEO-продвижением или менять дизайн, то аналогичный анализ понадобится и вам. В одном из следующих разделов мы поговорим о том, как проверить юзабилити самостоятельно. Если вам некогда ждать — воспользуйтесь услугами специалистов.

Как проводить юзабилити-тестирование

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

Какова цель юзабилити-тестирования	Гипотезы	Задачи
Определить причину снижения продаж на 50% и понять, почему грамотная стратегия продвижения сайта привела к отрицательному результату.	1. Техническая неполадки. 2. Неправильная сео-оптимизация. 3. Проблемы в настройках рекламы. 4.Некачественный контент. 5. Умышленные действия конкурентов.	1. Провести технический аудит и определить возможный неисправности. 2. Провести повторный анализ семантического ядра и использованных ключей. 3. Связаться с рекламодателям и проверить смысл опубликованных объявлений. 4. Пересмотреть блок и оценить качество опубликованных статей. 5. Проверить ютуб и тематические форумы на предмет отрицательных отзывов и критики.

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

Неподтвержденные проблемы	Очевидная проблема	Гипотеза, нуждающаяся в дополнительной проверки
Умышленные действия конкурентов. Это гипотеза не подтвердилась потому, что инструменты тестирования юзабилити помогли быстро проанализировать популярные ресурсы на предмет негатива со стороны третьих лиц. Никакой активности не обнаружено.	Некачественный контент. За контентное наполнение сайта отвечает три раздела: «Блог», «Карточки товаров» и «Новости». В большинстве «Карточек товаров» нет описания, фото и видео. Есть только базовый перечень характеристик, которые сами по себе не рекламируют товар. В разделе «Блог» мало публикаций. При этом каждая опубликованная статья написана с ошибками и не выполняет никакого полезного действия — не приносит пользу читателю. В разделе «Новости» только корпоративная информация, которую не интересно изучать даже сотрудникам компании.	Техническая неполадки. На некоторых устройствах часть страниц медленно загружается и не отображается так, как это было в первоначальной верстке. Еще проблемы с видеороликами, которые не воспроизводятся на планшетах и смартфонах.
Проблемы в настройках рекламы. Рекламодатели дали обратную связь и подтвердили качество составленных объявлений.
Неправильная сео-оптимизация. Специалисты провели запросы, за счет которых статьи попадают в ТОП-3 Яндекса и Гугла. Все сделано правильно и продвижение проходит по нужным ключам.

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

Коридорный метод тестирования — это когда небольшая группа пользователей поочередно проверяют возможности продукта или сайта, а модератор (организатор теста) фиксирует процесс через приложение для тестирования пользователей. Когда задание выполнено — действия пользователей анализируются и используются для улучшения юзабилити.
Удаленное тестирование пользователя — это когда модератор наедине беседует с респондентами (целевой аудиторией) и узнает информацию через скайп, телефон или другой способ связи. Далее беседы фиксируются и используется для переработки юзабилити.
Дистанционное не моделируемое тестирование юзабилити — это когда пользователи не общаются с модератором и тестируются через специальную программы. В этой программе есть перечень заданий, который каждый из пользователей должен выполнить так, как он считает нужным. Например, можно попросить респондентов найти контактные данные владельца сайта. Когда задание составлено, модераторам остается зафиксировать возникающие проблемы и на их основе переработать сайт.
Проведение А/Б тестов — это когда создается несколько версий продукта и пользователь может выбрать лучший вариант. Больше информации про А/Б тестирование читайте в статье про оптимизацию конверсии сайта.
Экспертная оценка — это когда для анализа продукта привлекается квалифицированный специалист, способный без целевой аудитории обнажить все проблемные места. Например, если нужно проанализировать мебельный сайт, то для экспертной оценки подойдет опытный продавец мебели. Поскольку такой человек всю жизнь принимал заявки на мебель, то именно он может подсказать о тех нюансах, которые повысят показатели сайта.

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

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

Запомнить

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

Юзабилити аудит сайта — Plerdy

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

Ведь проблема современных ресурсов в том, что пользователь постоянно задает себе вопрос: Где я? Что я здесь делаю? Как мне найти, то что меня интересует?

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

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

Как результат наличие трафика, а конверсия остается, скажем так, недостаточной. На первый взгляд, кажется что нужно больше вкладывать в SEO продвижение или контекстную рекламу, но к сожалению проблема не разрешиться. Ведь, если надо искать форму регистрации, кнопку “Купить” или номер телефона — задача со звездочкой для посетителя, который к сожалению не будет ее решать. Если ресурс сложный, то с него попросту уходят. Чтобы понять какие проблемы возникают у посетителей с сайтом проводится аудит юзабилити. Юзабилити аудит – эффективный метод проверки интерфейса с точки зрения его удобства для пользователей. Главными «экспертами» в юзабилити аудит становятся представители аудитории, для которых был создан веб-проект. Метод оценки показывает реальные результаты, поскольку никто не найдет слабые места интерфейса лучше, чем те, кто им пользуются.

Как провести юзабилити аудит? Материал будет полезен и интересен UX-дизайнерам, менеджерам проекта (Product Owner) и всем, кто тесно связан с разработкой интернет-продукта.

Задачи, которые решает юзабилити аудит

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

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

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

Поэтому, юзабилити аудит нужно:

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

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

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

Типы юзабилити аудита сайта

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

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

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

Юзабилити аудит вам нужно делать, когда есть трафик. Но тут есть свои моменты.

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

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

Юзабилити аудит оптимизация сайта

Что нужно проверять в процессе аудита юзабилити:

Вербальное + Визуальное восприятие – как воспринимается текст, изображения, графическое содержание?
Цель страницы – какую задачу она должна выполнять – информировать, рекламировать, продавать, развлекать?
Гипотезы – удобно или неудобно пользоваться этим сайтом?
Проверка – проверяем карту кликов, Google Analytics. Даже полностью одинаковые по дизайну и содержанию сайты дают разные показатели отказов, кликов, % конверсии.

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

Как использовать карту кликов для юзабилити аудита?

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

Возможности сайта
CTA
Где именно кликают пользователи
Как сайт работает в целом
Глубина прокрутки
Содержание – вверху или внизу
Процент отказов
Дизайн

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

Пример юзабилити аудита Google Store

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

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

15 плюсов юзабилити аудита, о которых вы не знали

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

Конкурентное преимущество
Улучшая usability вы получаете приоритетность в глазах потенциальных покупателей. Поскольку ресурс удобный, посетители находят что нужно и становятся вашими клиентами. Конкуренты остаются далеко позади. Но, важно помнить, что работать над изменениями сайта или интернет-магазина нужно только после аудита. Если планово внедрять рекомендации, тестировать, мониторить и фиксировать показатели, то высокие результаты не заставят себя ждать.
Адаптива сайта
Корректное отображения вашего сайта на всех устройствах — решает все. В самом деле, кто бы ни был ваш потенциальный покупатель: бизнесмен или современная девушка-модница — он пользуется разными девайсами, он заходит в сеть с телефона или планшета, и он совершает покупки таким же образом. Так почему же о нем забывать?
Анализ технического параметра поможет выявить проблемы с адаптивными вариантами и конечно же все поставить на исправления.
Как видим на скрине, при оставлении отзыва не полностью помещается окно подтверждения
А в горизонтальном положении меню налазит одно на другое:
Скорость загрузки сайта
Третьим после адаптивности идет скорость загрузки вашего сайта. Клиент не будет ждать — надо это воспринимать как свершившийся факт.
Но нужно прилагать усилия и работать в этом направлении доводя показатели к минимальной черте. Удалять видео и фото, которые утяжеляют сайт, ненужные страницы, фильтры или неинформативные блоки. Например, с мобильной версии забрать лишние элементы, чтобы физически их не было на странице, поскольку из-за него долго грузится страница
Интересный контент
Информативное наполнения карточек товара привлечет внимание пользователей и добавит вам плюсов к интернет-карме. Серьезно, никто не будет ломать голову и читать ваши тексты вдоль и в поперек, чтобы извлечь полезное для себя. Потому стоит потрудиться над оптимальным и качественным наполнением блога, карточек товара, чтобы широко отвечали на ваш запрос. Оценка юзабилити укажет на преимущества и минусы ваших материалов. У вас на руках будут все козыри как лучше работать с контентом. Как видим, страница санатория “Богема” открывается с фотографией плохого качества и совсем непонятной для пользователя:
Поисковое продвижения
Юзабилити влияет на ранжирование в поисковых системах. Когда ваш сайт или интернет-магазин удобный, то улучшается поведенческий фактор. На основе этого уменьшается процент отказов, растет время пребывания на страницах и просмотр каждой. Целевая аудитория более заинтересована в нем и соответственно — это позитивный сигнал для поисковиков. Улучшая юзабилити вы получаете небольшие бонусы и быстрее выходите в ТОП.
Целевой трафик
Поскольку сайт, благодаря оптимизации выходит в топ, то и трафик возрастет. Если вы работаете над разными каналами и у вас все отлично с юзабилити, то и клиенты будут возвращаться через другие каналы трафика. Растет общий поведенческий фактор.
Изменения в лучшую сторону
После аудита вы узнаете, что именно нужно исправить в первый момент, что мешает грамотной работе ресурса уже сейчас. Ненужный функционал, длинная форма регистрации, большое окно с рекламой — это то, что убивает ваш трафик и средства на продвижения.
Только доскональная диагностика покажет истинные барьеры на пути к достижению важных показателей.
Например, форма поиска на главной странице работает неправильно ничего связанного с поиском Hot deal не нашло.

Значит нужно в срочном порядке исправлять, ведь посетители тоже не находят.
Крутые рекомендации
Можно не только исправлять с помощью аудита, но еще и усовершенствовать сайт или интернет-магазин. Учитывая потребности целевой аудитории добавлять интересные фишки: к примеру отзывы об интернет-магазине, просмотр товаров в цветовой гамме или ваши преимущества в цифрах. Главное, точно знать, что действительно привлекает клиентов, будущих и постоянных.
Веб-аналитика сайта
Важно не просто выявить и устранить ошибки, а постоянно мониторить фидбек от корректив и доработок. Фиксировать достижения, и снова вносить правки на основе аналитики.
Для отслеживания результативности изменений по юзабилити используем Google analytics и тепловые карты кликов Plerdy. Наглядно узнаете что больше всего по вкусу вашим пользователям. А также оценить работу ресурса в целом по функционалу, дизайну или технической части. Нужная и полезная информация как на ладони.
Лояльность и повторные продажи
Возможно скажем уже известный факт, но если клиенту у вас понравилось, он придет за добавкой. Вы получаете не только повторные продажи, а лояльность посетителей и рекламу в стиле “сарафанного радио”. Безусловно, в чек лист по юзабилити внесено и соблюдения этого параметра.
Средний чек
Увеличения размера среднего чека. Да, да, именно так, когда все процессы отлажены и клиент совершает Заказ/Покупку/Регистрацию, любое целевое действие, то можно предложить ему больше. Всевозможные кросс и ап сейли, подборки и целые решения здесь работают на ура! Например, с помощью е-mail кампаний.
Классный дизайн для вашего сайта и/или интернет-магазина
После юзабилити аудита внедряйте интересные решения по дизайну и стилю не только для всего ресурса в целом, а и для отдельных элементов, блоков или страниц. Узнаете что нужно действительно, а что сыграет с вами злую шутку. Редизайну бить — несомненно.
Нет кнопки Подробней/ перейти дальше или Купить.
Экономия средств на продвижения
Не будем напоминать о том, что usability аудита- шаг вперед! Выполняя рекомендации, сокращается процесс конвертации посетителя в покупателя, а следуя и затраты на клиента. Также грамотно планируются и рекламные кампании. Ведь при прежнем бюджете вырастут продажи.
Уникальность дизайна
Среди шаблонных сайтов, стандартных интернет-магазинов нужно выделяться. А зачастую, происходит наоборот, мы смотрим на сайт конкурентов и делаем такой же. В этом возможно и есть доля правды, посмотрели, узнали и пошли делать другой. Уникальный дизайн станет визитной карточкой в море аналогичных предложений.
Правило трех кликов
Простая рекомендация гласит: нужная информация доступна пользователю за три клика. Только три щелчка мышкой — и результат. У теории есть и сторонники и противники, но мы советуем сделать использование ресурса максимально простым.

И в заключения

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

Пример Анализа Юзабилити Сайта — Plerdy

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

Юзабилити сайта: Поколение Z и что изменилось в восприятии сайта?

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

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

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

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

Для чего проводить юзабилити тестирование?

В интернете юзабилити — это воздух, которым дышит веб-сайт:

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

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

Пример юзабилити аудита apple.com

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

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

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

4. Не стоит добавлять к заголовку иконки.

5. На страницах категорий каждый элемент блока является активным и имеет ссылки

На нем также присутствует текст «Learn more», который получил те же ссылки, что блок. Рекомендуется для эффективного продвижения сайта этот текст убрать, или забрать из него ссылки.

6. Эти элементы лучше переделать на span с сохранением стилей.

Рекомендуется эти блоки сделать активными и предоставить им ссылку из текста «Learn more».

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

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

9. Интересным оказался поиск. Он предлагает разные варианты. После SEO-аудита, рекомендуется добавить в варианты поиска 10 фраз, которые популярны среди пользователей.

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

11. Рекомендуется вывести в корзину список всех категорий для лучшей конверсии.

12. В магазине аксессуаров стоит добавить заголовок Н1.

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

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

Юзабилити оптимизация мобильной версии сайта

1. Рекомендуется обрезать это меню.

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

3. Главное меню не закреплено. В мобильной версии это также неудобно, как и для ПК.

4. Этот текст рекомендуется скрыть с помощью так называемой «выпадалки». То есть показать абзац текста, а остальные открывать при нажатии «Читать дальше». Это значительно уменьшит длину скролла, что позитивно повлияет на продвижение сайта.

5. Список выбора стран лучше разделить на два столбца. Это значительно уменьшит длину страницы.

Выводы

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

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

Юзабилити. Веб консалтинг. Вебаналитика

Веб консалтинг

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

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

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

Зачем нужен анализ юзабилити сайта, преимущества:

— повышение конверсии посетителей в покупателей;
— увеличение заинтересованности и удовлетворенности ваших пользователей;
— повышение лояльности пользователей к Вашей компании.

В состав исследования юзабилити интернет-магазина входят следующие этапы:

Аудит всех сервисов сайта: удобно ли посетителю заказывать у вас товары, как организован поиск по сайту;

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

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

Анализ содержимого на страницах: не мешает ли содержимое просмотру страниц, уместна ли реклама, представленная на сайте, анализ устройства шаблонов внутренних страниц;

Анализ качества всех текстов: выполняют ли тексты на сайте свои задачи, правильно ли они отформатированы, информативны и привлекательны ли заголовки;

Анализ части связанной с клиентами: анализ корректности работы формы заказа, как обрабатываются поступающие заказы, анализ доступности контактной информации;

Анализ корректности отображения сайта в различных браузерах, а также скорости его загрузки.

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

Наши преимущества:

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

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

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

11 примеров ошибок дизайна сайта

По данным портала dev.by, в целом по Беларуси в отрасли «Компьютерных и информационных услуг» насчитывается более 930 компаний.

Общее количество дизайнеров, программистов и тестировщиков просто зашкаливает. Как говорится, спрос порождает предложение.

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

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

1. Крошечные кликабельные области

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

Гиперссылки, неудобные для нажатия

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

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

<a href="http://www.examplesite.com">

2. Пагинация используется не по назначению

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

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

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

Использование пагинации не по назначению приводит к 2 основным проблемам:

Это действительно раздражает! Кому нравится загружать несколько страниц просто для того, чтобы прочитать одну статью? Таким образом создается барьер для посетителей сайта, которые покинут его после первой или второй страницы.
Вторая причина связана с SEO (поисковой технической оптимизацией). Поисковые системы анализирует содержимое на страницах, чтобы понять, о чем она, а затем индексируют ее соответствующим образом. Если же контент разбивается на несколько страниц, то каждая отдельная страница имеет все меньше смысла сама по себе и содержит меньше ключевых слов по конкретной тематике. А это негативно влияет на рейтинг страницы в поисковой выдаче.

3. Дизайн выглядит как навязчивая реклама

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

Дизайн выглядит как навязчивая реклама

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

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

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

4. Разрешение экрана

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

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

Горизонтальная прокрутка усложняет навигацию

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

5. Фоновая музыка

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

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

Кроме того, не существует такого проигрывателя, который подошел бы под все браузеры. Тот, который будет работать в Google, не подойдет, например, для Opera или Mozilla. А если код с проигрывателем не прогрузится, то будет отображаться пустое место, что вряд ли хорошо повлияет на дизайн вашего сайта.

6. Повторяющиеся заголовки страниц

Названием страницы является фрагмент текста, который пишется между тегами <title></title> в разделе <HEAD> HTML-кода.

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

Хорошее название помогает пользователям понять содержание страницы

Следует помнить, что <title> не только отображается в верхней части окна браузера, но и на страницах поисковой выдачи. Когда пользователи получают список страниц результата поиска, они изначально читают заголовки, чтобы быстро выяснить содержание каждой страницы из списка и выбрать наиболее подходящую. Одно это является веской причиной для того, чтобы потратить немного времени на оптимизацию заголовков страниц.

Оптимизация заголовка для поисковых систем

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

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

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

7. Контент, который трудно понять

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

Контент трудно понять

Текст трудно воспринимать из-за обилия шрифтов и цветов

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

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

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

Вот несколько советов:

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

8. Нет возможности для коммуникации

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

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

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

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

9. Отсутствие поиска

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

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

Реализовать окно поиска на сайте достаточно легко.

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

10. Длинная форма регистрации

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

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

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

Длинная форма регистрации

11. Постоянная ссылка, ведущая в никуда

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

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

301 редирект является своеобразной инструкцией, хранящейся на сервере, которая перенаправляет посетителей на новые соответствующие страницы. Так что, если кто-то зайдет на сайт, используя старую ссылку, он не будет видеть страницу «ошибки 404» («Страница не найдена»): 301 редирект автоматически перенаправит в нужное место, при условии, что он установлен правильно. Код ответа сервера «301 Moved Permanently» обозначает тип перенаправления – постоянное.

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

Поэтому для устранения проблем и ошибок лучше всего обратиться за помощью к профессионалам в Usability аудите сайта и редизайне WEB сайта.

10 эвристик юзабилити Якоба Нильсена, проиллюстрированных дизайн-решениями Revolut

Несколько недель назад мы провели веб-семинар под названием «Анализ необанков: аудит UX/UI и детальный разбор проблемного сектора с особым упором на стратегию Revolut». В этом нам помогли два великих профессионала Feri Muck и Ivan Muck. Мы рассмотрели Revolut с трех аспектов: бизнес-стратегия, UX-и UI-дизайн.

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

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

10 эвристических принципов для мобильных интерфейсов

Якоб Нильсен консультировал и обучал юзабилити-инжинирингу, когда начал изучать множество паттернов. В 1994 году он собрал и выпустил…

1. Видимость статуса системы

Первая эвристика из списка Нильсена – это видимость состояния системы.

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

Тем не менее, они разместили индикатор прогресса, и пока я оставался на этом экране, процент выполнения не изменился. Поэтому было непонятно, что делать в данный момент, следует ли оставаться ждать на этом экране, пока индикатор не изменится на 100%, или нет? Я могу покинуть этот экран?

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

Эвристика Нильсена №1 «Видимость состояния системы»

2. Соответствие между системой и реальным миром

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

Концептуальная и ментальная модели в дизайне интерфейсов

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

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

Эвристика Нильсена №2 «Соответствие системы и реального мира»

И описание опции отслеживания доставки обещает, что, если я нажму на нее, я увижу текущее местоположение карты. Вместо этого меня просят подтвердить адрес доставки, а затем говорят, что карточка должна была быть доставлена. Текст кнопки сбивает с толку: «Got it» означает, что я понимаю полученную информацию, или, что моя карта была доставлена? И как видите, избавиться от этого варианта мне не удалось.

Отслеживание доставки с помощью сбивающего с толку UX текста кнопки

3. Пользовательский контроль и свобода

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

Эвристика Нильсена №3 «Контроль и свобода пользователей»

4. Последовательность и стандарты

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

Интересная особенность работы мозга, заключается в том, что существует так называемое декларативное знание. Например, после определенного периода применения последовательности чисел «2 3 5 6» она станет процедурным знанием, мы запомним паттерн «Z». Процедурные знания требуют меньше когнитивной работы. Поэтому, когда вы отображаете числа в случайном порядке всякий раз, когда пользователь открывает приложение, вы увеличиваете когнитивную нагрузку. Конечно, это продиктовано соображениями безопасности, но вы должны знать об этом недостатке.

Эвристика Нильсена №4 «Последовательность и стандарты»

5. Предотвращение ошибок

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

Эвристика Нильсена №5 «Предотвращение ошибок»

6. Распознавание вместо необходимости вспоминать

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

Эвристика Нильсена №6: «Распознавание, вместо необходимости вспоминать»

7. Гибкость и эффективность использования

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

Эвристика Нильсена №7 «Гибкость и эффективность использования»

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

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

Эвристика Нильсена №7 «Гибкость и эффективность использования»

8. Эстетичный и минималистичный дизайн

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

Эвристика Нильсена № 8 «Эстетичный и минималистичный дизайн»

9. Помогите пользователям распознавать, диагностировать и устранять ошибки

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

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

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

Эвристика Нильсена №9 «Помогите пользователям распознавать, диагностировать и устранять ошибки»

10. Справка и документация

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

Эвристика Нильсена №10 «Справка и документация»

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

Эвристика Нильсена №10 «Справка и документация»

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

Иконки + метки

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

Рядом с иконками нет меток

Если мы посмотрим на Руководство Material Design, там говорится, что «лучше всего сочетать иконки с текстовыми метками, особенно если иконка не имеет очевидного значения».

Существуют исследования, подтверждающие этот аргумент, например, Google измерил, что, когда они заменили иконку рукописного ввода текста в виде змеи, вовлеченность пользователей увеличилась на 25%.

Из выступления Анны Потаниной на Google Conversions 2018

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

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

Пустые состояния

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

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

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

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

Примеры пустых состояний внутри приложения Revolut

Визуализация данных

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

Однако есть и ряд проблемных моментов. Например, размер шрифта справа от диаграммы слишком мал (и недостаточно контрастности).

Пустое состояние бесполезно, а его UX-текст слишком роботизирован («Нет данных для отображения»), и это упущенная возможность обучения.

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

Пример визуализации данных внутри Revolut

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

Еще одно примечание: все скриншоты сделаны мной (если не указано иное), скриншоты iOS сделаны на iPhone 8, а скриншоты Android – на Huawei P20 Pro.

Правила юзабилити сайта — Веб-студия WebTend г. Екатеринбург

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

Что такое usability, и почему это важно?

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

Круг, один из самых известных юзабилити-специалистов в мире, пишет:
«Ясность и простота веб-страницы – как хорошее освещение для витрины магазина, при них все кажется лучше».

Люди в целом и пользователи интернета в частности стали очень нетерпеливы. По данным Nielsen Norman Group, они проводят на одной странице в среднем 27 секунд и редко прокручивают страницу до конца. Якоб Нильсен объясняет это тем, что «в интернете огромное количество бесполезной информации. Поэтому если бы пользователи подробно изучали каждый из открытых сайтов, они никогда бы не отключались от сети и не жили бы реальной жизнью».

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

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

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

Юзабилити и веб-разработчики

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

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

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

Особенности восприятия информации в интернете

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

Правила и приемы юзабилити

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

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

Навигация

1. Рекомендуется делать одинаковую навигацию на всех страницах сайта
2. На всех страницах должен быть логотип или название сайта (обычно на него «вешают» также ссылку на главную страницу). Традиционное расположение логотипа – верхний левый угол
3. В шапке сайта и в «подвале» должна находиться контактная информация (хотя бы телефон)
4. На всех страницах сайта должно быть меню первого уровня (а желательно, и второго)
5. На странице должно содержаться название раздела
6. Желательно расположение указателя «Вы находитесь здесь» (выделение текущего раздела в меню, «хлебные крошки»)
7. На странице должно быть понятно, что является ссылкой, а что нет. Рекомендуется выделять ссылки одинаково на всех страницах, а также делать их подчеркнутыми.

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

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

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

1. В идеале форма поиска должна размещаться на всех страницах сайта в верхней области (традиционно, верхний правый угол).
2. Оптимальная длина поля для ввода запроса – 27-30 символов
3. Поиск на сайте должен быть только внутренним (по сайту). Не следует предлагать пользователям поиск на внешних ресурсах, в интернете, так как для этого существуют глобальные поисковые системы.
4. Оформление страницы с результатами поиска должно быть максимально приближенно к странице выдачи глобальных поисковых систем: содержать поле для ввода запроса с введенным посетителем запросом, список результатов должен содержать заголовок (со ссылкой), краткое описание, можно также добавить URL или раздел, к которому относится результат.
5. Используйте функцию проверки орфографии, как в глобальных поисковых системах. При вводе поискового запроса с ошибкой следует выводить строку «Возможно, Вы имели в виду [правильное написание запроса]?»

Главная страница

Главная страница – это лицо сайта, поэтому:

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

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

Текст и его оформление

При написании текста для сайта можно сформулировать два основных правила:

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

По оформлению текста можно дать следующие рекомендации:

1. Размер основного шрифта должен быть не меньше 12 px (что примерно соответствует привычным 10 pt в MS Word) пунктов.
2. При подборе шрифтов следует пользоваться относительными величинами (а не фиксированным размером).
3. При выборе типа шрифта следует ориентироваться на то, что на мониторе (в отличие от бумаги) более удобно читается текст, набранный шрифтом «без засечек». Для справки, шрифты «без засечек»: Arial, Arial Black, Verdana, Tahoma, шрифты «с засечками»: Times New Roman, Georgia.
4. На сайте не следует использовать более четырех разных цветов текста. Не следует также забывать, что пользователи придают одинаковое значение элементам, которые визуально выглядят одинаково.
5. Не следует использовать только прописные буквы, так как при этом снижается скорость чтения и затрудняется восприятие.
6. Текст и фон должны быть достаточно контрастны, лучший вариант – черный текст на белом фоне. Следует избегать таких сочетаний цветов как красный текст на синем фоне, оранжевый – на темно-зеленом и другие, так как подобные сочетания цветов порождают «эффект дрожания» и создают сильную нагрузку на зрение.
7. Пользователи негативно относятся к мигающему тексту и бегущим строкам, поэтому следует избегать подобных приемов.

Дизайн для людей с ограниченными возможностями

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

Приемы, которые помогут сделать сайт общедоступным:

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

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

Что делать, если сайт уже существует?

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

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

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

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

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

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

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

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

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

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

На что обратить внимание или критерии юзабилити

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

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

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

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

6 ОСНОВНЫХ КРИТЕРИЕВ ПОВЫШЕНИЯ ЮЗАБИЛИТИ ВЕБ-РЕСУРСА:

1. Предоставление информации, которая является для посетителя гарантом надежности.

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

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

3. Адаптивность сайта.

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

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

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

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

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

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

Почему Вам следует уделять особое внимание удобству (юзабилити) Вашего сайта?

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

Ключевыми параметрами эффективности юзабилити интернет-магазина являются:

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

При работе над юзабилити сайта рекомендации могут быть следующими.

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

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

Если у посетителя вашего сайта появятся дополнительные вопросы, либо он не найдёт нужной информации на странице сайта, он всегда сможет обратится к вам с вопросом.

При юзабилити сайта конверсия интерфейса основывается на следующих основных принципах:

Понятная и удобная навигация. Основные разделы размещаются в горизонтальном меню, а дополнительные разделы в вертикальном меню. Хорошо продублировать в футере главное меню. На сайтах со сложной структурой, желательно вывести перечень всех категорий и подкатегорий на отдельную страницу в виде интуитивно понятного списка.
От отсутствия ошибок Вас защитит только ежедневное тестирование. Некорректная работа сайта, неправильные ссылки или неработающие кнопки выливается в потерю посетителей и возможных клиентов. Нерабочий сайт никому не интересен, но от ошибок никто не застрахован, а для этого случая оформите свою страницу 404, стилизованную под Ваш сайт.
Максимально информативное оформление шапки сайта (хэдера), на которой большинство посетителей дольше всего задерживают свой взгляд, даже не прокручивая вниз веб-страницу. Если в шапке нет такой информации как меню или контактных данных, то вряд ли посетитель будет тратить время на поиски нужной ему информации. В хэдере (шапке) размещаются данные, на которые, в первую очередь, нужно обратить внимание посетителей.
Чтобы информация легко воспринималась на сайте должно быть довольно просторно, а текст нужно оформить с большим шрифтом и нормальным междустрочным интервалом. Чем меньше на странице баннеров, иконок, различных кнопок, анимации и всякой ненужной информации, тем комфортнее на сайте посетителю.
Качество текста обеспечивает доверие посетителя к Вашему сайту. Грамотно написанный текст, передающий смысл раздела сайта и исчерпывающую информацию, написанный без ошибок и красиво отформатированный, привлечет внимание потенциального покупателя. Посетителю самому захочется прочитать Ваш текст, если в тексте будут заголовки и подзаголовки, важная информация и ключевые слова выделены жирным шрифтом или маркерами, текст будет разбит на абзацы из 3-4 предложений, а также будут использованы нумерованные или маркированные списки
На сайте обязательно должен быть фильтр и поисковая строка, ведь большинство посетителей посещает данный сайт с целью побыстрей найти какую-либо информацию.
Львиная доля посетителей очень нетерпеливы (особенно молодежь) и они хотят «мгновенно» получить искомую информацию. Удовлетворить это требование посетителя может только быстрая скорость загрузки сайта. Вы должны за десяток секунд информировать о себе посетителя, заинтриговать его и заставить совершить дальнейшие действия, так как посетитель, в среднем, проводит на странице сайта 27 секунд и если за это время он не найдет нужную ему информацию, а будет ждать пока все это время сайт будет загружаться, то он уйдет с сайта.
Правило трех кликов – посетитель должен получить всю искомую информацию в три клика мышью. Если Ваш сайт сложен по структуре, то лучше уделить больше внимания на интуитивность и упорядоченность информации на сайте. Если посетитель будет прекрасно понимать о его местонахождении на сайте и как он может попасть на другие страницы или на главную страницу, то даже двадцать кликов его не остановят.
F- и Z-паттерны. Среднестатистический посетитель сайта разглядывает информацию на сайте по определенной траектории, выглядящие в форме букв F и Z. Вся важная информация располагается по траектории этих букв.

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

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

Этот процесс можно назвать конверсией. Конверсия юзабилити своей конечной целью имеет превращение посетителя сайта в Вашего клиента.

12 рекомендаций по типографике для удобного использования веб-сайта

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

Элементы и цель

Типографика

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

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

Разборчивость и удобочитаемость веб-сайта

Удобство использования

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

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

Удобство использования

Фактор Типографика

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

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

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

Типографика Рекомендации для веб-сайта Юзабилити

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

Сохраняйте минимальное количество используемых шрифтов: Использование большого количества шрифтов (более 3 различных шрифтов) делает веб-сайт неструктурированным и непрофессиональным
Используйте шрифты без засечек вместо шрифтов с засечками для содержимого: Шрифты без засечек больше подходят для экрана, чем шрифты с засечками, которые лучше подходят для заголовков и печати
Убедитесь, что используется правильный текст и размер текста: Рекомендуется, чтобы Arial Trebuchet и Georgia были на 10 пунктов +, Times New Roman на 12 пунктов +, в то время как шрифты Comic Sans и Impact не использовались
В содержимом должны использоваться смешанные заглавные буквы: Если весь текст заглавными или маленькими заглавными буквами, пользователю будет сложно читать и сканировать его.Текст заглавными буквами делает веб-сайт непрофессиональным и ненадежным
Использовать стандартные шрифты для шрифтов веб-сайта: Пользователи лучше знакомы со стандартными шрифтами и, таким образом, могут читать их быстрее
Интервал между символами не следует уменьшать: Изменение интервала между символами для размещения большего количества текста делает его более плотным и затрудняет сканирование
Ограничьте использование разных цветов для шрифтов: Если текст чрезмерно оформлен, это влияет на его значение.Кроме того, пользователи могут принять чрезмерно разработанный текст за рекламу. Таким образом, рекомендуется использовать 4 или менее разных цветов для раскрашивания текста
Не использовать синий для содержимого: Пользователи связывают синий текст со ссылками и поэтому могут попробовать нажать на него
Избегайте окрашивания текста в красный или зеленый цвет: Поскольку дальтонизм является распространенным заболеванием, особенно среди мужчин (8% мужчин страдают дальтонизмом), рекомендуется всегда использовать другие подсказки в дополнение к цвету, чтобы различать важный текст.Также рекомендуется избегать использования красного и зеленого цветов, так как дальтонизм красного и зеленого цветов является наиболее распространенной формой дальтонизма
Не используйте одинаковые или похожие цвета для текста и фона: Чем более заметен текст, тем быстрее пользователи смогут его отсканировать и прочитать
Числа, состоящие из 5 или более цифр, должны иметь разделитель тысяч: Разделитель тысяч упрощает пользователям быстрое сканирование и интерпретацию чисел
Не используйте движущийся или мигающий текст: Несмотря на то, что технологии, с помощью которых они реализованы, изменились, эти методы, которые использовались нами с первых дней Интернета, все еще встречаются на некоторых веб-сайтах.Их цель все та же — привлечь внимание пользователей. Однако они создают непрофессиональное изображение и могут привести к тому, что пользователи покинут веб-сайт.

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

Если вас интересует пересечение UX и UI-дизайна, подумайте о том, чтобы пройти онлайн-курс UI Design Patterns for Successful Software или альтернативно Design Thinking: The Beginner’s Guide. Если, с другой стороны, вы хотите освежить в памяти основы UX и юзабилити, вы можете пройти онлайн-курс по пользовательскому опыту (или другой теме дизайна).Удачи в вашем познавательном путешествии!

(Изображение: wilhei через Pixabay)

Читаемость | Удобство использования и веб-доступность

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

Заголовки

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

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

В коде базовой веб-страницы заголовки делятся на шесть рангов: от

до

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

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

. Если эти под-идеи следует разделить дальше, используйте заголовки

и так далее. Заголовки должны быть информативными и полезными.

Некоторые другие передовые практики для заголовков включают:

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

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

Уровень чтения

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

Некоторые рекомендации по удобочитаемости включают:

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

Форматирование текста

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

Некоторые передовые методы форматирования текста включают:

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

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

UX Исследования, обучение и консалтинг

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

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

Стоимость: сколько хлопот и боли мне приходится переносить на этом сайте?
Преимущества: что это для меня, что я получу, если прочту эту информацию?

Определенно предоставить преимущества пользователям.Зачем еще есть сайт? Но вам также необходимо уменьшить препятствия для его использования (т.е. снизить стоимость). В случае онлайн-копии препятствия для использования делятся на 3 категории: разборчивость, удобочитаемость и понимание, каждая из которых определяется и обсуждается ниже.

Разборчивость

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

Основные рекомендации по обеспечению удобочитаемости:

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

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

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

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

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

Читаемость

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

Основные рекомендации по обеспечению читаемости:

Используйте простые слова, чем короче, тем лучше. Избегайте вымышленных слов и словосочетаний.
Используйте короткие предложения. Избегайте запутанных структур предложений, особенно сложных предложений с множеством придаточных предложений и союзов, которые создают нагрузку на кратковременную память пользователей, что является заведомо слабым местом. (Последнее предложение уже немного подталкивает 🙂
В основном пишите активным голосом.(Пассивный голос может использоваться в редких случаях, когда он позволяет предварительно загрузить ключевые термины.)
Стремитесь к уровню чтения 8 ^{-го класса}, если нацелены на широкую потребительскую аудиторию.
Если вы пишете для образованной или специализированной аудитории B2B, все равно ориентируйтесь на уровень чтения, который на несколько ступеней ниже уровня формального образования аудитории. 12 ^th — уровень чтения часто является хорошей целью для облегчения чтения текста для читателей с высшим образованием. (У статьи, которую вы сейчас читаете, уровень чтения 11 ^th, и я надеюсь, вы найдете ее удобочитаемой.)
Помните, что письмо на уровне чтения N ^th — другое дело, чем письмо для учащихся, которые в настоящее время посещают школу в этом классе. Существуют специальные рекомендации по дизайну для маленьких детей, подростков и миллениалов, и это не то, что мы хотим от обычных веб-сайтов для взрослых пользователей. Нам просто нужны слова и предложения, соответствующие этому уровню образовательных достижений, но написанные зрелым тоном.

Проверка читаемости

Читаемость обычно оценивается компьютером.В Интернете есть множество калькуляторов удобочитаемости, и в Microsoft Word встроена общая формула: в Word 2013 уровень чтения Флеша-Кинкейда доступен в разделе Review> Spelling & Grammar . (В некоторых версиях Word статистику удобочитаемости необходимо сначала включить в меню Файл> Параметры> Проверка .)

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

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

Понимание

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

Основные правила понимания:

Использовать ориентированный на пользователя язык; термины, знакомые вашей аудитории, облегчают понимание.
Если нацелена на специализированную аудиторию (например, для B2B, научного сайта или сайта энтузиастов / фанатов / любителей), используйте специализированную терминологию в этой области, даже если некоторые из этих слов являются трудными для широкой потребительской аудитории, и, таким образом, снизят ваш оценка читабельности.
Используйте стиль письма в виде перевернутой пирамиды : начните с заключения или обзора основной мысли. Люди лучше относятся к второстепенным моментам, когда они уже знают основы.
Сведите к минимуму когнитивную нагрузку, опираясь на существующие ментальные модели и уменьшив потребность пользователей запоминать вещи от одной части текста к другой.
Рисунки или концептуальные диаграммы иногда могут объяснить вещи лучше, чем стопки слов.
Будьте краткими.Если вы говорите меньше, люди с большей вероятностью попытаются понять, что вы говорите.
Если для вас важны мобильные пользователи, сделайте еще короче и упростите еще больше. Меньшее окно просмотра ухудшает понимание, потому что пользователи могут сразу увидеть небольшой контекст и не могут легко вернуться к ранее прочитанной информации.

Тестирование понимания

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

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

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

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

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

Тот факт, что люди могут читать и понимать ваш контент, не означает, что они будут это делать. При среднем посещении веб-страницы пользователи читают только 28% слов. В Интернете так много информации, что люди обычно сканируют, а не читают.

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

Таким образом, помимо хорошей разборчивости, удобочитаемости и понимания, сделайте следующее:

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

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

Будьте лаконичны! (Написание для Интернета)

Три основных правила написания для Интернета:

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

Короткие тексты

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

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

Сканируемость

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

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

Структурируйте статьи с 2 или даже 3 уровнями заголовков (общий заголовок страницы плюс подзаголовки — и, при необходимости, подзаголовки). Вложенные заголовки также облегчают доступ слепым пользователям программ чтения с экрана
Используйте значимые, а не симпатичные заголовки (т. Е. Чтение заголовка должно сообщать пользователю, о чем страница или раздел)
Используйте выделение и выделение , чтобы важные слова привлекали внимание пользователя.Цветной текст также можно использовать для выделения, а якоря гипертекста выделяются синим цветом и подчеркиванием

Структура гипертекста

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

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

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

Обработка текста
и пользовательский интерфейс :: UXmatters
Выравнивание текста
Хотя выравнивание непрерывного текста обеспечивает хороший блок текста, дополнительные пробелы, которые появляются между отдельными словами, часто создают непрерывные вертикальные пробелы, которые могут казаться значимыми — как вертикальные реки белого цвета.
При отображении непрерывного текста на информационных веб-сайтах или в интерактивной справке существует два распространенных способа выравнивания текста, как показано на Рисунке 3:
по ширине — текст имеет чистые края слева и справа.
неровный вправо — текст выровнен по левому краю.
Хотя выравнивание непрерывного текста обеспечивает хороший блок текста, дополнительные пробелы, которые появляются между отдельными словами, часто создают непрерывные вертикальные пробелы, которые могут казаться значимыми — как вертикальные реки белого цвета.Это может отвлекать читателей [4]. Поэтому рекомендуется использовать неровное выравнивание текста по правому краю.
Рисунок 3 — Примеры выравнивания текста по ширине и неровному правому краю
Ориентация текста
Исследования подтверждают, что люди быстрее всего могут читать текст с горизонтальной ориентацией.
Для разных макетов может потребоваться разная ориентация текста. На рисунке 4 показан стандартный горизонтальный текст; текст в стиле выделения, в котором каждая буква расположена горизонтально, но буквы выровнены по вертикали; и текст, повернутый на 90 ° вправо или влево.
Рис. 4. Различные ориентации текста
Очевидно, что в западном мире лучше всего использовать горизонтальный текст. В конце концов, наши книги не печатаются рамкой или повернутым текстом. Хотя это может быть не так для других культур.
Исследования подтверждают, что люди быстрее всего могут читать текст с горизонтальной ориентацией [5]. Он также показал, с точки зрения удобства использования, что не имеет значения, поворачивается ли текст вправо или влево — например, на вертикальных вкладках. Скорость чтения зависит от того, где элементы появляются на экране.Однако из эстетических соображений шрифт должен быть направлен внутрь. Из всех ориентаций текста бегущая строка труднее всего читается и дает самые низкие результаты при чтении.
Размер шрифта
Размер шрифта является решающим фактором в определении разборчивости символов.

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

В разных руководствах рекомендуется немного разный размер символов. Стандарт ISO 9241-3 [6] гласит:

«Высота персонажа от 20 до 22 угловых минут предпочтительна для большинства задач.Минимальная высота символа должна составлять 16 угловых минут ».

Одна угловая минута равна 1/60 (0,0167) градуса. Следовательно, как показано на Рисунке 5, соответствующие углы прямой видимости следующие:

16 угловых минут = 0,267 градуса
20 угловых минут = 0,333 градуса
22 дуговые минуты = 0,367 градуса

Рисунок 5 — Взаимосвязь между углом прямой видимости, расстоянием просмотра и высотой символа

Рекомендации по минимальному расстоянию просмотра (d) между пользователем и экраном монитора в диапазоне от 400 до 600 мм.ISO 9241-3 указывает минимальное расстояние просмотра 400 мм для нормальной офисной работы. Учитывая тот факт, что ближайшая точка аккомодации в возрасте 50 лет обычно уже составляет 500 мм [7], минимальное расстояние обзора 500 мм является более подходящим и часто рекомендуется в литературе по эргономике [8].

Предположим, что символ просматривается перпендикулярно — то есть, как на рисунке 5, расстояние просмотра (d) находится под прямым углом к экрану — если d составляет 500 мм, результат показанной тригонометрической формулы на Рисунке 5 даны следующие высоты символов:

минимальная высота символа — 2.3 мм
предпочтительный диапазон высоты символа — от 2,9 до 3,2 мм

Обычно высота символа относится к прописным буквам, поэтому E должен иметь высоту не менее 2,3 мм.

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

параметр размера шрифта операционной системы, например, в Microsoft Windows, маленький или большой
для веб-приложений, настройка размера текста в веб-браузере, например, в Microsoft Internet Explorer: наименьший, маленький, средний, большой, наибольший
пикселей — выражается в пикселях на дюйм (ppi), эта единица измерения зависит от разрешения экрана
- , например 1024 x 768 пикселей
- физический размер экрана

Хотя мы можем контролировать влияние настроек шрифта и размера текста, нет определенной плотности пикселей, потому что размер монитора и настройки разрешения у каждого пользователя могут различаться.В качестве примера рассмотрим двух человек, которые используют одно и то же программное обеспечение, рекомендуемое расстояние обзора 500 мм и одинаковые системные настройки. Однако один человек использует 14-дюймовый ноутбук с видимой шириной 10,67 дюйма, а другой — 17-дюймовый ЖК-монитор с видимой шириной 14,22 дюйма. Определение плотности пикселей следующее:

Таким образом, как показано в таблице 1, мы получаем следующие плотности пикселей для предполагаемого разрешения экрана 1024 x 768 пикселей для этих двух людей.

Таблица 1 — Расчет плотности пикселей
Лицо А	Человек B

Чтобы измерить эту плотность пикселей в дюймах, используйте следующую формулу:

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

Таблица 2 — Расчет фактической высоты символа
Лицо А	Человек B

Итак, для человека A физическая высота символа соответствует только требуемой минимальной высоте символа, указанной в ISO 9241-3 для расстояния просмотра 500 мм, в то время как для человека B высота превышает предпочтительный диапазон значений.

Заключение

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

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

Список литературы

[1] Уиллер, Сьюзен Г. и Гэри С. Уиллер. TypeSense: понимание текста на компьютере . Бостон: International Thompson Computer Press, 1996.

[2] Дул, Ян и Бернард Вердмистер. Эргономика для начинающих . Оксфорд: Тейлор и Фрэнсис, 1993.

[3] Ардити, Овен и Джианна Чо. «Регистр букв и разборчивость текста при нормальном и слабом зрении.”Vision Research: сентябрь 2007 г.

[4] Ватцманн, Сюзанна. «Принципы визуального дизайна для используемых интерфейсов», в The Human-Computer Interaction Handbook , ed. Эндрю Сирс и Джули А. Джако. Нью-Йорк: Lawrence Erlbaum Associates, 2008.

[5] Бирн, Майкл Д. «Чтение вертикального текста: повернутый против бегущей строки», в Трудах Общества человеческого фактора и эргономики , 46-е ежегодное собрание . Санта-Моника, Калифорния: Общество человеческого фактора и эргономики, 2002 г.

[6] ISO 9241-3.Эргономические требования для офисной работы с терминалами визуального отображения (VDT) — Часть 3: Требования к визуальному отображению. Женева: Международная организация по стандартизации, 1992.

[6] Гранжан, Этьен. Эргономика компьютеризированных офисов . Нью-Йорк: Тейлор и Фрэнсис, 1986.

[8] Кремер, Карл Х.Э. и Энн Д. Кремер. Эргономика офиса . Нью-Йорк: Тейлор и Фрэнсис, 2001.

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

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

Текстовые кнопки труднее нажимать

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

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

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

Текстовые кнопки с заглавными буквами труднее читать

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

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

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

Текстовые кнопки труднее распознать

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

Что использовать вместо текстовых кнопок

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

Кнопка с контуром

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

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

Кнопка со слабым затемнением

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

У которого больше визуального веса

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

Когда текстовые кнопки имеют смысл

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

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

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

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

Филиалы

Лучший способ отображения текстовых полей

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

Яркие визуальные подсказки

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

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

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

Кликабельность + пустое пространство

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

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

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

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

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

Закругленные углы

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

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

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

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

Выбор состояний

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

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

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

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

Пример использования

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

Form Ever Follows Function

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