book-open 1 test
Курс «Основы UX»

Базовая структура веб-страницы | Урок 19

Теперь, когда вы определились с целями, провели пользовательское исследование и спланировали информационную архитектуру, самое время пустить это все в дело!

← Предыдущий урок

(Это перевод базового курса UX, который включает 31 основной принцип UX-проектирования: UX Crash Course: 31 Fundamentals. Если вы здесь впервые, то лучше начните сначала)

Теперь, когда вы определились с целями, провели пользовательское исследование и спланировали информационную архитектуру, самое время пустить это все в дело, детка! Поэтому сегодня темой урока будет:

Элементы web-страницы (Навигация, футеры и т.д.)

Конечно, заманчиво рассматривать wireframe каждой страницы по-отдельности, но не стоит этого делать! Это тот самый случай, когда нужно “семь раз отметить и один раз отрезать”.

Как правило, к wireframe-ам нужно подходить как к татуировкам: начинать с больших частей и уже потом добавлять детали.

Интересуетесь свежими статьями по продуктовому дизайну (UX/UI)? 🚀

Подписывайтесь на канал в Telegram | ВКонтакте, Instagram, Facebook

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

Футеры:

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

Спросите себя: “У меня будут страницы с бесконечной прокруткой?” Если ответ — да, то убедитесь, что все, что есть в футере, доступно где-то еще. Если переключатель языка находится в футере и вечно убегает вниз, то пошли вы!

Навигация:

Существует как минимум два типа меню: главное меню и подменю.

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

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

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

Подменю: Подменю — это список страниц “под” любой страницей, на которой находится пользователь, на вашей карте сайта. Вы ведь сделали карту сайта, правда?! Уф. Хорошо. Вы меня даже напугали.

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

Огромное подменю — это плохая идея:

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

Меню все-в-одном — это самый ленивый дизайн на свете. Улучшайте! Меню — как свидание: если вы рассматриваете более 7 или 8 вариантов, то самое время разбить чье-то сердце. Может даже свое.

Многабукаф, ниасилил

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

Завтра мы поговорим о нескольких важных вопросах в дизайне страниц:

Фолд, картинки, заголовки→

И ещё, если у вас есть на примете какая-нибудь классная статья по UX и не только — скиньте нам ссылку, и мы будем рады над ней поработать.

Nancy Pong и Ринат Шайхутдинов. | UxLab, LLC | Курсы дизайна в Йошкар-Оле

Курс «Основы UX»