Дизайн — статьи о сайтах
Страница жилого комплекса, объекта или услуги агентства быстро вырастает: описание, планировки, цены, инфраструктура, порядок покупки, контакты. Посетитель приходит с конкретным вопросом. Если ответ не находится за несколько прокруток, он возвращается к списку объявлений. Ниже приёмы, для которых не нужно переделывать весь сайт.
Что мешает читать длинную страницу объекта
Чаще всего это сплошной текст, скопированный из буклета застройщика, таблица цен на несколько десятков строк, большая галерея посреди страницы и контакты, спрятанные в самом низу. Человек обычно держит открытыми несколько вкладок и сравнивает варианты по одним и тем же признакам: цена, площадь, этаж, район, срок сдачи. Если эти сведения каждый раз приходится искать заново, сравнение превращается в работу.
Оглавление с якорными ссылками в начале страницы
Под заголовком разместите строку переходов: «Планировки · Цены · Расположение · Как купить · Контакты». Технически это просто идентификаторы у заголовков разделов и ссылки вида <a href='#plans'>. Скрипты не нужны, а кнопка «Назад» в браузере возвращает читателя к месту, где он был. В конце каждого крупного раздела добавьте небольшую ссылку «К оглавлению». Так не придётся прокручивать десятки экранов обратно.
В каком порядке расположить блоки
Сначала то, по чему принимают решение, потом подробности. Условный пример страницы жилого комплекса «Речной квартал»:
- верхний экран: название, адрес, срок сдачи, диапазон цен, кнопка «Заказать звонок»;
- оглавление со ссылками на разделы;
- планировки с переключением по числу комнат;
- расположение: карта и три-четыре пункта о транспорте и ближайших объектах;
- характеристики дома списком, без рекламных абзацев;
- порядок покупки по шагам, коротко;
- ответы на частые вопросы и контакты менеджера.
Ключевые факты верхнего экрана не должны зависеть от длинных текстов ниже: их можно прочитать за десять секунд.
Как оформить текст, таблицы цен и планировки
Абзац длиннее пяти-six строк на экране читают хуже, поэтому держите его в три-четыре строки и давайте подзаголовок каждые два-три абзаца. Характеристики (этажность, отделка, парковка) оформляйте списком «параметр — значение». Размер шрифта выбирайте не меньше 14–16 пикселей, межстрочный интервал около полутора, а ширину колонки ограничьте, чтобы в строке помещалось примерно 60–80 знаков.
В длинной таблице квартир добавьте фильтр по числу комнат или повторяйте строку заголовков через 10–15 строк, иначе на середине таблицы непонятно, что означает последний столбец. Планировки показывайте миниатюрами с подписью площади и этажа, а увеличение открывайте по клику. Складывающиеся блоки подходят для вопросов и ответов, но не прячьте в них цену и срок сдачи.
Навигация при прокрутке и просмотр с телефона
Узкая панель, закреплённая у края экрана, с телефоном и кнопкой «Оставить заявку» избавляет от возврата к контактам внизу. Проверьте, что она не закрывает текст и не занимает больше нескольких процентов высоты экрана смартфона. Кнопка «Наверх» появляется после прокрутки. На узких экранах оглавление лучше сделать выпадающим списком или двумя строками крупных ссылок: в мелкую ссылку пальцем трудно попасть. Откройте страницу на телефоне и планшете, а не только на компьютере.
Проверочный список для вашей страницы
- Цена, адрес, срок сдачи и способ связаться видны без прокрутки.
- Есть оглавление, и каждая ссылка ведёт к своему заголовку.
- В конце крупных разделов есть возврат к оглавлению.
- Абзацы короткие, у разделов есть подзаголовки.
- Таблица цен фильтруется или имеет повторяющуюся шапку.
- У планировок подписаны площадь и этаж.
- Закреплённая панель контактов не перекрывает текст.
- Страница проверена на телефоне: ссылки нажимаются, таблица не уходит за край.
- Текст актуален: цены, наличие и сроки обновлены, дата проверки указана там, где это важно.
Начните с оглавления и порядка блоков: это самые дешёвые изменения. Затем посмотрите, где на вашей самой длинной странице посетители чаще всего уходят. Данные счётчика посещаемости помогут выбрать, что править дальше.
