Дизайн — статьи о сайтах
Сайт бизнес-центра часто открывают на ходу: человек ищет вход, звонит из машины или сравнивает офисы между встречами. Если страницы рассчитаны только на широкий монитор, они подводят именно в эти минуты. Ниже — конкретные решения для сайта, а не общие пожелания.
Кто открывает сайт с телефона и какой вопрос у каждого
Сначала разделите посетителей по задачам, а уже потом думайте о дизайне:
- Тот, кто ищет офис: что свободно, какая площадь и этаж, как договориться о просмотре.
- Гость или курьер: точный адрес, с какой стороны въезд и вход, где оставить машину, как оформляется пропуск.
- Арендатор: контакты управляющей компании и способ отправить заявку в службу эксплуатации, если она у вас есть.
Ответ на каждый вопрос должен находиться без увеличения экрана пальцами и без поиска по длинному меню.
Первый экран: адрес, маршрут и звонок в одно касание
На первом экране разместите название, адрес обычным текстом (не картинкой — его нужно копировать) и три кнопки: «Позвонить», «Проложить маршрут», «Записаться на просмотр». Телефон оформляйте ссылкой tel: с номером в международном формате, адрес — ссылкой, которая открывает картографическое приложение.
Сразу под ними добавьте две-три строки для гостей: с какой улицы въезд, где вход для посетителей, до скольки работает ресепшн. Если въезд со двора или через шлагбаум, это нужно писать явно. Интерактивную карту на первый экран лучше не ставить: она тяжело грузится, а при прокрутке палец «застревает» на ней. Поместите её ниже, а наверху оставьте простую схему или ссылку.
Свободные помещения: карточки вместо широкой таблицы
Таблица из шести-семи колонок на телефоне либо превращается в мелкий шрифт, либо требует горизонтальной прокрутки. Надёжнее показывать каждое помещение карточкой. Условный фрагмент:
- Офис 512, 5 этаж
- 84 м², open space и два кабинета
- Статус: свободен
- Кнопки: «Позвонить по офису 512», «Запросить планировку», «Записаться на просмотр»
Три главных параметра — номер, этаж и площадь — видны сразу, остальное (отделка, высота потолков, сроки) прячется в раскрывающийся блок. Кнопки подставляют номер офиса в форму или письмо, чтобы менеджеру не приходилось переспрашивать. Фильтры по площади и этажу делайте крупными элементами, которые работают по касанию, а не по наведению курсора. Ставку аренды показывайте только если готовы поддерживать её актуальной; иначе честнее написать «по запросу».
Планы этажей и схема проезда на экране в шесть дюймов
PDF-план на десятки мегабайт на мобильной сети открывается мучительно долго. Подготовьте планы как изображения нескольких размеров, чтобы телефон загружал облегчённую версию, а по касанию схема открывалась на весь экран с возможностью увеличить. Номера помещений на плане должны оставаться читаемыми; если мелкие подписи не помещаются, вынесите легенду под схему. PDF оставьте дополнительной ссылкой с указанием размера файла.
Схему проезда сделайте отдельным простым рисунком с ориентирами, которые видны с дороги: шлагбаум, арка, вывеска, вход с торца. К каждому изображению добавьте текстовое описание.
Форма заявки на просмотр: минимум полей и правильная клавиатура
Достаточно имени, телефона и номера офиса, который уже подставлен из карточки. Удобное время — необязательное поле. Для телефона задайте тип поля tel, чтобы открывалась цифровая клавиатура, и включите автозаполнение. Подписи размещайте над полями, а не только внутри: подсказка исчезает, как только человек начинает печатать. Кнопку отправки делайте на всю ширину экрана.
После отправки покажите понятное сообщение о следующем шаге. Обещайте срок ответа только такой, который реально соблюдаете. Рядом оставьте альтернативы — звонок и мессенджер, если ими пользуется ваша команда.
Проверочный список перед запуском
- В коде страницы есть мета-тег viewport, и ни одна страница не прокручивается вбок.
- Адрес, телефон и маршрут доступны на первом экране без прокрутки.
- Номер телефона и кнопка маршрута срабатывают по одному касанию.
- Кнопки и ссылки не слишком мелкие и не стоят вплотную друг к другу — попасть можно без увеличения.
- Список помещений читается без горизонтальной прокрутки, главные параметры видны сразу.
- Планы открываются быстро и увеличиваются; тяжёлые файлы подписаны.
- Форма вызывает нужную клавиатуру, а сообщения об ошибках понятны.
- Ни одно действие не зависит от наведения курсора.
Проверяйте сайт на реальных устройствах — хотя бы на одном iPhone и одном Android — и по мобильной сети, а не только по Wi-Fi в офисе. Пройдите сценарий гостя: найдите вход и парковку, не зная здания. Если на это ушло больше нескольких касаний, страницу стоит доработать.
