Кратко: после окончания учебного курса Springboard по дизайну UX я увлекся проектированием инклюзивных и доступных пользовательских интерфейсов. Затем я получил свой сертификат дизайна специальных возможностей от EDx и присоединился к интернет-митингу специальных возможностей вместе с Knowbility. (отмеченная наградами некоммерческая организация, занимающая лидирующие позиции в области доступных информационных технологий). Нас поместили в команды с разработчиками, инженерами, дизайнерами, руководителями проектов и создателями контента. Благодаря талантливой, творческой и веселой команде калифорнийских женщин мы назвались CA11Y gURLS! (A11Y — это нумероним доступности). Мы работали в паре с некоммерческой организацией Central California Animal Disaster, помогая животным во время стихийного бедствия. Всегда испытывая глубокую любовь к собакам, особенно к моему светловолосому маленькому щенку терьера по кличке Космо, я был рад помочь людям с ограниченными возможностями легко помочь своим животным.

Тип проекта

Доступность UX/UI Дизайн и разработка адаптивного веб-сайта.

Команда

• 1x дизайнер
• 1x контент-менеджер
• 2x разработчик
• 2х менеджер проекта
• 1x менеджер специальных возможностей
• 1x тестировщик качества

• Карандаш + бумага ✏️
• Фигма
• Базовый лагерь + GoogleДокументы
• Бобровый Строитель
• Вордпресс
• Форма оценки познаваемости

2 месяца (сентябрь — ноябрь 2022 г.)

Вызов

В США в настоящее время насчитывается около 56,7 млн ​​американцев с инвалидностью (Бюро переписи населения). AbilityNet заявляет, что 90% веб-сайтов недоступны для людей с ограниченными возможностями, которые полагаются на вспомогательные технологии ( AbilityNet ).

Цели проекта

1. Создайте доступный, простой и восхитительный рабочий стол для некоммерческой организации Central California Animal Disaster.
2. Помогите пользователям быстро найти информацию о помощи своим питомцам во время стихийного бедствия в их округе.
3. Помогите пользователям подать заявку на добровольную помощь некоммерческой организации Central California Animal Disaster.
4. Создайте простую страницу пожертвований для пользователей, желающих помочь.

Роль и обязанности

• Карта эмпатии
• Карта сайта
• Руководство по стилю для Central California Animal Disaster
• Каркасы
• Прототипы низкой и высокой точности
• Сотрудничество с контент-менеджером по вопросу о том, какая информация хранится и как лучше всего отобразить ее на странице. Фильтрация контента была нашим главным приоритетом.
• Сотрудничество с инженером, когда она разрабатывала мои высокоточные проекты. Работали над межстрочным интервалом, размером шрифта, эстетикой блоков, кнопок и стрелок.

Я провел качественные и количественные исследования. Качественный подход повлек за собой повторное прочтение принципов и рекомендаций по разработке Руководства по обеспечению доступности веб-контента (WCAG) 2.1. Анализируя текущий веб-сайт некоммерческой организации, я создал список проблем с доступностью, не соответствующих рекомендациям WCAG 2.1, и поделился им с gURL CA11Y. Я изучил большинство некоммерческих веб-сайтов, посвященных животным, и просмотрел их, помня о принципах дизайна WCAG. Я смотрел видео на Youtube о том, как вспомогательные технологии работают с различными веб-сайтами. Для количественного исследования я просмотрел статистику доступных некоммерческих веб-сайтов. Я искал в Google количество пользователей, использующих некоммерческие сайты, и какие сайты они использовали.

Аудитория

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

Брендинг

В сотрудничестве с владельцем Central California Animal Disaster мы согласовали руководство по стилю, которое связано с их текущим логотипом, но при этом учитывало доступность.

Руководство по стилю и библиотека компонентов

Путь пользователя

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

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

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

идея

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

Каркасы

Пользовательское тестирование

Темы и идеи

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

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

• «Веб-сайт выглядит очень чистым и хорошо продуманным, я смог найти все, просто нажимая клавиши».
• «У меня не было проблем с открытием форм и чтением сообщений».
• «Я не знал, что эта ссылка приведет меня на другой веб-сайт. Было бы неплохо, если бы он открывался на другой вкладке».

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

В: Почему у вас были серые ящики? Серый доступен?

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

В: Почему вы выровняли заголовки по центру?

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

Окончательный прототип

Мы сделали еще несколько итераций как в дизайне, так и в коде.

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

Мой опыт работы визажистом и UX-дизайнером помог мне в этом проекте как с точки зрения моего художественного взгляда при разработке, так и с точки зрения сопереживания при принятии дизайнерских решений. Я вырос в своих мыслительных и дизайнерских процессах. Работая с талантливыми и проницательными менеджерами, инженерами и дизайнерами, я узнал о различных инструментах, альтернативном тексте, 6 уровнях заголовков и о том, как они соотносятся при использовании программы чтения с экрана. В Figma я научился создавать шаблоны и методы для улучшения согласования дизайна. Мы сотрудничали с помощью приложения Basecamp, похожего на Google Docs, которое упорядочивало все наши сообщения, документы и задания, помогая нам уложиться в сроки. Больше всего мне нравилось наблюдать за пользовательским тестированием и наблюдать, как доступность сайта влияет на людей с ограниченными возможностями. Учитывая всепользователи помогли мне устранить ограничивающие факторы, такие как серые прямоугольники, на реализацию которых ушло много времени.

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