Когда мы говорим об интерфейсах, слишком часто упор идёт на скорость, удобство и эстетику. А что насчёт того, чтобы быть понятным, полезным и доступным для всех? Эта статья — попытка по-человечески и технически осмыслить роль этики в разработке веб-интерфейсов. С примерами, с кодом, с шероховатостями.
Microinteractions play a huge role in UX design despite being labelled “micro”. They include all the small details you can find in a software product, i.e. animations, emotive reactions, clicks, vibrations, etc. Not only do they make it more interesting and joyful for users to interact with a product, they also help ease the navigation process and make it more intuitive by providing important information. Which types of microinteractions can be used in apps, what makes them a vital part of software products, how to implement them correctly and which common mistakes to avoid when designing small details?
Types of microinteractions
Цвет — это неотъемлемая часть нашей повседневной жизни: он помогает нам ориентироваться, принимать решения и воспринимать информацию. Однако для миллионов людей по всему миру восприятие цвета ограничено из-за дальтонизма.
По данным Colour Blind Awareness (https://www.colourblindawareness.org/), дальтонизм встречается у 1 из 12 мужчин и 1 из 200 женщин. Это значит, что примерно каждый десятый человек испытывает трудности с восприятием цветов. Для дизайнеров, разработчиков и создателей контента цветовая доступность становится необходимостью.
Всем привет! Меня зовут Марина. Я Android-разработчик в VK. В этой статье я расскажу о нашей совместной работе с дизайнерами: как мы встали на сторону людей с ограниченными возможностями, которые потребляют наш контент с помощью скринридера, проанализировали фичи нашей команды и попытались сделать функциональность доступной.
Мы, Everland, помогаем людям с инвалидностью трудоустроиться, а бизнесу — внедрить инклюзивные практики и сделать услуги доступнее, 3 декабря запустили подкаст «Скоро будет доступно?». В ежемесячных выпусках мы будем говорить о проблемах, с которыми все чаще сталкиваются люди с инвалидностью из-за неадаптированных сервисов услуг компаний, и разбирать возможные варианты их решения. Гостями подкаста станут эксперты с инвалидностью, представители бизнеса, блогеры и журналисты.
Ищите «Скоро будет доступно?» на четырех платформах:
Первый выпуск подкаста был посвящен невизуальной доступности цифровых сервисов, его провели:
Вы когда-нибудь задумывались, как незрячий человек смотрит фильмы, а глухой зритель — понимает атмосферу сцены без звуков? В Кинопоиске теперь это не просто возможно — это удобно и доступно. Меня зовут Настя, я отвечаю за продуктовое направление Инклюзии в Яндексе. Вместе с командой мы работаем над тем, чтобы каждый, независимо от особенностей здоровья, мог наслаждаться фильмами и сериалами. В этом посте я расскажу, как мы делаем Кинопоиск местом, где кино доступно для всех.
Последний год мы активно ведем работу над доступностью Кинопоиска. Он стал тринадцатым сервисом Яндекса, адаптированным для незрячих и слабовидящих людей — это случилось в начале 2024 года. Это означает, что сервис доступен для использования с помощью специальных программ экранного доступа (другими словами — скринридеров), которыми пользуются незрячие пользователи.
А ещё контент Кинопоиска начал пополняться субтитрами для глухих и слабослышащих людей и тифлокомментариями.
Вот как выглядит видео с SDH и тифлокомментариями.
Всегда ли вашим глазам комфортно при взгляде на дисплей смартфона, особенно после целого дня за экраном монитора? Усугубится ли эта проблема с возрастом? Мы в RuStore задумались, как сделать интерфейс наших продуктов комфортным для людей с временными или развивающимися ограничениями возможностей здоровья.
Меня зовут Татьяна Лескова, я старший аналитик-исследователь в RuStore. В статье расскажу, как мы добавили accessibility check в UX-исследования: читайте ниже, как внедрить его в свой продукт и как справляться с вызовами на этом пути.
Привет, Habr!
Честно говоря, долго сомневался, стоит ли писать эту статью. Я понимаю, что среди комментариев наверняка будут такие, кто скажет: «Очередной никому не нужный датапикер». Но сегодня, когда Vanilla Calendar Pro собрал больше 480 звезд на GitHub и получает 17 тысяч скачиваний в месяц, я решил поделиться своей историей.
Хочу сразу отметить: я не претендую на лавры лучшего разработчика календарей и датапикеров. Эта статья о моем первом опыте в open source, о том, как я создавал проект с нуля и как он стал полезен другим разработчикам.
Заново Америку не открою, если утвержу, что красота требует жертв, в нашем случае — вложений. Всем доброго времени суток! Сегодня хочу затронуть значимую тему: как дизайн способен увеличить ценность продукта. Не буду углубляться в гипотетические размышления или пересказывать банальные книги; остановлюсь на конкретном примере.
Меня зовут Армине, и я — менеджер продукта в компании ВИАР ИТ. Веду отдел R&D и занимаюсь созданием экосистемы для цифровизации архивов. В нашем мире, где каждое мгновение наполнено визуальными образами, дизайн становится не просто оформлением, а важнейшим инструментом, способствующим трансформации и повышению ценности.
Я уверена, что когда эстетика ведет за собой функциональность, мудрость технологии обретает новое звучание. Убедитесь, что вложения в дизайн — это не просто расходы, а инвестиции в будущее вашего продукта, которые откроют двери к новым вершинам успеха.
При создании этого чек-листа из 64 пунктов в качестве точки отсчёта использовался WCAG — Руководство по обеспечению доступности веб-контента (универсальный стандарт). Решение вопросов, указанных в этом чек-листе, поможет улучшить восприятие сайта для всех его пользователей.
Привет, меня зовут Вова Тимофеев, я менеджер технических проектов Yandex Cloud. В статье поделюсь тем, как мы делали сайт облачной платформы доступнее, сколько итераций прошли и какую роль в этом сыграл Gravity UI.
В основе доступности всех сервисов — то, насколько хорошо они поддерживают работу с программами экранного доступа (Screen reader). Через эти программы пользователи с ограничениями воспринимают интерфейс и взаимодействуют с ним.
Сайты — не исключение. И нам предстояло выяснить, насколько доступен Yandex Cloud для всех пользователей.
В Яндексе под доступностью мы подразумеваем то, что наши сервисы должны с комфортом использовать все, вне зависимости от временных или постоянных физических ограничений. Например, сейчас для незрячих пользователей адаптировано 16 сервисов Яндекса: Лавка, Go, Поиск, Браузер, Почта и другие. В работе над доступностью каждого сервиса помогает команда невизуального тестирования — и в кейсе, о котором расскажу в этой статье, без их помощи тоже не обошлось.
Про то, что такое бесконечная лента (Infinity Scroll, Feed) - есть много статей, постов, гайдов по реализации самого функционала, и, кажется, рассказывать про то, как именно ее реализовать и что это такое - не идея этой статьи. Так же, как и рассказывать о плюсах и минусах этого подхода. Если Вы все же не знаете, что это за чудо инженерной мысли - можно ознакомиться тут.
Лично я хочу сосредоточиться на доступности такой ленты, а в конце - пример реализации на простом HTML/CSS/JS с поддержкой альтернативного управления, однако такой пример легко портировать на любой другой фреймворк/библиотеку.
Хабр, я снова пришёл к вам с практическими советами про доступность вместе с Ильёй. Мы показываем, как HTML и CSS могут улучшить или ухудшить её. Напоминаю, что Илья — мой незрячий знакомый, который помогает мне найти наши косяки в вёрстке.
Сегодня мы рассмотрим следующие аспекты:
disabled от скринридера.Давайте начнём!
На сайте платформы по цифровой грамотности для детей и подростков с нарушениями зрения и моторики появился новый раздел — «Вебинары». Это очередное обновление платформы beelineforkids.ru.
Недавно мы вместе с партнерами из Everland опубликовали обзор компьютерных игр для незрячих детей и подростков, а сейчас на нашей платформе появился еще один новый раздел с вебинарами, где эксперты в сфере инклюзии каждый месяц поднимают актуальные вопросы в этой теме.
В рамках инклюзивных вебинаров будут представлены обзоры популярных сервисов, приложений и помогающих технологий, мы будем много говорить о жизни без ограничений и делиться опытом. Уже сейчас в нашем плейлисте можно посмотреть более десяти видео на различные темы: от мира навигационных приложений до создания презентаций и возможностей для незрячих и слабовидящих в цифровых сервисах.
На сегодняшний день общее количество пользователей платформы составило более 58 тыс. человек, материалами курса воспользовались более 12 тыс. человек и более 10 тыс. участников полностью прошли курсы по цифровой грамотности.
Одним из героев наших вебинаров стал Владимир Васкевич. Будучи незрячим с самого детства, он посетил уже 30 стран и 75 регионов России. На вебинаре «Летим куда хотим» Владимир рассказал, как искать недорогие билеты, строить маршрут своего путешествия и что нужно учитывать, чтобы поймать самую выгодную цену, а на вебинаре «Дом вдали от дома» объяснил разницу сервисов для бронирования жилья и дал советы, как сэкономить.
Мы решили подробнее поговорить с Владимиром о его тяге исследовать этот мир, развиваться и наслаждаться жизнью, несмотря ни на что. В интервью
С осени 2024 года обновится российское законодательство о веб-доступности сайтов госорганов, органов местного самоуправления и подведомственных организаций. Сравним действующие и новые нормы и уточним, нужна ли версия для слабовидящих.
Несколько месяцев назад мы в Everland опубликовали первую часть исследования невизуальной доступности сайтов и приложений в российском сегменте сети Интернет. Множество сервисов из шести сфер, от ритейла до банков, были проверены на предмет их доступности для пользователей скринридеров или иначе программ экранного доступа (специальных программ, которыми прежде всего пользуются незрячие и слабовидящие люди, чтобы получать доступ к информации и различным онлайн-услугам наравне со всеми остальными).
Но 6 сфер, хотя и наиболее популярных и важных, всё равно недостаточно, чтобы получить полное понимание уровня доступности большинства необходимых незрячему пользователю сервисов. Именно поэтому исследование продолжается, и на этот раз наше внимание привлекла такая сфера, как доски объявлений.
В далёком 2018 году мы представили наше первое умное устройство с Алисой — Яндекс Станцию. С тех пор пользователи успешно взаимодействуют с виртуальным ассистентом с помощью голосовых команд. Но, к сожалению, бывают и сложности. Алиса не всегда правильно понимает запрос: ей могут мешать шумы, сливающиеся голоса или невнятно произнесённая фраза. Эта проблема особенно актуальна для пользователей с различными речевыми нарушениями — например, с заиканием, ДЦП, последствиями инсульта или травмы. Часто речь искажается так, что Алиса не понимает её, а значит, пользователь сталкивается с ограничениями.
Меня зовут Даня, я представляю команду, которая разрабатывает в Алисе технологию распознавания речи. Сегодня я расскажу небольшую историю о том, как мы решали описанную выше проблему. Пожалуй, было бы слишком смело предполагать, что такую сложную задачу можно навсегда победить одним быстрым решением (даже людям не всегда удаётся корректно понимать речь с особенностями). Тем не менее нам удалось сократить разрыв между точностью распознавания обычной речи и речи с искажениями в среднем на 20%. При некоторых лёгких формах нарушений звукопроизношения Алиса теперь понимает речь не хуже человека, а при тяжёлых формах нарушений — даже лучше. Это самый большой шаг в этом направлении с момента создания нашего помощника.
Под катом вы не найдёте хардкорных подробностей обучения нейросетевых моделей, потому что основная сложность таилась вовсе не в вопросах применяемых технологий. Ключом к успеху стала помощь сообщества и экспертов.
Это вольный перевод исследования про дарк паттерны и рефлексия над ним. Какие есть дарк паттерны, их виды, классификация и все прочее в статье, го читать
Привет, Хабр! Это Александр Капитанов и Александр Нагаев из Sber Devices. Мы занимаемся задачами компьютерного зрения: генерацией, матированием и редактированием изображений, сегментацией, портретной гармонизацией, заменой лиц, распознаванием жестов. А с недавних пор ещё и распознаваниtv русского жестового языка.
Поговорим о том, что заставило нас решать данную проблему. Затронем теорию жестового языка — подозреваю, что мало кто с ней знаком. Расскажем, как мы собирали собственный датасет для распознавания русского жестового языка и затронем тему обучения моделей для решения данной задачи. Также поделимся с вами результатом и немного расскажем про семейство наших моделей signflow.
Хабр, я снова пришёл к вам с практическими советами про доступность вместе с Ильёй. Мы показываем, как HTML и CSS могут улучшить или ухудшить её. Напоминаю, что Илья — мой незрячий знакомый, который помогает мне найти наши косяки в вёрстке.
Сегодня мы рассмотрим следующие аспекты:
display;aria-label при разметке областей навигации;Давайте начнём!