Программирование на Python и Objective-C в Mac OS

Программирование на Python и Objective-C под Mac OS и для iPhone / iPod Touch

Юзабилити улучшение: Улучшение юзабилити сайта — методы повышения посещаемости

On

Юзабилити улучшение: Улучшение юзабилити сайта — методы повышения посещаемости

By alexxlab

Содержание

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

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

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

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 несколько лет оттачивал группировку настроек приватности, чтобы облегчить их конфигурирование. А ведь когда-то это была настолько нетривиальная задача, что многие просто не трогали эти настройки. После их разделения на секции увеличилась доля пользователей, которые работают с этими страницами, а не избегают их.

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

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

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

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

* * *

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

что это такое, основные принципы и правила usability тестирование сайта – Wezom

Юзабилити. Что это за «зверь» и почему все так с ним носятся? Что сделать для того, чтобы «usability» получилось идеальным? Как оно вообще влияет на работу сайта и поисковое продвижение в целом? Очень много вопросов, поэтому сразу перейдем к делу.

Содержание

  1. Что такое юзабилити сайта?
  2. Принципы юзабилити веб-сайта
  3. Как повысить юзабилити сайта?
  4. Чек-лист по юзабилити сайта
  5. Инструменты для самостоятельного юзабилити аудита
  6. В заключение

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

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

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

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

Почему важно соблюдать принципы юзабилити сайтов

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

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

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

Как юзабилити влияет на SEO-продвижение

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

Прямое влияние юзабилити на посещаемость и конверсию не подвергается сомнениям. Прорабатываете его = добавляете эффективности раскрутке = повышаете продажи.

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

Дизайн web-сайта

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

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

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

Антипример дизайна сайта:

Логическая структура сайта

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

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

Важная информация на сайте

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

Убедитесь в этом сами:

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

Навигация по веб-сайту

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

Вот пара советов насчет повышения удобства навигации:

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

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

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

Упомянутые рекомендации актуальны и для интернет-магазина, и для сайта услуг.

Коммуникация с пользователем

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

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

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

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

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

Хороший пример:

Упрощенная форма регистрации и заказа

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

Посмотрите на эти два примера:

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

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

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

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

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

В наше время пользователи очень нетерпеливы, медленная загрузка страниц их раздражает. Убедитесь, что на вашем сайте нет такой проблемы. Проверить скорость можно с помощью бесплатных инструментов PageSpeed Insight, Pingdom Website Speed Test, Load Impact. Вы сможете оценить текущую ситуацию и понять, стоило ли работать над увеличением скорости.

Как повысить юзабилити сайта?

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

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

Оно будет включать три шага:

  1. Сбор группы. Это должны быть представители ЦА, у которых на самом деле есть потребность разобраться с работой ресурса.
  2. Выдача заданий. Задачи ставятся разные, максимально приближенные к реальности, например: вашей дочери нужно купить ноутбук для школы; зайдите на сайт и закажите подходящий.
  3. Наблюдение за процессом. Модератор отслеживает взаимодействие респондента с сайтом, смотрит, с какими трудностями он сталкивается.

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

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

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

Навигация:

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

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

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

  4. Поисковая строка. Упрощайте поиск и помогайте покупателям быстрее найти товар и оформить заказ.

Все это важные конверсионные элементы.

Информация:

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

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

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

Это поможет закрыть возражения и вопросы пользователя.

Интерфейс:

  1. Дизайн. О нем мы вспоминали выше. Удобный, простой и современный, а не как из начала нулевых.

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

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

Вот эти «три кита» помогут проверить юзабилити сайта.

Инструменты для самостоятельного юзабилити аудита

Проверять удобство ресурса вручную — пустая трата времени. Для этого есть много полезных сервисов.

Google Analytics и «Яндекс.Метрика»

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

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

Hotjar

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

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

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

      UsabilityHub

      В этом инструменте доступно 3 сервиса онлайн-тестирования веб-сайтов и приложений. Вам только необходимо:

          • загрузить скрины и кратко описать содержимое страницы;
          • задать 5 вопросов, на которые нужно ответить респондентам;
          • указать число страниц для просмотра.

          Останется проанализировать сформированный отчет.

          SitePolice

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

          Учтите, что инструмент полностью платный. Тестовой версии нет.

          Optimal Workshop

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

          В заключение

          Хороший сайт без юзабилити — ничто. Улучшая удобство использования ресурса, вы увеличиваете показатели конверсии. А кому нужен сайт без конверсий? Суть закономерна.

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

          У ВАС ОСТАЛИСЬ ВОПРОСЫ?

          Оставьте ваши контактные данные. Наш менеджер свяжется и проконсультирует вас.

          ПОЛУЧИТЬ КОНСУЛЬТАЦИЮ

          Наш менеджер свяжется с Вами в ближайшее время

          Отправить заявку

          Как улучшить юзабилити сайта — CMS Magazine

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

          • дизайн и юзабилити, 


          • работа над контентом, 


          • seo.

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

          Юзабилити — удобство сайта, как для визуального восприятия, так и для работы с ним. Поисковая система Яндекс уже в 2011 году научила свои алгоритмы учитывать юзабили сайтов и при ранжировании отдавать предпочтение более удобным (http://webmaster.ya.ru/replies.xml?item_no=11888). 

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

          Хорошо рассказывать и давать рекомендации, а мы готовы поделиться с Вами уникальным опытом работы по улучшению юзабилити сайта одного из наших клиентов http://www.f-kovrikov.ru

          Юзабилити сайта — все дело в мелочах

          Сайт www.f-kovrikov.ru пришел на продвижение к нам совсем недавно — 15 августа 2015 года. В первую очередь специалист по поисковому продвижению приступил к анализу сайта, из которого выяснилось, что над юзабилити сайта, при его создании, никто не задумывался. 

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

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

          Скрины: Главная страница сайта «До» и «После» проделанных работ

          ПОСЛЕ

          Что было сделано

          Мы поработали над шапкой и верхним меню сайта:

          1. В верхнее меню добавили кнопку «Заказать» — это поможет посетителям сайта в любой момент совершить заказ.


          2. К телефонам добавили адрес офиса, и что самое главное — город. Теперь пользователи будут видеть, что компания работает в Ростове-на-Дону


          3. Переименовали названия разделов. Так, название «Найти свой автомобиль» было переименовано «Выбор по автомобилю»


          4. Перераспределили разделы между двумя верхними меню.


          5. Изменили размер шрифтов заголовков

          Добавили новые разделы на сайте:

          1. о компании


          2. оплата

          Обновили информацию на сайте

          • на главной странице убрали устаревшую акцию


          • обновили новостной блок свежими новостями


          • переписали текст на главной, а так же красиво его оформили и структурировали


          • обновили данные в разделе «Контакты» в соответствии с требованиями поисковых систем. Подробнее о том как должна быть оформлена стрнаица Контакты. 

          Скрины: Раздел Контакты «До» и «После» проделанных работ 

          ПОСЛЕ

          Стилизовали новостной блок:

          • сделали одинаковый шрифт для заголовков и краткого описания


          • названия новостей выделили цветом


          • выровняли новости по краю

          Изменили футор:

          • удалили текстовую информацию


          • добавили нижнюю навигацию


          • Разместили контактные данные


          • сократили размер футора

          И вот он результат

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

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

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

          И напоследок

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

          Перейти на сайт

          Рекомендации по улучшению юзабилити сайта

          Что такое UX-копирайтинг и чем занимается UX-писатель? В этой статье все, что вам нужно было знать…

          Что такое хороший веб-сайт или мобильное приложение? Это что-то, что привлекает пользователей или…

          Каждый день появляются новые предприятия. Конкуренция самая жесткая и все хотят выйти в ТОП…

          Каждые несколько лет какой-то первоклассный дизайнер или известное агентство разрабатывает новый…

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

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

          У понятия «юзабилити» есть несколько определений. Если рассуждать о юзабилити сайта, то это…

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

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

          Что такое качественный сайт? В этой публикации мы хотим поделиться опытом нашей студии…

          Мобильные технологии развиваются стремительными темпами и диктуют свои требования для юзабилити…

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

          Разработка дизайна веб-сайта, направленного на продажи, предполагает тщательную проработку всех…

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

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

          7 способов проверить и улучшить юзабилити сайта — статьи на Skillbox / Skillbox Media

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

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

          • Что хочет получить посетитель?
          • Сколько кликов он сделает до результата?
          • Какие варианты достижения цели он видит на этой странице?

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

          1. Затем в результатах найдет нужный телефон.
          2. Перейдет на страницу с описанием устройства.
          3. Кликнет «Добавить в корзину».
          4. Увидит яркую кнопку «Оформить заказ»,
          5. Перейдет в личный кабинет и, наконец,
          6. Заполнит форму для покупки.

          Итого — минимум шесть кликов.

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

          Посмотрите, как реализована система подсказок в поиске в популярных интернет-магазинах
          Посмотрите, как реализована система подсказок в поиске в популярных интернет-магазинах

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

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

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

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

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

          Сложная captcha — элемент, на котором спотыкаются участники любой фокус-группы

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

          Зайдите во вкладку «Вебвизор» и посмотрите, на какой стадии пользователи чаще уходят с сайта.

          Сервис «Вебвизор» покажет данные о путешествиях посетителей за последние две недели

          Проверьте, удобно ли просматривать страницу на мобильном устройстве. Введите нужную ссылку в сервисе «Проверка оптимизации на адаптивность» от Google и посмотрите результат.

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

          Для этого введите URL страницы и ознакомьтесь с результатами ее анализа.

          Google подскажет, что стоит исправить на сайте

          Если сайт загружается дольше, чем за три секунд, то 53% пользователей не станет ждать и закроет страницу. Из-за долгой загрузки вы теряете клиентов сразу по двум причинам:

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

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

          PageSpeed подскажет, чем в первую очередь ускорить загрузку сайта

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

          Посмотрите, как реализована система чек-листов на портале Госуслуг

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

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

          Сайты интернет-магазинов могут быть огромными, но логичными и понятными. Например, изучите Amazon.

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

          Что нужно знать о юзабилити сайта