Автор – Мадс Сёгард (Mads Soegaard)

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

Оригинал статьи: https://www.interaction-design.org/literature/article/usability-a-part-of-the-user-experiencey

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

Юзабилити относится к простоте доступа и использования продукта или веб-сайта. Это раздел UX дизайна. Хотя UX дизайн и юзабилити одно время взаимозаменяли друг друга, теперь мы должны понимать, что юзабилити является важной частью UX, однако не касается всего восприятия.  Мы можем точно определить юзабилити.

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

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

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

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

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

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

Наш дизайн

• Пользователь может перейти к кнопке “купить” в среднем за 294 секунды.
• В повторный заход пользователь переходит к кнопке “купить” за 209 секунд.
• 18% пользователей купили билет на целевой странице (лендинг пейдж).
• 42% пользователей переходят дальше после лендинг пейдж.

Дизайн Happy Huzzah’s Getcha There, Inc.

• Пользователь может перейти к кнопке “купить” в среднем за 198 секунд.
• В повторный заход пользователь переходит к кнопке “купить” за 135 секунд.
• 32% пользователей купили билет на целевой странице (лендинг пейдж).
• 12% пользователей переходят дальше после лендинг пейдж.

Эти показатели нам кое-что говорят. Нам нужно выяснить, что “Happy Huzzah’s Getcha There, Inc.” делает, потому кое-что там определенно работает.

Элементы юзабилити

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

Сервер

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

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

HTML

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

• Используйте ALT-теги. ALT-теги используются вместе с изображениями; они позволяют вам передавать дополнительную информацию об изображении, которое не отображается как часть основного текста. ALT-теги помогают индексировать в поисковых системах (они дают вам возможность сообщать поисковой системе о содержании изображения). Они также помогают с описанием скрин-ридера для читателей с ослабленным зрением.
• 404 страница не найдена (404 Not Found Page). Неработающие ссылки попадаются, особенно на крупных веб-сайтах. В идеале, вы должны регулярно тестировать все ссылки и исправлять любые сломанные, хорошо иметь план на случай, когда пользователи сталкиваются с неработающей ссылкой. Этим планом является «404 Not Found Page» — хорошо спроектированная страница 404 будет пытаться помочь пользователю вернуться к положительному опыту. Страница 404 по умолчанию не приносит пользы в этом отношении. Неуклюжая и примитивная, она создает у пользователей впечатление, что они подошли к концу эскалатора, который не прикреплен к полу. Они не хотят упасть и приземлиться на устарелое сообщение. Как дизайнер, никогда не упускайте это из виду. Эта небольшая вежливость играет немаловажную роль.

Визуальные факторы

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

• Размер и цвет шрифта — выбирайте шрифт, который легко читается. Это означает высокий уровень контраста с фоном и размерами шрифтов, достаточно большими для того, чтобы пользователи могли легко читать. Если некоторые из ваших пользовательских баз включают пожилых или людей с ослабленным зрением, сделайте шрифты более крупными.
• Брендинг (Branding) — брендинг, в частности логотип компании, помогает пользователям узнать, где они находятся в Интернете. Основываясь на характере движения глаз, идеальным местом для логотипа является верхний левый угол экрана. Это то место, на которое пользователи, читающие слева направо, вероятнее всего посмотрят, когда впервые попадут на сайт.
• Цвет макета — цвета должны быть последовательными, чтобы передавать брендинг, а также развивать эстетическую привлекательность. Зачастую им также необходимо передать иерархию информации.
• Навигация — чтобы пользователи могли извлечь максимальную пользу от сайта, им нужно добраться от точки A (точки входа) до точки B (где они хотят быть) как можно быстрее и проще. Поэтому нужно обеспечить полезные навигационные системы, в том числе (для более крупных веб-сайтов) функции поиска, чтобы облегчить этот переход.
• Контент — дизайнер может быть или не быть ответственным за создание копии сайта, но есть элементы дизайна в том, как вы показываете эту копию для пользовательского опыта.
• Заголовки — структурируйте контент на управляемые части с помощью заголовков и подзаголовков. Это означает разработку схемы для последовательного отображения каждого типа заголовка на сайте, обеспечивающего постоянный опыт работы пользователей по всему сайту.
• Параграфы — делайте параграфы понятными и легко узнаваемыми, чтобы предотвратить ситуацию, когда пользователь перегружен «стеной текста». Вы также можете применять принципы гештальта (Gestalt principles) к параграфам, чтобы лучше иллюстрировать отношения между блоками контента.

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

Тестировать ваш сайт легко благодаря множеству инструментов. Многие из них бесплатные, некоторые — условно-бесплатные (freemium), другие – платные (premium). Возьмите тот, который работает на вашем сайте, а затем пусть он собирает данные об удобстве использования. Многие дадут возможность протестировать вашу существующую систему; вы можете сказать по данным, какой опыт они переживают, что происходит правильно и неправильно. Вот список некоторых:

Simple Mouse Tracking — показывает, как пользователи взаимодействуют с вашим сайтом, записывая активность их мышки.

IntuitionHQ — дает возможность протестировать юзабилити веб-сайта. Также предлагает специальную функцию тестирования iPad.

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

Juicy Studio — инструмент для тестирования удобства чтения контента на сайте.

Pingdom — дает представление о быстроте реакции вашего сайта.

Элемент пользовательского опыта

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

Как мы видели выше, многие дизайнеры путают разницу между юзабилити и более крупной отраслью user experience. Основные области user experience включают (Юзабилити, 2014):

• Юзабилити: Мера способности пользователя зайти на сайт, легко использовать его и выполнить желаемую задачу. Помните, мы разрабатываем веб-сайты, где есть изобилие, поток, вместо того, чтобы фокусироваться на дизайне страницы и предполагать, что все произойдет позже.
• Полезный контент: Веб-сайт должен содержать достаточную информацию в легко усваиваемом формате, чтобы пользователи могли принимать обоснованные решения. Помните закон Хика (Hick’s Law): рационализируйте свой дизайн, чтобы он был простым. Используйте сдержанность.
• Желаемый/приятный контент: Лучший пользовательский опыт приходит, когда пользователь может создать эмоциональную связь с продуктом или веб-сайтом. Это значит выходить за рамки практичности и полезности, и двигаться к разработке контента, который создает эту связь. Эмоциональный дизайн — это огромная часть user experience. Английский веб-сайт грамматики, который предлагает ежедневные советы, может оказаться полезным. Но если этот совет забавный, пользователи не только запомнят правило, они могут вернуться за еще одним!
• Доступность (Accessibility) — Для людей с различными уровнями инвалидности, онлайн-опыт может быть глубоко разочаровывающим. Существует ряд стандартов доступности, которым сайты должны соответствовать, чтобы помочь слабовидящим, людям с нарушением слуха, нарушениям движения и т. д. Контент для обучения инвалидов требует тщательного рассмотрения, чтобы обеспечить более полный пользовательский опыт.
• Авторитет, доверие (Credibility) — Доверие, которое ваш сайт порождает в ваших пользователях, также играет определенную роль в user experience. Одна из самых больших проблем пользователей в Интернете — это безопасность (во многих случаях они также беспокоятся о конфиденциальности). Решение этих проблем с помощью вашего дизайна, например, путем демонстрации функций безопасности и легкодоступных политик в отношении этих проблем, поможет создать для пользователя чувство доверия.

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

В заключение

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

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

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

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

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

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

Где узнать больше:

Ливитт М.О, Шнейдерман Б., (2006). Основанные на исследованиях принципы веб-дизайна и юзабилити. Отдел здравоохранения и социальных служб США/ Основы юзабилити и user experience — http://www.usability.gov/what-and-why/user-experience.html

Беван Н. (1992). «Что такое юзабилити». Материалы 4-й Международной конференции по HCI, Штутгарт, сентябрь 1991 года — http://www.nigelbevan.com/papers/whatis92.pdf

Smashing Magazine (2012). «Юзабилити и пользовательский опыт».  — http://www.smashingmagazine.com/usability-and-user-experience/

Чепмен (2011) Всесторонний обзор инструментов тестирования юзабилити и пользовательского опыта», Smashing Magazine — http://www.smashingmagazine.com/2011/10/comprehensive-review-usability-user-experience-testing-tools/