Пример юзабилити-анализа с использованием персонажей. Основные правила юзабилити. Информационный продукт страницы поможет вам выделиться
Любой человек согласится, что практичность и юзабилити, является важным аспектом дизайна веб сайта. Работаете ли вы над портфолио веб-сайта, интернет-магазином или веб-приложением, сделать свои страницы более легким и приятным для посетителей является ключевым фактором. Многие исследования были проведены на протяжении многих лет для различных аспектов веб-дизайна и интерфейса, а результаты являются ценным, помогая нам улучшить нашу работу.
Информационный продукт страницы поможет вам выделиться
Вам не нужно создавать задачи в каждой из этих категорий - вам просто нужно просмотреть категории и решить, какая задача будет наиболее мотивировать ваших участников. Устранение неполадок.
- Уборка мусора.
- Охота за ревальщиком.
- Самопроизвольные задачи.
- Часть самогенерирована.
- Задачи «Кожа в игре».
Этот тип задачи - отличный способ узнать, могут ли пользователи выполнять задачи с вашей системой. С помощью задачи поиска мусора вы просите пользователей сделать то, что имеет один четкий, идеальный ответ: примером такого рода задач может быть: Вы едете за границу в следующем месяце, и вы ищете мешок хорошего размера, который вы можете взять в качестве ручной клади. Вы хотите, чтобы сумка была как можно больше, все еще удовлетворяя максимальным размерам багажа авиакомпании. Какая самая подходящая сумка вы можете получить? При хорошей охотничьей задаче будет один прекрасный ответ, поэтому попробуйте дизайнерскую команду, чтобы найти лучшее решение этой задачи, а затем посмотреть, смогут ли участники ее найти.
1. Ярлыки формы лучше всего работают над полем
Исследование установило, что идеальная позиция для ярлыков в формах – это расположение над полями ввода данных. На многих формах, ярлыки ставятся в левом поле, создавая две колонки, это выглядит хорошо, но не является самым простым макетом для использования. Почему это происходит? Потому что форма, как правило, вертикально ориентирована, т. е. пользователи заполняют форму сверху донизу. Пользователь просматривает форму вниз. Проследить ярлык в поле ниже легче, чем найти поле справа от ярлыка.
Ярлыки формы лучше всего работают над полем
С этим типом задачи вы показываете людям ответ - например, изображение того, что им нужно искать, и затем попросите их найти или купить его. Например, если вы тестируете приложение для фотографии, вы можете показать людям изображение, которое вы хотите найти, а затем попросить их найти его, создав свои собственные ключевые слова. Эта задача работает хорошо, если вы считаете, что текстовое описание задачи может дать слишком много подсказок.
Охотничьи охотничье-охотничье-охотничье-охотничьи задачи работают хорошо, когда вы знаете, что люди хотят делать с вашим сайтом. В этих ситуациях вместо этого попробуйте создать самопроизвольную задачу. С этим типом задачи вы спрашиваете участников, что они ожидают делать с сайтом, а затем вы тестируете этот сценарий. Например, вы можете оценивать киоск с театром с обычными театральными зрителями. Вы начинаете сеанс, беседуя с участниками и спрашивая, что они ожидают сделать с киоском. Например, вы можете услышать: «забронировать билеты на шоу», «узнать, что происходит» и «узнать, где парковать».
Позиционирование ярлыка слева также создает еще одну проблему: как, выравнивая влево или вправо, выровнять ярлыки? Левое согласование делает вид развертывания, но отключает ярлыки с поля, становится трудно различить, какие ярлыки применяются к какому полю. Правое согласование неудачно: оно делает формы красивыми, но менее развертываемыми. Ярлыки над полями работают лучше в большинстве случаев. Исследование также показало, что ярлык не должен быть смелым, хотя эта рекомендация не является убедительной.
Затем вы берете каждую из заданий поочередно и спрашиваете участника, чтобы он был более конкретным. Например, для задачи «заказать билеты на шоу» вы захотите узнать, какие шоу они предпочитают, например, пьесу, музыкальную или стойкую рутину. Сколько билетов они хотели бы забронировать? На вечернее или утреннее выступление?
Ваша задача - помочь участникам действительно продумать свои требования, прежде чем позволить им освободиться от системы, чтобы убедиться, что задача реалистична. Эти задачи хорошо работают, когда у вас есть хорошее представление о том, что люди хотят делать с сайтом, но вы менее уверены в деталях. С помощью частичной задачи, которую вы создаете самостоятельно, вы определяете общую цель, а затем просите участника заполнить пробелы. Например, вы можете сделать это, попросив участников принести данные с ними на сеанс и позволить им запрашивать свои собственные данные способами, которые представляют интерес.
2. Пользователи концентрируются на лицах
Люди инстинктивно замечают других людей сразу же, как только они попадают в их поле зрения. На веб-страницах, основное внимание мы обращаем на лица и глаза, что дает маркетологам хорошую возможность для привлечения внимания. Но наше стремление смотреть людям в лицо и глаза, это только начало, оказывается, мы на самом деле отводим свой взгляд в сторону от лица, на которое разглядываем.
Проблема с задачами юзабилити-теста заключается в том, что вы хотите, чтобы участники выполняли задачи как можно реалистичнее. Но есть большая разница между притворством купить отпуск в Испании и действительно купить праздник в Испании. Независимо от того, насколько хорошо они намерены, участники знают, что, если они ошибаются, никаких последствий нет. Вы можете смягчить этот риск, предоставив участникам реальные деньги, чтобы потратить на эту задачу.
Самый простой способ сделать это с веб-сайта электронной коммерции - просто дать участникам выкупленный ваучер на трассе во время теста или возместить их кредитную карту после того, как они совершили покупку. Связанный с этим подход для других систем заключается в том, чтобы стимулировать участника к самому продукту. Например, если вы тестируете крупноформатный принтер, который создает фотографические плакаты, вы можете попросить людей принести свои цифровые фотографии, а затем заставить их использовать принтер для создания плаката, который они хотят.
На карте тепла видно, что взгляд привлекает лицо ребенка, смотрящего прямо на нас.
А теперь ребенок смотрит на содержание. Обратите внимание на увеличение числа людей, обративших внимание на заголовок и текст.
Сам постер становится стимулом участника к участию. Этот подход также позволяет вам как можно ближе к реалистичному поведению, а также уверенность в том, что ваши участники являются правильной демографией, поскольку их стимул основан на самом продукте, который вы тестируете.
Задачи устранения неполадок - это специальная категория тестовой задачи, потому что люди не могут четко сформулировать свою задачу. Было бы неверно дать участнику письменную задачу, которую вы подготовили ранее, поскольку по самой своей природе это будет описывать проблему, которая должна быть решена. Что касается пользователя, продукт просто не работает, и они не знают, почему.
Вот исследование притягивания взгляда, которое демонстрирует это. Мы инстинктивно обращается к лицам, но если это лицо смотрит куда-то, в другую от нас сторону, мы будем также смотреть в этом направлении. Воспользуйтесь этим явлением путем привлечения внимания пользователей к самой важной части вашей страницы или рекламы.
3. Качество дизайна является показателем доверия
Были проведены различные исследования, чтобы выяснить, какие факторы влияют на восприятие людьми доверия веб-сайта.
Введение в понятие
Затем вы получите большую информацию о терминологии, которую люди используют для описания конкретной проблемы, а также о том, насколько хорошо ваша документация поддерживает реальное использование. Спасибо Майлсу Хантеру за то, что он придумал таксономию задач юзабилити.
Меня всегда удивляла скудная известность работы за пределами экспертов по юзабилити. Это несправедливо, потому что его работа, и особенно его знаменитый декалог «10 эвристичности юзабилити для дизайна пользовательского интерфейса» - это теоретическая основа, на которой основаны нынешние «хорошие практики» в дизайне пользовательских интерфейсов всей Всемирной паутины.
Одним из интересных находок этих исследований является то, что пользователи действительно судят о книге по ее обложке … или, скорее, о веб-сайте по конструкции. Такие элементы, как макет, последовательность, типографика, цвета и стили, — все влияет, как пользователи воспринимают ваш. Ваш сайт должен иметь не только хороший внешний вид, но и правильно позиционировать себя для вашей аудитории.
Принцип # «Видимость состояния системы»
Соответствует ли ваш сайт этим «святым» принципам? Продолжайте читать, и вы узнаете. Якоб Нильсен, пионер веб-юзабилити и автор знаменитого декалога «Эвристика юзабилити для дизайна пользовательского интерфейса». Очень важно, чтобы ваш пользователь постоянно информировался о том, что происходит, когда он взаимодействует на вашем веб-сайте, поскольку «за» происходит много вещей, которые он не видит, и это может вызвать неопределенность во многих ситуациях. Это кажется очевидным, но правда в том, что серьезные ошибки такого характера по-прежнему совершаются даже на сайтах важных компаний!
4. Большинство пользователей не используют прокрутку или используют…
Исследование Якоба Нильсена о том, сколько пользователей используют прокрутку, показало, что только 23% посетителей используют при их первом посещении веб-сайта. Это означает, что 77% посетителей не будет прокручивать; они просто просматривают содержимое на пространстве части страницы, которая видна на экране без прокрутки вниз. Более того, процент пользователей, которые прокручивают, уменьшается при последующих визитах, и только 16% прокручивает во время своего второго визита. Эти данные свидетельствуют, насколько важно, чтобы ваши ключевые места содержались на видном месте, особенно на целевых страницах.
Вы должны предоставить пользователю постоянную обратную связь. Это функция, которую они выполняют, например.
- Строки процесса, которые говорят нам о том, как продвигается загрузка файла.
- Сообщения, которые подтверждают, что «форма была отправлена правильно».
- Анимация, которая сообщает нам что-то, обрабатывается без инцидентов.
Принцип № «Согласованность между системой и реальным миром»
Система должна «говорить» пользователю на своем родном языке. И это относится не только к тексту, но и к таким элементам, как.
- Изображения.
- Порядок, в котором все сделано.
- Способ представления информации.
Это не значит, что вы должны втиснуть все в верхнюю часть страницы, просто вы должны сделать максимально эффективным использование этого района. Вытеснение содержимого этого района будет просто делать содержимое недоступным. Когда пользователь видит слишком много информации, они не знают, с чего начать поиск интересующей их темы.
Принцип № «Пользователь свободен и находится под контролем»
Не заставляйте пользователя следовать определенному пути, будь то плохой дизайн или даже преднамеренно, потому что вас интересует. Избегайте любой ценой «тупиков». Пользователь должен иметь возможность свободно перемещаться, легко находить «выходы» и «альтернативные маршруты» и иметь все необходимые ему средства, чтобы «делать» и «отменять».
Принцип № «Согласованность и стандарты»
Ваш сайт должен следовать согласованному стандарту на всех своих страницах. То есть вы не можете сделать, например, что меню работает по-разному в разных частях вашего сайта или меняет местоположение, потому что вы считаете, что это «лучше». Вы не можете использовать разные проекты для одной и той же вещи в разных разделах или переменной терминологии. Если в вашем интернет-магазине тележка называется «корзина» и имеет зеленую иконку на домашней странице, ее нельзя назвать «автомобилем» и иметь красную иконку на карточке продукта; он не может быть в одном углу, а иногда и в другом.
К примеру, Basecamp серьезно и грамотно использует пространство своего сайта. На расстоянии 768 пикселей в высоту показан большой экран на ктором размещен подзаголовок, ценностное предложение, призыв к действию, список клиентов, видео и краткий список возможностей с изображениями.
Будьте последовательны в принимаемых вами решениях. Очень часто можно найти ошибки такого типа в Интернете, особенно на веб-сайтах ветеранов, которые со временем меняются. Это относительно распространенная ошибка, связанная с серьезными несоответствиями, подвергая функциональность простым эстетическим проблемам. Те, кто знает больше всего, никогда этого не делают.
Принцип № «Предотвращение ошибок»
Не дожидайтесь, пока пользователь сделает ошибку, которую, как вы знаете, он собирается совершить, затем покажите ему предупреждение. Большинство ошибок предсказуемы, и вы должны решить их заранее.
- Включая превентивную контекстуальную информацию в проблемной точке.
- Подавление условий, которые подвержены возникновению ошибки.
- Запрос подтверждения пользователю.
- Выполнение проверок в режиме реального времени.
Это особенно важно для домашней страницы, где большинство посетителей будут незнакомыми. Для них на видной части нужно разместить следующее:
Название сайта,
Ценное предложение на веб-сайте (т.е. какие выгоды они получат от использования ИТ),
Навигация для основных разделов сайта, которые имеют отношение к пользователю.
Принцип # «Лучше узнайте, чем запомните»
Проверка в реальном времени, которая сообщает вам, что второй пароль, который вы установили, не соответствует первому, прежде чем давать «отправить». Поле, которое меняет цвет, чтобы напомнить вам, что вы оставили его пустым. . Пользователь должен всегда иметь всю имеющуюся информацию, и не должен быть вынужден использовать свою память для отслеживания потока взаимодействия. Сделайте это легко, поэтому вам не нужно запоминать, как вернуться на предыдущую страницу или как найти тот продукт, который вы уже видели и которого интересовали.
Однако, привычки пользователей, существенно изменились с тех пор. Последние исследования доказывают, что пользователям вполне комфортно с прокруткой, а в некоторых ситуациях они готовы прокрутить до нижней части страницы. Многим пользователям удобнее с прокруткой страниц, чем с нумерациией, а для многих пользователей наиболее важная информация о странице, не обязательно должна располагаются вверху.Так что это хорошая идея разделить ваш макет на части, для удобства просматривания, разделяя их с большим пробелом.
Принцип № «Гибкость и эффективность использования»
Если пользователь должен «помнить», как что-то делается на вашем веб-сайте, а не «знать» интуитивно, у вас есть проблема. Если пользователь должен помнить о решениях, которые он сделал ранее, потому что вы не показываете ему эту информацию, когда он в ней нуждается, в значительной степени обеднены, и у вас будет много других отбросов в Интернете. Некоторые пользователи уже знают ваш сайт и всегда выполняют те же действия. У вас есть «ускорители», которые позволяют им выполнять эти частые действия быстрее и быстрее?
5. Голубой — лучший цвет для ссылки.
Создавая для своего сайта уникальный дизайн, когда дело касается практичности, вспомните о том, что другие делают лучше. Следуйте условным обозначениям, поскольку, когда люди посещают новый веб-сайт, прежде всего они ищут информацию в тех местах, где они нашли бы ее на большинстве других сайтов. Они используют свой опыт серфинга других сайтов, чтобы осмыслить Ваш сайт. Это называется использованием шаблонов. Люди ожидают определенных вещей, к примеру, таких, как цвет ссылок, расположение логотипа сайта, расположение вкладок навигации и так далее.
Какого цвета должна быть ваши ссылки? Первое соображение это контраст: ссылки должны быть темными, достаточно для контраста с цветом фона Вашего сайта. Во-вторых, они должны выделяться от цвета остального текста. И, наконец, исследования показывают, что если практичность — это ваш приоритет, придерживайтесь синего цвета для ссылок, так лучше. Ссылки по умолчанию браузера синего цвета, чего люди и ожидают. Выбор другого цвета отнюдь не проблема, но она может повлиять на скорость, с которой пользователи найдут то, что ищут.
6. Идеальное окно для поиска — 27 символов шириной.
Какая идеальная ширина должна быть для окна поиска? Якоб Нильсен провел исследование зависимости практичности от длины поисковых запросов на веб-сайтах поля поиска. Оказывается, что большинство сегодняшних поисковых форм слишком короткие.
Исследование показало, что среднее окно поиска составляет 18 символов в ширину. Данные показали, что 27% запросов были слишком длинные и не помещается в нее. Расширение поля до 27 символов смогло бы вместить 90% запросов.
Окно поиска Apple слишком короткое, отрезает запрос «Microsoft Office 2008″.
В общем, поисковым полям лучше быть слишком широкими, чем слишком короткими, так, чтобы пользователи могли быстро просмотреть, проверить и представить запрос. Эта рекомендация очень простая, но, к сожалению, слишком часто игнорируются.
7. Белое пространство улучшает понимание
Большинство дизайнеров знает значение белого пространства, которое является пустым пространством между пунктами, картинками, кнопками и другими элементами на этой странице. Белое пространство приводит в порядок страницы пунктов, давая возможность дышать. Мы можем также группировать пункты вместе за счет уменьшения расстояния между ними и увеличения пространства между ними и другими элементами на этой странице. Это важно для демонстрации отношения между элементами (например, показывая, что эта кнопка применяется к этому множеству пунктов) и строительство иерархии элементов на странице.
Белые пространства также делают содержание более читабельным. Исследование обнаружило, что эффективно использовать пробелы между абзацами. Читателю легче сосредоточить внимание на процессе, если содержание находится на значительном расстоянии друг от друга.
В самом деле, раскладка клавиатуры на веб-странице (включая пробелы, заголовки, отступы и цифры), не может оказать заметного влияния на производительность, однако влияет на степень удовлетворенности пользователей сайтом.
8. Эффективное пользовательское тестирование не должен быть обширными
Якоб Нильсен исследовал идеальное число людей, которые увидят непрактичность сайта. Тесты показали, что всего лишь пять пользователей выявит около 85% всех проблем со своим сайтом, а 15 пользователей найдут почти все проблемы.
9. Информационный продукт страницы поможет вам выделиться
Если ваш сайт имеет страницы продуктов, люди, покупая в Интернете, безусловно, смотрят сквозь них. Но многим страницам не достает информации даже для посетителей, быстро просматривающих страницу. Это серьезная проблема, поскольку информация о продукте помогает людям принимать решения о покупке. Исследования показывают, что бедная информация о продукте составляет около 8% проблем практичности и 10% пользователей не удовлетворены изложенной информацией (т.е. пользователь отказывается и покидает сайт).
Предоставлять подробную информацию о Вашей продукции, но не попасть в ловушку, бомбардирующих пользователям слишком многим обилием текста. Сделайте информацию легко усваиваивающейся. Сделайте страницу развертываемой, разбивая текст на более мелкие сегменты, и используйте большое количество подразделов. Добавьте много изображений для Вашей продукции, и используйте правильный язык: не используйте жаргон, чтобы ваши посетители могли понять о чем речь.
10. Большинство пользователей не видят рекламу
Якоб Нильсен доложил в своем выступлении, что большинство пользователей в основном слепы к баннерам. Если они ищут фрагмент информации на странице или погружены в содержание, они не будут отвлекаться на рекламу в стороне.
Следствием этого является не только то, что пользователи будут избегать объявлений, но что они будут избегать всего, что выглядит как реклама, даже если это не объявление. Некоторые стили пунктов навигации могут выглядеть, как баннеры, так что будьте осторожны с этими элементами.
Площади баннеров на левой боковой панели Flashden на самом деле не реклама: это содержание ссылок. Они делают вид неудобно близкими к рекламным баннерам и поэтому могут игнорироваться некоторыми пользователями.
Тем не менее, объявления, которые выглядят как содержимое будут заставлять людей смотреть и кликать. Это может вызвать большой доход от рекламы, но происходит за счет «целевых пользователей» , так как они кликают на вещи, по их мнению, подлинного содержания. Перед тем, как идти по этому пути, рассмотрите компромисс: краткосрочные доходы по сравнению с термином «долгосрочного доверия».
Перевод и редакция: Рог Виктор и Андрей Бернацкий.
Будем надеяться, что эти десять примеров по юзабилити дизана вашего веб-сайта , помогут вам создавать удобные и качественные проекты.
Здравствуйте, уважаемые читатели моего блога!
Давненько я не был на связи. В прошлой статье: « », я рассказывал о важности юзабилити сайтов и основных ошибках, которые встречаются у новичков.
Также, спрашивал вас о важной ошибке, которая есть на моем блоге, предлагал акцию по бесплатному анализу блога моего читателя. В этой статье подведем итоги.
За последнее время было много различных дел. На самом деле я не переставал работать над своим блогом, редактировал некоторые статьи на блоге (зачем это нужно я писал ), добавлял новые статьи. Блог регулярно обновляется, вот посмотрите . В общей сложности за январь я опубликовал 11 новых постов (некоторые из них довольно объемные), это для меня немало, учитывая, что за весь 2014 год было опубликовано всего 42 поста. Большинство статей теперь не попадает на главную страницу и в RSS ленту и пишутся для . Если вы хотите их читать, то просто смотрите рубрику «Новичкам». На всех страницах блога в сайдбаре отображаются последние записи, там эти статьи отображены.
Сейчас я изучаю классный курс по созданию своих видеороликов, о котором расскажу в своем следующем посте – не пропустите. Кроме того, в ближайшее время я планирую пройти тренинг по работе со своей подписной базой, для меня это важное мероприятие. Своими успехами я также планирую делиться с вами на блоге, поэтому, как говориться – оставайтесь с нами, не пропадайте! 🙂 Впереди будет много интересного. Ну а теперь, перейдем к теме этого поста.
Критерии анализа юзабилити сайта
Как я уже говорил, сегодня я проанализирую один из блогов моих читателей, и сразу хочу перечислить основные критерии, на которые следует обратить внимание. Вот основной список параметров, которые будут проверяться.
1. Внешний вид сайта (блога) . Я не дизайнер, да и на вкус и цвет товарищей нет, но основные моменты – качество графики, расположение различных элементов (в плане общего внешнего вида), аккуратность дизайна и оформления постов и т.п., будем смотреть.
2. Скорость работы сайта. Сюда входит скорость загрузки страниц, количество графики и вес изображений на сайте.
3. Удобство навигации. Насколько легко пользоваться блогом. Соответствует ли навигация на всех страницах. Правильно ли работают ссылки. Есть ли постраничная навигация. Имеется ли карта блога/сайта. Удобно ли пользователю в целом перемещаться по сайту и находить нужную информацию. Имеется ли Мобильная версия сайта. Эти и многие другие вопросы будут рассмотрены в этом разделе.
4. Внутреннее содержание сайта. Соответствуют ли статьи блога тематике. Насколько качественно и полно изложен материал и подобраны «ключи». Имеется ли релевантный поиск по блогу. Объем и оформление текста.
5. Технические ошибки на сайте. Есть ли . Настроена ли . Правильная ли настройка индексации, наличие карт сайта и другие важные моменты.
Вот, в общем то и все самые важные вопросы в юзабилити сайта я перечислил. Конечно, это еще далеко не все. В процессе своего платного анализа я смотрю уже и в админку блога и использую различные инструменты для аналитики. Сегодня мы посмотрим блог моего читателя лишь поверхностно. Ну а если вы желаете, чтобы я полностью проанализировал ваш блог и дал свои советы по его улучшению, то заказывайте услугу « ».
Анализа юзабилити сайта – пример
Как и обещал, я взял блог одного из моих читателей. Причем, блог отдан был на растерзание абсолютно добровольно. И так, в процессе акции я выбрал несколько блогов, на которых имеется немало различных ошибок, в результате остановил свой выбор на блоге Вадима Глуховченко.
Пришлось выбрать не самый образцовый блог, дабы было, о чем говорить. В общем смотрите видео, а прямо под ним я перечисляю все ошибки, о которых рассказал в скринкасте.
Это далеко не все ошибки, которые имеются на этом блоге, я смотрел далеко не все. Если вы увидите что-либо еще, то пишите в комментариях. Думаю, что автор анализируемого блога будет вам благодарен!
Полный анализ своего блога вы можете заказать . В месяц я принимаю не более трех блогов, беру на анализ не все блоги. Перед тем, как взяться за анализ, я оцениваю его пользу для блога, смотрю количество важных ошибок и принимаю решение в необходимости проведения анализа.
Итоги акции «Угадай главную ошибку на блоге»:
Практически на каждом блоге есть различные ошибки, в том числе и у меня. В прошлой статье я предлагал читателям указать на самую главную мою ошибку. Угадать эту ошибку было не сложно. Главной целью я ставил перед собой получить ваше мнение облоге ну и подсказать мне еще какие-либо недостатки. Главной ошибкой является то, что у блога нет мобильной версии, и он не очень хорошо отображается на мобильных устройствах. Будем исправлять этот недостаток. Ну а первым, кто указал мне этот недостаток, стал Александр Нестеров.
На этом у меня все. До встречи в следующих постах!
С уважением, Александр Бобрин