Случайны выбор дневника Раскрыть/свернуть полный список возможностей


Найдено 8367 сообщений
Cообщения с меткой

веб-дизайн - Самое интересное в блогах

Следующие 30  »
rss_rss_hh_new

[Перевод] UX-дизайн кнопки: советы по созданию, типы и состояния

Среда, 29 Июня 2016 г. 16:25 (ссылка)

Ник Бабич разработчик, UX/UI специалист написал заметку в блоге UX Planet про UX-дизайн кнопки: советы по созданию, типы и состояния. Наша команда выполнила перевод данной статьи



image



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



Советы по созданию кнопок



Кнопки должны выглядеть как кнопки


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



image



Очень тщательно продумайте размер зоны прикосновения и внутреннего поля. Размер кнопок также помогает пользователю понять, что это за элемент. Каждая платформа дает свои рекомендации в отношении минимального размера зоны прикосновения. Результаты исследования, проведенного MIT Touch Lab, показали, что средний размер для прикосновения подушечками пальцев составляет 10-14 мм, а для кончиков пальцев — от 8 до 10 мм, при этом наиболее оптимальный минимальный размер зоны прикосновения будет 10Х10 см.



image



Расположение и порядок



Разместите кнопки там, где пользователи без труда их найдут или там, где они ожидают их увидеть. Посмотрите, как в руководстве по разработке iOS советуют размещать кнопки.



image



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



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



image



Надписи



Надписи на кнопках должны означать действие, которое выполняет кнопка. Четко опишите, что произойдет при ее нажатии.



Точно такие же кнопки, как и вверху, но без соответствующей надписи. Чувствуете разницу?



image



Призыв к действию (CTA)



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



image



Форма кнопки



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



image



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



image



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



Типы кнопок и поведение



1. Объемная кнопка



image



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



Применение



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



Поведение



Объемные кнопки приподнимаются и заполняются цветом при нажатии.



image



Пример



Объемные кнопки выделяются на фоне плоских. Пример приведен для приложения Android.



image



2. Плоские кнопки



Плоские кнопки не приподнимаются, но также заполняются цветом. Основное преимущество плоских кнопок в том, что они не отвлекают внимание от контента.



image



Применение



В диалоговых окнах (чтобы соблюсти единство действия кнопки и контента)



image



На панели инструментов



image



Расположение снизу, чтобы пользователь быстрее их нашел



image



Поведение



image



Пример



Плоская кнопка в диалоговом окне приложения на Android.



image



3. Переключатель



Кнопка-переключатель позволяет пользователю переключаться между двумя или (более) состояниями.



image



Применение



Почти все переключатели применяются в качестве кнопок Вкл\Выкл.



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



· В группе должно быть не менее трех кнопок



· На кнопках должен быть текст, иконка или и то, и другое.



image



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



image



Очень важно выбрать правильную иконку для кнопки. Я рассказывал об этом в статье «Иконки как фактор удачного пользовательского опыта».



Пример



В Apple iOS переключатели использованы в разделе «Настройки».



image



4. Контурные кнопки



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



image



Применение



Пожалуй, не стоит использовать контурные кнопки для призыва к действию. Вот, посмотрите на Bootstrap. Контурная кнопка «Скачать» ничем не отличается от главного логотипа, что может запутать пользователей.



image



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



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



image



Поведение



image



Пример



На сайте AirBnB есть контурные кнопки для действия «Стать хозяином».







5. Плавающая кнопка с выпадающим меню



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



Применение



Плавающие кнопки с выпадающим меню применяются для вызова функциональных клавиш.



Поведение



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



image



Выбор типа кнопки.



Выбор стиля кнопки зависит от ее важности, количества контейнеров на экране, и от разметки экрана.



image



image



Функция: Достаточно ли важна и уникальна кнопка, чтобы сделать ее плавающей?



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



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



Состояния кнопок



Здесь пойдет речь не о том, как пользователь видит начальную кнопку, а о тех случаях, когда при наведении указателя на нее ничего не меняется. Пользователь не сразу поймет кнопка это или нет? Теперь придется кликнуть, что бы это выяснить …



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



Нормальное состояние



Главное правило этого состояния – кнопка должна выглядеть как кнопка в нормальном состоянии. Windows 8 это показательный пример неудачного дизайна кнопки. Пользователю сложно понять кликабельны или нет объекты в меню настроек.



image



Состояние в фокусе



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







Нажатое состояние



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



image



Неактивное состояние



Есть два варианта – спрятать кнопку, либо отобразить ее в неактивном состоянии.



Преимущества скрытой кнопки:




  • · Ясность. Отображается только то, что необходимо для текущей задачи.

  • · Сохранение пространства. Это позволит вам менять управление, используя одно пространство для разных целей. Что очень удобно, если присутствует очень много элементов управления. Gmail применяет этот способ.



image



image



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




  • Показать возможность действия. Даже если кнопка не используется, пользователь знает, что действие возможно. Можно даже сделать подсказку и объяснить критерии использования.



Контроль размещения. Пользователь понимает, где в интерфейсе размещено управление и кнопки.





image



Заключение



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



UX дизайн кнопок это узнаваемость и ясность. Думайте о сайте или приложении как о беседе, начатой занятым пользователем. Кнопка играет критически важную роль в этой беседе.
Original source: habrahabr.ru.

https://habrahabr.ru/post/304398/?utm_source=habrahabr&utm_medium=rss&utm_campaign=best

Метки:   Комментарии (0)КомментироватьВ цитатник или сообщество
rss_rss_hh_new

Алгоритмический дизайн

Вторник, 28 Июня 2016 г. 16:50 (ссылка)

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



Алгоритмический дизайн




Роботы заменят дизайнеров?



Интерес к теме возник в 2012 году, когда для одного из наших продуктов мы описывали автоматизированную работу журнальной верстки. Существующий контент имел плохую семантическую структуру, так что переверстать архив публикаций в современный вид было бы затратным. Да и в целом не каждый редактор обладает хорошими навыками дизайна. Для этого специальный скрипт делал парсинг статьи и исходя из её контента (количество абзацев и слов в каждом из них, количество фотографий и их форматы, врезки с цитатами и таблицами и т.п.) выбирал типовой паттерн для представления куска статьи в эффектном журнальном виде. Скрипт также следил за тем, чтобы паттерны чередовались и материал выглядел достаточно разнообразно. Таким образом редакция экономит силы на переработке старого контента в новый вид, а дизайнер просто регулярно добавляет новые модули представления. Похожую модель недавно реализовал Flipboard.



Более ярким и заметным примером стала нашумевшая CMS The Grid, которая самостоятельно подбирает шаблоны, оформление контента, обрабатывает фотографии. Причем ещё и проводит A/B-тесты разных подходов для выбора лучшего решения. Правда, продукт уже пару лет в закрытой бете и судить о нём можно было только по рекламным материалам и статьям. А недавно на Designer News откопали примеры созданных с помощью The Grid сайтов и реакция сообщества неоднозначная — критикуют слабые с дизайнерской точки результаты и мусорный код. В общем, скептики открыли шампанское.



The Grid



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



Творческое партнёрство



Но если вести речь о творческом партнёрстве, когда дизайнер в паре с алгоритмами решает продуктовые задачи — здесь полно перспектив и хороших примеров. Два года назад нашумел инструмент для промышленных дизайнеров Autodesk Dreamcatcher, который породил несколько публикаций на тему. А этой весной почти одновременно вышли две эпические определяющие статьи, глубоко анализирующие тренд, его предпосылки и будущее роли дизайнера и инструментов. Это большой объём текста, но его стоит осилить, чтобы оставаться релевантными в ближайшие годы.



Creative AI



Первая публикация от Roelof Pieters и Samim Winiger во всех деталях изучает историю компьютеров, как помощников дизайнеров. Они выделяют три уровня развития инструментов:




  1. Первое поколение перевело аналоговые инструменты в программы и развивается по пути увеличения возможностей.

  2. Второе научилось брать на себя часть рутинных операций, которые раньше требовали профессиональной экспертизы.

  3. Третье должно стать соавтором решений, помогая находить новые интересные направления.





Авторы проводят хорошую аналогию с генеративным искусством — дизайнер определяет алгоритмы, по которым формируется произведение, а дальше вручную выбирает наиболее удачные производные. Если же перебор будет не совсем ручным, а компьютер поможет ещё и в фильтрации получившегося потока — работа станет ещё более продуктивной и креативной. Они запустили сайт Artificial Experience, наверняка там появится много интересного.



В другой серии статей Jon Gold, работавший над той самой CMS The Grid, рассказывает о том, как он научил компьютер принимать осмысленные шрифтовые решения. Он посчитал, что это мало чем отличается от обучения дизайнеров, и разбил процесс на несколько этапов: сначала анализ символов в шрифтах для понимания сочетаемости, затем базовые правила совмещения шрифтов, после этого «скормил» модные примеры сочетаний для понимания трендов, а в конце приставил детально следить за работой опытных дизайнеров. Общий посыл у него аналогичен Roelof и Samim — инструменты должны стать творческими партнёрами дизайнера, а не тупыми исполнителями.



Taking The Robots To Design School



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









Хотя Jon и называет в шутку этот подход «дизайн-брутфорсом» или «multiplicative design», он подчёркивает важность профессионала «за рулём». Кстати, в начале года он ушёл из команды The Grid, который как раз ратовал за полностью автоматизированный подход.



Экзо-скелет для дизайнера



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




  1. Изучить пространство проблем и взять для решения те, что дадут максимальную ценность бизнесу и пользователям.

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

  3. Произвести, запустить и распространить продукт, решающий выбранную проблему.

  4. Оценить эффективность выбранного решения на практике и оптимизировать его.





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



Построение интерфейса



Простые инструменты паблишинга вроде Medium, Readymag и Tilda уже сократили количество ручной работы — в них полно добротных шаблонов, с помощью которых можно и без дизайнера собрать неплохой результат. Улучшение шаблонов сделает порог входа ещё ниже. Например, пока The Grid запрягал, тематикой алгоритмического дизайна заинтересовался Wix, мастодонт среди конструкторов сайтов. Они анонсировали Advanced Design Intelligence, похожий по смыслу на The Grid полу-автоматизированный способ создания сайтов для непрофессионалов. Они обучают алгоритм, скармливая ему множество примеров хороших современных сайтов. Кроме того, он старается учитывать тематику создаваемого сайта, чтобы лучше попадать в стиль. Ведь непрофессионалу сложно выбрать подходящий шаблон из всего многообразия и продукты вроде Wix и The Grid выступают тут дизайнером-экспертом.









Конечно, как и в случае с The Grid, полный отказ от дизайнера приведёт к штампованным и не всегда хорошим результатам (хотя в любом случае поднимет общий уровень качества). Но если рассматривать эту работу как своего рода «парный дизайн» с компьютером, можно сгрузить часть рутины. Например, дизайнер собирает мудборд на Dribbble или Pinterest, а алгоритм быстро примеряет эти стили на макет, а дальше подбирает наиболее близкий шаблон из имеющихся. По сути — дизайнер становится арт-директором своего подмастерья, компьютера.



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



Vox Media сделала в своей CMS Chorus механизм сборки главной страницы по схожей модели. Из большой коллекции паттернов представления статей, видео, сюжетов и других материалов алгоритм сначала собирает в принципе гармоничные варианты, а затем оценивает их потенциальную эффективность и выбирает оптимальный. Это оказывается гибче и эффективнее, чем ручная работа редактора, что доказывает и опыт рекомендательных систем вроде Relap.io (https://relap.io/). А пример с автоматической сборкой страницы статьи я описывал в начале.



Algorithmic design: How Vox picks a winning layout out of thousands



Отдельная тема — получение данных о том, как строить интерфейс. Красивые вещи рассказывают те, кто работает с большими данными и умеет кластеризовать их в инсайты. Например, Airbnb научились прогнозировать цену в определённом городе в определённый сезон, так что пользователям проще задать конкурентоспособный тариф. А про рекомендательные механизмы Netflix ходят легенды.



Ещё парочка примеров:


  • Small Victories собирает сайт из кусков контента и графики в Dropbox.

  • Система автоматической книжной вёрстки Ridero максимально упрощает процесс создания книги.





Подготовка графики и контента



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



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



Очень простой алгоритм подбора цвета, который работает



Другое дело, когда алгоритм готовит всю композицию. Яндекс использует генератор изображений для подборок на Маркете. Маркетолог заполняет несложную форму с названием и иллюстрацией, а дальше генератор предлагает бесконечное количество вариаций, которые соответствуют гайдлайнам. Ещё дальше пошли в Netflix — их скрипт вырезает персонажей для постеров, накладывает тексты и делает автоматические эксперименты со всем этим. Настоящая магия!



Extracting image metadata at scale



И уж совсем чёрная магия происходит в направлении нейросетей. Один из свежих примеров, приложение Prisma, стилизует фотографии под работы известных художников. Отберёт ли это работу у иллюстраторов? У тех, кто имеет хороший стиль — вряд ли. Но это, опять же, снизит порог входа на получение добротных иллюстраций для статьи или сайта там, где совсем уникальный подход не требуется. Прощайте, унылые стоковые фото! А для сложных стилистик это поможет получать быстрый набросок в духе «а что если мы попробуем нарисовать здание или кота в нашем стиле». Можно делать сториборды и описывать сценарии в виде комиксов (фото легко превращается в скетч). Думаю, скоро этот список применений сильно расширится.



Prisma AI



Ну и напоследок — живая айдентика. Анимация в последние несколько лет стала популярной в брендинге, но некоторые идут ещё дальше. Например, Wolff Olins представили полностью живую айдентику бразильского сотового оператора Oi, которая реагирует на звук. Такое точно невозможно сделать без творческого партнёрства с алгоритмами.









Новые инструменты



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











Часть дизайн-системы



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









Генеративный дизайн давно используется в перфомансах, пром.дизайне, одежде, архитектуре. А вот в продуктовом дизайне этот подход не особо заметен, поскольку не помогает решать утилитарные задачи. Но если посмотреть на общий механизм генеративного подхода — дизайнер определяет правила, по которым алгоритм строит итоговый объект — подсмотреть есть что. Процесс работы продуктового дизайнера может стать таким:




  1. С помощью заранее заданных правил и паттернов генерируется множество вариантов дизайна.

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

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

  4. Один или несколько вариантов запускаются в сплит-тестирование, по результатам остаётся наиболее эффективный.





По такой модели работает инструмент Autodesk Dreamcatcher для промышленных дизайнеров, но веб и приложения более динамичны, чем статические объекты. Как именно мы сможем отфильтровать поток концептов в продуктовом дизайне, где сценарии использования так разнообразны — вопрос открытый. Но мы и так занимаемся генеративным дизайном на брейнштормах, когда рисуются десятки идей; или по ходу решения задачи, когда макет много раз дорабатывается. Так почему не отдать часть этой работы алгоритмам? Инструмент Rene от Jon Gold показывает пример реализации такого подхода.



Autodesk Dreamcatcher



Выводы



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



Более того, сами продукты становятся всё сложнее — нам нужно поддерживать множество платформ, подстраивать интерфейсы под всё большее количество сегментов пользователей, проверять всё больше гипотез. И вместо того, чтобы закидывать проблему всё большим количеством дизайнеров, лучше отгрузить часть рутины компьютеру. Пусть лучше он поиграет со шрифтами.
Original source: habrahabr.ru.

https://habrahabr.ru/post/304154/?utm_source=habrahabr&utm_medium=rss&utm_campaign=best

Метки:   Комментарии (0)КомментироватьВ цитатник или сообщество
rss_rss_hh_new

[Перевод] Radio Buttons UX Дизайна

Вторник, 28 Июня 2016 г. 15:59 (ссылка)

image



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







image



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



Почему Radio Buttons получили такое название ?





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



Элемент был назван по аналогии с кнопками, которые использовались в автомобильных радиоприёмниках для выбора предварительно настроенной радиостанции. Аналогичное решение в СССР широко применялось в телевизорах. Иногда их называют радиальными кнопками за их круглую форму, что неверно (к тому же, они могут быть и не круглыми, как например в библиотеке motif). Название возникло в начале 1980-х, когда такие кнопки были широко распространены. На русском языке по отношению к таким кнопкам принято пользоваться термином «кнопка с зависимой фиксацией», однако по отношению к компьютерным интерфейсам этот термин не прижился.




А как вообще использовать Radio Buttons?





Используйте переключатели, чтобы изменять настройки, например чтобы включить или выключить что-то и т.п. Кроме того, изменения не вступят в силу, пока пользователь не нажмет кнопку (с надписью «применить» или «сохранить», например). В случае, если пользователь нажимает кнопку назад или Отмена, то любые изменения переключателей на странице должны будут вернуться к исходным настройкам.



image



Четко и понятно. Простота превыше всего





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



Всегда предлагаем выбор по умолчанию





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



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



image



Вертикальный список





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



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



image



Размер переключателя





По своей природе переключатели маленькие, и, по ним не всегда просто попасть, а самое главное точно в тот пункт, который нам нужен. Можно сделать большую активную область, чтобы и при клике на текст кнопки, radio button тоже срабатывал.



image



Использование анимации придаст вашему интерфейсу большей привлекательности



image



Заключение





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



Дизайн с осторожностью. Переключатели легко проверить с помощью бумажных прототипов, поэтому вам не нужно ничего реализовывать, чтобы увидеть, если пользователь разбирается в управлении и может правильно его использовать.
Original source: habrahabr.ru (comments, light).

https://habrahabr.ru/post/304318/

Метки:   Комментарии (0)КомментироватьВ цитатник или сообщество
rss_rss_hh_new

Проектирование сайтов для людей с деменцией

Вторник, 28 Июня 2016 г. 10:56 (ссылка)

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



image



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



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



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



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



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



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



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



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



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



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



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



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



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



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



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



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



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



image



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



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



Содержание



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



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



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



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



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



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



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



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



Их словами



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



-Пол Хичмау



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



-Кит Оливер



image



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



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



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



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



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



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



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



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



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



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



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



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



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



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



image



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



image



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



И х словами



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



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



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



— Арчи Латта



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



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



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



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



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



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



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



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



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



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



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



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



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



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



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



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



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



image



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



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



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



Их словами



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



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



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



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



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



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



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



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



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



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



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



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



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



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



Их словами



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



— Джо Беннет



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



-Томми Данн



image



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



image



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



Изображения



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



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

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



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



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



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



image



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



Их словами



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



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



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



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



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

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



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



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



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



image



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



Их словами



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



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



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



— Томми Данн



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



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



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



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



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



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



image



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

Их словами



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



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



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



— Крис Форс



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



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



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



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



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



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



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



Их словами



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



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



Выводы



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



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

Original source: habrahabr.ru (comments, light).

https://habrahabr.ru/post/304256/

Комментарии (0)КомментироватьВ цитатник или сообщество

Следующие 30  »

<веб-дизайн - Самое интересное в блогах

Страницы: [1] 2 3 ..
.. 10

LiveInternet.Ru Ссылки: на главную|почта|знакомства|одноклассники|фото|открытки|тесты|чат
О проекте: помощь|контакты|разместить рекламу|версия для pda