Когда использовать значки против значков с текстом или просто текстовые ссылки?

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

Например:

значок диска

против.

значок диска сохранить

против.

сохранить


Дополнительный вопрос: значок диска сохранить -или- сохранить значок диска предпочтительнее?

156 голосов | спросил jmb 3 +04002010-10-03T04:38:00+04:00312010bEurope/MoscowSun, 03 Oct 2010 04:38:00 +0400 2010, 04:38:00

7 ответов


219

Иконописи, как известно, неэффективны как ярлыки, которые очень трудно интерпретировать правильно, без обучения или опыта. В большинстве случаев пользователи лучше интерпретируют правильные интерпретации с помощью текста, а не только с помощью значков. См. Wiedenbeck, S (1999). Использование значков и меток в прикладной программе конечного пользователя: эмпирическое исследование обучения и удержания. Поведение & Информационные технологии, 18 (2), p68-82.

Иконки особенно плохи для чего-то абстрактного, такого как Invoice или Bid, поскольку абстрактные вещи вообще не имеют сильного визуального образа (как Invoice, так и Bid могут быть представлены в виде бумажных документов, но как бы вы их различали?). Аналогично, значки особенно вредны для действий (например, «Сохранить», «Опубликовать»); трудно четко показать процесс с изображением. Да, значки используются все время в панелях инструментов для действий, но панели инструментов предназначались для экспертов, и тем не менее пользователи часто путаются ими (в среднем, пользователи знают только шесть элементов панели инструментов Word после регулярного использования Word для двух лет ).

Иконки могут сэкономить место над текстом, но по цене распознавания. Для небольших значков, таких как 16x16 пикселей, очень сложно пользователям даже распознавать, что они должны представлять собой картину, не говоря уже о том, на что должна рассчитываться картина. Один пользователь, которого я знаю, думал, что значок «discisk» для сохранения был изображением телевизора. (Она была достаточно взрослая, чтобы знать, что такое дискета.) Я лично использовал Word в течение многих лет, думая, что значок «Изменения дорожек» был своего рода стилизованным Розеттским камнем. Пользователям-экспертам легче полагаться на запомненное физическое положение элементов управления панели инструментов, а не ярлыков значков, чтобы выбрать элемент управления. Значки большего размера (например, по меньшей мере 32 на 32 пикселя) могут помочь распознать, но занимают столько места, что вам лучше использовать пространство для четкой текстовой метки. Если пространство ограничено, часто вам лучше использовать сокращенный текст, чем значки.

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

Значки с ярлыками также затрудняют техническую поддержку (например, «Нажмите на желтый лист с синей галочкой», или «Нажмите на« Принятие »).

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

  1. Пространство очень ограничено (т. е. слишком мало для текста).

  2. Значки стандартизированы (например, образ гибкого диска для сохранения)

  3. Значок представляет объект с сильным физическим аналогом или визуальным атрибутом (например, значок принтера для доступа к атрибутам принтера или красный прямоугольник для установки фона страницы).

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

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

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

ответил Michael Zuschlag 3 +04002010-10-03T17:26:53+04:00312010bEurope/MoscowSun, 03 Oct 2010 17:26:53 +0400 2010, 17:26:53
15

Из группы Neilson /Norman на значках :

  

Резюме . Знание пользователя о значке основывается на предыдущем опыте. Из-за отсутствия стандартного использования для большинства значков текстовые метки необходимы для передачи значения и уменьшения двусмысленности.

     

Значки нуждаются в текстовой надписи

     

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

     

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

     

На веб-сайте Usability.gov используются значки навигации для методов, шаблонов и документов и руководств на каждой странице сайта. Если я попрошу каждого человека, читающего эту статью, послать мне иконку, которая представляет Методы, я уверен, что я получу широкий спектр проектов. Как мы заявили в качестве части нашего рекомендаций по дизайну для удобства пользования сайтом несколько лет назад, œЕсли вы обнаружите, что вам нужно подумать о том, чтобы придумать значок для навигации, скорее всего, это не будет легко узнаваемо или интуитивно понятным для пользователей ». Хотя мобильная версия сайта признает, что текстовые ярлыки должны сопровождать значки, чтобы придать какое-то значение, настольная версия скрывает эти ярлыки, пока любопытный пользователь не решит нависнуть над ними. Фиксирование этих навигационных элементов в левой части страницы, чтобы оставаться доступными пользователям при прокрутке, указывает на то, что организация считает их важными и полезными. Однако удаление этих значков текстовых меток делает их совершенно бессмысленными и контрпродуктивно для обеспечения легкого доступа к контенту.

ответил KyleMit 17 thEurope/Moscowp30Europe/Moscow09bEurope/MoscowWed, 17 Sep 2014 03:29:17 +0400 2014, 03:29:17
5

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

ответил Hisham 3 +04002010-10-03T09:46:49+04:00312010bEurope/MoscowSun, 03 Oct 2010 09:46:49 +0400 2010, 09:46:49
5

В дополнение к ответам выше, я должен сделать это.

Что это за сайт?

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

Если веб-сайт будет использоваться часто , например, Gmail, хорошие значки с хорошо расположенными подсказками для инструментов лучше, чем с текстовым или значком подход. Я почти уверен, что Google рассмотрел этот вопрос, потому что в прошлом они использовали только текстовые кнопки, но теперь они используют значки + подсказки в Gmail. Этот новый подход дает чистый интерфейс, не жертвуя удобством использования. Даже Photoshop и Notepad ++ используют аналогичный подход.

ответил jackandjill 12 J000000Friday13 2013, 07:36:58
4

Позвольте пользователю выбрать, по умолчанию оба.

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

ответил Lie Ryan 3 +04002010-10-03T18:35:20+04:00312010bEurope/MoscowSun, 03 Oct 2010 18:35:20 +0400 2010, 18:35:20
4

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

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

С другой стороны, если вам нужно поставить ярлык, я думаю, что лучше ярлык под значком: [значок] [label]

Помните, что «доступность - это аспект объекта, который делает очевидным, как объект должен использоваться. В пользовательских интерфейсах отображаются функции, которые создают обычно визуальный. ..» Rosson, M. B. & Кэрролл, Дж. М. (2002) Юзабилити Инжиниринг, Морган Кауфманн.

Или, может быть, если у вас есть время ... вы можете прочитать это: www.cs.swan.ac.uk/~csharold/cv/files/Affordance.pdf

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

ответил 6 +04002010-10-06T14:37:28+04:00312010bEurope/MoscowWed, 06 Oct 2010 14:37:28 +0400 2010, 14:37:28
3

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

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

введите описание изображения здесь>> </p>

<p> и для последних тенденций, таких как <a href= дизайн поддонов Google и окна Двумерные плитки предлагают значки. но лучше иметь значки с быстрым указателем мыши . удачи.

ответил Miller 13 Maypm15 2015, 17:41:49

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132