Java, UX, HTML, CSS, WEB-design

Руководство по эвристическим обзорам веб-сайтов

Краткое описание по статье Руководство по эвристическим обзорам веб-сайтов

Название: Руководство по эвристическим обзорам веб-сайтов . Краткое описание: [ad_1] ⭐ Ли Хауэ . Дата публикации: 19.02.2022 . Автор: Алишер Валеев .

Для чего создан сайт Novosti-Nedeli.ru

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

Сколько лет сайту?

Возраст составляет 3 года

[ad_1]

  • Ли Хауэллс

  • 0 Комментарии

Руководство по эвристическим обзорам веб-сайтов

  • 9 минут чтения

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

Краткое резюме ↬

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

Как определить, является ли веб-сайт мусором

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

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

Дальнейшее чтение на SmashingMag:

  • Критика веб-дизайна: практические советы
  • Подробное руководство по планированию веб-сайта
  • 15 основных проверок перед запуском вашего сайта

Еще после прыжка! Продолжить чтение ниже ↓

Консультационные обзоры

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

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

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

Эвристика

Артистизм в танцах на льду.
(Изображение: Рик С.)

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

Все, что блестит, не золото

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

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

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

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

Метрики успеха

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

Многослойный торт

Многослойный торт.
(Изображение: Шайнверферманн)

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

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

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

  • Легко ли найти стандартные элементы (такие как заголовки страниц, навигация по веб-сайту, навигация по страницам и политика конфиденциальности)?
  • Есть ли хороший баланс между плотностью информации и пустым пространством?
  • Имеет ли веб-сайт последовательный и четко узнаваемый внешний вид, который будет привлекать пользователей?

Для доступности мы могли бы сформулировать такие вопросы:

  • Достаточно ли цветового контраста на веб-сайте, чтобы сделать весь контент доступным?
  • Удобен ли веб-сайт при более низких разрешениях (например, 1024 × 768 пикселей)?
  • Проверяет ли CSS службы проверки W3C?

Что касается письменной копии, наши вопросы могут включать:

  • Легко ли сканировать страницы на экране? Они разбиты на заголовки и подзаголовки? Абзацы короткие?
  • Определены ли аббревиатуры и аббревиатуры при первом использовании?
  • Отдает ли веб-сайт предпочтение картам, диаграммам, графикам, блок-схемам и другим визуальным элементам, а не длинным блокам текста?

Глубина

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

Разработка системы подсчета очков

Чтобы получить эталонную оценку для каждой эвристики, можно дать простую оценку. Например, 0 баллов, если он не соответствует метрике, 1 балл, если он находится на полпути, и 2 балла, если он выполняет свою работу. Таким образом, если акронимы или аббревиатуры определены в одних разделах, но не определены в других, то эвристика получит только 1 балл. Если сайт комфортно работал в разрешении 1024×768 пикселей, то он получал 2 балла.

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

Таблица, показывающая эвристические итоги
Итоги эвристических данных по категориям.

Визуализация

Визуальное представление этих данных помогает нам быстро выявлять проблемные области и упрощает сравнение веб-сайтов.

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

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

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

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

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

Обзоры конкурентов

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

Прямое сравнение

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

Оба веб-сайта имеют немного более высокие оценки по макету страницы и визуальному дизайну, но у них довольно слабые домашние страницы в формате традиционного базового блога. Их призывы к действию оцениваются довольно плохо (кроме рекламы!). У Smashing Magazine несколько лучшие результаты в плане навигации, потому что у него есть вкладки вверху, чтобы различать основные области контента, в то время как Webdesigner Depot практически не имеет навигации под рекламой в правой колонке. Smashing Magazine получил несколько более высокие оценки доступности по ряду второстепенных эвристик, таких как четкость текста, интервалы и контрастность.

Webdesigner Depot немного отстает по доверию из-за таких деталей, как основная ссылка на адрес электронной почты в нижнем колонтитуле (по сравнению с хорошо продуманной контактной формой в Smashing Magazine), а также из-за очень краткого текста в разделе «О программе». раздел «мы». Тем не менее, Webdesigner Depot набирает немного больше очков в визуальном дизайне благодаря своему красочному стилю. Конечно, как и при оценке выступлений в танцах на льду, любой процесс, используемый для оценки эстетики или дизайна, всегда будет субъективным, поэтому хорошей идеей будет иметь широкий набор критериев для различных аспектов дизайна.

Радарный график, показывающий эвристические данные — разгром
Эвристический анализ Smashing Magazine.

Радарная диаграмма, показывающая эвристические данные — WDD
Эвристический анализ Webdesigner Depot. Обратите внимание, что Webdesigner Depot на самом деле не имеет и не требует ввода форм, поэтому по умолчанию он получает 0 баллов в категории «Формы и ввод данных»; при желании эту оценку можно либо игнорировать, либо полностью удалить.

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

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

Заключение

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

Ресурсы

На основе работы, проделанной Userfocus. Узнайте больше и загрузите бесплатный шаблон, чтобы начать создавать собственные эвристические обзоры.

Сокрушительная редакция
(аль)



[ad_2]
Source: https://smashingmagazine.com

Заключение

Вы ознакомились с статьей — Руководство по эвристическим обзорам веб-сайтов

Пожалуйста оцените статью, и напишите комментарий.

Похожие статьи

Добавить комментарий

Ваш адрес email не будет опубликован.

Кнопка «Наверх»