5 способов улучшить UX интерфейс для пользователей с ограниченными возможностями

5 способов улучшить UX интерфейс для пользователей с ограниченными возможностями

От автора: Способности пространственного мышления широко распространены от человека к человеку. Однако стоит сказать, что у дизайнеров, обычно, навык визуализации и понимания принципов работы сайта выше среднего. Именно поэтому зачастую дизайн рисуется в первую очередь. Но делает ли это нас идеальными кандидатами в дизайнеры? На самом деле нет.

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

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

Забудьте про баланс, чувство цвета или другие стандартные дизайнерские навыки. Умение ставить себя на сторону пользователя и ощущать сайт как он – самый важный навык, которым должен обладать дизайнер пользовательских интерфейсов. Можно не «надевать чью-то шкуру», если у вас под рукой есть обычный пользователь или тестер. Давайте рассмотрим некоторые из физических недостатков человека, про которые мы часто забываем.

Практический курс по созданию дизайна сайтов в Photoshop

Станьте профессиональным веб-дизайнером, создавая востребованные макеты сайтов.

Узнать подробнее

Недостаток цветового зрения

Недостаток цветового зрения самый широко распространённый дефект из данного списка, про который чаще всего забывают. Его часто ошибочно называют цветовой слепотой и он затрагивает до 8% мужчин на планете (у женщин меньше). Если вы не учитываете недостаток цветового зрения во время проектирования, значит, вы забываете про 8% населения.

Люди с цветовой слепотой не слепы к определенным цветам – они просто по-разному воспринимают цвета. Наиболее распространены проблемы с красным и зеленым цветами. Это называется дейтеранопия.

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

Урок 1: не все видят одинаково

Общее нарушение зрения

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

Вы должны были использовать атрибут alt для описания изображения, подчеркивание ссылок и, скорее всего, вы правильно записываете сокращения (“C.V.D” а не “CVD”). Я не буду утомлять вас какими-то общими советами, которые вы и раньше уже читали.

Если кратко: Чтобы скрин ридеры могли правильно диктовать текст пользователю, им необходимы теги alt и правильно оформленные сокращения.

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

Урок 2: дефекты более распространены, чем ты думаешь

Практический курс по созданию дизайна сайтов в Photoshop

Станьте профессиональным веб-дизайнером, создавая востребованные макеты сайтов.

Узнать подробнее

Дислексия

Дислексия также известна как «расстройство при чтении», которому подвержены до 7% населения Земли, что делает его самым распространенным дефектом влияющем на обучение. Несмотря на нормальное развитие, людям с дислексией трудно произносить слова, звуки или быстро читать.

Люди с дислексией почти не могут читать сайты с низкой контрастностью или неразборчивым шрифтом. И как это исправить?
На самом деле решение одно и то же – контраст. У людей, страдающих дислексией, переворачиваются буквы. Т.е. буква b может превратиться в d, а буква p – в q.

Люди с дислексией легко могут читать тексты с увеличенными заглавными буквами, дополнительным расстоянием между символами, разной высотой строки, наклонные символы и идеально, если каждый символ в шрифте будет спроектирован вручную. Christian Boer, создатель Dyslexie font (сам страдает дислексией) в подробностях объясняет, как его исследования помогли ему улучшить свое чтение. Любой, кто работает со шрифтами, скажет ему спасибо за это.

Пока (к сожалению) в сети мало шрифтов, спроектированных специально для дислексиков, но парочку все же можно найти и использовать их в дизайне.

Урок 3: эстетика бесполезна, если текст неразборчив

Глухота

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

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

Урок 4: веб-дизайн не должен полностью полагаться на звук и видео

Нарушения двигательных функций

У людей с нарушенной моторикой (пожилые люди или нет) возникают проблемы при работе с мышкой и клавиатурой. Скажу за себя, мне было трудно нажать «сохранить для Web» в фотошопе, а у меня даже нет нарушений с моторикой рук. В Sketch такой тип взаимодействия обрабатывается намного эффективнее. К примеру, создать прямоугольник это «R» на клавиатуре. В веб-дизайне полно клавиатурных сокращений, их использует как Atomic.io так и Dribbble.

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

Урок 5: уменьшив количество взаимодействий, вы всех сделаете счастливее.

Заключение

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

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

Автор: Daniel Schwarz

Источник: http://www.sitepoint.com/

Редакция: Команда webformyself.

Практический курс по созданию дизайна сайтов в Photoshop

Станьте профессиональным веб-дизайнером, создавая востребованные макеты сайтов.

Узнать подробнее
Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Хотите научиться создавать шикарные дизайны сайтов?

Получите пошаговую обучающую систему по веб-дизайну

Получить

Метки: ,

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree