Дизайн — статьи о сайтах
Навигация сайта дизайн-студии — это не только меню вверху страницы. Это путь человека от понравившейся фотографии интерьера до заявки на консультацию. Проверить этот путь можно самостоятельно, если знать, на что смотреть.
Какие задачи посетителя должна решать навигация
Обычно человек приходит с одной из пяти задач: посмотреть работы, понять, что входит в услуги (дизайн-проект, авторский надзор, комплектация), узнать порядок работы, найти проекты, похожие на его объект (квартира, дом, офис), и связаться со студией. Выпишите эти задачи и для каждой посчитайте клики от главной страницы до ответа. Если до примеров квартир, похожих на вашу, нужно больше трёх переходов, структуру стоит пересмотреть.
Меню: названия, количество, постоянство
Типичный рабочий набор: «Портфолио», «Услуги», «Этапы работы», «О студии», «Контакты». Проверьте:
- нет ли пунктов-синонимов: «Проекты», «Работы» и «Галерея» в одном меню запутывают;
- понятны ли названия без пояснений: «Наш мир» или «Философия» ничего не говорят о содержимом раздела;
- не слишком ли много пунктов: если их больше семи-девяти, часть лучше убрать во вложенные разделы;
- одинаково ли меню на всех страницах, подсвечен ли текущий раздел, ведёт ли логотип на главную.
Страница проекта в портфолио: разбор условного примера
Портфолио — главный раздел студии, и именно здесь навигация ломается чаще всего. Возьмём условную страницу проекта «Двухкомнатная квартира в стиле современной классики». Вверху должен быть путь:
Главная / Портфолио / Квартиры / Двухкомнатная квартира в стиле современной классики
Проверьте на такой странице:
- кликабельны ли все звенья пути, а не только «Главная»;
- есть ли рядом с фото краткие данные: тип объекта, площадь, состав работ (планировка, визуализация, надзор). По ним посетитель решает, смотреть ли дальше;
- можно ли перейти к предыдущему и следующему проекту, не возвращаясь в список;
- сохраняется ли выбранный фильтр («Квартиры», «Дома», «Офисы») при возврате к списку;
- есть ли после фотографий понятный шаг, например «Обсудить похожий проект», ведущий на форму или к контактам;
- как работает увеличение фото: есть ли стрелки, крестик закрытия, закрывается ли окно клавишей Esc.
Отдельно проверьте галерею, сделанную на Flash: на планшетах iPad она не откроется, и посетитель увидит пустое место.
Проверка глазами человека, не знающего сайт
Вы знаете, где что лежит, поэтому себя проверять недостаточно. Попросите нескольких знакомых, не видевших сайт, выполнить задания:
- выяснить, что входит в дизайн-проект;
- найти пример загородного дома;
- узнать, как записаться на консультацию.
Не подсказывайте и не комментируйте. Записывайте, где человек остановился, какой пункт открыл по ошибке и что сказал вслух. Пять человек не дадут статистики, но если двое споткнулись на одном месте, это повод исправить. Заодно посмотрите, что видит посетитель, набрав в адресе несуществующую страницу: полезная страница ошибки со ссылками на основные разделы лучше пустого экрана.
Планшеты, смартфоны и «мёртвые» ссылки
Выпадающие при наведении курсора меню на сенсорных экранах работают плохо: наведения там нет, и вложенные пункты могут оказаться недоступны. Откройте сайт на планшете и телефоне. Попадает ли палец по пунктам, приходится ли увеличивать масштаб, виден ли телефон студии, не слишком ли долго грузятся крупные фотографии. Затем пройдите по всем ссылкам меню и нижней части страницы: не ведут ли они на ошибку 404 или на разделы с надписью «скоро будет».
Короткий проверочный список
- До примеров работ и контактов не более трёх кликов от главной.
- Названия пунктов меню понятны без пояснений, синонимов нет.
- Меню одинаково на всех страницах, текущий раздел выделен.
- На страницах проектов есть кликабельный путь и переход к соседним проектам.
- Рядом с фото указаны тип объекта, площадь и состав работ.
- После просмотра проекта есть ссылка на связь со студией.
- Меню и галерея работают на планшете и телефоне, без Flash.
- Нет битых ссылок и пустых разделов.
- Знакомые справились с тремя заданиями без подсказок.
Результаты проверки запишите: что не получилось, на какой странице, у кого. Такой список можно передать разработчику как конкретное задание и после правок повторить тест.
