«Снизу вверх»: как дизайн повышает доступность

Материал подготовлен на основе статьи Как подход к дизайну «снизу вверх» повышает доступность сайта — Smashing Magazine

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

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

Что такое подход «снизу вверх»?

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

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

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

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

Почему подход «снизу вверх» – идеален для веб–дизайна?

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

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

Когда пользователь – в приоритете

Очень часто при подходе «сверху вниз» разработчики гонятся за трендами, забывая о том, что действительно важно для пользователей. Например, в Facebook (запрещен на территории РФ) лента обновляется случайным образом, не учитывая, где именно вы остановились при ее просмотре. Соответственно, при попытке возврата к нужному сообщению, которое вы не сохранили ранее, придется перелистывать все заново. В TikTok совершенно отсутствует удобная для навигации и интуитивно понятная история просмотров: чтобы разобраться с этой функцией, пользователю нужно обратиться к инструкции.

Статистика печальна: 95,9% сайтов из миллиона нарушают стандарты WCAG. Это вовсе не означает, что подход «снизу вверх» полностью исключит ошибки, однако он сделает их менее вероятными. Когда на этапе проектирования сайта вы учитываете потребности пользователей, а не просто тренды оформления порталов, UX точно не уйдет на второй план.

В качестве наиболее неудачного примера использования дизайна «сверху вниз» можно рассмотреть сайт крупной консалтинговой компании Berkshire Hathaway. Общая философия портала ясна: он максимально прост и понятен. Дизайнеры предпочли сосредоточиться на полезной информации, чтобы отдельные элементы не отвлекали посетителей ресурса, а излишние детали оформления – не противоречили брендбуку компании. Однако отсутствие меню, плохой контраст и мелкий шрифт скорее ошеломляют пользователей, чем помогают им сориентироваться на сайте. Все это сводит на нет все преимущества простого, лаконичного оформления.

Доступность «из коробки»

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

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

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

Осознанность дизайна

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

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

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

«Снизу вверх» или «сверху вниз»: какой метод проектирования веб–сайта лучше для вас?

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

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

Внедряем стратегию «снизу вверх»: с чего начать?

Если вы решили, что восходящий подход в разработке – лучший вариант для проекта, над которым вы работаете, используйте один или несколько способов для внедрения этой философии.

• Соберите обратную связь. Проанализируйте уже выполненные макеты с точки зрения доступности: это позволит выявить пробелы и не повторять их в будущих макетах. Поговорите со своей аудиторией: даже простые юзабилити –тесты помогут выявить критические проблемы, с которыми сталкиваются юзеры в процессе взаимодействия с сайтом.
• Разделяйте задачи в команде. Разбейте коллектив на группы, каждая из которых работает над конкретными задачами, однако проводите регулярные встречи для того, чтобы все части команды работали согласовано. Поможет подход DevOps, подразумевающий выстраивание циклических непрерывных процессов при разработке любого ПО. 61% команд, отмечают повышение качества конечных продуктов.
• Следуйте стандартам WCAG. Именно они – ваш ориентир при создании доступного для всех категорий пользователей дизайна. Чтобы лучше ориентироваться в том, что такое цифровая доступность, можно пройти бесплатные курсы, организованные по инициативе WAI.

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

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