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

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

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

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

Мы все когда-нибудь состаримся

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

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

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

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

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

Разрабатывать UX для людей от 85 лет — реальная проблема. Позорно, что большинство компаний не обращают на этот вопрос внимания. Просто игнорируют. Это должно измениться

Якоб Нильсен на конференции «Альфа-банка», Основатель Nielsen Norman Group

Ситуация в России

Аудитория интернета в России выросла в 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.

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

Шрифт 13px в описании товара — зачем так жестоко к людям?
Шрифт 13px в описании товара — зачем так жестоко к людям?

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

«Эльдорадо» и Contrast ratio 2.71 в карточке товара. Ниже расскажем, какой контраст всё-таки нужен
«Эльдорадо» и Contrast ratio 2.71 в карточке товара. Ниже расскажем, какой контраст всё-таки нужен

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

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

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

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

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, если было полезно :)

6464
27 комментариев

Это откуда вдруг такая статистика?
Я например не открою файл любого формата.

5
Ответить

У нас для тебя плохие новости... извини

4
Ответить

Статистика из данных Центра изучения пенсионной реформы. Взяли из текста РБК, ссылка вшита в статью. Продублирую: https://runet.rbc.ru/materials/internet-na-dolgie-gody/

Наверное, стоило пометить, что речь об общеизвестных форматах :) Спасибо.

Ответить

Когда «покинул чёртово здание» и смотришь реальные юзкейсы:

4
Ответить
Автор

Неплохое :)

Ответить

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

Строго говоря, тогда нужно дать возможность и выбрать индекс, соответствующий городу, и город, соответствующий индексу.

2
Ответить
Автор

Справедливо :)

Ответить