Дизайн — статьи о сайтах
Сайт кафе обычно состоит из одних и тех же страниц: главная, меню, афиша, банкеты, контакты. Часто они живут отдельно друг от друга. Человек прочитал про бизнес-ланч, а чтобы узнать, как до вас дойти, должен вернуться в верхнее меню и искать нужный раздел. Часть гостей на этом шаге закроет сайт. Связи между разделами — это ссылки в нужных местах с понятными словами.
Какие разделы кафе связывать в первую очередь
Начните с вопросов гостя в том порядке, в котором он их задаёт: что у вас есть, сколько это стоит, где вы находитесь, когда работаете, как заказать или забронировать. Каждой странице нужна ссылка на следующий шаг. Самые важные пары такие:
- меню — бронирование столика или условия доставки, если она есть;
- афиша и акции — бронирование и адрес;
- банкеты — банкетное меню, фотографии зала, контакты того, кто принимает заявки;
- адрес — схема проезда, часы работы, телефон;
- рассказ о кафе — меню и фотографии блюд.
Главное меню: сколько пунктов и как их назвать
Пять-семь пунктов читаются с первого взгляда. Называйте их словами гостя: «Меню», «Бизнес-ланч», «Банкеты», «Афиша», «Как нас найти». Слова «Услуги», «Продукция» или «Информация» ничего не объясняют: человек не знает, что за ними скрыто, и не рискует кликнуть.
Главное меню должно быть одинаковым на всех страницах, а текущий раздел — выделен цветом. Тогда гость понимает, где находится. Выпадающие списки, которые раскрываются только при наведении мыши, на телефоне часто не работают. Поэтому ключевые страницы должны быть доступны и без них — например, по ссылкам внутри раздела.
Ссылки внутри текста и «хлебные крошки»
Ссылка должна называть действие или то, что за ней находится: «посмотреть банкетное меню», «схема проезда от метро». Слова «здесь» и «подробнее» ничего не говорят о цели перехода.
Если меню разбито на подразделы (закуски, горячее, десерты, барная карта), добавьте над заголовком цепочку «Главная → Меню → Горячие блюда». Она показывает, где вы находитесь, и позволяет вернуться на уровень выше одним щелчком. В конце каждой страницы поставьте короткий блок «Смотрите также» с двумя-тремя ссылками на соседние разделы.
Условный пример: страница «Банкеты»
Вот как можно связать страницу для вымышленного кафе «Пример». Это иллюстрация структуры, а не описание чьей-то работы.
- Над заголовком: «Главная → Банкеты».
- Первый абзац: вместимость зала и форматы мероприятий. В тексте ссылка «посмотреть фотографии зала».
- Блок «Что можно заказать»: две ссылки — «банкетное меню» и «напитки и барная карта».
- Блок «Как оформить заявку»: телефон менеджера и кнопка «Отправить заявку на банкет». Рядом указано, в какие часы отвечают на звонки.
- Блок «Где мы находимся»: адрес, ссылка «схема проезда» и режим работы.
- Внизу «Смотрите также»: «Афиша мероприятий», «Бизнес-ланч».
С этой страницы гость может дойти до заявки, меню или карты проезда, не возвращаясь в верхнее меню.
Меню в PDF и телефон: два места, где путь часто рвётся
Меню кафе нередко выкладывают файлом PDF или картинкой. Такой файл открывается без навигации сайта, на телефоне его трудно читать, а вернуться назад бывает неудобно. Лучше разместить основные блюда и цены текстом на странице, а файл оставить как дополнительную ссылку «скачать меню для печати» с указанием формата. Так же полезно указать, на какую дату актуальны цены.
Телефон и кнопку бронирования стоит показывать в шапке или подвале каждой страницы. Номер лучше оформить ссылкой для звонка: на смартфоне он набирается одним касанием, а переписывать цифры не придётся.
Проверка связей перед запуском
Пройдите по сайту так, как это сделал бы гость, и ответьте на вопросы:
- Можно ли с любой страницы за один клик попасть в меню, на страницу с адресом и к бронированию?
- Названия пунктов понятны человеку, который ничего не знает о вашей внутренней кухне?
- Выделен ли в меню раздел, в котором человек находится?
- Есть ли у каждой внутренней страницы ссылка на следующий логичный шаг?
- Ссылки названы действием, а не словами «здесь» и «подробнее»?
- Открывается ли меню без загрузки файла, и понятно ли, как вернуться со скачанного файла на сайт?
- Работают ли все ссылки? Нет ли страниц об акциях, которые уже закончились, но остались в меню?
- Нажимается ли телефон на смартфоне, указано ли время, когда на звонок ответят?
Если на какой-то вопрос ответ «нет», начните с этого места: небольшая правка ссылок и названий часто даёт больше, чем новый дизайн.
