Хабр Курсы для дизайнеров
РЕКЛАМА
Практикум, Хекслет, SkyPro, авторские курсы — собрали всех и попросили скидки. Осталось выбрать!
Поток Дизайн доступен 24/7 благодаря поддержке друзей Хабра
Комментарии 36
Это полезно.
Плюсую. А вот ещё бы написать для разрабов, например, расширение такое для браузера, чтобы он на своём localhost-е мог во всплывающей панельке попереключать эти фильтры, так, чтобы всё это менялось в UI конкретно его проекта… Знаю-знаю. «Вот и займись». Но сейчас занят другим. Да и не писал ни разу расширения.
Идея отличная, и вы не первый, кто её просит - видимо, она в воздухе. Честно: расширение я тоже ни разу не писала, так что тут мы на равных :)
Написал сегодня с помощью Кодекса, так ещё и пульнул в Хромстор. Жду, когда апрувнут расширение :)
https://sergeybukharev.github.io/perceptions/ (не реклама)
Есть такое расширение:
Funkify – Disability Simulator (платный) тремор, дальтонизм, туннельное зрение, дислексия, слабовидящий, периферийное зрение и другие нарушения.
Остальные про дальтонизм:
Расширение Chrome A11Y - Color blindness empathy test. Симулятор различных видов дальтонизма.
Расширение Chrome Let's get color blind. Симулятор дальтонизма и наоборот - позволяет адаптировать цвета для дальтоников. И то, и другое с возможностью изменить серьезность дальтонизма.
Расширение Chrome WCAG Color contrast checker (не официальный от WebAIM или WCAG). Симулятор различных видов цветовой слепоты. Также проверяет контрастность всех элементов на странице. В том числе, в зависимости от выбранного типа дальтонизма, так как визуальный контраст при этом может меняться.
В фигме симуляторы дальтонизма тоже есть.
Очень правильный и показательный проект!
С дальтонизмом все несколько сложнее, их несколько видов, не только красно-зеленый.
Как способ "вправить мозги" - очень здорово сделано, спасибо!
Спасибо! И вы совершенно правы , видов несколько: дейтеранопия и протанопия (обе про красно-зелёный, но по-разному), тританопия (сине-жёлтый), плюс аномальные трихроматии, где чувствительность снижена, а не отсутствует. Я сделала один самый распространённый вид, чтобы не перегружать инструмент, но честно...стоило бы дать переключатель между типами. Возьму в доработку.
Хорошая статья. Посоветовал бы ещё добавить фичу- поле для заполнения плюс 5% яркости и обведенное -2% яркости 1пиксельной рамочкой. На такое смотрю 90% времени на работе и посылаю лучи добра разрабу. Ибо в нашем бюджетном учреждении в наличие у меня моник с полудохлой подсветкой. И, дабы разглядеть эти потуги на дезигн- ложусь башкой на стол. Иначе нифига не видно. Респект. Уважуха. /s
Спасибо, очень наглядно. Вот только "имитация дальтонизма" как-то не очень корректно отрабатывает. Красный становится жёлто-зелёным (код цвета #c0c93f), а зелёный как раз таки почти серым становится (#6b617b), т.е. визуально очень отличаются цвета. Думал, что у меня что-то с цветовосприятием и позвал жену, она подтвердила. На всякий случай даже глянул по кодам цветов.
Сори, не сильно в теме, но из настроек свежих игр помнится, что там есть несколько видов дальтонизма. Не может ли быть, что автор статьи обработал один конкретный?
Спасибо, что копнули так глубоко -вы правы. Фильтр деутеранопии у меня сделан упрощённой матрицей преобразования цвета, и она приблизительная: даёт общее ощущение «цвета сливаются», но точные оттенки воспроизводит грубо. Настоящая симуляция сложнее, там нелинейное преобразование в другом цветовом пространстве. Я сознательно шла на это упрощение ради того, чтобы штука работала в браузере без тяжёлых библиотек, но в статье честно об этом написала: это будилка эмпатии, а не точная медицинская модель.
Довольно познавательно, полезно для общего понимания. Инструмент, способный делать такое с любым URL или экраном приложения, имел бы неплохой коммерческий потенциал.
Вот скажите, что не так? Доступные интерфейсы делать надо? Вроде надо. Проверить доступность как-то надо? Ну вроде бы надо. Альтернативы: искать тестировщиков с особенностями специально под эту задачу или купить подписку на подобный сервис, который покажет, как выглядит ваш сайт или приложение для людей с определёнными ограничениями восприятия. Второй путь, как мне видится, менее тернист.
Есть расширения для симуляции дальтонизма на сайте и даже по URL:
Colorblind Web Page Filter Testing Tool & Simulator | Toptal®. Указываем url-адрес для просмотра и цветовой фильтр, который необходимо применить к этому ресурсу. Выдает страницу сайта, обработанную под выбранный вид дальтонизма.
И все бесплатные (кроме Funkify).
Хорошая статья и интересный проект.
Я совсем не дизайнер интерфейсов и не владею понятийным апаратом в этой области. Но мне чудится некое несоответствие понятия "доступность" с ограниченными возможностями человека по тем или иным причинам. В ОСях это решается путём введения раздела настроек вроде "Специальные возможности". Вероятно, меня сбивает палкой определение доступности в автоматизированных системах, где рассматривается обезличенный оператор системы, по умолчанию умеющий пользоваться условным пультом управления системой при наличии инструкции по эксплуатации.
Про дизайн же и сочетаемость цветов у меня в голове только одна фраза некого известного дизайнера: "Красный и зелёный цвета не сочетаются? Посмотрите на грядку с клубникой." Хотя для дальтоников всё не так однозначно...
Спасибо за вопрос. «Специальные возможности» в ОС и «доступность» в дизайне -про одно, но с разных сторон.
Настройки ОС- это адаптация уже готовой системы под человека (крупный шрифт, инверсия, озвучка).
Доступность в дизайне- это когда я проектирую так, чтобы адаптация вообще реже требовалась: чтобы контраст был достаточным сразу, чтобы смысл не терялся без цвета. А про клубнику красиво, но именно тут собака и зарыта: на грядке красный и зелёный различает контекст (форма, блеск, лист). В интерфейсе, где остаётся только цвет кружка, контекста нет, и дальтоник видит два одинаковых кружка.
Странно, что на синюю кнопку "Добавить в корзину" все эффекты (кроме тремора) не действуют. То, что вы пишете в заголовке -- не видно кнопку -- этого как раз не происходит от эффектов.
В некоторых программах такое уже есть, например, в QGIS этот эффект можно включить и увидеть, как воспринимают визуализацию на цветовой шкале.
Не перестану таскать свою пасту в подобные статьи. Это лечится не плагинами, а вторым монитором для дизайнера за тысячу рублей из 2007 года с TN матрицей. Пару месяцев работы с таким монитором и на всю жизнь будет понятен выбор "безболезненных приемов" в виде размерностей текста и кнопок, толщин линий, оттенков, яркости, эффектов и так далее. А когда дизайнер рождается сразу с золотой ложкой макбуком в жопе, с эталонным экраном и идеальным зрением, решать эту проблему придется радикальней.
P.S. Все эти танцы дизайнеров вокруг важности WCAG и ее заветной галочкой дабл АА, кажутся порой довольно преувеличенными. Автоматизация подбора цветовых контрастов на уровне плагинов и макетов в фигме, всё это очень условно и не дает ни каких гарантий, что на пользовательской стороне все будет читаемым. На WCAG хватает достаточно объективной критики, если углубиться в интернеты. Пока работает текущая версия стандарта, где-то за кулисами разрабатывается уже другая, заделывая дыры и ошибки предыдущей.
Сама идея этого довольно утопична, пытаться решить это только програмно. Это должно быть устройство по типу калибратора монитора, которая будет анализировать яркость и контрастность экрана пользователя, уровень освещенности помещения, площадь цветовых заливок (сюда же и масштаб интерфейса), особенности зрения конкретного человека, потом все эти данные передавать прямо в видеокарту и корректировать програмно значения выводимых на экран цветов. Вот тогда да, вот тут можно быть уверенным, что заданные дизайнеров "веса" контраста по типу WCAG точно сработают, как и задумывалось.
Хорошая паста, и по сути во многом согласна. Дешёвый монитор с TN-матрицей как рабочий инструмент дизайнера , это дисциплинирует лучше любого стандарта, тут не поспоришь. Идея «дизайнить на плохом экране» — та же логика, что мой симулятор: искусственно ухудшить себе условия, чтобы почувствовать чужие.
Ваша идея про устройство-калибратор, которое учитывает экран, освещение и зрение конкретного человека и правит цвета на лету -это, по сути, адаптивный интерфейс будущего. Технически пока утопия, но направление верное. Спасибо за развёрнутую мысль.
Даже не надо ждать катаракты. Большинство в 40+ имеет "+" по зрению. А еще часть имеют "-" с молодости, который (если повезет) компенсируется с годами "+"ом, а если не повезет - привет, астигматизм.
И тем удивительнее наблюдать дизайнеров, которые делают мелкие серые буквы. Ребят, вы с другой планеты? Вы никогда не встречали людей в очках? Или думаете, что все смотрят на ваш продукт на больших дизайнерских калиброванных мониторах?
Дизайнеры, не надо "серить". Если это неважно - не пишите вовсе. Если всё-таки важно - напишите большими четкими буквами, а если не помещается - сделайте всплывашками.
Плюс немножко разный бывает. Есть плюс, что нужно очки надеть, и все время носить, или хрусталик не дожимается, или он стал ближе к сетчатке, ну это если со стороны оптики рассуждать, и потому плюс нужен всегда. И эта проблема не у всех. А вот что бывает у многих, это когда все время видим нормально, но чтобы посмотреть на близкий предмет, мы не может дожать хрусталик. Мышцы слабее, хрусталик не такой гибкий. И мы все видим, а когда предмет слишком близко, вынуждены надеть очки для чтения.
А вот серые буквы, или другие объекты на сером фоне… Пытался по старинке пользоваться навигатором, чтобы ходить по нему куда надо, это очень не удобно. Объекты не контрастные. Серозеленые на таком же фоне почти. А там смысл как раз в том, чтобы я не ходил как раньше. Чтобы я нашел, и навигатор меня повел, а я кроме стрелки больше ничего и не видел. Купил бумажную карту, в 21 веке, и по ней получается находить все намного быстрее. С учетом определенных проблем с GPS, которые давали преимущество электронной карте с малоконтрастными объектами, бумажная стала удобнее. Поиск вручную на электронной карте возможен только на местности, которую я хорошо знаю. А там она и не нужна.
Еще интересно будет выглядеть астигматизм. Когда одна строчка наползает на другую. Легкий астигматизм у меня был как только узнал, что имеет место быть сухой глаз, и нужно периодически его увлажнять, но постепенно прошел. Но когда это повторяющаяся вертикальная или горизонтальная линия, это одно. Хотя не совсем ясно как это происходит, ведь нет в глазе призм способных проявить такие аберрации… а вот когда он не совсем линейный в результате нарушения структуру хрусталики, и исправляется только специальной, индивидуально сконструированной линзой, это явление уже интереснее. Думаю что в таком случае человеку будет сложно читать большие тексты. Но все индивидуально.
Спасибо за подробность про оптику. Астигматизм как режим- отличная идея, его редко показывают, а «строчки наползают друг на друга», сильный и незнакомый большинству эффект. Записала в список следующих состояний.
В моем случае (50 лет) астигматизм проявился в двоении изображения. И если крупный черный текст на белом фоне еще можно без очков распознать, то мелкий и серый - сплошная каша. Для визуализации такого эффекта достаточно всё изображение дублировать и наложить с 70% прозрачностью со сдвигом на 1-2 пикселя вправо и вверх.
И вот еще бы добавить режим "телефон на улице в солнечный день" - пониженная контрастность и все серенькие "красивости" становятся однородно белыми (привет яндекс-картам!).
А если одновременно включить два режима... то вообще красота получится!
Помимо всего этого отдельно можно добавить кнопку "тёмная тема". Во многих браузерах есть такая фича, а где нет - есть расширение. И несмотря на то, что пользователей этой фичи довольно много, я регулярно вижу как сайты к ней не адаптированы.
Без всякой катаракты и других непоправимых проблем по зрению (очки -2 всего-то) серый текст на белом фоне - это бред. Если это какая-то пометка "мелким шрифтом, серым текстом" или заминусованный коммент на хабре - то ок. Но полотно текста в таком виде читать... просто тяжело.
Тоже копипастну, с вашего позволения.
...
4 дек 2019 Гуру доступности делают из людей инвалидов
Повсеместно модное движение\ратование за т.н. "Доступность" в вебкодинге крайне напоминает ситуацию с политкорректностью и толерантностью.
Поясню, -- подавляющее большинство обычных сайтов недоступны для просмотра с небольших экранов смартфонов, сейчас невозможно удобно взаимодействовать с интерфейсом не только на небольших, а даже на экранах флагманов, в том числе и на сайтах самих адептов Доступности. Про телефоны с Opera Mini лучше промолчать, там интернета нет уже лет 10. Даже десктопные версии сайтов грешат проблемами взаимодействия, если окно браузера меньше чем Full HD (1920x1080). И речь не про какие-то там частные страницы, а совсем даже про корпоративные продуктовые.
Мелкий шрифт "для красоты"; действия, растянутые на несколько экранов; замусоренность "финфиклюшками" и нагромождение блоков; перегруженность страниц JS, сервисами и виджетами и так далее.. Откройте приложениеVK (или сайт) на самом популярном в России экране смартфона 5-6 дюймов (https://hotlog.ru/global/screen). Попробуйте закинуть фото со смартфона. Вас встретит огромный трафик в JS, мелкий текст, нагромождение блоков и все остальные атрибуты якобы удобства. А VK ещё один из лучших сайтов в плане доступности!
По сути, что-то разумное, в рамках концепции Доступности, делается лишь для людей с проблемами зрения, тем, кто не видит содержимого, кому зачитывается содержание страниц вслух. Все остальные люди стараниями гуру интерфейсостроения превращаются в инвалидов изначально.
И эти люди, толком не научившиеся ваять интерфейсы для обычных стандартных людей, рассказывают, как важно сейчас ваять для людей с ограничениями! Сделайте для начала обычный интерфейс удобным! Не делайте из людей инвалидов.
Добрый день! Очень полезная статья и симулятор!
Подскажите, а в туннельном зрении должна быть в идеале для симулятора быть возможность сдвигать круг или идея в том, чтобы всю полезную информацию передвинуть в центр? о_О
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Симулятор восприятия: три секунды побыть тем, кто не видит вашу кнопку