Полезные материалы

Дизайнерский дизайн 101Вы разрабатываете дизайн для всех своих пользователей?

Универсальный дизайн приносит пользу пользователям, предприятиям и большинству людей. Что это такое и какие конкретные меры следует принимать во внимание?

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

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

Что означает этот термин?

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

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

Нормативно-правовые акты Норвегии требуют, чтобы сетевые решения разрабатывались в соответствии с различными версиями и уровнями WCAG.

Почему важно быть частью

Причин этому множество, практически независимо от подхода. Самое очевидное, но также и важное, помимо того, что это законно, это то, что это хорошо для людей в цифровой сфере. Каждый сможет пользоваться и ориентироваться в продуктах и услугах на равных, если в приоритете будет поставлен универсальный дизайн. По словам Буфдира, между 15% Рис. 18% имеет ограниченную функциональнуюШкала Есть много пользователей, которых вы можете исключить и пропустить!

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

Здесь действует принцип, согласно которому пользователи проводят больше всего времени на чужих сайтах и с чужими продуктами. Этот принцип называется Jakob’s Law и относится к законам UX. На практике это означает, что пользователи хотят, чтобы ваш сайт работал так же, как уже знакомые им сайты.

Кто это?

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

SEO SEO SEO

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

В The Classic взломали

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

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

разовые Слепота, низкое зрение, возрастное зрение

Должность: Потерянные очки, зеленый цвет и катаракта

Смета Плохой свет, экстремальный свет, отвлекающие факторы, расстояние

Примеры многих видов инвалидности. https://www.microsoft.com/design/inclusive/
Примеры многих видов инвалидности. https://www.microsoft.com/design/inclusive/
Поздравляю. 7 Принципы универсальных

Центр универсального дизайна в Университете штата Северная Каролина 1997 Семь - оценивать и создавать универсально разработанные решения. Они сегодня так же актуальны, как и сегодня. 25 Однако они не имеют прямого отношения к закону и должны использоваться только для руководства.

  • Как будто

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

  • Вне

    Дизайн должен служить широкому спектру индивидуальных предпочтений и навыков.

  • Простой в использовании и простой в использовании

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

  • Информация

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

  • Для

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

  • Низкая физическая нагрузка

    Дизайн должен быть в состоянии использоваться эффективно и удобно с минимальными усилиями.

Что я, как дизайнер, разработчик или менеджер проекта, должен предоставить в веб-решении?

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

1Шкала При использовании навигации по клавиатуре используйте клавишу вкладки для навигации. Навигация по Keymap делает ваше веб-решение доступным для пользователей, которые не могут или не хотят использовать мышь для навигации. Облегчает пользователю навигацию с клавиатуры, устанавливая порядок вкладок, который имеет смысл. Включить ”Пропустить навигационные ссылки”, или перейти по ссылкам, чтобы пользователь мог перейти прямо к основному содержанию страницы. руководство по навигации по клавиатуре под наблюдением UU.

Фото, показывающее связь прыжка на передней части inevo не надо

2Шкала Семантика и правильная иерархия титулов Важно использовать аккуратный семантический код с правильной иерархией заголовков. Убедитесь, что заголовки следуют правильному порядку от H1 до H6, и что тег заголовка в верхней части вкладки представляет собой содержимое страницы.

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

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

5Шкала Сенсорные цели - это поверхности кликов, и здесь требования применяются к полям ввода и кнопкам. Это должно быть не менее 44x44px (КВН 21 2) (англ.). Это важно, чтобы избежать ошибок, независимо от того, есть ли у них проблемы с мелкой моторикой, просто большие пальцы или находятся в движении. Помните, что я говорил о двух разных людях, покупающих билет на автобус?

Первая часть изображения показывает кнопку, которая 87 Времена 36 ..п. При этом не достигается требуемая высота 44 ..п. Вторая часть изображения показывает правильную несформированную кнопку на 87 Количество 48 ..п.

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

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

7- Да. Используйте форму, текст, контраст, размер и подсветку, чтобы четко понять, что вы пытаетесь передать. Знаешь, ты не 5% Рис. 8% Всех Они способны различать различные цвета. С большим количеством инструментов, чем просто цвета, вы можете убедиться, что больше людей быстрее достигают своей цели. Конкретный пример - украсить гиперссылки как цветом, так и ........................................................................................................... Человек, который испытывает трудности с восприятием цвета, не обязательно видит разницу между темно-синим цветом ссылки и черным текстом тела. Добавление подчеркивания к ссылкам - это шаблон, с которым знакомы большинство пользователей Интернета.

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

9Шкала Размер шрифта и читаемые шрифты Теперь WCAG не имеет требования к определенному размеру шрифта, но существует общий консенсус и Наилучший 16px является хорошей отправной точкой для абзацев. Хотя это еще не официальные требования WCAG, все еще есть некоторые принципы наилучшей практики пользовательского интерфейса, которые должны лежать в основе. Используйте другие тексты, которые имеют хорошую читабельность. Поэтому тщательно подумайте, следует ли вам использовать шрифт, который имеет высокую степень сложности для текста тела. Кроме того, постарайтесь избегать слишком большого количества семейств шрифтов в одном решении и откажитесь от «легких» и «тонких» вариантов, если есть какие-либо сомнения в том, что он читается всеми. Используйте дискретность, но также выполняйте тесты!

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

11Шкала Универсальный текст Мы не только должны создавать дизайн текста универсально, но и убедиться, что контент написан на понятном и простом языке.

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

13. Понятные сообщения об ошибках Пишите сообщения, которые ясно описывают возникшую ошибку. Если пользователь ввел адрес электронной почты в неправильном формате, сообщение не должно ограничиваться словами «ошибка» или «error». Иначе пользователю не хватит информации, чтобы как можно быстрее исправить проблему. Большое преимущество — показывать сообщение рядом с местом возникновения ошибки (вспомните закон близости), чтобы пользователь точно понял, где она произошла, и быстрее ее исправил.

Первая часть картины показывает, что в поле электронной почты отсутствует альфа-завиток. Сообщение об ошибке находится далеко и говорит только об ошибке E-mail. Во второй части изображения сообщение об ошибке появляется рядом с рассматриваемым полем и имеет хорошее описательное сообщение об ошибке, в котором говорится: «Запишите имя формата, которое адрес электронной почты точка com.»

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

Все для всех

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

Р

Законодательство: Положение об универсальном проектировании ИКТ-решений https://lovdata.no/dokument/LTI/forskrift/2013-06-21-732

Буфдир: Количество инвалидов https://www.bufdir.no/statistikk_og_analyse/nedsatt_funksjonsevne/antall/#:~:text=Mellom%2015%20%25%20og%2018...

Законы UX: Закон Джейкобса https://lawsofux.com/jakobs-law/

УС https://lawsofux.com/

Аудит универсального дизайна IKT http://uutilsynet.no

Универсальный ДУ ДУ http://www.ncsu.edu/project/design-projects/udi/

UU Supervision: Навигация по клавиатуре, комбинирование для перехода к основному контенту https://www.uutilsynet.no/veiledning/tastaturnavigasjon/37#snarvei_for__hoppe_til_hovedinnholdet

UU надзор: Навигация по клавиатуре https://www.uutilsynet.no/veiledning/tastaturnavigasjon/37#snarvei_for__hoppe_til_hovedinnholdet

ВСЕМИРНАЯ 2022 Доклад о доступности верхнего 1,000,000 Стр. https://webaim.org/projects/million/

КВН 2.1Идентификация по принципу: interaction 2.5.56.2.5.2.5.2.5.2.5.2.5.2::: https://www.w3.org/WAI/WCAG21/Understanding/target-size.html

С завязанными глазами: Colorblind/colorweak https://www.blindeforbundet.no/oyehelse-og-synshemninger/fargeblindhet#:~:text=Faktisk%20er%20s%C3%A5%20mange%20som,de%20f%C3%A6rreste%20er%20fullstendig%20fargeblinde

Законы UX: Закон близости https://lawsofux.com/law-of-proximity/

Что дальше?

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

Записаться на неформальную беседу