Colorblind: статусные фигуры

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

Я пытался найти ссылку на фигуры, которые передают статус, но кажется, что это не стандарт ...

Это два примера, которые я нашел:

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

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

<p> Это какие-то соглашения по этому поводу? Вы знаете, есть ли какая-либо ссылка в W3C? </p></body></html>

69 голосов | спросил Ana Neto 18 MonEurope/Moscow2017-12-18T14:31:28+03:00Europe/Moscow12bEurope/MoscowMon, 18 Dec 2017 14:31:28 +0300 2017, 14:31:28

9 ответов


23

Это отличный вопрос. Я считаю, что нет никаких соглашений, кроме хорошего контрастного цвета W3C.

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

https://www.w3.org/WAI/gettingstarted/tips/designing.html#ensure-that-interactive-elements-are-easy-to-identify

https://medium.com/civiqueso/creating-a- визуально доступна карта-c8831f952525

http: //webcache.googleusercontent.com/search?q=cache:LjApKlqn4zsJ:www.jenunderwood.com/2014/09/04/visualcue/

ответил Mar 18 MonEurope/Moscow2017-12-18T15:55:06+03:00Europe/Moscow12bEurope/MoscowMon, 18 Dec 2017 15:55:06 +0300 2017, 15:55:06
163

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

 icons

ответил Garik 18 MonEurope/Moscow2017-12-18T18:55:18+03:00Europe/Moscow12bEurope/MoscowMon, 18 Dec 2017 18:55:18 +0300 2017, 18:55:18
10

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

Очевидным ответом является «использование меток». Но если вы не можете, вы можете сделать любой из них:

  • используйте логику смещения контуров для передачи сообщения. Самый острый, более опасный. Итак, круг: успех ; square: предупреждение ; треугольник: опасность .
  • используйте логику музыкальный проигрыватель для передачи сообщения. Итак, треугольник: успех (используя игру как метафору) ; квадрат: опасность (использование stop как метафора) ; 2 вертикальных прямоугольника: предупреждение (использование паузы как метафора)  введите описание изображения здесь>> </a>
</li>
<li>
<strong> не использовать основные фигуры </strong> и искать более узнаваемую иконографию. Для этого есть некоторые стандартизированные значки, они даже появляются на веб-шрифтах. Конечно, вы можете быть более креативными, если хотите, </li>
</ul>
<p> Конечно, вам нужно будет поддерживать эти значки с легендой, объясняющей, что они означают, но это не должно быть большой проблемой. </p></body></html>
ответил Devin 18 MonEurope/Moscow2017-12-18T17:18:07+03:00Europe/Moscow12bEurope/MoscowMon, 18 Dec 2017 17:18:07 +0300 2017, 17:18:07
4

Это неожиданно интересная тема.

Я далек от эксперта по этой теме, но я должен сказать, что цветная + значокная карта, представленная в средней статье, кажется чрезмерно сложной ИМХО (и не основана ни на эмпирических данных, кроме моей кишки /вкуса).

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

  • Tritanopia
  • Дейтеранопия
  • Протанопия

Я понятия не имею, насколько хорошо это решение работает, но это единственное «решение», с которым я могу говорить, поскольку, как вы отмечаете, нет ни одного золотого стандарта в значках /символах ( https://www.nngroup.com/articles/icon-usability/).

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

ответил Federico Kotek 18 MonEurope/Moscow2017-12-18T17:35:18+03:00Europe/Moscow12bEurope/MoscowMon, 18 Dec 2017 17:35:18 +0300 2017, 17:35:18
3

Единственные соглашения, о которых я знаю, - это (1) не используют цвет только для передачи информации (как вы указываете), и (2) также не используют значки. (См. «Значки нужны текстовую метку» в этой статье @ Nielsen /Norman . )

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

ответил Ken Mohnkern 18 MonEurope/Moscow2017-12-18T16:57:54+03:00Europe/Moscow12bEurope/MoscowMon, 18 Dec 2017 16:57:54 +0300 2017, 16:57:54
3

Два соображения здесь, все связанные с WCAG 2.0 /1.4.1 . Цель состоит в том, чтобы не полагаться только на цвет или форму, чтобы передать смысл пользователю или вспомогательному устройству.

  1. Если символы, которые вы в настоящее время используете, имеют какую-то иконку внутри них, вы решите проблему, связанную с использованием цвета, чтобы передать смысл.
  2. Если вы использовали значки в символах и , предоставили текстовый эквивалент («Успех», «Предупреждение», «Ошибка»), вы помогли бы пользователям с бледностью следа, а также с помощью программы чтения с экрана.
ответил Nic 18 MonEurope/Moscow2017-12-18T23:59:15+03:00Europe/Moscow12bEurope/MoscowMon, 18 Dec 2017 23:59:15 +0300 2017, 23:59:15
3

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

  • Раунд (белый) с рамкой (красный) = Не делайте этого, когда-либо
  • Круглая (синяя) без границы = вы должны это делать, всегда
  • Треугольник с рамкой = Следите за
  • Квадрат (синий) без границы = Нежное напоминание
  • Octagon = Stop
ответил TristanSchaaf 18 MonEurope/Moscow2017-12-18T14:42:18+03:00Europe/Moscow12bEurope/MoscowMon, 18 Dec 2017 14:42:18 +0300 2017, 14:42:18
1

Хорошей стратегией является усиление индикатора формы или положения с разницей яркости.

Например, светофоры используют красный, оранжевый и зеленый цвета, но люди, которые не могут видеть разницу, могут по-прежнему изучать свои позиции сверху /середине /снизу. Точно так же можно научиться по форме - символ X означает «закрыть» и + означает «добавить» и т. Д.

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

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

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

ответил jv_ 21 ThuEurope/Moscow2017-12-21T14:29:09+03:00Europe/Moscow12bEurope/MoscowThu, 21 Dec 2017 14:29:09 +0300 2017, 14:29:09
0

У разработчиков игры Borderlands была та же проблема . Для тех, кто не знает игры, это игра RPG /FPS, установленная на футуристической пустынной планете, где монстры и ennemies бросают добычу, которые показаны цветным лучом в зависимости от качества.

Чтобы управлять цветной слепотой, они

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

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

ответил Goufalite 21 ThuEurope/Moscow2017-12-21T11:38:09+03:00Europe/Moscow12bEurope/MoscowThu, 21 Dec 2017 11:38:09 +0300 2017, 11:38:09

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

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

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