Почему телефон нельзя считать запасным экраном
Сайт жилого комплекса обычно показывают заказчику на большом мониторе. Макет согласован, визуализации хороши, шахматка выглядит как в хорошем проекте. А покупатель в это время листает сайт с телефона в метро или на диване. В итоге застройщик смотрит на один сайт, а клиент видит другой.
Ниже порядок, в котором всё обычно ломается. Он идёт примерно по тому пути, которым идёт покупатель.
1. Шахматка
Сетка этажей и секций придумана для большого экрана. На телефоне она превращается в мелкую таблицу, в клетку которой невозможно попасть пальцем, либо режется на куски и теряет смысл. Подробнее мы разбирали это в статье про шахматку квартир.
Рабочее решение не в том, чтобы уменьшить сетку. На телефоне человек идёт от параметров: сколько комнат, какой бюджет, какой этаж. Список карточек с фильтрами работает лучше таблицы, а сама шахматка остаётся дополнительным видом для тех, кому важно расположение.
2. Планировки
Планировка, нарисованная для печатного буклета, на телефоне превращается в пятно: размеры комнат нечитаемы, экспликация мелкая. Обычный вариант исправления — увеличивать двумя пальцами, но это каждый раз лишнее действие.
Лучше показывать на экране телефона то, что в нём читается: крупный план, подписи комнат с площадью и отдельную кнопку, чтобы открыть чертёж на весь экран. Если планировка лежит только PDF-файлом, на телефоне ею почти не пользуются. Для застройщика это прямая потеря: человек, который не смог разобрать планировку, скорее закроет вкладку, чем напишет или позвонит.
3. Фильтры
На десктопе фильтры стоят колонкой слева и всегда видны. На телефоне они обычно закрывают пол-экрана или прячутся так, что их не находят. Две типичные ошибки: фильтр открывается, а результата не видно, пока его не закроешь; и сброс фильтров спрятан так, что человек не может вернуться к полному списку.
Хороший признак: сразу видно, сколько квартир осталось после выбора, а выбранные условия отображаются строкой над списком и убираются одним нажатием.
4. Визуализации, видео и 3D
Это самое тяжёлое на сайте. Фотореалистичные рендеры в полном разрешении, видео на фон, 3D-тур, карта, анимации — на хорошем компьютере всё это работает, на среднем телефоне и мобильном интернете страница либо долго грузится, либо подвисает при прокрутке.
Принцип один: показывать тяжёлое по запросу. Постер вместо автозапуска видео, тур по нажатию кнопки, картинки нужного размера, а не файлы из архива дизайнера. Красота остаётся, но не ценой того, что человек уйдёт до первого экрана. Что именно тормозит и с чего начинать, описано в статье про скорость сайта и потерянные заявки.
5. Форма заявки
На узком экране форма ломается чаще, чем кажется: поле телефона открывает буквенную клавиатуру, кнопка уезжает под клавиатуру, подтверждение после отправки не видно. Каждое лишнее поле здесь стоит дороже, чем на компьютере, потому что печатать на телефоне неудобно. Что оставить в форме и как проверить, что заявки доходят, — в статье про форму заявки.
Отдельно про момент после отправки. Человек должен сразу увидеть, что заявка ушла, и понять, чего ждать дальше: когда перезвонят и по какому номеру. Если на экране ничего не изменилось, он отправит форму второй раз или решит, что она сломана.
6. Кнопка звонка и мессенджер
Телефон — экран, где позвонить можно одним нажатием. Номер, который не является ссылкой на звонок, — упущенная возможность: человеку приходится копировать цифры. То же с мессенджером: кнопка должна открывать чат, а не страницу с описанием.
Ещё одна деталь: кнопка связи должна быть доступна, не требуя прокрутки до подвала. Закреплённая панель внизу экрана решает это, если не закрывает контент и не мешает форме.
Как проверить за один вечер
- Возьмите телефон среднего класса, выключите вайфай.
- Пройдите путь покупателя: найдите квартиру на нужный бюджет, откройте планировку, оставьте заявку.
- Запишите каждое место, где пришлось увеличивать экран, ждать больше нескольких секунд или искать кнопку.
- Позвоните по номеру с сайта и отправьте заявку через форму: убедитесь, что она дошла.
Список обычно получается коротким, и первые три пункта дают основную часть пользы. Если вы хотите понять, как всё это должно выглядеть на вашем проекте, посмотрите, как мы подходим к сайтам для застройщиков.
