Основы юзабилити сайта

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

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

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

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

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

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

Огромное значение для организации удобств для посетителей на сайте имеет его текстовое оформление. Специфика подачи информации в сети такова, что спросом пользуются лаконичные, вместе с тем ёмкие тексты. Для оформления текстовых материалов необходимо использовать так называемые шрифты без засечек (Arial, Arial Black, Verdana, Tahoma), так как они удобнее читаются с экранов мониторов. Следует избегать резких контрастных тонов между фоном и текстом. Наиболее оптимальным является белый фон и тёмный шрифт текста.

Важным элементом обеспечения юзабилити сайта является система организации его поиска. Наиболее оптимальным является наличие формы поиска на всех без исключения страницах сайта. Поиск должен осуществляться только по самому сайту, ибо для других ресурсов имеются поисковые системы. Выдачу результатов поиска необходимо сделать идентичной выдаче в поисковых системах, причём учитывать обязательно возможные ошибки и опечатки при вводе нужного запроса в поиск («Может быть , Вы имели в виду [верное написание запроса]?»).

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

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

blogwork.ru

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

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

Юзабилити напрямую влияет на конверсию сайта и на лояльность пользователей.

Представьте, что вы очень устали и у вас есть 5 минут на отдых. Перед вами 2 дивана: один стоит на открытом пространстве, а второй — в центре лабиринта. Для достижения цели (отдохнуть) в первом случае требуется 1 действие: сесть; а во втором — 2 (пройти лабиринт и сесть). На какой из диванов вы сядете? Первый диван — это сайт с высокой юзабилити, второй — с низкой. Ваш выбор — это и есть конверсия.

Главный закон юзабилити

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

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

Правило восьми секунд

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

Из чего складывается юзабилити?

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

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

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

umi.ru

Разработка сайтов

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

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

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

Навигация

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

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

Отсутствие ошибок

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

Оформление шапки сайта

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

Свободное пространство

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

Читайте также: Самостоятельный юзабилити-анализ сайта

Качественный текст

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

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

Поиск по сайту

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

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

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

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

Читайте также: Оцените скорость работы своего сайта

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

medoed1.ru

Зачем это нужно

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

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

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

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

Делаем удобный сайт

Как человек воспринимает информацию

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

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

Правило трех кликов

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

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

О навигации

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

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

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

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

О контенте

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

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

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

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

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

• Статьи правильнее писать в виде «перевернутой пирамиды», то есть, самая важная информация и ключевые выводы должны быть в самом начале, а наименее важная — в конце. Это помогает сразу завладеть вниманием пользователя: он должен быстро понять, будет ли ему статья полезна или нет;
• Размер статьи не имеет значения (в том числе и с точки зрения SEO), она должна полностью отвечать на вопрос пользователя. Понятное дело, что если в топе статьи размером 10–15 тысяч знаков, то со статьей размером 2–3 тысячи знаков вы не займете лидирующие позиции. Просто потому, что не сможете в таком объеме достаточно полно ответить на вопрос пользователя;
• Для больших статей стоит делать оглавление (с якорями в тексте), которые позволят быстро попасть в нужный раздел;
• Заголовки, списки и продуманная структура материала существенно облегчают его восприятие.

Как выявить проблемы

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

Изучение статистических данных

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

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

Я подчеркнул данные по одному разделу, который явно отличается от других. Глубина просмотра здесь значительно выше, чем в среднем, это можно сказать и про время на сайте. Количество отказов чуть ниже среднего значения по всему сайту. В чем тут дело? Все просто: этот раздел сайта полностью закончен, там есть перелинковка между статьями и дополнительные элементы навигации (рекомендуемые статьи). Уже это дало +0,64 глубины просмотра и +1 минуту и 13 секунд ко времени на сайте.

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

Оценка пользователями

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

Тестирование

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

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

Заключение

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

www.seostop.ru

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

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

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

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

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

1. Правило 2-х секунд. В среднем пользователь готов потратить только 2-3 секунды на ожидание загрузки сайта, отсюда и возникло это правило. Увеличив скорость загрузки сайта, Вы получите гораздо более лучший отклик от посетителей;
2. Правило 3-х кликов. Опять же усредненное значение. Дело в том, что большинство пользователей не хочет заморачиваться по поводу достижения какого-либо результата и готово совершить только 3 клика. То есть, нужно сделать так, чтобы пользователь мог совершить, например, покупку на сайте в 3-и клика;
3. Принцип структуры. Очень важно, чтобы сайт был четко структурирован — не должно быть какой-либо перемешки. Один информационный блок должен вытекать из другого и так далее. Благодаря четкой структуре, пользователь сможет легко ориентироваться по сайту и находить то, что ему нужно;
4. Правило формата. Не должно быть каких-то отличий между стилизацией элементов сайта, то есть весь веб-ресурс должен быть выполнен в едином ключе;
5. Перевернутая пирамида. Под этим подразумевается подача материала таким образом, чтобы пользователь в первые секунды мог получить ответ на свой вопрос.

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

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

к оглавлению ↑

Как сделать сайт лучше?

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

к оглавлению ↑

Навигация сайта

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

Обязательно разместите в меню навигации все важные элементы:

• Контакты;
• О компании;
• Услуги;
• Доставка и оплата.

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

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

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

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

к оглавлению ↑

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

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

По моим наблюдениям, большое влияние на скорость загрузки оказывают изображения. Чтобы проверить это, нужно воспользоваться специальным инструментом от Google PageSpeed Insights. Наиболее подробным образом об оптимизации загрузки я рассказывал в этом уроке. Обязательно прочитайте!

к оглавлению ↑

Обратная связь

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

1. Расположите телефон в шапке сайта;
2. Сделайте шапку сайта «ездяющей», то есть шапка сайта вместе с номером телефона должна двигаться вместе со скроллом;
3. Внедрите виджеты обратного звонка типа JivoSait, Onicon, CallBackHunter
4. Разместите формы обратной связи в наиболее удобных местах на странице;
5. Обязательно вставьте форму обратной связи на страницу «Контакты».

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

к оглавлению ↑

Поиск по сайту

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

Реализовать это можно с помощью специальных плагинов от Яндекса или Google, также можно воспользоваться плагинами для CMS.

к оглавлению ↑

Оформление заявки. Регистрация

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

А оформление заказа в интернет-магазине упростить до 2 — 4 полей, так как людям лень заполнять объемные формы и передавать лишнюю информацию (как им кажется) незнакомым людям.

к оглавлению ↑

Контент

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

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

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

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

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

До скорых встреч!

context-up.ru

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

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

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

• навигация. Она должна быть интуитивно понятной, чтобы минимизировать количество переходов, которые необходимо совершить пользователю;
• дизайн. Цветовая гамма, те или иные элементы страницы – все это вместе составляет целостную картину, на основе которой посетители формируют свои впечатления от просматриваемого сайта. Кроме того, на стоимость создания сайта этот фактор тоже сильно влияет;
• оформление страниц с товарными карточками и формы заказа. Информация должна быть исчерпывающей, фото- и видеоматериалы – качественными. Относительно формы заказа – основной причиной большого количества отказов на этапе оформления покупки является слишком большое количество полей, которые пользователю необходимо заполнить. Это очень важный фактор юзабилити сайта для посетителей;
• встроенный поиск по сайту. К счастью, ситуации, когда его и вовсе нет в наличии, в наше время почти не встречаются. Поиск должен быть максимально релевантным, с возможностью настройки фильтров;
• скорость загрузки сайта. Чем быстрее – тем лучше. В эпоху высокоскоростного Интернета это особенно актуально, вряд ли потенциальный покупатель будет полминуты ждать, пока загрузиться ваш сайт. Ему проще перейти к конкуренту;
• контент. Качество и структурированность – два основных момента, которые нужно учитывать в обязательном порядке. Тексты с грамматическими «ашипками», трудные для чтения, могут сильно испортить впечатления от сайта. В устранении подобных ошибок вам помогут рекоммендации Google для сайтов.

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

www.imagecms.net

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

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

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

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

Принцип 1. Навигация. Горизонтальное и вертикальное меню.

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

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

Принцип 2. Отсутствие ошибок.

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

Принцип 3. Правильное оформление шапки сайта.

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

Принцип 4. Свободное пространство.

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

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

Принцип 5. Качественный текст.

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

Принцип 6. Поиск по сайту.

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

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

Принцип 7. Скорость загрузки.

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

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

Для проверки и анализа скорости веб-ресурса существует множество инструментов: Google PageSpeed Insights, Pingdom Tools, WhichLoadFaster Web Page Performance Test, GTmetrix, Load Impact, Monitis Tools, PR-CY и т. д.

Действует ли правило трех кликов?

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

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

Помните про F- и Z-паттерны

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

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

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

webformyself.com

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

www.ashmanov.com