Введение в юзабилити. Элементарные основы юзабилити

17.11.14 2.8K

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

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

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

Так почему же к одним люди идут и надолго остаются, а от других бегут как от огня? Ответ на этот вопрос такой же, как на «А почему вы купили этот диван, а не тот?». Потому что удобнее:

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

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

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

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

• Контент. Информационное наполнение ресурса – это основа, стержень, без которого сайт не имеет смысла. Посетителям важно с легкостью воспринимать текст и извлекать из него всю необходимую информацию. Если же этого не происходит – человек не будет лишний раз ломать голову и отправится на поиски чего-то более понятного;
• Функционал. Тот, кто написал в жизни пару программ, с уверенностью может сказать, что сразу ничего не работает. Ошибки могут быть очевидны, а могут затаиться и обнаружить себя в самый ответственный момент. Во время работы сайта, особенно на первых этапах, постоянно выявляются недочеты, и для разработчиков очень важно вовремя на них реагировать. Если же какая-то функция сайта не выполняется (или выполняется некорректно ) в течение длительного времени – даже самые преданные пользователи такого не поймут и будут беспощадны;
• Кроссбраузерность и независимость от платформ. Если вы думаете, что ваш любимый Internet Explorer – единственный и неповторимый, то попросите у Билла Гейтса пирожок с полки:

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

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

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

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

Почему это так важно

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

Казалось бы, зачем же следовать нормам юзабилити, если сайт создаётся не во благо человечества, а исключительно как источник дохода?

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

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

Как добиться удобства

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

Интернет-магазин

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

• Качественная визуализация товаров. Когда человек тратит свои деньги, он должен знать – на что. Хорошие фотографии помогут разбудить в посетителе покупательский интерес. Но стоит помнить, что изображение должно соответствовать реальному предмету;
• Как можно более быстрая загрузка страниц. Если человек решил купить – важно, чтобы его ничего не остановило;
• Чем больше покупатель знает о товаре, тем лучше. Следует тщательно проработать описание всех деталей, тогда доверие посетителей значительно повысится. К примеру, покупателям будет очень полезно знать, имеется ли товар в наличии;
• Помогайте посетителю найти нужный продукт. Достаточно сложно создать удобную навигацию при обилии категорий. Когда пользователь просматривает информацию о конкретном товаре, следует ненавязчиво предлагать ему похожие. Возможно, таким образом, человек найдет то, что ему нужно или подумает «А не купить ли мне и то, и другое ?»;
• Элементы, отвечающие за выполнение целевых действий, должны быть четко обозначены. Кнопка «Купить » обязана сразу же бросаться в глаза, ведь именно покупки вы и добиваетесь от посетителя.

Требуется аудит

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

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

• Анализ аудитории, на которую рассчитан ресурс;
• Задачи, которые выполняет сайт;
• Полное описание и анализ функционала;
• Анализ структурной организации и рекомендации по её улучшению;
• Некоторые советы по привлечению рекламодателей;
• Технические параметры сайта;
• Анализ структуры и содержания контента.

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

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

Как протестировать юзабилити

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

Ниже представлены некоторые из них:

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

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

Хорошо Плохо

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

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

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

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

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

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

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

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

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

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

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

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

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

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

О навигации

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

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

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

О контенте

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Заключение

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

Что собой представляют главные принципы Usability? На этот и многие другие вопросы вы найдёте ответы в статье. Принципами «Юзабилити» называют общепринятые взгляды на взаимодействие с дизайном, которые ввёл Нельсен Якоб (основоположник «Юзабилити»). Эти воззрения, скорее, являются набором правил, а не жёсткими руководствами, поэтому их именуют «Эвристиками». Всего таких принципов существует десять.

Видимость статуса

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

Эффективность

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

Свободный выбор

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

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

Стандарты

Четвёртый принцип Usability - последовательность и стандарты. В Сети уже существуют определённые устоявшиеся стереотипы (контакты в верхнем углу, вид корзины и так далее). Тем не менее одно обозначение может иметь несколько видов, поэтому неопытный пользователь среди них может запросто заблудиться. К примеру, электронные корзины идентичны тележкам, обычным корзинам, ультрамодным пакетикам и прочему. А для появления последовательности необходимо выбрать какой-нибудь определённый стиль, который нужно соблюдать везде. Это касается и вёрстки, и шрифтов, и текста, и картинок.

Профилактика ошибок

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

Это касается и кнопок. К примеру, предложение «Принять» обычно делают ярче и крупнее, чем просьбу «Очистить форму». Вы должны подсказывать известные вам сведения о вводимой информации (код региона, формат телефона и так далее).

Упрощение

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

Гибкость

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

Дизайн

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

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

Помощь

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

Поддержка

Почему главные принципы Usability так важны? Давайте рассмотри десятый принцип, который называется «Документация и помощь». Материалы и поддержка должны быть простыми и понятными, легкодоступными, соответствовать целям пользователя. Вдобавок документация не должна быть объёмной. Необходимо, чтобы она содержала чёткие шаги. Если материалы слишком большие, можно сделать краткую навигацию для быстрого перехода по разделам, а также поиск по поддержке.

«Юзабилити»

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

Специалисты User Interfase Engineering определили, что в 60% случаях люди не могут разыскать необходимые им сведения в вебе. В итоге у них снижается производительность труда. Они не желают больше возвращаться на сайт, из-за которого вынуждены терять драгоценное время.

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

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

Создание

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

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

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

А что такое тестирование Usability? Принцип этого нюанса не каждый знает. Вообще, он является частью процесса создания «Юзабилити». В типичном тесте человеку необходимо выполнить несколько задач с помощью прототипа (или иной системы). Во время работы наблюдатель записывает, что говорит и делает пользователь. Как правило, такой тест проводится с одним или двумя людьми, действующими совместно.

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

Шаги дисциплины

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

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

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

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

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

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

Составляющие

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

У «Юзабилити» имеется пять количественных составляющих:

• Эффективность: после ознакомления пользователей с дизайном, как быстро они выполнят то же задание?
• Обучаемость: насколько легко люди могут реализовать базовые задачи, впервые используя незнакомый им интерфейс?
• Ошибки: сколько погрешностей делает человек, насколько они серьёзны, легко ли он может их исправить?
• Запоминаемость: если пользователь вернулся к интерфейсу через определённый период времени, удастся ли ему восстановить свои навыки работы с ним?
• Удовлетворённость: до какой степени человеку приятно пользоваться данным интерфейсом?

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

В Web-e «Юзабилити» считается необходимым условием выживания. Если с сайтом сложно работать, посетители с него очень быстро уходят. Если на главной странице веб-узла ясно и чётко не указано, чем занимается предприятие, какие задачи ресурс позволяет выполнить, пользователи будут искать другой веб-узел. Люди уйдут также, если сайт запутан, информация на нём трудна для понимания и не отвечает на их ключевые вопросы.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Новый интерфейс оценивается с двух позиций:

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

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

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

Статью подготовила Виктория Закирова.

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

Что

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

У юзабилити есть пять количественных составляющих:

• Обучаемость : насколько легко пользователи могут выполнить основные задачи, впервые встретившись с незнакомым им интерфейсом?
• Эффективность : после того, как пользователи ознакомятся с дизайном, как быстро они могут выполнить то же задание?
• Запоминаемость : После того, как пользователь снова вернется к интерфейсу через определенный промежуток времени, насколько легко ему будет восстановить свои навыки работы с данным интерфейсом?
• Ошибки : сколько ошибок делает пользователь, насколько серьезны эти ошибки, насколько легко пользователь может исправить эти ошибки?
• Удовлетворенность : насколько пользователю приятно пользоваться данным интерфейсом?

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

Почему

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