(Это перевод базового курса UX, который включает 31 основной принцип UX-проектирования: UX Crash Course: 31 Fundamentals. Если вы здесь впервые, то лучше начните сначала)
Теперь, когда вы определились с целями, провели пользовательское исследование и спланировали информационную архитектуру, самое время пустить это все в дело, детка! Поэтому сегодня темой урока будет:
Элементы web-страницы (Навигация, футеры и т.д.)
Конечно, заманчиво рассматривать wireframe каждой страницы по-отдельности, но не стоит этого делать! Это тот самый случай, когда нужно “семь раз отметить и один раз отрезать”.
Как правило, к wireframe-ам нужно подходить как к татуировкам: начинать с больших частей и уже потом добавлять детали.
В нашем случае, под большими частями понимаются те элементы, которые будут присутствовать на всех страницах: навигация и футеры.
Футеры:
Обычно, футер — это список статичных ссылок, слишком общих и незначительных, чтобы размещать их в основной навигации. На некоторых сайтах у футеров действительно приятный дизайн, и это хорошо, но если эти ссылки нужны пользователям для работы сайта, то им не место в футере.
Спросите себя: “У меня будут страницы с бесконечной прокруткой?” Если ответ — да, то убедитесь, что все, что есть в футере, доступно где-то еще. Если переключатель языка находится в футере и вечно убегает вниз, то пошли вы!
Навигация:
Существует как минимум два типа меню: главное меню и подменю.
Главное меню: Если вы правильно проработали информационную архитектуру, то вы, скорее всего, уже представляете, что должно быть в главном меню. Это первый уровень ссылок на вашей карте сайта (тот уровень, который находится сразу под домашней страницей).
Пункты меню должны быть расположены (слева-направо или сверху-вниз) в порядке убывания их популярности — согласно мнению пользователей, а не вашему собственному.
Если вы разрабатываете меню какого-то совершенно нового приложения, просто попробуйте угадать правильный порядок и предупредите разработчиков, что в дальнейшем вам понадобится простой способ изменить очередность. Когда на вашем сайте появится настоящий трафик, постарайтесь, чтобы очередность в меню соответствовала популярности каждого пункта. И если найдете какие-то несоответствия, сразу исправляйте.
Подменю: Подменю — это список страниц “под” любой страницей, на которой находится пользователь, на вашей карте сайта. Вы ведь сделали карту сайта, правда?! Уф. Хорошо. Вы меня даже напугали.
Самая важная фишка подменю в том, что оно всегда должно быть в одном и том же месте, на каждой странице, даже если ссылки все время меняются. Тогда пользователи быстро запомнят, где его искать.
Огромное подменю — это плохая идея:
Я всегда удивляюсь, когда кто-то спорит, что их мега-меню — это лучший из всех возможных вариантов. На самом деле, это означает, что информационная архитектура (и информационный архитектор) — полный отстой.
Меню все-в-одном — это самый ленивый дизайн на свете. Улучшайте! Меню — как свидание: если вы рассматриваете более 7 или 8 вариантов, то самое время разбить чье-то сердце. Может даже свое.
Многабукаф, ниасилил
Создавайте навигацию и футеры, которые будут работать на всех страницах/экранах вашего приложения, прежде чем заниматься его содержимым. Потом будете меня благодарить.
Завтра мы поговорим о нескольких важных вопросах в дизайне страниц:
И ещё, если у вас есть на примете какая-нибудь классная статья по UX и не только — скиньте нам ссылку, и мы будем рады над ней поработать.
Nancy Pong и Ринат Шайхутдинов. | UxLab, LLC | Курсы дизайна в Йошкар-Оле