11 ошибок юзабилити: создаем эффективные сайты

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

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

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

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

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

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

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

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

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

<a href="http://www.examplesite.com" style="padding: 5px;">

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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