Улучшить юзабилити сайта – Как улучшить юзабилити и повысить конверсию сайта с помощью тепловой карты — Lemarbet

Содержание

15 шагов по улучшению юзабилити / Habr

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

Ясное и осознанное взаимодействие


1. Выбирайте размеры шрифтов

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

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

2. Пишите информативные сообщения об ошибках

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

Но настоящие пользователи не могут этим похвастаться.

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

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

Удобство форм ввода


3. Упростите требования к паролям

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

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

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

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

4. Используйте правильные формы ввода

Многие советуют использовать форматирование данных в полях ввода. Например, если добавить input[type="email"], input[type="tel"], то при вводе автоматически переключается раскладка. Однако выглядит это странно и вовсе не помогает, а мешает в заполнении формы.

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

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

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

5. Срежиссируйте яркий и запоминающийся опыт первого использования

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

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

6. Дьявол в деталях

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

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

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

Хорошим решением может быть встраивание процесса обучения в обычную процедуру использования продукта. Допустим, при выполнении архивирования писем в почтовом приложении можно выдавать сообщение «А вы знаете, что можно запускать архивирование с помощью Ctrl + K?». Такой подход позволяет обучать пользователей гораздо мягче по сравнению с традиционными уроками в стиле «обзор всего приложения».

7. Микрокопирование не должно использоваться задним числом

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

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

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

8. Всегда обеспечивайте наличие контекста

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

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

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

Крайне популярный сегодня material design от Google вывел на новый уровень использование анимации для обеспечения контекста. Нажатие на объект запускает анимированное перетекание из текущей страницы к подгружаемой информации об объекте. Это наглядно показывает логические взаимосвязи, откуда что проистекает и куда пользователь вернётся.

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

9. Атомарные действия

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

Один из замечательных примеров: модальное окошко “compose new tweet” в Twitter’е, представляющее собой модуль для выполнения одного из важнейших действий в этом приложении. Ведь Twitter умрёт, если люди перестанут твитить. Как видите, здесь всё нацелено на то, чтобы пользователь мог сосредоточиться на написании текста, не отвлекаясь ни на что лишнее.

Этот подход работает эффективнее всего при выполнении атомарных действий. При этом вы можете предоставить всё необходимое для совершения действия в рамках того же самого модала.

10. Сообщения об ошибках

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

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

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

11. Сосредоточение уведомлений в одном месте

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

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

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

12. Избегайте тупиковых состояний

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

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

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

14. Избегайте рассеивания внимания

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

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

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

15. Разбивайте большие сложные задачи на более мелкие операции

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

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

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

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

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

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

То же самое можно сказать и о формах пожертвования, в особенности в мобильных проектах. Вы же наверняка хотите, чтобы пользователь подумал: «Надо же, как всё просто» вместо «Да уж, на это нужно время». Улучшение удобства пользования формами напрямую отражается на прибыльности проекта.

* * *

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

ТОП-6 крутых способа по улучшению юзабилити сайта

Юзабилити сайта

Всем-всем привет!

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

Погнали!

[contents]

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Юзабилити продающего сайта

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

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

Юзабилити сайта рекомендации

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

Юзабилити web сайта

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

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

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

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

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

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

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

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

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

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

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

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

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

Улучшить юзабилити сайта

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

Контент

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

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

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

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

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

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

Улучшение юзабилити основных блоков на сайте

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

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

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

Шапка сайта

Первый пример – шапка интернет-магазина бытовой техники:

Шапка сайта интернет-магазины бытовой техники

Видим следующие недочеты:

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

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

Шапка сайта после внесения исправлений

Итак, что изменилось:

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

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

Первый экран

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

Казалось бы, что не так? А вот что:

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

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

Первый экран после внесения изменений

Что нового:

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

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

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

Список товаров в каталоге

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

Список товаров интернет-магазина сантехники

Что стоит поправить:

  • Информация представлена в три колонки, что только усложняет восприятие страницы в целом. Третий «столбец» нужно убрать.
  • Форму поиска и ссылки на вспомогательные разделы об условиях доставки, оплаты, гарантии и т.д., следует перенести в шапку сайта. Как лучше это сделать, мы уже разобрались выше.
  • Не совсем понятно, для чего клиентам нужен «Архив акций», лучше его убрать.
  • Баннер «Интерьеры ванных комнат» ведет на пустую страницу, поэтому его стоит убрать.
  • Блок с новостями и статьями не нужен в каталоге. Лучше показать анонсы статей на Главной странице и этого будет достаточно.
  • Подкатегории и элементы перед списком товаров лучше показать компактнее.
  • Фотографии товаров слишком маленькие и выглядят непривлекательно. Также есть товары без фотографий, что усложняет выбор товара.
  • Нельзя из каталога добавить товар в корзину, а это неудобно.
  • Отсутствуют фильтры. Блок с брендами лучше представить как один из таких фильтров для быстрого выбора товара внутри категории.
  • Меню категорий каталога не сразу заметно, потому что находится в правом нижнем углу. Нужно показать его справа, чтобы пользователю было удобно выбирать товары из разных категорий.

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

Список товаров после внесения изменений

Что исправили:

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

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

Страница товара

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

И снова недочеты:

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

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

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

Что изменилось:

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

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

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

Заключение

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

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

Улучшение юзабилити сайта: 16 советов с примерами

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

Структура и обязательные элементы

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

Первый экран

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

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

Пример неудачного первого экрана, на котором не видно товаров.

Навигация

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

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

Пример подробного меню.

 

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

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

Перелинковка

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

Привычное расположение элементов

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

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

Фильтры

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

Пример расширенных параметров и заполненной карточки товара.

Сортировка

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

Пример реализации подробной сортировки

Карточка товара

Обязательные компоненты товарной карточки:

  • цена,
  • кнопка «купить»,
  • главные характеристики,
  • описание,
  • условия доставки и оплаты.

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

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

Поиск — это также обязательный элемент на любом портале.

Технические параметры

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

Скорость сайта

Скорость сайта — важный фактор ранжирования (особенно для Гугл), так как пользователи обычно закрывают страницу, если она грузится дольше пяти секунд. Проверить скорость можно в Pagespeed Insights от Google либо при парсинге в Screaming Frog.

Адаптивность

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

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

Формы заказа

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

Эффективны формы, которые предлагают сделать заказ не напрямую. Их главной целью является получение контактных данных клиента. Например, это тесты или квизы с фразами: “Рассчитайте стоимость услуги” — где результат придёт на почту, или “Закажите бесплатную консультацию” —  где необходимо оставить телефон.

Интерактивные элементы

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

Чаты, обратный звонок

Одними из самых популярных инструментов, значительно повышающих конверсию, являются чаты и заказ обратного звонка. Чаты помогают быстро ответить на вопросы и взять контактные данные клиенты. Кроме того, они высвечиваются в сниппете в поисковой выдаче Яндекса, тем самым увеличивая его CTR. Лучшие сервисы — Jivosite и Calltouch.

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

Дизайн

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

Цветовая гамма

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

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

Читаемость текста

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

Также текст должен быть поделён на равномерные абзацы и иметь правильную иерархию заголовков.

Пустое пространство между элементами

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

Пример отсутствия пространства между карточками

Не более четырёх акцентов на странице

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

Четыре акцента: логотип, «Акции», баннер и кнопка «добавить в корзину».

Вывод

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

25 советов как улучшить юзабилити (usability) вашего сайта. |

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

2) Используйте цепляющие, интригующие подзаголовки, которые выделяются специальными тегами: <h2>, <h3>, <h4>. Это не только улучшает восприятие статьи, ее привлекательность, но также является одной из основных правил раскрутки сайтов.

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

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

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

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

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

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

 

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

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

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

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

10) Сделайте страницу ошибки 404.  Вы, конечно же, можете удивиться: как же она может, повлияет на продажи? А вот как. Давным-давно одна компания сделала хитрую вещь, написав на странице 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 (юзабилити) сайта, надеюсь, она вам была полезна. Если все же вам было мало этого и вы хотите стать, так сказать, большим экспертом в этой области, то можете почитать пару книг на эту тему, так как в будущем с ростом интернета это специализация может стать очень востребованной.

Рубрика: Поисковая оптимизация сайта. Метки: Бесплатная раскрутка сайта, Вебмастеру на заметку

Работаем с юзабилити сайта: приемы от агентства интернет-маркетинга

Нравится статья?

График

Понравится и работать с нами.

Начать

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

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

Главные принципы удобного сайта

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

1. Минималистичный, не перегруженный дизайн

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

Что еще почитать: Каким должен быть дизайн сайта

2. Самое важное – слева и сверху

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

График

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

3. Структура и логика – главное в контенте

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

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

График

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

4. Не настаиваем на общении

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

Что еще почитать: Как общаться с клиентами в онлайн-чате

Оформляем шапку и футер

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

Что мы советуем проработать в шапке сайта:

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

График

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

Другой важный элемент – футер (это нижний блок сайта). Для удобства пользователей размещаем в нем:

  • Ссылки на важнейшие разделы сайта. Можно дублировать основное меню или добавить разделы выборочно («Блог», «О нас» и т.д.).
  • Контакты: телефоны, e-mail, физический адрес.
  • Ссылки на соцсети и мессенджеры.

График

Пример правильно оформленного футера на сайте строительной компании.

Юзабилити главной страницы

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

Несколько советов, как сделать главную страницу удобнее:

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

График

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

График

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

График

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

Удобная навигация по сайту

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

По каким признакам можно понять, что с навигацией все в порядке:

  • Меню отображается всегда в одном месте, независимо от раздела сайта.
  • Названия пунктов меню привычны пользователю: он легко может их узнать и понимает, куда ведет каждая кнопка. «О нас», «Корзина», «Доставка и оплата» – традиционные формулы лучше использовать, как есть.
  • Чтобы при прокрутке страницы пользователь не терялся, используют один из приемов – закрепляют шапку, чтобы даже при прокрутке вниз она всегда отображалась на экране (не больше 40-70 пикселей в высоту), оставляют плавающее свернутое меню или плавающую кнопку-стрелку, которая одним нажатием возвращает пользователя наверх.

График

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

График

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

График

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

Оптимизируем веб-формы

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

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

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

График

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

График

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

Юзабилити кнопок и ссылок

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

Советуем использовать такие приемы:

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

График

Когда курсор наводится на ссылку или кнопку, он должен выглядеть так.
  1. Выбрать для всех кнопок максимально краткое и понятное описание: «купить», «заказать звонок», «оставить заявку» и др.
  2. Увеличить размер кнопок и проверить длину ссылок – кликать по ним должно быть удобно.
  3. Использовать текстовые ссылки в привычном виде: текст другого цвета с подчеркиванием, после нажатия на ссылку цвет меняется.
Мы понимаем, что сегодня юзабилити важно не только при разработке нового сайта – поисковое продвижение также невозможно без повышения удобства сайта. Поэтому включаем аудит юзабилити в цену SEO-продвижения и последовательно работаем над удобством сайта для пользователей. Обсудить проект

8 простых способов как повысить юзабилити вашего сайта

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

Просто вспомните то, что делает и продает корпорация Apple: стала бы их продукция столь популярной, не будь она так красива и удобна?

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

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

1. Уберите лишнюю информацию

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

По некоторым данным, сокращение текстового контента вдвое может привести к повышению юзабилити на 58%.

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

2. Размещайте контент согласно принципам айтрекинга

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

80% времени пользователей приходится на изучение информации выше линии сгиба.

А 69% времени посетителей приходится на левую сторону страницы. Как видите, левая верхняя часть сайта — лучшее место для самой важной информации.

3. Ориентируйтесь на то, как пользователи читают страницу

Дабы разобраться, как повысить юзабилити, нужно сперва изучить привычки и паттерны поведения своих пользователей. Подавляющее большинство людей пользуется F-паттерном при чтении страниц в интернете. То есть, сначала человек внимательно изучает 2 горизонтальные линии на первом экране (регион «выше сгиба», Above the Fold), после чего проглядывает остальной контент по одной вертикальной линии до конца страницы. Этим свойством можно воспользоваться для размещения важнейших элементов в центре внимания посетителя:

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

4. Быстрая загрузка страницы

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

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

Интернет-пользователи готовы ждать загрузки страницы 2 секунды или меньше — на третьей секунде большинство из них уйдет.

5. Размер окна поиска

Средняя длина окна поиска на большинстве сайтов — 18 символов, но такой размер не вмещает около 27% запросов.

Увеличьте окно поиска до 27 символов, и оно будет вмещать 90% запросов.

6. Разметка страницы

Оптимальный размер страницы: длина 1000–1600 пикселей и ширина около 770 пикселей.

Очень важно использовать одинаковый макет для всех страниц сайта.

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

Не допускайте, чтобы посетители попадали на «тупиковые» или нерелевантные страницы.

7. Типографика

Используйте минимально возможное количество разных шрифтов.

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

Не используйте более 4 разных цветов на текст — это уменьшит путаницу.

Оптимальная ширина строки в статье — около 45–75 символов.

8. Ссылки

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

Ссылка должна менять цвет после нажатия на нее.

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

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

Заключение

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

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

Высоких вам конверсий!

По материалам quicksprout.com 

14-10-2014

Добавить комментарий

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