Перестаньте разрабатывать дизайн лишь для 85% пользователей
https://t.me/uxidesignНам, дизайнерам, нравится думать, что мы рациональны. Но в то время как мы не колеблясь жалуемся на музеи, у который отсутствуют пандусы для инвалидных колясок, многие из нас по-прежнему не замечают недостатков в наших пользовательских интерфейсах. Плохой визуальный дизайн может стать препятствием для хорошего пользовательского опыта. В то время как адвокация по вопросам инвалидности давно сосредоточена на способах адаптации пользователя к ситуации, мы достигли точки, в которой пользователи ожидают, что продукты будут оптимизированы для широкого круга потребностей.
Всемирная организация здравоохранения (ВОЗ) идентифицирует 4% мирового населения как слабовидящих, 4% - с низким зрением и 0,6% - слепыми. Это в общей сложности более полумиллиарда человек, которые не могут использовать ваш продукт, если он недостаточно продуман. Мы достигли переломного момента в доступности в 2017 году. Это, в частности, благодаря судебному разбирательству - более 240 американским компаниям были предъявлены иски за недоступность их сайтов с 2015 года (Wall Street Journal, paywall). Вы должны быть уверены, что ваша компания обслуживает как можно более широкую аудиторию. Как дизайнер, вы заботитесь о пользователях - называйте это эмпатией к дизайну или "быть человеком".
Визуальный интерфейс - это очевидное место, чтобы подумать о доступности. В этой статье мы обсудим некоторые из наиболее распространенных нарушений зрения, сосредоточив внимание на слепоте цвета, чтобы объяснить, как вы можете внести небольшие изменения в рабочий процесс и продукты, чтобы гарантировать, что вы не отвергаете часть пользователей.
Доступность влияет на всех пользователей
Не только 8,6% населения с нарушениями зрения зависят от доступности сайта. Хороший дизайн - везде хороший дизайн. Многие сайты и приложения чрезмерно сложны. Каждый человек сможет пожаловаться на что-то, что ему неудобно использовать. Например, когда мы уставшие пытаемся увидеть что-то в экране мобильного телефона на солнце, или когда у нас в одной руке полная корзина продуктов, а во второй - телефон и нам нужно срочно ответить на звонок.
Даже большая часть населения со стандартным зрением видит цвет по-разному. Таким образом, доступность - это не только те, кто страдает от нарушения зрения; каждый имеет свои собственные ограничения, физические и умственные, и мы можем значительно помочь им, просто заботясь о них, когда мы работаем.
Как визуальные нарушения ухудшают восприятие?
Чтобы создать правильный доступный продукт, нам сначала нужно понять, как человек с нарушением зрения видит вещи.
По данным ВОЗ, ошибки рефракции (близорукость, дальнозоркость, астигматизм и пресбиопия) составляют 43% нарушений зрения, катаракты 33% и глаукома 2%. Слепота касается приблизительно 4,5% населения и может значительно повлиять на то, как пользователь воспринимает дизайн.
Давайте посмотрим на моделирование того, как это проявляется:
Существует три основных типа дальтонизма:
- Монохромность (полная слепота).
Люди не могут видеть цвет вообще. Так, например, яркие или пастельные интерфейсы с тонким градиентом, которые используют оттенки, чтобы выделить функции, будут очень трудными для пользователя. Кнопки будет очень трудно найти. - Дихроматичность (двухцветное зрение)
Люди с дихроматией богатую цветовую палитру могут видеть разными оттенками одного и того же цвета. Если приложение использует цвета для обозначения разных элементов, пользователь может не смочь воспользоваться этой функцией дизайна. - Аномальная трихроматичность (недостаточное цветовое зрение)
При недостаточном цветовом зрении одни из трёх типов колбочек плохо различают степень насыщенности цвета. В тяжёлых случаях это приводит к тому, что человек воспринимает только два цвета из трёх. Пользователи с аномальной трихроматией могут видеть ваш логотип или дизайн менее привлекательными, если цвет является основным фактором.
Выходит, вы не можете предположить, что все пользователи будут видеть одно и то же. Как же оптимизировать дизайн для всех пользователей?
Цвет как инструмент, но не как волшебный ключик
Цвет не только играет большую роль в определении того, как выглядит интерфейс, но также помогает в систематизации контента и определении иерархии. Это мощный инструмент проектирования, но для его эффективного использования вам необходимо понять его возможности и ограничения. Ниже перечислены некоторые ключевые правила, которые мы обсудим:
- когда выбираете цветовую палитру, не забывайте о людях с ограниченным зрением;
- никогда не полагайтесь только на цвет для выделения важного контента - добавляйте значки и текст;
- ссылки должны выделяться из общего контента.
Поскольку наиболее распространенная проблема, с которой сталкиваются люди с ослабленным зрением, - это определение оттенков цвета, попробуйте больше полагаться на контрастность и яркость, чтобы сделать элементы разборчивыми.
Цветовая палитра дает вам легкий способ поиска высококонтрастных цветов.
Избегайте сочетания цветов из смежных частей круга.
Не используйте только цвет для отображения контента. Панель поиска Nike - пример того, как отсутствие названий цветов может вводить в заблуждение. Добавление имен цветов к образцам уберёт необходимость многократного наведения курсора, чтобы удостовериться, что вы выбрали правильный цвет.
Amazon лучше справляется с этим, добавляя имя цвета поверх каждой миниатюры.
Избегайте использования цвета в качестве единственного способа передать информацию. Вместо этого используйте цвет только как подсказку для пользователя.
Чем шире цветовая палитра, которую вы создаете, тем больше вероятность спутать оттенки, поэтому ограничивайте цветовую палитру. 15-цветная палитра ниже вызовет много проблем у людей с нарушением зрения. Люди с тританопией не могут различать оттенки, отмеченные значком (●), а также пары, отмеченные треугольником (◥) на графике ниже.
Используйте текстуру и узоры, чтобы подчеркнуть контраст. Например, пользователям с дальтонизмом сложно интерпретировать графики и диаграммы. В этом случае используйте контрастные шаблоны и, по возможности, вставляйте текст.
При создании кнопок, вызывающих внимание пользователя и требующих их прямого взаимодействия, избегайте использования цветных комбинаций, которые легко спутать человеку с проблемами со зрением (сочетание красного и зеленого, синего и желтого).
Кроме того, убедитесь, что эти элементы содержат четкий и видимый текст или иконки, что сделает цель понятной.
Создание доступного дизайна UI
Выделение цвета из всего вашего дизайна также может быть хорошим испытанием его функциональности. Если функциональность полностью зависит от цвета, то, скорее всего, будут проблемы с логикой. Например, минималистские интерфейсы могут быть малодоступными, если они лишены визуальных функций, но при минималистском дизайне может быть очень понятным использование форм, цвета и контраста для привлечения внимания к ключевым элементам.
Используйте тени для повышения контрастности.
Отвлекитесь от разработки фантастичных и непрактичных UI. Создайте функциональный продукт, используйте функции кратковременного нажатия, наведения, добавьте в описание значки и текст помимо цвета.
В качестве примера непрактичного пользовательского интерфейса ниже представлен фрагмент UI, который становится кучкой текста при просмотре в монохромном режиме.
В Руководстве W3C по обеспечению доступности веб-контента 2.0 (WCAG 2.0) подробно описывается ряд рекомендаций по повышению доступности в интернете. Уровень A является минимальным требованием, уровень AA запрашивает аудио- и видеозапись, а уровень AAA - означает самый высокий уровень доступности.
Многие компоненты просты: использование текста в alt для изображений или сохранение информации о форме после истечения срока аутентификации. Одна из самых важных, но основных рекомендаций, сделанных WCAG 2.0, связана с контрастом, особенно в отношении коэффициента контрастности текста и его фона.
Но в Dribbble это никому не понравится!
Мы хотим воплотить в жизнь самые смелые креативные идеи.
Ну, конечно, обеспечение доступности накладывает некоторые ограничения на ваши проекты. Но ведь вы уже и так находитесь в рамках множества других ограничений.
Доступность - это не только люди с нарушениями зрения, всем станет проще воспринимать ваш контент. Дизайн с учётом доступности важен для вас, вашего руководства, ваших клиентов и ваших пользователей. Имея в своем распоряжении основные принципы доступности, а также наш список лучших практик, вы должны быть в состоянии обеспечить также доступность и для ваших снимков в Dribbble.
Полезные инструменты для дизайнеров
Понимание того, как другие видят ваши проекты, является ключом к обеспечению наилучшего опыта для всех. К счастью, есть несколько простых способов, чтобы обеспечить доступность ваших проектов.
Sketch
Stark - отличный плагин для Sketch, который моделирует различные типы нарушений зрения. Он также обеспечивает коэффициенты контрастности между двумя выбранными слоями.
Используйте встроенную систему символов Sketch для создания набора UI элементов, потом будет гораздо проще проверить их совместимость.
Photoshop
У Photoshop есть встроенные средства проверки доступности контента для людей с нарушениями зрения через функцию цветовых профилей.
Web инструменты
- Tanaguru
Этот инструмент рассчитывает коэфициент контрастности по заданным вами цветам и предлагает лучшие варианты. - Фильтр Colorblind
Этот инструмент будет имитировать различные типы слепоты цвета на веб-странице. - NoCoffee
Этот надстройку «симулятор видения» идентифицирует проблемы на веб-странице, такие как низкая острота, низкая контрастность и цветопередача.
IOS
Приложение Colorblindness было разработано Фелипе Элиоенай и является одним из наших фаворитов. Пользователь наводит свою телефонную камеру поверх обычных объектов, и приложение описывает цвет этого объекта на экране с помощью суперпростого интерфейса.
Разное
Color Oracle - полезное приложение утилиты macOS, которое просматривает ваш текущий экран при различных типах слепоты цвета.
Жесткое кодирование Доступный опыт: советы для разработчиков
Ссылка
Хороший дизайн и хороший пользовательский опыт идут очень далеко, чтобы сделать сайт более доступным, но иногда нам нужно идти дальше и рассматривать развитие.
Семантический HTML
Вспомогательные технологии, такие как программное обеспечение для чтения с экрана, иногда необходимы для написания семантического, стандартно-совместимого HTML, чтобы улучшить доступность.
Элементы HTML5 - это семантический HTML; они придают смысл структуре страницы. Слепой человек, использующий программу чтения с экрана, должен иметь возможность пропустить в разные разделы страницы, а не читать всю страницу от начала до конца. Использование уровней заголовка (h1 - h6) делает это намного проще. Пользователь может прослушивать все заголовки разделов, а затем решать, какую часть интересующей их страницы.
Сохранение разделов контента и презентаций также невероятно важно. HTML предназначен для контента и структуры, а CSS предназначен для представления и компоновки.
Изображений
Для пользователя с нарушением зрения изображения будут нуждаться в альте-тегах, которые объясняют, что изображает изображение, а также титры и ярлыки, чтобы заполнить отсутствующий контекст. Когда вы вводите эту информацию, опишите функцию графики. «Перейти в портфолио» более полезно, чем «Фотография портфеля».
Видео и аудио
Использование HTML5 видео и аудио тегов позволяет браузеру знать, какой контент есть, и по умолчанию использует пользовательский интерфейс воспроизведения системы, который, вероятно, уже знаком и доступен пользователю.
формы
Формы могут создавать проблемы для людей, использующих программы чтения с экрана, если вы не гарантируете, что они смогут получить всю информацию, необходимую для заполнения формы.
Те, кто использует программу чтения с экрана, должны знать, что должно быть введено в каждом поле, потому что они не могут видеть метку рядом с полем. Уже есть решение для этого: элемент label, который связывает текст метки с полем формы.
Новое в HTML5 - это возможность указать тип данных поля ввода. Помечая ожидаемые типы данных, браузер предоставит лучший тип ввода для этого типа данных (например, цифровую панель для числовой фигуры или дату-выборщик для даты).
iOS и Android
Apple долгое время поддерживала доступность с такими функциями, как Display Zoom, но за последние несколько лет она взяла на себя надпись, объединив функции iOS, такие как Dynamic Type, Auto-Layout и UIStackView, которые собрались вместе, чтобы сформировать основу для очень отзывчивый интерфейс - и все разработчики могут легко воспользоваться.