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

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

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

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

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

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

* * *

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

Улучшаем юзабилити за 5 минут / Хабр

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

1. Отображайте нажатия кнопок и кнопкоподобных ссылок

Мой излюбленный совет. Когда стиль кнопки задаётся в CSS, или когда для отображения необычной кнопки используется рисунок (либо как фон, либо как элемент <img />), то кнопка не реагирует на нажатие во всех или в некоторых браузерах (зависит от ситуации). Вот какой простой уловкою вы можете дать знать посетителю сайта, что он и впрямь нажал на нечто нажимаемое:

. mybutton:active {
   position: relative;
   top: 1px;
   left: 1px;
}

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

Есть другие, не менее быстрые варианты: придать границе свойство inset, указать свойству text-indent значение 1px, изменить направление градиентного фона (что можно сделать быстро, если для этого не придётся прибегнуть ко графическому редактору, то есть если где-то ещё на сайте используется готовый перевёрнутый градиент), или комбинация нескольких из них.

2. Плавные переходы (CSS3 transitions)

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

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

a {
   color:blue;
   -webkit-transition-property: color;
   -webkit-transition-duration: 1s;
}

a:hover {
   color:red;
}

Первая строчка (-webkit-transition-property) сообщает браузеру, какое CSS-свойство подвергать плавному изменению, а вторая (-webkit-transition-duration) сообщает желаемую длительность этого эффекта. Важно поместить их в обычное свойство CSS, но не под псевдоклассом :hover, а не то плавного перехода не будет, когда пользователь уберёт мышь с элемента.

Примечание переводчика. Lea Verou написала эти строки 10 апреля 2009 года. С тех пор плавное изменение свойств CSS начало, к счастью, поддерживаться и многими невебкитными браузерами (начиная от версий Firefox 4, Opera 10.5, Opera Mobile 10, Internet Explorer 10), так что этот совет стал много более кроссплатформенным. Чтобы невозбранно достигнуть желаемого, вам достаточно записать свойства CSS со всеми необходимыми префиксами:

a {
   color:blue;

   -webkit-transition-property: color;
      -moz-transition-property: color;
        -o-transition-property: color;
       -ms-transition-property: color;
           transition-property: color;

   -webkit-transition-duration: 1s;
      -moz-transition-duration: 1s;
        -o-transition-duration: 1s;
       -ms-transition-duration: 1s;
           transition-duration: 1s;
}

a:hover {
   color:red;
}

Понимая, что увеличение числа свойств впятеро может подзадолбать, Lea Verou сочинила скрипт -prefix-free, о котором я ужé сообщал на Хабрахабре.

3. Снабжайте кнопки спецсимволами, означающими их функции

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

Для ряда таких символов существуют ключевые слова (named HTML entities), а другие придётся вызывать по их номерам в Unicode (наподобие &#xABCD;) — их придётся тестировать усерднее, так как не все они достаточно распространены в шрифтах.

Многие такие спецсимволы и их юникодовые шестнадцатеричные номера вы можете найти на сайтах http://www.copypastecharacter.com/и http://www.alanwood.net/unicode/dingbats.html.

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

4. Полосатые таблицы

Этот совет не сработает в IE (кроме IE9 и новее — caniuse) и в Firefox 3. Удобство чтения таблиц (а также некоторых списков) можно улучшить, слегка изменяя цвет фона от ряда к ряду. Вероятно, вы не раз видели этот эффект, и обычно он достигается либо джаваскриптом, либо на сервере при создании таблицы. Однако же его можно быстро устроить и на простом CSS3, если работоспособность в IE и старых браузерах вас не заботит, или когда нет времени на полностью кросс-браузерное решение:

table.stats tr {
   background: white;
}

table.stats tr:nth-child(odd) {
   background: #f4f4f4;
}

5. Подсветите целевой элемент внутренней ссылки

Этот совет не сработает в IE (кроме IE9 и новее — quirksmode.org) и в старых версиях браузеров. Если на одной из страниц много контента, достижимого по внутренним ссылкам (например, в FAQ), то можно использовать псевдокласс CSS3 «:target», чтобы показать читателю, куда конкретно он перешёл по ссылке:

h4:target {
   background: #FFFBCC;
}

Элемент h4 приобретёт фон #FFFBCC только тогда, когда читатель на нём приземлится по ссылке. Например, если у элемента задан id «foo», то тогда фон #FFFBCC он получит после перехода читателя к #foo.

Вот и всё

Ну разве это длилось дольше пяти минут?

10 советов по улучшению юзабилити веб-форм / Хабр

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

1. Четко выделяйте обязательные для заполнения поля

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

На форме регистрации Zappos.com обязательные поля выделены звездочкой (*). Необязательные поля так же явно обозначены.

2. Используйте удобные и подробные сообщения об ошибках

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

Форма регистрации на Yahoo! предоставляет информацию об ошибках в реальном времени.

Читайте о лучших методах использования подсказок и проверок на ошибки в веб-формах.

3. Используйте проверку формата данных на стороне клиента (JavaScript)

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

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

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

Убедитесь в том, что визуально можно определить какое именно поле пользователь заполняет в данный момент. Это можно реализовать с помощью селектора псевдо-класса focus: в CSS.

Веб-форма на Wufoo визуально выделяет активные элементы цветом фона.

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

Google Chrome выделяет активный элемент желтой рамкой. Firefox светло голубой.

5. Показывайте результаты прогресса

Если ваша веб-форма объемная и состоит из нескольких страниц (или имеет несколько шагов), убедитесь что пользователь постоянно получает сведения о ходе выполняемых действий, о том, сколько еще времени может ему понадобиться для заполнения. Такое часто встречается в случаях онлайн-опроса (исследования) с множеством вопросов или в процессе оформления заказа в интернет магазине.
Все что нужно, это писать “Шаг 4 из 5” или что-то в этом роде. Если пользователи будут продолжают нажимать кнопку “продолжить”, четко не понимая когда будет последний шаг, то они прекратят заполнение формы раньше, чем вы можете предположить.

Оформление заказа на Amazon имеет 4 страницы. Форма сообщает где вы сейчас и сколько еще осталось до завершения.

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

6. Периодически сохраняйте (кешируйте) данные формы

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

7. Не используйте стандартный текст “Submit” (отправить)

Вместо того, чтобы ваша кнопка на форме называлась “Submit” (отправить), используйте такой текст, чтобы он напоминал пользователю о его действиях. Например “Зарегистрироваться”, или еще лучше — дайте пользователю узнать о преимуществах после заполнения формы.

На форме регистрации Basecamp текст «Submit» заменили на более полезный.

8. Кнопка “Отменить” заставляет колебаться

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

9. Показывайте пользователям поля в правильном формате

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

Форма регистрации Geico предоставляет однозначные инструкции о том, в каком формате ожидаются вводимые данные.

10. Одноколоночная форма — лучшее решение

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

Одноколоночная форма

Форма регистрации Backpack имеет одноколоночную форму.

Форма с несколькими колонками

Для сравнения на форме регистрации eBay пользователю нужно заполнять форму как снизу вверх, так и слева направо.

Примеры отличных веб-форм

Вот несколько превосходно разработанных форм для вдохновения.

Alexandru Cohaniuc

Grip’d Custom Facebook Tab Creator

Groupon

KISSMetrics

MobileMe Sign In

профессиональные работы по улучшению юзабилити от Demis group

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

Что скрывается за термином
«юзабилити»
и какую роль он играет?

Слово usability, которое и легло в основу важного для веб-мастеров термина, с английского переводится как «простота и удобство использования».

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

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

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

Юзабилити: каким образом оно влияет на увеличение прибыли?

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

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

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

Методы улучшения юзабилити

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

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

• клики;
• прокрутка;
• копирование и выделение текста;
• процесс заполнения форм и нажатие на клавиши.

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

Заказать аудит юзабилити

О чем должен думать владелец коммерческого сайта?

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

Наши кейсы:

Клиент:

Завод по производству малых архитектурных форм

Задачи:

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

Решение.

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

Скриншоты: сайт до правок (слева) и предложенные макеты (справа):

Результаты:

• Снижение отказов на 10%
• Рост средней глубины просмотра на 22%
• Среднее время посетителя на сайте увеличилось на 37%
• Количество отправленных заявок с сайта увеличилось в 3,5 раза, а конверсия сайта — в 3 раза.

Цели достигнуты!

Клиент заметил рост эффективности сайта:

“Заявок стало больше. У нас много заказов сейчас.

Даже иногда трудом успеваем обрабатывать заявки с сайта”.

Клиент:

Торговая сеть по дистрибуции стальной продукции

Задачи:

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

Решение.

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

Скриншоты: форма обратной связи до правок (слева) и после правок (справа):

Результаты:

• Среднее время пользователя на сайте увеличилось на 6,5%.
• Конверсия отправки сообщений со страницы обратной связи увеличилась на 17%.
• Конверсия формы для заполнения увеличилась почти на 31%.
• Общая конверсия сайта выросла на 32%.

Цели достигнуты!

Клиент заметил рост эффективности сайта:

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

что стало больше писем с обратной связи. Судя по тепловой карте –

пользователи активно используют добавленный функционал.

Задумка была сделать поиск информации в 1-2 клика, что удалось реализовать,

судя по карте путей по сайту. Надо нам совместно еще что-нибудь придумать”.

Отзывы клиентов:

“После внесения правок по юзабилити на сайт произошло увеличение заявок с сайта на вечерние платья. Ощущаются положительные перемены”.

Салон свадебных и вечерних платьев

“Спасибо! Мы отмечаем улучшение по заявкам с сайта! и звонки пошли”.

Спортивная школа большого тенниса

Полезно
0

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

Повышение ROI через улучшение юзабилити: примеры и статистика

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

Большинство менеджеров по разработке программного обеспечения и веб-сайтов рассматривают затраты на оптимизацию юзабилити как дополнительные усилия и расходы, хотя чаще всего верно противоположное. Дело в том, что первые 10% процесса проектирования, когда принимаются ключевые решения по системному дизайну, могут определять 90% стоимости и производительности продукта, а методы юзабилити помогут привести его в соответствие с целями компании. Юзабилити возвращается в виде многочисленных выгод (возврат инвестиций — return on investment, ROI) от продуктов, разработанных как для внутреннего использования, так и для продажи.

Внутренняя рентабельность инвестиций (Internal ROI) — это:

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

Внешняя рентабельность инвестиций (External ROI) состоит из следующих составляющих:

• 
  Увеличение продаж
• 
  Снижение расходов на поддержку клиентов
• 
  Экономия, полученная от внесения изменений на ранних стадиях проектирования
• 
  Снижение затрат на обучение (если обучение осуществляется за счет компании-поставщика)

Юзабилити также играет заметную роль в восприятии продукта, тем самым влияя на стоимость бренда и долю компании на рынке. Около 15% объема обзоров, публикуемых в отраслевых журналах, периодических изданиях и общенациональных газетах посвящено удобству использования или юзабилити товаров. Такие медиагиганты как The New York Times, Financial Times и Wall Street Journal публикуют еженедельные колонки, в которых оценивается программное обеспечение. Ведущий IT-журнал Info World уделяет от 18% до 30% объема своих публикаций вопросам легкости освоения, простоты использования и качества сопроводительной документации рецензируемого программного обеспечения.

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

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

Читайте также: 4 причины, почему UX играет ключевую роль на вашем лендинге

Сокращение расходов

Эмпирическое правило во многих организациях, осведомленных о юзабилити, заключается в том, что соотношение затрат и выгод в вопросе удобства пользования составляет $1: $10- $100. Когда система находится в стадии разработки, то исправление проблемы стоит в 10 раз больше, чем аналогичное действие в периоде конструирования. Если система была выпущена на рынок, то исправление ошибки обходится в 100 раз дороже, чем на стадии дизайна. (Gilb, 1988).

Средний пользовательский интерфейс имеет около 40 недостатков. Исправление самых простых 20 из них дает среднее улучшение удобства пользования на 50%. Больший выигрыш, однако, возникает тогда, когда фактор юзабилити учитывается с самого начала. Такой подход может привести к повышению эффективности более чем на 700%. (Landauer, 1995).

Юзабилити-инжиниринг наиболее эффективен в начале цикла конструирования продукта, особенно если этот метод является частью качественного функционального развертывания (quality functional deployment, QFD), операции, используемой для структурирования процесса разработки посредством фокусирования внимания на требованиях клиентов. Применение QFD может уменьшить время разработки на величину от одной трети до половины. Например, для новых продуктов не потребуется инвестиций в каждый конкретный дизайн, а их многочисленные возможности могут быть изучены при относительно низких затратах. Учет антропогенных факторов на первоначальной стадии разработки существенно снижает потенциальные потребности в последующем редизайне, обслуживании и клиентской поддержке, которые могут заметно «пожирать» прибыль. 

Количество возможных вариантов дизайна уменьшается по мере того, как растут затраты на внесение изменений. Кривая количества возможных альтернативных вариантов дизайна (No. Possible Design Alternatives) пересекается с кривой стоимости изменений (Cost of Changes) на этапе разработки (Development Phase), которому предшествует фаза формулировки требований к продукту (Requirements Phase). Процесс производства завершается стадией размещения продукта на рынке (Deployment Phase).

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

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

Сокращение расходов на разработку

Экономия от предыдущих и последующих изменений: поправки стоят меньше, когда они делаются на раннем этапе жизненного цикла разработки. 20 изменений в проекте, сделанные за период в 32 часа при [минимальной] почасовой ставке в размере 35 долларов, будут стоить $22 400. Сокращение времени внесения тех же изменений до 8 часов приведет к снижению затрат до $ 5 600. Экономия составит $ 16 800. (Human Factors International, 2001).

Компании по предоставлению финансовых услуг пришлось отказаться от программного приложения, когда незадолго до внедрения разработчики провели тест на приемлемость для пользователей (User Acceptance Test, UAT), обнаруживший фатальную ошибку в их предположениях о том, как будут вводиться данные. К этому времени было слишком поздно менять базовую структуру, поэтому предложение никогда не было внедрено. («Важность разработки удобных в использовании систем» — Dray, S. M. (1995). The importance of designing usable systems).

Когда руководителей компаний опросили относительно причин составления ошибочной сметы расходов, в качестве четырех главных факторов были названы проблемы, решаемые передовыми методами из области юзабилити-инжиниринга: частые пользовательские запросы на внесение изменений, пропущенные задачи, отсутствие понимания пользователями их собственных требований и недостаточная взаимосвязь между пользователями и аналитиками. («Преимущества юзабилити-инжиниринга» — Barker, D. T. (2000). Cost benefits of usability engineering).

Исследование оценок стоимости программного обеспечения показало, что 63% крупных софтверных проектов значительно превышают смету расходов. Когда их попросили объяснить неточную оценку затрат, менеджеры проектов назвали 24 разных причины и, что интересно, четыре причины, на которые была возложена наибольшая ответственность, были связаны с проектированием юзабилити. Надлежащая методология юзабилити-инжиниринга предотвратит большинство подобных проблем и, следовательно, существенно снизит перерасход средств в проектах разработки программного обеспечения. («Техника юзабилити», Якоб Нильсен — Nielsen, J. (1993). Usability engineering. San Francisco: Morgan Kaufmann ).

Экономия времени разработки

Методы юзабилити позволили одной высокотехнологичной компании сократить время, затрачиваемое на одну утомительную задачу по разработке, на 33-50%» на 40% (Bias & Mayhew, 1994). В другой компании подобные техники помогли сократить время разработки на 33-50%. («Качественное функциональное развертывание: подход практикующего» — Bosert, J. L. (1991). Quality functional deployment: A practitioner’s approach. Boston: Academic Press).

Питер Конклин (Peter Conklin) в своей статье «Эффективное внедрение юзабилити в разработку» (1991) заявляет, что ускорение разработки является ключевой целью интеграции юзабилити в процесс производства продуктов и что задержка выпуска релиза на один квартал может привести к потере 50% прибыли. («Обоснование расходов на юзабилити» — Bias, R. G. & Mayhew, D. J., (Eds.) (1994). Cost-Justifying usability. San Francisco: Morgan Kaufmann Publishers, далее Bias & Mayhew, 1994).

Рост доходов происходит из-за увеличения конкурентоспособности продукта, продемонстрировавшего юзабилити, повышение производительности конечного пользователя и снижение затрат на обучение. Конклин утверждает, что еще одной целью является ускорение внедрения товара на рынок путем использования данных об удобстве его использования для улучшения маркетинговой литературы, достижения влияния на авторитетов отрасли и первоначальных пользователей, а также демонстрация юзабилити продукта и снижение стоимости обучения. (Bias & Mayhew, 1994).

Снижение расходов на обслуживание

[Методики юзабилити-инжиниринга] достаточно эффективны при обнаружении проблем юзабилити в начале цикла разработки, когда они являются самыми простыми и исправить их дешевле всего. Обнаружив проблемы юзабилити на стадии проектирования продукта, American Airlines сократила стоимость их исправления на 60-90%. (Bias & Mayhew, 1994).

Одно [известное] исследование показало, что 80% расходов в жизненном цикле программного обеспечения возникают на этапе технического обслуживания. Большинство эксплуатационных расходов связано с «неудовлетворенными или непредвиденными» требованиями пользователей и другими проблемами юзабилити. («Разработка программного обеспечения: подход практикующего» — Pressman, R. S. (1992). Software engineering: A practitioner’s approach. New York: McGraw Hill).

Мартин (Martin) и МакКлюр (McClure) обнаружили, что 20-30 миллиардов долларов по всему миру расходуется на техническую поддержку продуктов. Изучение отставания работ по техническому обслуживанию показывает, что «невидимые» задержки составляют 167% от размера объявленного отставания. Анонимные исследования данных показывают, что отделы по внутреннему развитию компаний тратят основную часть своих ресурсов на деятельность по техническому обслуживанию и поэтому не могут приступить к разработке стратегических новых систем». («Обслуживание программного обеспечения: проблема и ее решение» — Martin, J. and McClure, C. (1983). Software maintenance: The problem and its solution).

Читайте также: 6 UX-ошибок, которые вы вероятно совершаете (и как их исправить)

Увеличение объема продаж

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

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

Увеличение транзакций/покупок

В одном из исследований отмечалось, что улучшение качества обслуживания увеличивает количество покупателей на 40%, а размер заказа — на 10% («Руководство по выживанию доткомов» — The dotcom survival guide. Creative Good, 2000).

Вы можете увеличить объем продаж на вашем сайте до 225%, предоставив вашим посетителям достаточную информацию в нужное время. В недавнем исследовании было обнаружено, что дизайн списков продуктов напрямую влияет на продажи. На сайтах, которые не требовали, чтобы покупатели перемещались вперед и назад между списком и отдельными страницами продуктов, посетители добавляли больше товаров в свою корзину и имели более положительное мнение о интернет-магазине. Поняв ожидания и потребности ваших клиентов и соответствующим образом составив список продуктов, вы сможете значительно можете значительно увеличить ваши продажи. (User Interface Engineering, 2001).

Увеличение продаж продукции

Виксон (Wixon) и Джонс (Jones) провели тематическое исследование версии программного продукта, ориентированного на юзабилити, что увеличило доход от продаж более чем на 80% по сравнению с первым выпуском, разработанным без учета удобства пользования. Доходы от программы с улучшенным юзабилити были на 60% выше прогнозируемых. Многие клиенты указали удобство использования в качестве ключевого фактора при покупке нового продукта. (Bias & Mayhew, 1994).

После того, как сайт торговли недвижимостью move.com на основе рекомендаций UI-консалтинговой фирмы завершил на своей домашней странице редизайн опций «Поиск» и «Связаться с агентом», способность пользователей находить объект потенциальной покупки увеличилась с 62% до 98%, генерация лидов выросла более чем на 150%, также значительно улучшилась возможность продавать рекламное пространство на сайте. («Двигаясь дальше: Move.com улучшает потребительский опыт» — Moving on up: Move.com improves customer experience. Vividence, 2001).

Масштабы улучшений, достигаемых в результате оптимизации юзабилити, обычно велики. Речь не идет об увеличении использования продукта на несколько процентов. Как правило, усилия, вложенные в юзабилити, в результате оборачиваются 100% увеличением трафика или продаж. (Якоб Нильсен, «Исследования интернета: верьте данным» — Nielsen, J., Web research: Believe the data).

Согласно исследованию компании Forrester Research, сайты электронной коммерции с запутанной навигацией теряют до половины потенциальных продаж, если посетители не могут найти товары. («Заблудившийся в лабиринте и сбитый с толку» — Kalin, S. (1999). Mazed and confused, далее Kalin, 1999).

Увеличение трафика (размера аудитории)

Веб-присутствие IBM традиционно состояло из сложного для ориентации лабиринта разрозненных подсайтов, но редизайн сделал сайт компании более цельным и удобным. По словам представителей IBM, массированные усилия по редизайну быстро принесли дивиденды. Компания заявила, что месяц спустя после перезапуска сайта трафик в онлайн-магазин IBM увеличился на 120%, а продажи выросли на 400%. («Редизайн IBM приводит к более удобному и простому веб-сайту» — Battey, J. (1999). IBM’s redesign results in a kinder, simpler web site).

HomePortfolio.com отслеживали трафик сайта, наблюдали за поведением потребителей с точки зрения юзабилити и работа с внутренними бизнес-клиентами. Это помогло внести изменения, которые сделали цель сайта более четкой для понимания и в известной мере увеличили коэффициент транзакций. Трафик вырос на 129% за неделю после внесения изменений. (Interaction Design, Inc., 2001).

Сохранение клиентов (частота использования)

Более 83% интернет-пользователей могут покинуть сайт, если почувствуют, что им приходится делать слишком много кликов, чтобы найти то, что они ищут. («Исследование дизайна веб-сайтов» — Arthur Andersen (2001). Web site design survey).

Плохой дизайн может стоить веб-сайту 40% повторного трафика. Хороший дизайн может заставить посетителей вернуться. Несколько тестов помогут понять разницу [между плохим и хорошим дизайном]. (Kalin, 1999).

Привлечение клиентов (рост привлекательности)

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

• 
  Количество повторных клиентов увеличилось на 67%
• 
  Отток снизился на 31-45%
• 
  Опыт покупательский опыт улучшился на 10%
• 
  Трафик вырос на 80%
• 
  Увеличились доходы в целом»

(Human Factors International, 2001)

В проведенном в 1999 году исследовании год респондентам было предложено перечислить 5 самых важных причин для покупки в интернете. Хотя низкие цены безусловно привлекали потенциальных покупателей, ценообразование было только третьим по важности вопросом. Большинство ответов было связано с тем, что процесс онлайн-покупки легок, приятен и эффективен. Главная причина, по мнению приблизительно 83% респондентов, заключается в том, что “В интернете легко разместить заказ». (Якоб Нильсен, «Почему люди делают покупки в интернете» — Nielsen, J. Why people shop on the web).

Увеличение доли рынка (конкурентное преимущество)

«Юзабилити — одно из наших секретных вооружений». Тайное оружие, кажется, работает. Основной веб-сайт брокерской компании Schwab для инвесторов, проживающих в США, schwab.com, обрабатывает транзакции с ценными бумагами на сумму более $7 000 000 000 долларов в неделю, обслуживает более чем 2 миллиона активных учетных записей клиентов, владеющих в совокупности $174 млрд. Располагая этими цифрами, можно задаться вопросом: зачем Schwab вообще нужно вносить какие-либо изменения на свой сайт? Но в компании знают, что не могут позволить себе почивать на лаврах: поскольку все больше и больше новичков приходит в интернет, конкуренция за их доллары увеличивается, и главным критерием качества сайтов электронной коммерции становится простота их использования» (Kalin, 1999). 

Важность обладания конкурентным преимуществом в юзабилити может быть более всего выражается на сайтах eCommerce. Такие сайты обычно отсеивают почти половину повторных сделок, потому что не позволяют посетителям легко найти нужную им информацию. Между тем повторные клиенты самые ценные: согласно исследованиям, новые клиенты оставляют в интернет-магазине в среднем по 127 долларов за покупку, в то время как повторные пользователи тратят почти в 2 раза больше: в среднем $251. (Якоб Нильсен, «Лояльность в интернете» — Nielsen, J. Loyalty on the web).

Читайте также: Пользовательский опыт и юзабилити на сайтах eCommerce

Повышение эффективности

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

Увеличьте вероятность успеха, сократив ошибки пользователей

Одно из исследований, проведенных NCR (американская IT-компания, мировой лидер в области банковских, торговых и информационно-технологических решений) показало увеличение производительности труда на 25% при добавочном снижении на 25% ошибок, что явилось результатом перепроектирования экранов, проведенного в соответствии с основными принципами хорошего дизайна. («Время отклика на действия пользователей в интерактивных человеко-машинных компьютерных системах» — Gallaway, G. (1981). Response times to user activities in interactive man/machine computer systems).

Когда консультанты по юзабилити из исследовательской компании UIE попросили пользователей сайта Disney.com найти ближайший к монорельсовой дороге в Disney World отель, то около 20% участников теста “заблудились в Диснейленде“ и даже не знали об этом. “Если каждый пятый посетитель тематического парка теряется, то Disney должен это исправить“, — дает совет Джаред Спул (Jared Spool), руководитель UIE. Старший вице-президент и генеральный директор Disney Online Кен Гольдштейн (Ken Goldstein) отмечает, что его департамент уже обязался разработать простой в использовании дизайн сайта Диснейленда. Хотя Disney Online не имел никакого отношения к тестированию Спула, Гольдштейн заинтересовался его исследованиями юзабилити. «По мере развития следующего поколения Disney.com, — заверяет Гольдштейн, — мы продолжим откликаться на запросы клиентов, используя нашу собственную методику тестирования юзабилити» (Kalin, 1999).

Исследование, проведенное Zona Research, показало, что 62% интернет-покупателей отказывается от поиска товара, который они хотели купить в интернете (20% делает это более трех раз в течение двухмесячного периода). (Якоб Нильсен, «Провал корпоративных сайтов» — Nielsen, J. Failure of corporate websites). 

В исследовании Джареда Спула, охватывающем 15 крупных коммерческих сайтов, пользователи могли найти нужную информацию только в 42% случаев, даже если они находились на корректной домашней странице, прежде чем начинали выполнять свои тестовые задачи. (Якоб Нильсен, «Провал корпоративных сайтов» — Nielsen, J. Failure of corporate websites). 

Сокращение времени выполнения задачи

Обусловленная антропогенными факторами, инженерия юзабилити добивается значительных успехов в повышении производительности труда в IT-организациях. В частности, одна из крупных компьютерных компаний потратила 20 700 долларов на оптимизацию процедуры регистрации в системе, используемой несколькими тысячами пользователей. Результативное улучшение производительности помогло компании сэкономить $41 700 в первый же день использования усовершенствованной системы. В случае применения системы, используемой более 100 000 человек, расходы на улучшение юзабилити в размере 68 000 долларов принесли компании прибыль в $6 800 000, полученную в течение первого года имплементации усовершенствованной версии. Соотношение расходов и прибыли составило 1: 100. (Bias & Mayhew, 1994)

Чтобы построить модель внутренней сети, компания Bay Networks потратила 3 ​​миллиона долларов и два года на исследование различных способов, которыми люди думают об одном и том же. Результат: все думают одинаково о 10 миллионах долларов, которые компания экономит ежегодно. (Fabris, P. (1999). You think tomaytoes I think tomahtoes).

Неадекватное использование методов юзабилити-инжиниринга в проектах разработки программного обеспечения согласно экспертным оценкам обходится экономике США приблизительно в 30 миллиардов долларов ежегодных убытков, вызванных снижением производительности. Согласно предварительным оценкам Якоба Нильсена плохой дизайн корпоративных интрасетей в 2001 году причинит убытков на сумму 50-100 миллиардов долларов (50 млрд — это консервативная оценка, 100 млрд — медианная). Плохой дизайн в открытом интернете обойдется США еще в несколько миллиардов долларов, хотя основная часть этих потерь может не проявиться в валовом национальном продукте, поскольку эти утечки плохо поддаются контролю — пользователи в это время находятся вдали от офисов. (Nielsen, J. Discount usability for the web.)

В корпоративной интрасети плохое юзабилити означает низкую производительность труда. Юзабилити-гуру Якоб Нильсен считает, что любые инвестиции в упрощение использования интрасети может окупиться в 10 или более раз, особенно в крупных компаниях. (Kalin, 1999).

Повышение удовлетворенности пользователей

Внедрение на рейсах одной из авиакомпаний программы развлечений во время полета (IFE, In-flight Entertainment System) настолько расстроило стюардесс, вынужденных ее использовать, что многие из них предпочли летать короткими местными маршрутами, чтобы избежать необходимости учиться и применять сложные системы. Испытанный временем процесс подачи заявок на маршруты основан на выслуге лет, а перелеты на дальние дистанции всегда считались наиболее желательными. Подача стюардессами заявок на участия в рейсах из Денвера в Даллас (чуть больше 1000 км) только для того, чтобы избежать применения IFE, свидетельствовала о наличии у них серьезной моральной проблемы. («Пациенты управляют психиатрической лечебницей: почему высокотехнологичные продукты и сводят нас с ума и как восстановить здравомыслие» — Cooper, A. (1999). The inmates are running the asylum: Why high-tech products drive us crazy and how to restore the sanity).

Когда системы соответствуют потребностям пользователей, удовлетворенность часто улучшается буквально драматически. В исследовании Gartner, проведенном в 1992 году, применение методов оптимизации юзабилити увеличило степень удовлетворенности пользователей системы на 40%. (Bias & Mayhew, 1994).

Снижение текучести кадров

Компания Humantech, Inc. изучала эргономику окружающей среды служебных помещений и производительность по выборке из 4000 управленческих, технических и офисных работников в рамках широкого среза отраслей американской промышленности. Опросы показали, что у респондентов, работающих с видеомониторами, было в 2 раза больше жалоб на дискомфортные ощущения в области плеч и шеи, в 3 раза чаще они сообщали о чрезмерном напряжении глаз. У таких работников наблюдался более высокий уровень абсентеизма при низкой удовлетворенности работой, а текучесть кадров у них возросла до 30%. («Почему эргономику больше нельзя игнорировать» — Schneider, M. F. (1985). Why ergonomics can no longer be ignored).

Увеличение легкости использования

Учет легкости использования при разработке ваших продуктов фактически экономит деньги. Отчеты показывают, что гораздо более экономно учитывать потребности пользователей на ранних этапах проектирования, чем решать их позже. Например, в книге “Разработка программного обеспечения: подход практикующего” (Software Engineering: A Practitioner’s Approach), ее автор, инженер-программист Роберт Прессман (Robert Pressman) показывает, что вместо каждого доллара, вложенного в решение проблемы во время конструирования продукта, 10 долларов будет потрачено на ту же проблему во время его производства, и первоначальный условный доллар нужно будет умножить на 100 или большую цифру, если проблему придется исправлять после выпуска продукта. (IBM, 2001).

Повышение простоты обучения

Исследование издания “Computer + Software News“ (1986) показало, что пользователи поставили легкость использования на второе место в рейтинге важных факторов покупки с результатом 6.8 из 10 баллов, в то время как легкость обучения оказалась четвертой с показателем 6.4. (Bias & Mayhew, 1994).

Увеличение доверия к системам

При редизайне сайта EuroClix перед его перезапуском проводились пользовательские испытания. За первые 6 месяцев для участия в них зарегистрировалось более 30 000 пользователей. Это исследование ясно показывает, что проблемы доверия потребителей могут быть значительно смягчены предоставлением релевантной информации тогда, когда у пользователей возникает в ней потребность. («Разработка модели доверия для электронной коммерции: приложение для маркетинга разрешительного характера на веб-сайте» — Egger, F. N. & de Groot, B. (2000). Developing a model of trust for electronic commerce: An application to a permissive marketing web site).

Снижение затрат на поддержку

Несколько лет назад функция объединения страниц при печати в текстовом редакторе Word для Windows провоцировала множество длинных — средней продолжительностью 45 минут — обращений в службу поддержки Microsoft. По результатам юзабилити-тестов пользовательский интерфейс этой функции был исправлен. При выпуске следующего релиза программы количество звонков в службу поддержки радикально снизилось, а корпорация Microsoft признала наличие «значительной экономии средств». (Bias & Mayhew, 1994).

Известный производитель принтеров выпустил драйвер, при установке которого множество пользователей испытывали затруднения. Служба поддержки получила более 50 000 обращений за консультациями, что обошлось компании почти в 500 000 долларов в месяц. Чтобы исправить ситуацию, производитель отправил пользователям письма с извинениями и дискету с патчем исправления (по цене 3 доллара США). В итоге проблема стоила компании $900 000. Пользовательские тестирования драйвера перед его выпуском не проводились. Если бы продукт был подвергнут даже самому простому юзабилити-тесту, то проблема могла бы быть выявлена ​​и исправлена при значительно меньших затратах» (Bias & Mayhew, 1994).

Снижение затрат на обучение/документацию

В другой компании провели анализ затрат и выгод и подсчитали, что тщательно продуманный графический интерфейс новой системы имеет внутреннюю норму прибыли 32%. Этот показатель достигается за счет сокращения времени обучения на 35%, уменьшения времени испытаний на 30% и, среди прочего, повышения производительности труда. («Финансовое обоснование антропогенных факторов для внутреннего проекта развития» — Dray, S. M. & Karat, C. (1994). Human factors cost justification for an internal development project).

В одной из исследованных компаний обучение конечных пользователей для внутренней компьютерной системы, спроектированной с учетом требований юзабилити, занимало один час по сравнению с полной неделей обучения для аналогичной системы, не оптимизированной с точки зрения простоты использования. В результате улучшения юзабилити компания AT & T сэкономила 2 500 000 долларов, предназначенных на обучение персонала. (Bias & Mayhew, 1994).

Исследование издания “Computer + Software News“ (1986) показало, что системные менеджеры оценили легкость обучения как седьмой по важности из 10 главных факторов в пользу покупки. (Bias & Mayhew, 1994).

Читайте также: Как построить бренд через оптимизацию конверсии и юзабилити?

Вывод

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

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

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

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

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

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

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

По материалам: ida.liu.se  Источник изображения: kiwi_jono

01-07-2017

Простое руководство по удобству использования веб-сайта — лучшие практики 2020

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

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

Когда они уходят, они исчезают: 88% онлайн-пользователей вряд ли вернутся на веб-сайт после неудачного опыта.

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

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

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

Оптимизировать для мобильных устройств

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

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

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

В некоторых регионах мира этот показатель уже превысил. Сегодня примерно 75% продаж электронной коммерции в Китае приходится на мобильные устройства.

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

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

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

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

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

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

Следуйте стандартам WCAG

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

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

Вот некоторые категории инвалидности, которые могут повлиять на людей в Интернете:

• Аудитория
• Когнитивный
• Неврологический
• Физический
• Выступление
• Визуальный

Итак, что вы можете сделать, чтобы сделать свой веб-сайт более доступным? Приведу несколько примеров.

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

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

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

У WCAC есть четыре основных принципа для соответствия своим стандартам доступности в Интернете.

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

Придерживайтесь общих элементов дизайна

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

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

Почему?

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

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

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

Это не то, что вы ожидаете от McDonald’s. Вы хотите фастфуд и быстрое обслуживание. Конечно, это творческий и уникальный подход, но он мешает потоку клиентов и фактически мешает их опыту.

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

Согласно недавнему исследованию, это самые стандартные элементы, которых люди ожидают при посещении веб-сайта:

• Логотип в верхнем левом углу экрана
• Контактная информация в правом верхнем углу экрана
• Горизонтальная навигация по главному меню в заголовке вверху каждой страницы
• Строка поиска в шапке
• Социальные сети следуют за значками в нижнем колонтитуле

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

Создание визуальной иерархии

Человеку требуется 2,6 секунды, чтобы попасть в область веб-сайта, которая вызовет у него первое впечатление. Это происходит автоматически.

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

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

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

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

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

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

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

Это факторы, которые нужно учитывать при разработке визуальной иерархии для удобства использования веб-сайта.

• Размер
• Цвет
• Контраст
• Позиция
• Негативное пространство
• Выравнивание

Упростите навигацию

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

Как пользователь добраться из точки А в точку Б? Сколько времени это занимает? Сколько кликов им нужно сделать?

Это все факторы, которые необходимо учитывать.Посмотрите на 10 основных причин, по которым корзину бросают.

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

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

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

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

Все это связано с навигацией.

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

Подтвердите доверие

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

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

Вот чего ожидают люди, попадая на главную страницу.

Имея в виду эти числа, как вы думаете, каким будет восприятие веб-сайта, если на главной странице нет информации о продукте, контактной информации или страницы «О нас»? Будет отрицательно.

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

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

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

Убедитесь, что ваш контент разборчиво

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

Взгляните на некоторые из лучших шрифтов, которые сочетаются друг с другом в 2020 году.

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

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

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

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

Будьте последовательны

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

Например, давайте проанализируем эту страницу продукта от Lululemon.

• Изображения продукта слева
• Название продукта вверху справа
• Цена ниже названия продукта
• Описание справа
• Выбор цвета под описанием
• В корзину справа внизу

Все очень просто и понятно.В этом макете нет абсолютно ничего плохого.

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

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

Заключение

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

Это самые важные элементы юзабилити веб-сайта в 2020 году:

• Оптимизация для мобильных устройств
• Доступность веб-сайта
• Общие элементы дизайна
• Визуальная иерархия
• Простая навигация
• Доверие
• Контент для чтения и сканирования
• Согласованность от страницы к странице

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

Повышение удобства использования — непрерывный процесс

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

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

Улучшенное сопоставление Salesforce:

• Интеграция должна упростить обмен информацией. Мы создали новый интерфейс для сопоставления полей между Mautic и Salesforce, что упрощает процесс.Более того, теперь вы можете указать, какая система является главной для каждого отображаемого поля. Поэтому, если вы определите, что номер контактного телефона можно обновить только в Salesforce, эти данные будут передаваться из Salesforce в Mautic, а не наоборот.

Улучшение работы редактора:

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

Release 2.7 экономит время и оптимизирует рабочий процесс, добиваясь невероятных успехов в повышении удобства использования для маркетологов. Этот выпуск теперь доступен для загрузки нашему сообществу открытого исходного кода, а теперь доступен для пользователей Mautic Cloud. Более подробную информацию об этом выпуске вы можете найти здесь. Если у вас есть какие-либо вопросы или вы обнаружите новые проблемы, которые возникают, присоединяйтесь к нашей команде обратной связи и обращайтесь к нам на форумах сообщества, в Slack или в социальных сетях (Facebook и Twitter), и мы ответим, как только сможем.

Основы оценки юзабилити | Usability.gov

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

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

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

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

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

Каковы методы оценки и когда их следует применять?

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

Возможности для тестирования включают:

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

Работа с данными тестирования

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

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

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

Повышение удобства использования в сжатые сроки

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

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

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

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

Ниже вы увидите, как именно они это сделали.

Фотография предоставлена: LiquidPlanner

Ниже приводится выдержка из The Project Guide to Enterprise Product Design . Бесплатное руководство объясняет передовой опыт, основанный на реальных проектах.

Настройка контекста

Перед тем, как перейти к фактическому процессу, давайте рассмотрим группы пользователей и цели проекта.

1. Основные лица

LiquidPlanner обслуживает три основные группы пользователей:

• Менеджеры по продукту — Чемпионы продукта, люди, которые «живут и дышат LiquidPlanner». Эти лица, принимающие решения, гарантируют, что команда использует продукт для отслеживания времени, совместной работы и использования функций, которые им помогают.
• Функциональный менеджер — Другие лица, принимающие решения, такие как UX-менеджер, которые контролируют команду и обеспечивают ее подотчетность.
• Frontline Contributors — Люди, которые используют продукт больше всего. Эти участники проекта, возможно, не выбрали LiquidPlanner сами, но они используют его каждый день в своих проектах.

2. Цели проекта

Следующие количественные и качественные цели будут определять успех проекта для функции шаблона панели мониторинга:

• Увеличьте использование информационных панелей в течение 30 дней после выпуска. Используя Heap для отслеживания событий в приложении, они обнаружили, что трение при создании информационных панелей сдерживало весь продукт.

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

• Завершить проект за 3 месяца. Начиная с января 2016 года запуск был назначен на начало апреля, что дало команде сжатые сроки для разработки правильного решения.

Этап первый: открытие и концепция

(начало января 2016 г.)

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

Изучая шаблоны в приложении из Heap, команда классифицировала наиболее часто создаваемые информационные панели:

• Информационные панели проекта
• Панели инструментов команды
• Информационные панели портфолио.

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

Этап второй: создание и тестирование потоков средней точности

(начало января 2016 г.)

Сразу после сеанса работы с интерактивной доской Эдвард использовал Adobe Illustrator для создания версий эскизов на белой доске со средней точностью. Эти потоки mid-fi становятся ключом к промежуточному этапу внутреннего тестирования перед прототипированием Hi-Fi и тестированием с пользователями.

Для первоначальной обратной связи на ранней стадии Эдвард показал потоки пользователей mid-fi 5-10 коллегам за пределами группы разработчиков.Он проводил эти случайные тесты индивидуально, объясняя проблему и собирая отзывы о предлагаемой модернизации процесса создания информационной панели.

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

Этап третий: прототипирование Hi-Fi

(середина января — февраль 2016 г.)

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

1. Создание

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

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

• Убедитесь, что люди знают, как создавать новую панель мониторинга.

• Подтвердите, что 3 шаблона тестирования по умолчанию являются полезными вариантами (проект, портфолио, команда)

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

• Определите, какие виджеты по умолчанию наиболее полезны в шаблоне панели мониторинга.

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

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

Hi-Fi прототип первого экрана в потоке для создания шаблона приборной панели.

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

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

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

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

2. Тестирование юзабилити и итерация

Команда провела удаленные модерируемые юзабилити-тесты с 14 людьми через Join.мне.

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

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

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

Пользователи считали, что прототип Hi-Fi уже полностью разработан.

Юзабилити-тестирование показало, что дизайн работает хорошо как система:

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

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

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

• Пользователи действительно испытывали некоторые трудности с доступом к созданной приборной панели.

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

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

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

Этап четвертый: разработка и запуск в эксплуатацию

февраль — апрель 2016 г.

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

Даже когда команда Эдварда все еще тестировала прототипы, разработчики уже создавали проверенные итерации. «Совместные прототипы Hi-Fi и результаты тестирования вселили в наших разработчиков достаточно уверенности, чтобы реализовывать наши проектные решения непосредственно в коде», — сказал Эдвард.

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

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

Благодаря эффективному созданию прототипов Hi-Fi и тесному сотрудничеству команда разработчиков запустила новую функцию 9 апреля 2016 г. в срок и в рамках. Первые результаты обнадеживают:

• Из 17 000 информационных панелей, когда-либо созданных в LiquidPlanner, 1700 (10%) были созданы через 2 недели после запуска.

• Функция шаблона отвечает за 75% новых информационных панелей, создаваемых в приложении.

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

«Я был потрясен числами», — сказал Эдвард. «Было здорово увидеть, что то, над чем я работал, стало настолько популярным среди пользователей».

На вынос

Основываясь на успехе LiquidPlanner, помните о следующих выводах в процессе разработки собственного продукта:

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

• Для повышения эффективности переход от эскизов к пользовательским потокам и созданию прототипов Hi-Fi — это нормально, если вы тщательно тестируете. Для существующего продукта прототипы Hi-Fi несут меньший риск, поскольку стандарты визуального дизайна уже проверены.

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

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

• С помощью подробных прототипов Hi-Fi и тесного сотрудничества разработчики могут вносить изменения в код с меньшим риском неверной интерпретации.

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

PPT — Повышение удобства использования веб-сайта Презентация PowerPoint, скачать бесплатно

Полное руководство по началу работы

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

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

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

Что такое юзабилити-тестирование?

[источник изображения]

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

Основное внимание уделяется:

• Простоте использования
• Простоте обучения или ознакомления с системой
• Удовлетворенность пользователя всем опытом

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

Почему это выполняется?

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

Это относится не только к программным системам. Любая машина / интерфейс, взаимодействующий с людьми, должен удовлетворять этим правилам. Как спросить? Демократия пострадала бы, если бы машины для голосования не использовались. Я бы не проголосовал, если бы мне пришлось нажимать более одной кнопки, чтобы выбрать моего кандидата, а вы? В яблочко!

Для более конкретного примера программного обеспечения ознакомьтесь со статьей Джареда Спула за 300 миллионов долларов, в которой четко объясняется, как размещение кнопки повлияло на бизнес.

Когда проводится юзабилити-тестирование?

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

Юзабилити Результаты тестирования влияют на дизайн продукта. Итак, в идеале юзабилити-тестирование должно начинаться на уровне дизайна. Но это еще не все; программное обеспечение претерпевает множество изменений / интерпретаций / реализаций на протяжении всего процесса SDLC. Чтобы убедиться, что мы не допускаем ошибок, связанных с удобством использования, на любом из этих этапов — это тестирование следует проводить часто и непрерывно для получения максимальных результатов.

Кто проводит это тестирование?

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

Более продвинутый подход — нанять пользователей, работающих в режиме реального времени, и дать им определенные задачи. Фасилитатор (ы) может разработать эти задачи и получить результаты от пользователей.

Затем пользователи могут предоставить информацию о том, была ли задача успешной или нет:

• Задача могла быть выполнена легко
• Был ли опыт интересным, увлекательным или раздражающим — их отношение к программному обеспечению

Как это проводится? — Методы

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

Это лишь некоторые из способов, которыми проводится это тестирование.

Метод № 1) На этапе проектирования вы можете просто нарисовать дизайн своего веб-сайта / приложения на листе бумаги и оценить, будет ли он работать или нет.

Метод № 2) Исследовательский метод заключается в создании сайта и выполнении некоторых случайных тестов (разработкой / дизайном / QA — любой или всеми внутренними группами) для определения факторов удобства использования.

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

Метод № 4) Используйте инструмент, который предоставит статистику на основе представленных входных каркасов и проектов.

Метод № 5) Нанять стороннюю команду по удобству использования, которая специализируется в этой области.

Метод № 6) Отправьте дизайн своего сайта и макеты внешнему оценщику и получите от них результаты.

Структурированный процесс юзабилити-тестирования состоит из следующих шагов:

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

Шаг № 2) Разработка задач, которые пользователи собираются выполнять в приложении –Список ситуаций, в которых пользователи собираются использовать форму приложения, должен быть составлен до запуска теста. Это может включать в себя что-то вроде: «Найдите X-box и купите его» или «отправьте вопрос в службу поддержки» и т. Д. На сайте электронной коммерции. Задачи должны точно отражать реальные транзакции, для которых пользователи будут использовать сайт.

Шаг № 3) Содействие тестированию — Группа юзабилити попросит пользователей выполнить задачи на сайте и будет собирать информацию о ходе и результатах тестирования.Это действительно имеет огромное значение, когда команда дизайнеров участвует, пока пользователи работают над приложением. Это дает им лучшее представление о том, как приложение использовалось и где оно не доставляло того, чего хотел пользователь, и т. Д., Из первых рук.

Шаг 4) Анализ результатов — В конце теста мы можем узнать время, которое потребовалось для выполнения задач, независимо от того, была ли задача успешна или нет, и т. Д., Так что в основном это сырые данные. Результаты должны быть представлены всем заинтересованным сторонам и проанализированы для выявления потенциальных проблемных областей.

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

Есть также много инструментов, которые помогают в этом процессе. Все эти инструменты можно условно разделить на следующие категории:

Категория № 1) Создавайте задачи / тесты и предоставляйте их пользователям (поиск пользователей и предоставление им задач — это ручная деятельность, не связанная с инструментом). Пока они выполняют эти задачи, фасилитатор может смотреть на их экран и взаимодействовать с ними. Это могло быть в строчках типа «Skype».

Категория № 2) Инструмент предоставляет пользователей или вы можете выбрать своих собственных пользователей.Вы можете представить свою страницу / дизайн и задачи, которые необходимо выполнить. Инструмент, в свою очередь, предоставит вам видео взаимодействия с пользователем, а также его комментарии. Вы можете сделать свой собственный анализ.

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

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

Категория № 5) Инструменты, которые привлекают пользователей для проверки удобства использования.

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

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

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

Дополнительная литература => Список лучших инструментов тестирования юзабилити

Из того, что мы обсуждали до сих пор, это мои впечатления:

# 1) Тестирование юзабилити — это не полная задача обеспечения качества.Роль, которую традиционные группы QA могут играть в этом контексте, — это роль фасилитатора, который будет создавать задачи, проводить тест и интерпретировать результат. «Тестировщиком» в данном случае на самом деле является пользователь.

# 2) Конечные результаты или результат тестирования удобства использования не являются дефектами. Это простая информация о том, что чувствовал пользователь, что ему понравилось, а что нет — в основном необработанные данные. Работа юзабилити-тестера не заканчивается отчетом о результатах (в случае традиционных заданий QA мы сообщаем об ошибках и не участвуем в их исправлении), она включает в себя предоставление предложений о том, как сделать программное обеспечение более удобным для взаимодействия с пользователем.

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

Заключение

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

Читайте также: Полное руководство по тестированию веб-приложений.