5 простых способов сделать пользовательский интерфейс более доступным

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

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

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

Что такое доступность пользовательского интерфейса?

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

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

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

• Понятность: интерфейсы должны иметь четкую компоновку с выраженными кнопками, меню и призывами к действию.
• Надежность: доступный продукт должен обслуживать максимально широкий круг пользователей, независимо от их особенностей.
• Конкретность: интерфейс должен максимально использовать имеющиеся возможности доступности (например, в мобильной ОС).

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

Использование цвета и контраста

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

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

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

Обращайте внимание на визуальную иерархию

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

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

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

Используйте интерактивные элементы с умом

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

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

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

Разрешите пользователям изменять размеры экранов

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

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

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

Тестируйте, настраивайте и снова тестируйте

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

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

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

Пора начать заботиться о доступности пользовательского интерфейса

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

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