Доступный дизайн: как сделать интерфейс удобным для пожилых

Мы в Mojo решили напомнить, что дизайн не только решает коммерческие задачи, но и делает жизнь людей комфортнее. UX — концепция, которая основана на идее качества и удобства, и перед ней все должны быть равны.

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

Неприятные новости: мы стареем с 20 лет. К 40 годам хрусталик глаза теряет эластичность, и зрение падает. Это естественный процесс, из-за которого становится все труднее читать мелкий текст.

В период с 25 до 60 лет способность использовать сайты снижается на 0,8% в год. Людям нужно больше времени на странице, чтобы сориентироваться и выполнить задачу.

К 2050 году каждый шестой человек в мире будет старше 65 лет.

По прогнозам ООН, число людей в возрасте 80 лет и старше утроится: с 143 миллионов в 2019 году до 426 миллионов в 2050 году.

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

Аудитория интернета в России выросла в 2019 году за счёт пенсионеров. Больше всего прибавилось пользователей в категориях 65+ (с 26 до 36%) и 50-64 года (с 63 до 66%).

Росстат говорит, что в 2020 году более половины россиян старше 55 лет свободно пользовались интернетом.

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

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

Центр изучения пенсионной реформы в своём исследовании сделал вывод, что людям от 55 до 75 лет легко осваивать интернет. Почти 100% из них познакомились с компьютером ещё на рабочем месте.

Основные мотивы заходить в интернет для них — поиск источников дохода, интерес к новой информации и рекомендации родственников.

Растёт уровень компьютерной грамотности пенсионеров:

• 92% пожилых людей самостоятельно могут открывать файлы любого формата;
• 74% умеют копировать и сохранять информацию;
• 56% сами удаляют и устанавливают программы из сети;
• 43% умеют пользоваться текстовыми редакторами;
• 37% освоили электронную почту.

Возрастные пользователи ежедневно проводят в интернете от 3 до 6 часов. Многие предпочитают его телевизору.

В США цифровая грамотность населения также растёт. Пользователи старше 65 лет могут самостоятельно:

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

Мотивы использовать интернет у пожилых в США:

• следить за текущими событиями;
• управлять деньгами;
• делать покупки;
• искать интересующую информацию;
• поддерживать связь с друзьями и семьей.

Участники исследования Nielsen Norman group положительно отзывались о появлении интернета в их жизни. Один 87-летний респондент сказал: «Выход в интернет заставил меня почувствовать себя намного более независимым».

С 2011 по 2016 год количество владельцев смартфонов среди людей старше 65 лет увеличилось в четыре раза.

1. Мелкий кегль. Отметим, что размер кегля зависит от гарнитуры. Некоторые из них сами по себе крупные, какие-то — поменьше. Например, Asos использует Futura PT. 14 кегль Futura PT выглядит как 10 кегль Roboto.

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

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

3. Иконки с непонятными значениями. Человеку без бэкграунда в цифровой среде потребуется время, чтобы понять, что всё это значит.

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

5. Плохой UX-копирайтинг. Сюда относятся сообщения об ошибках с непонятными формулировками и невнятный текст в навигации. Ещё одна проблема — незаметное размещение оповещения на экране среди множества других элементов интерфейса.

Используйте размер кегля от 14pt. Расстояние, на котором мы можем читать буквы, влияет на скорость чтения. Такой кегль позволит комфортно изучать информацию. Помните: если человеку нужно щуриться или наклоняться ближе, чтобы прочитать текст — он этого делать не станет.

Позвольте пользователям регулировать размер текста самостоятельно.

Обеспечьте высокий контраст между текстом и фоном. Предпочтительно использовать чистый фон вместо текстурированного. Фон с паттерном мешает распознавать мелкие детали в тексте.

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

Расширение браузера Chrome Color Contrast Analyzer от NCSU покажет, какой фон подходит для наложения текста.

В Figma проверить коэффициент контрастности можно с помощью плагина Color Contrast Checker.

Контрастность — это отношение яркости элемента к яркости фона. Она измеряется в диапазоне от 1:1 (минимальная контрастность — белый текст на белом фоне) до 21:1 (максимальная контрастность — черный текст на белом фоне).

Требования к контрастности описаны в рекомендациях по доступности вебконтента (WCAG). В них предлагают уровни поддержки AAA, AA, AAA Large и AA Large.

AAA и AA — для небольших шрифтов (меньше 14pt для жирных и 18pt для обычных)

AAA Large и AA Large для заголовков (больше 14pt для жирных и 18pt для обычных).

Какие коэффициент контрастности рекомендуют

AAA — 7:1

AAA Large — 4,5:1

AA — 4,5:1

AA Large — 3:1

Поддержка AAA-стандарта нужна для людей с умеренно сниженным зрением, а АА-стандарта — для людей со зрением ниже среднего.

Чем проще шрифт — тем лучше. Избегайте гарнитур с декоративными элементами, засечками и шрифтов странной формы. Например, имитирующих почерк или готический стиль. Они ухудшают читаемость.

NoCoffee Vision Simulator можно использовать для имитации нарушений зрения, в том числе разных форм дальтонизма.

• уменьшите расстояние между последовательными элементами интерфейса. Например, полями формы. Убедитесь, что они находятся на расстоянии не менее 2 миллиметров друг от друга;

• основные кнопки на сенсорных интерфейсах должны быть не менее 44×44 px;

• элементы интерфейса, которые нужно щёлкать мышью, должны быть не менее 11 миллиметров по диагонали. Всегда делайте область нажатия больше самой кнопки или гиперссылки.

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

Перспективная память (воспоминание, что нужно сделать в будущем) также страдает.

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

К слову, эти рекомендации подойдут и в работе с молодой аудиторией. Особенно, если она не очень лояльна к вашему проекту.

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

Чтобы подсказать значение иконки стоит внедрить текстовые метки. Они должны быть видны всегда, даже без участия юзера.

Особенно это важно для значков навигации. Не полагайтесь на наведение, чтобы показать пояснения.

Во-первых, на сенсорном экране такую механику будет сложно реализовать.

Во-вторых, человеку придётся приложить больше умственных и физических усилий, чтобы достигнуть цели. Как однажды сказал дизайнер и консультант по юзабилити Брюс Тоньяццини: «Слово стоит тысячи картинок».

1. Сохраняйте дизайн простым и схематичным. Меньше графических деталей — их всё равно не распознают в маленьком значке.

2. Используйте правило пяти секунд. Если вы тратите больше 5 секунд, чтобы придумать иконку — она не передаст суть.

3. Проверьте значки на узнаваемость: спросите людей, что они ожидают от взаимодействия с ними.

4. Проверьте значки на запоминаемость: посмотрите, вспомнит ли целевая аудитория их значение через две недели после контакта.

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

Сообщение об ошибке должно включать:

1. Явное указание на то, что что-то пошло не так. Когда пользователи ошибаются и не получают обратной связи, они полностью теряются. Точно опишите проблему.

2. Понятный язык вместо отраслевых терминов вроде «произошла ошибка класса 2».

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

4. Конструктивный совет, как исправить проблему. Например, проверить опечатку, посмотреть рекомендации в файле или перезагрузить страницу.

Наиболее частое оповещение в интернете «404 not found» нарушает большинство этих рекомендаций. Лучше написать собственное сообщение об ошибке.

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

6. Сохраните как можно больше работы пользователя. Позвольте человеку редактировать исходное действие, а не делать все заново. Если посетитель ввёл хоть какую-то информацию, даже без ошибки мы должны её использовать заново во всех доступных сценариях. Это часть принципа «пусть потеет машина».

7. Сократите работу по исправлению ошибки. Если возможно, угадывайте правильное действие и дайте пользователям выбрать его из небольшого списка исправлений. Например, вместо того, чтобы просто сказать «город и почтовый индекс не совпадают», дайте посетителю выбрать город, который соответствует введенному им почтовому индексу.

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

Для тех, кто пролистал в самый низ:

• используйте шрифт от 14 пунктов. Это порадует не только взрослое поколение, но и подростков;
• старайтесь писать текст на «чистом» фоне и всегда проверяйте уровень контрастности;
• избегайте шрифтов с необычным начертанием. Чем проще гарнитура — тем лучше;
• избегайте разделения задач на несколько экранов, если они требуют запоминания предыдущих действий. Во время длительных задач давайте чёткую обратную связь о прогрессе;
• делайте текстовые обозначения иконок — не заставляйте неопытных пользователей гадать;
• в сообщении об ошибке дайте рекомендации, как её исправить.

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

Ставьте «+1» и подписывайтесь на Mojo, если было полезно :)