Статья была опубликована на smashingmagazine и была переведена специально для Хабрахабра.



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

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

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

Разработка веб-сайтов для людей, страдающих от деменции, до сих пор была относительна неисследованной темой в мире веб-дизайна. Тем не менее, нам в On Our Radar пришлось столкнуться с проблемой удобства дизайна для людей с деменцией в прошлом году при создании «Дневников деменции»: проекта, который должен поощрить людей, страдающих деменцией вести аудио-дневники своей жизни, достижений и проблем, с помощью специального мобильного телефона, напечатанного на 3D-принтере. Коллекция аудио-историй выложена на сайте, их отбирают для медиа-кампаний в СМИ, или используют в службах и организациях, которые работают с людьми, страдающими деменцией.

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

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

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

Что такое деменция?

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

По некоторым оценкам, в конце 2015 года во всем мире насчитывалось около 46,8 миллиона человек, страдающих деменцией. Число людей с деменцией будет расти почти в два раза каждые 20 лет и достигнет 74,7 миллиона к 2030 году, 131,5 млн. — в 2050 г. Таких интернет-пользователей 3,3 млрд. по всему миру, и поскольку количество людей, страдающих деменцией, продолжает увеличиваться, будет расти и процент пользователей с этой болезнью.

Новые рубежи проектирования сайтов для людей с деменцией

Почему это важно?

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

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

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

Социальные сети

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



Томми Данн, человек с деменцией из Ливерпуля, Великобритания.

Основные особенности сайта для людей с деменцией

Содержание

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

Ключевые моменты

• Все должно быть четко и точно: для чего нужен ваш сайт и почему вы это делаете? Избегайте сложной словесной игры, призывов к действию (например, «Примите участие»).

• Контент должен быть понятным и привлекающим внимание.

• Функция печати контента пригодится людям, у которых проблемы со зрением и восприятием.

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

• Избегайте жаргона, слишком технического или научного языка.

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

Их словами

«Когда у вас деменция, довольно трудно сосредотачиваться на вещах длительный период времени, особенно если вы просто сидите там».

-Пол Хичмау

«Читать не трудно, в этом нет никакой сложности. Запомнить то, что вы прочитали – вот это уже проблема. Тяжело вспоминать прочитанные книги, даже вспомнить название книги… Иногда я беру в руки книгу, и не могу вспомнить, читал я ее или нет».

-Кит Оливер



При нажатии на большую кнопку «печать», пользователю открывается таблица стилей для печати. (Изображение взято с: Дневники деменции)

Макет, Навигация И Графический интерфейс

Сделайте вашу навигацию явной и четко обозначьте путь обратно на главную страницу.

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

Пять лет назад в исследованиях Pew Internet и American Life Project выяснилось, что пожилые пользователи, страдающие хроническими заболеваниями, чаще, чем их сверстники, принимают участие в онлайн-дискуссиях и ищут новые сообщества. Принимая во внимание тот факт, что Facebook – самая популярная социальная сеть для людей, старше 50 лет, вы, возможно, захотите максимально упростить возможность поделиться своим контентом в этой сети. Сделайте кнопки большими и заметными.

Ключевые моменты

• Избегайте таких задач, когда действие происходит на нескольких экранах, и при этом необходимо запоминать свои предыдущие действия (как показано на рисунке ниже).

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

• Не используйте меню-гамбургер, функции типа «Смотреть меню» и «Закрыть меню».

• Используйте кнопку «Home». Не полагайтесь на использование логотипа для возврата к домашней странице.

• Убедитесь, что гиперссылки четко видны.

• Используйте понятные кнопки для обмена контентом, достаточно большие, чтобы их можно было различить на планшетах.

• Используйте четкие разрывы строк. Точно определите участки с важными предложениями и заголовками так, чтобы разрыв был очевиден.

• Вносите изменения постепенно. Если что-то работает, не меняйте этот элемент без надобности.



При нажатии на кнопку «Задать вопрос Элейн Стефенсон» (см. с левой стороны), ниже на том же экране что и сама история, появится окно вопроса, (см. с правой стороны), так что человек, задающий вопрос, сможет легко просмотреть оригинальную историю. (Изображения взято с: Дневники деменции)



Мы не использовали меню-гамбургер и попытались сделать заголовки меню максимально простыми. (Изображения взято с: Дневники деменции)

И х словами

«Я уже почти не могу отслеживать последовательность действий… я живу одна, и для меня это довольно сложная задача.»

— Агнес Хьюстон

«Приходится все упрощать. В голове все путается. Нужно делать все постепенн. Читать медленно».

— Арчи Латта

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

— Энн Макдональд

Цвета и контраст

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

К таким трудностям относятся:

· Снижение чувствительности в различении контраста (в том числе цветовой контраст, например черно-белый, контраст между объектами и фоном).

· Снижение способности улавливать движение (перемещения).

· Изменения в поле зрения (насколько хорошо вы видите объекты по краям поля зрения, глядя прямо перед собой).

· Снижение способности обнаруживать различные цвета (например, у человека могут возникнуть проблемы с описанием разницы между синим и фиолетовым).

· Изменения в реакции зрачка на свет.

· Проблемы направления или смещения взгляда.

Поэтому при выборе соотношения цвета и контраста важно следовать инструкциям Руководства по обеспечению доступности веб-контента (РДВК).

Ключевые моменты

· Используйте цветовую схему с высоким уровнем контрастности, чтобы сделать страницы более читабельными.

· Предложенные коэффициенты РДВК для контраста — 7:1 и 4,5:1. В связи с тем, что наш сайт предназначен для людей, страдающих деменцией, мы вышли за рамки этих рекомендаций.

· Публикуйте текст без наложения на изображения.

· Используйте простой фон, который не будет отвлекать внимание пользователей.



1) Синий цвет темы с белым текстом: коэффициент контрастности — 7.4:1

2) Черный текст на белом фоне: коэффициент контрастности – 9,45: 1.

3) Названия каждой части расположены под изображением, и не перекрывается им. Вы можете нажать на название или на картинку, чтобы перейти к посту. (Изображение взято из: Дневники деменции)

Их словами

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

— Агнес Хьюстон

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

Текст и шрифты

Текст должен быть понятным и простым!

Sans serif – тип шрифтов с небольшими выступающими черточками (так называемыми засечками) в конце росчерка. Современный, минималистичный, широко используется в Интернете, в частности, для коротких и броских сообщений. Он не так выразителен с визуальной точки зрения, но простота буквенных форм sans serif делает его хорошо читаемым на любом устройстве.

Если сообщение, адресованное людям с деменцией, оформить с помощью sans serif, им в целом будет легче понять его. Возможность изменения размера шрифта – очень удобная функция, если, конечно, ваш бюджет позволяет ее применять.

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

Ключевые моменты

· Не используйте аббревиатуры и акронимы.

· Используйте шрифт большого размера, или предоставьте читателям возможность менять размер шрифта.

· Используйте шрифт sans serif. Мы используем Source Sans Pro (шрифт в открытом доступе, отлично подходит для разных пользовательских интерфейсов).

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

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

Их словами

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

— Джо Беннет

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

-Томми Данн



Пример изменения размера шрифта, (маленький), на сайте dementiadiaries.org. Функция изменения размера шрифта находится в правом верхнем углу сайта. (Изображение взято с: Дневники деменции)



Пример изменения размера шрифта (большой), на сайте dementiadiaries.org. Функция изменения размера шрифта находится в правом верхнем углу сайта. (Изображение взято с: Дневники деменции)

Изображения

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

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

· Изображения должны быть актуальными, тесно связанными с текстом.

· Старайтесь избегать чрезмерно абстрактных иллюстраций.

· Убедитесь в том, что фотографии вносят что-то в основную историю, а не отвлекают от нее.



Отображается фото человека, пока его голос звучит на аудио. Материал сопровождается расшифровкой и соответствует рекомендациям по доступности веб-контента. (Изображение взято из: Дневники деменции)

Их словами

«Нам особенно понравились маленькие фотографии и иллюстрации, ясно объясняющие процесс; так текст гораздо проще понять».

— Кэрол Форс, жена и сиделка Криса Форса

Использование мультимедиа

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

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

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

· Видео или аудио-контент сопровождайте, по возможности, субтитрами или расшифровкой

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



Звук загружается с помощью SoundCloud, но мы также используем другой аудио-плеер, он проще. (Изображение взято из: Дневники деменции)

Их словами

«Фоновые шумы… могут затруднить восприятие. У меня очень острый слух, на грани болевого порога. Почему в обществе нас «засыпают» громкими навязчивыми звуками? Просто мысли вслух. Это не значит, что мне не нравятся громкие звуки, но они мешают, когда из-за них я не могу думать и не могу их регулировать. Я могу даже отшатнуться в сторону. Звук заполоняет весь мой мозг, и я не знаю, что мне делать».

— Агнес Хьюстон

«Музыка, кажется, доходит до тех частей поврежденного мозга, до которых не доходят другие формы коммуникации».

— Томми Данн

Личный контакт

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

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

Ключевые моменты

· Во время выполнения длительных задач давайте четкую обратную связь о ходе и завершении работы.

· Помните о социальном «клейме» и говорите с гордостью, что вы сделали все возможное, чтобы сделать ваш сайт удобным для людей, страдающих деменцией.



Пример звукового отчета, который был удаленно расшифрован одним из добровольцев. Обратите внимание на короткое «спасибо» под расшифровкой. (Изображение взято из: Дневники деменции)
Их словами

«Я не говорю сходу, что страдаю деменцией; Я говорю, что позову к телефону кого-то другого. Если я очень расстроен, то говорю: „Извините, у меня деменция, вы не могли бы говорить со мной немного медленнее, тогда я попытаюсь все вам объяснить. Мы же говорим не о ракетостроении. Я не глуп. И тогда они отвечают: «О, мне очень жаль слышать это».

— Кэрол Овенстоун

“Если есть возможность поговорить лично, например, с помощью Skype, стоит ею воспользоваться. Людям может помочь язык тела. Они будут видеть, что я все еще на связи, и пытаюсь выразить свои мысли, им не надо будет все время подсказывать, так как они будут видеть, что я пытаюсь ответить. По телефону я чувствую необходимость дать быстрый ответ, так что я, скорее всего, просто соглашусь, или скажу что-нибудь, неважно правильно это или нет – просто даю ответ и пытаюсь поскорее закончить разговор».

— Крис Форс

Сомневаетесь – спросите link

Это, пожалуй, самое главное.

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

Ключевые моменты

· Включайте в работу над проектированием людей, страдающих деменцией.

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

· Не делайте предположений о поведении и возможностях пользователя. Попробуйте найти более приемлемое решение.

Их словами

«Те из нас, кто страдает деменцией – эксперты в понимании собственных условий жизни, у нас есть ценная информация, которой мы можем поделиться. Важно вовлечь нас на ранней стадии проектирования, чтобы понять, что является правильным для каждого из нас… Вокруг много гаджетов. Если вы будете терпеливы и поможете мне, я готова пробовать новые вещи. Мы не кусаемся! „

— Энн Макдональд

Выводы

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

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