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

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

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

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

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

• интересный, полезный и уникальный материал — это один из важных моментов по увеличению качества ваших материалов. Если вы публикуете никому не нужный и бесполезный контент, то можно сразу забыть про дальнейшее развитие своего ресурса. Никто на него не будет заходить, так как ничего полезного в нем не будет. Поэтому старайтесь давать полезные и интересные советы для своих читателей!
• без воды и длинных полотен — длинные текстовые полотна сейчас не в моде! Пишите только по теме и не слишком много. Пользователю с первого раза будет трудно осилить огромное количество текста. Однако это не значит, что не стоит задумываться над раскрытием темы. Если вы видите, что тема довольно обширная для одного поста, то разбейте ее на несколько постов. Это будет не только в пользу удобства для читателя, но и для продвижения сайта. Также не старайтесь писать слишком маленькие посты. Это очень плохо сказывается на уникальности. По возможности добавляйте свои рассуждения, наблюдения или еще что-то полезное. Оптимальный текст в 500 — 1000 слов. Максимальный потолок в 1500 — 2000 слов. Так что ориентируйтесь на эти числа!
• красивое оформление постов — это тоже немаловажный момент по повышению качества своих материалов. Всегда разбавляйте текст картинками. Они очень хорошо улучшают восприятие материала и дают передышку при чтении. Также в тесте по возможности следует использовать подзаголовки. Они очень хорошо помогают ориентироваться в больших объемах информации. Еще нельзя исключать возможность внедрения маркированных списков, таблиц и различных аудио и видеоматериалов. Это намного может улучшить качество контента.

• выделяйте текст — это поможет заострить внимание пользователя на каких-то очень важных моментах. Более важные слова выделяйте жирным. Нужные предложения оформляйте в красивые блоки. Например, создать текстовый блок «Внимание » или «Цитата «. Однако ни в коем случае не переусердствуйте с этим. Выделяйте только самое необходимое.
• перелинковка — очень важный момент не только в продвижении сайта, но и в его юзабилити. Предлагая своим пользователям дополнительные статьи по теме, вы не только увеличиваете время пребывания человека на сайте, но и предлагаете ему дополнительные советы по схожей тематике. Также позаботьтесь о том, чтобы все ссылки были легко заметными и не сливались с общим фоном. Обязательно проверяйте наличие битых ссылок. Ведь неприятно, когда пользователю выдается ошибка при переходе. Еще неплохим вариантом будет вывести похожие записи в виде миниатюр. Это будет очень привлекательно!
• пишите без ошибок — это улучшит качество контента. Мало кто любит читать текст с большим количеством грубых ошибок. Поэтому всегда проверяйте наличие ошибок не только в новых, но и в старых записях. Например, текст на ошибки можно проверить в том же . Я сейчас сам потихоньку исправляю свои старые записи.

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

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

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

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

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

Удобная навигация:

Меню

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

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

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

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

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

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

Карта сайта

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

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

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

Постраничная навигация

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

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

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

Веб-дизайн

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

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

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

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

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

Большое значение имеет сам шрифт на сайте. Неудобный и плохой шрифт будет только насиловать пользователя. Поэтому не старайтесь бегать за красотой. В постах используйте только стандартные простые шрифты. К тому же они поддерживаются всеми браузерами. Я бы порекомендовал в постах использовать шрифт Verdana. Также немаловажным играет и размер шрифта. Слишком мелкий текст очень трудно читать. Поэтому рекомендую использовать шрифт размером 13 — 14 кеглей.

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

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

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

Заключение

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

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

1. Ярлыки формы лучше всего работают над полем

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

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

2. Пользователи концентрируются на лицах

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

На карте тепла видно, что взгляд привлекает лицо ребенка, смотрящего прямо на нас.

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

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

3. Качество дизайна является показателем доверия

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

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

4. Большинство пользователей не используют прокрутку или используют…

Исследование Якоба Нильсена о том, сколько пользователей используют прокрутку, показало, что только 23% посетителей используют при их первом посещении веб-сайта. Это означает, что 77% посетителей не будет прокручивать; они просто просматривают содержимое на пространстве части страницы, которая видна на экране без прокрутки вниз. Более того, процент пользователей, которые прокручивают, уменьшается при последующих визитах, и только 16% прокручивает во время своего второго визита. Эти данные свидетельствуют, насколько важно, чтобы ваши ключевые места содержались на видном месте, особенно на целевых страницах.

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

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

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

Название сайта,

Ценное предложение на веб-сайте (т.е. какие выгоды они получат от использования ИТ),

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

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

5. Голубой — лучший цвет для ссылки.

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

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого роста с нуля в сайтостроении

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

6. Идеальное окно для поиска — 27 символов шириной.

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

Исследование показало, что среднее окно поиска составляет 18 символов в ширину. Данные показали, что 27% запросов были слишком длинные и не помещается в нее. Расширение поля до 27 символов смогло бы вместить 90% запросов.

Окно поиска Apple слишком короткое, отрезает запрос «Microsoft Office 2008″.

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

7. Белое пространство улучшает понимание

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

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

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

8. Эффективное пользовательское тестирование не должен быть обширными

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

9. Информационный продукт страницы поможет вам выделиться

Если ваш сайт имеет страницы продуктов, люди, покупая в Интернете, безусловно, смотрят сквозь них. Но многим страницам не достает информации даже для посетителей, быстро просматривающих страницу. Это серьезная проблема, поскольку информация о продукте помогает людям принимать решения о покупке. Исследования показывают, что бедная информация о продукте составляет около 8% проблем практичности и 10% пользователей не удовлетворены изложенной информацией (т.е. пользователь отказывается и покидает сайт).

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

10. Большинство пользователей не видят рекламу

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

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

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

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

Перевод и редакция: Рог Виктор и Андрей Бернацкий.

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

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

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

1. Забудьте «правило трех кликов»

В своей книге Taking Your Talent to the Web (2001) Джеффри Зельдман (Jeffrey Zeldman), известная личность в мире веб-дизайна, выдвинул идею о том, что «правило трех кликов помогает создавать веб-сайты, обладающие интуитивной и логичной иерархической структурой». То есть, если для того, чтобы получить доступ к искомому куску контента, пользователю необходимо совершить больше трех кликов, он начинает испытывать фрустрацию, потому что это требует много усилий и воспринимается как трата времени.

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

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

Согласно исследованию, проведенному британским веб-дизайнером Джошуа Портером (Joshua Porter), пользователи, не обнаружившие искомый контент после трех кликов, не склонны прекращать поиски. Более того, в ходе исследования некоторые испытуемые совершили до 25 кликов.

Взаимосвязь числа кликов и процент выполненных заданий в случаях успеха (синее) и провала (рыжее)

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

2. Помните про F-паттерн

Якоб Нильсен провел исследование, в ходе которого осуществлялся айтрекинг (eye-tracking, окулография) более чем 230 пользователей интернета в ходе просмотра ими различных веб-страниц. В результате выяснилось, что при беглом просмотре взгляд пользователей движется по F-образной траектории.

Теплокарта просмотра страниц сайта Якоба Нильсена

Eyetools, совместно с двумя маркетинговыми компаниями, Did-It и Enquiro, провела похожее исследование. В нем приняли участие 50 испытуемых, каждого из которых просили ознакомиться с результатами поиска Google. В итоге взгляд всех 50 испытуемых чаще концентрировался на верхнем левом углу, и тепловая карта имела F-образную форму.

Теплокарта просмотра страницы результатов Google

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

3. Скорость загрузки имеет значение

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

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

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

Взаимосвязь между задержкой в загрузке страницы в мс и изменением следующих показателей (слева направо): 1) число уникальных запросов на 1 пользователя (%); 2) число модификаций запросов (%); 3) прибыль на 1 пользователя (%); 4) общее число кликов (%); 5) удовлетворенность пользователей (%); 6) время на совершение клика (мс).

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

К счастью, существует множество инструментов, помогающих повысить скорость загрузки и работы страниц, например, такие как Page Speed от Google или YSlow от Yahoo.

4. Сделайте текст более читабельным

Известный юзабилити-специалист Якоб Нильсен провел исследование, в котором он изучал особенности восприятия текста посетителями своего сайта, и оказалось, что люди редко читают онлайн-контент, находящийся у них перед глазами. Посетители среднестатистической веб-страницы (ок. 593 слов) читают 20—28% текста. При дальнейшем увеличении объема текста этот показатель постепенно уменьшается вплоть до 10%.

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

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

5. Не зацикливайтесь на «линии сгиба»

Доброго времени суток, дорогие друзья! Сегодня мы поговорим с вами о такой важной вещи как U sability (юзабилити) сайта , о том, как улучшить данный фактор, зная его основные принципы и правила. Ну и в заключение научимся делать независимый и бесплатный аудит (анализ) своего проекта на привлекательность к его аудитории. Итак, начнем, пожалуй, с определения самого понятия usability (юзабилити).

Что такое Usability (юзабилити) и каковы его принципы?

Usability – с перевода означает меру удобства, качества, простаты в использование чего-либо. В нашем случае имеется в виду сам сайт, так как он непосредственно взаимодействует с пользователями интернета. От того какой уровень юзабилити у того или иного проекта напрямую будет зависеть его CTR (процент) продаж, позиции в поисковых системах и естественно количество трафика (посетителей). Если вам удастся улучшить данный фактор, то вы одним выстрелом убьете сразу нескольких зайцев, которые могут повысить ваш заработок в 2-3 раза! Вот что вы получаете в случае высокого уровня usability:

— Увеличения такой очень важной вещи как конверсии сайта (процент продаж), а значит и прибыль владельца сайта.

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

— Уменьшению бюджета (расходов) на контекстную и иную рекламу для привлечения посетителей. Зачем за них платить, если вас и так хорошо находят через поиск?

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

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

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

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

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

Итак, вот ряд тех вопросов, которые надо учитывать при проектировании сайта:

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

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

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

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

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

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

Основные правила как улучшить юзабилити контента (статей) сайта.

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

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

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

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

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

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

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

Как улучшить юзабилити самого сайта?

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

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

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

10 ) Сделайте страницу . Вы, конечно же, можете удивиться: как же она может, повлияет на продажи? А вот как. Давным-давно одна компания сделала хитрую вещь, написав на странице 404 сообщение, что они просто не могут обработать товар и просили заново повторить процедуру покупки. Таким вот способом они увеличили свою прибыль на 380$ в месяц.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Как сделать качественный аудит (анализ) сайта бесплатно?

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

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

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