Как протестировать юзабилити иконок на вашем ресурсе?

Posted on by riasevastopol

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

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

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

  • Интуитивные иконки: пособие по юзабилити

Как иконки воздействуют на юзабилити?

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

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

Аврора Бэдфорд (Aurora Bedford) из Nielsen Norman Group перечисляет главные преимущества применения иконок:

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

Как протестировать юзабилити иконок на вашем ресурсе?pНо существуют кроме этого и недочёты применения иконок.

По словам Золтана Гокза (Zoltan Gocza) из Centralway, иконки тяжелы для запоминания, в связи с чем они смогут нанести юзабилити большой вред.

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

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

Крейг Кистлер (Craig Kistler) из Small Farm Design растолковывает три несложных принципа, применимых к иконкам:

  • изображение и Текст совместно трудятся намного лучше, чем что-то одно. Но в случае если выбирать, то стоит дать предпочтение тексту.
  • Размещение иконок запоминается значительно стремительнее, чем их изображения. Если вы измените изображение иконки, но размещение покинете прошлым, визитёры в этом случае, в большинстве случаев, ничего не увидят. Но если вы поменяете размещение иконки, покинув прошлым ее внешний вид, это запутает визитёров.
  • Скорость, с которой среднестатистический человек выявит значение иконки, прямо пропорционально времени, за который команда решает, какую как раз иконку применять. Имеется в виду, что вещи, очевидные для веб-дизайнера (к примеру, иконка вопроса чтобы получить справку), более возможно будут очевидны и для визитёра, но не столь очевидные вещи, как, скажем, политика возврата, более тяжелы для понимания.

Вывод из всего этого только один: вы должны тестировать собственные иконки.

Необходимо ли применять лишь текст? Либо лишь иконку? А возможно текст и иконку совместно? Знают ли ваши визитёры иконки, каковые вы используете на сайте?

Имеют ли они другой суть на вторых сайтах, либо же эти иконки универсальные?

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

  • Как оптимизировать юзабилити иконок интерфейса?

5 элементов действенной иконки

В соответствии с Золтану, несущими громаднейшую сокровище иконками являются:

  • Универсальные иконки (к примеру, печать, закрытие, воспроизведение / пауза, ответ, твит, поделиться на Facebook).
  • Иконки, служащие для маркированного перечня, структурирования веб-страницы (к примеру, иконки для типов файлов — PDF, DOC и т.д.)
  • Иконки, делающие внешний вид веб-страницы более приятным.

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

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

1. Обнаружимость

Не хватает иконку видимой на странице. Она обязана пребывать в том месте, где этого ожидают пользователи. В соответствии с итогам опыта, совершённого Джаредом Спулом (Jared Spool) из User Interface Engineering, размещение иконок есть более серьёзным, чем их визуальные образы.

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

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

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

Очевидна ли их кликабельность? Не отвлекает ли от них внимание другой контент?

2. Распознаваемость

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

Заберём, например, иконку из WordPress с функцией «засунуть как текст» — «Т», воображающая собой несложный буфер обмена (clipboard). Эта достаточно распространенная иконка прекрасно известна всем тем, кто довольно часто набирает текст на компьютере.

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

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

3. Понятность

Аврора Бэдфорд согласна с тем, что только маленькое количество иконок есть универсальным, и уверен в том, что отсутствие стандартов вредит юзабилити и UX.

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

Так, в случае если коротко сформулировать, иконка возможно:

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

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

4. Необходимость

Спросите себя: вправду ли так нужна ваша иконка? Возможно ли обойтись без нее, применяв несложный текст?

Майкл Зушлаг (Michael Zuschlag), ведущий блог о UX и являющийся экспертом по инженерной психологии, вывел неспециализированное правило для определения того, есть ли иконка нужной: «Применение иконки нужно тогда, в то время, когда выполняются по крайней мере два из трех условий, обрисованных ниже:

  • Достаточно ограниченное пространство (через чур мелкое для применения текста).
  • Стандартизированные иконки (к примеру, иконка X с функцией «закрыть окно»).
  • Иконка является объектомс сильным физическим аналогом либо визуальным атрибутом (к примеру, иконка принтера для доступа к настройкам принтера либо красный прямоугольник для установки красного фона страницы)».

5. Визуально привлекательная

Как выглядит ваша иконка? Прекрасно ли она вписывается в эстетику вашего сайта? Сочетается ли с другими иконками на вашем сайте?

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

Стивен Хубер (Steven Hoober) из 4ourth Mobile поделился этим скриншотом YouTube:

Стивен говорит, что на мобильных устройствах более оптимальным есть:

  1. Показывать главное воздействие (к примеру, просмотр видео) в середине страницы.
  2. Несколько вторичных действий (к примеру, поиск) располагать в верхнем правом углу.
  3. Остальные действия скрывать за иконкой меню.

Не следует думать, что десктопные иконки отыскать легче, чем мобильные. Аврора Бэдфорд:

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

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

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

Твитнуть цитату

  • Не верьте интуиции: сплит-тесты, каковые поразили специалистов

Как протестировать 5 качеств действенной иконки?

1. Легко ли отыскать иконку?

Данный нюанс должен в любой момент тестироваться в контексте.

Прежде всего, задайте себе следующие вопросы и совершите эвристический анализ:

  • Соответствует ли она с другими иконками?
  • Расположена ли она в том месте, где это ожидается?
  • Не отвлекают ли от нее внимание другие элементы страницы?

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

  1. какое количество времени у них заняло нахождение нужной иконки.
  2. Как довольно часто им удалось выбрать верную иконку с первой попытки.

Пример: Gmail

Так выглядит почтовый ящик Gmail одного из пользователей:

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

2. Распознаваема ли иконка?

Данный нюанс обязан тестироваться вне контекста и без заглавия.

Прежде всего, задайте себе следующие вопросы и совершите эвристический анализ:

  • Смогут ли люди выяснить знак?
  • Как скоро?
  • А на мобильных устройствах?

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

Пример: Floppy Disk Icons

В обрисованном примере выше ребёнок не знал, что такое буфер обмена.

Сейчас представьте, какова возможность того, что он знает, что такое дискета (floppy disc). Он определенно знает, что иконка дискеты разрешает ему сохранить трансформации, но он не в состоянии идентифицировать ее как фактически дискету.

3. Как она понятна?

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

Прежде всего, задайте себе следующие вопросы и совершите эвристический анализ:

  • Знают ли визитёры, что случится, в то время, когда они кликнут по данной иконке?
  • Не ассоциируют ли они эту иконку еще с какими-то действиями?
  • есть ли иконка прекрасно привычной?
  • Как иконка воспринимается на мобильном устройстве? На различных операционных совокупностях (iOS, Android)?

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

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

Пример: Etsy

Посмотрите на эти две иконки:

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

Оба знака — многоцелевого применения, что формирует, в большинстве случаев, путаницу.

4. есть ли иконка нужной?

Данный нюанс должен быть протестирован в контексте.

Прежде всего, задайте себе следующие вопросы и совершите эвристический анализ:

  • Подходящий ли это случай для применения иконки?
  • Возможно ли вместо нее применять текст?
  • Оказывает помощь ли иконка вашим визитёрам?

Затем вы имеете возможность совершить сплит-тестирование. Размещение элемента и в том и другом случае покиньте одним и тем же. Лишь в одном варианте применяйте иконку, а во втором — несложный текст.

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

Пример: опыт Джеймса Фостера с иконкой-гамбургер

Первый вариант (иконка):

Второй вариант (текст):

Второй вариант (с текстом) стал причиной повышению конверсии на 20%. В этом случае в иконке нет никакой необходимости. В конечном итоге она кроме того приносила вред юзабилити.

5. есть ли она визуально привлекательной?

Данный нюанс обязан тестироваться вне контекста.

Прежде всего, задайте себе следующие вопросы и совершите эвристический анализ:

  • Прекрасно ли смотрится иконка?
  • Прекрасно ли она сочетается с другими иконками на сайте?

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

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

  • 10 неточностей сплит-тестирования, каковые дорого вам обойдутся

Какие конкретно смогут быть неточности юзабилити-тестирования иконок?

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

1. Вы создаете вымышленные ассоциации

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

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

2. Вы не принимаете к сведенью стадию разработки

Тестирование иконок существенно отличается на каждом этапе процесса разработки.

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

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

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

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

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

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

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

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

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

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

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

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

  • Как кнопка «Назад» способна стереть с лица земли юзабилити сайта?

Заключение

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

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

  1. Легко ли ее отыскать?
  2. Распознаваема ли она?
  3. Как она понятна?
  4. есть ли она нужной?
  5. Привлекательна ли она визуально?

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

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

По данным: conversionxl.comimage source lorismith

Случайные статьи:

Как скачать иконки с Iconmonstr


Подборка похожих статей:

riasevastopol

More Posts