Как подготовить сайт аптеки к просмотру с телефона

С телефона на сайт аптеки обычно заходят не для чтения, а ради быстрого действия. Нужно понять, какая аптека рядом и до скольких она работает, есть ли нужная позиция, как пройти и куда позвонить. Часто это происходит на улице, одной рукой и при нестабильной связи. Поэтому подготовка к мобильному просмотру сводится не к тому, чтобы «всё уменьшилось по ширине», а к проверке нескольких конкретных сценариев.

Какие задачи у посетителя с телефона

Для начала выпишите 3–4 главных сценария. Для аптеки это, как правило, такие:

• найти ближайшую аптеку и узнать, открыта ли она сейчас;
• проверить, есть ли товар в конкретной аптеке и сколько он стоит;
• позвонить в аптеку или построить маршрут;
• оставить заявку на бронирование или самовывоз, если такая услуга у вас есть.

Затем с телефона пройдите каждый сценарий от главной страницы и посчитайте касания. Если до номера телефона или часов работы нужно больше трёх нажатий, структуру стоит менять.

Что вынести на первый экран: адрес, часы, телефон

Контакты не должны прятаться в подвале. На первом экране мобильной версии нужны телефон, адрес и график. Телефон оформите как ссылку формата tel:, чтобы нажатие сразу открывало набор номера. Если аптек несколько, у каждой должен быть свой номер, а не один общий без пояснений.

Часы работы пишите так, чтобы не пришлось считать: «Сегодня до 22:00» понятнее, чем таблица на неделю. Подробный график можно раскрывать по нажатию. Для круглосуточных точек отметку выделите отдельно. К адресу добавьте ориентир: «вход со двора», «второй подъезд, цокольный этаж», «рядом с остановкой». Это снимает вопросы, которые иначе задают по телефону.

Кнопка «Маршрут» должна открывать карту или навигатор на телефоне. Интерактивную карту лучше подгружать по нажатию: она тяжёлая и замедляет страницу, а многим достаточно адреса и кнопки.

Поиск препарата на маленьком экране

Если на сайте есть каталог или проверка наличия, поле поиска должно быть вверху страницы, крупным и без лишних фильтров рядом. Что стоит сделать:

• включить подсказки по первым буквам;
• настроить поиск так, чтобы он находил товар при опечатке и по разным написаниям названия;
• в результатах показывать название, форму выпуска и дозировку отдельной строкой, затем цену и наличие;
• фильтры убрать в раскрывающуюся панель с кнопкой «Показать результаты».

Широкие таблицы с горизонтальной прокруткой на телефоне неудобны. Замените их карточками: одна позиция — один блок. Если на карточках есть пометки об условиях отпуска отдельных групп товаров, формулировки согласуйте с ответственным сотрудником аптеки. Задача сайта — показать их заметно и без противоречий.

Условный пример: карточка аптеки

Так может выглядеть мобильная страница одной точки (данные вымышленные, это схема, а не реальный проект):

• Заголовок: «Аптека на Садовой, 12».
• Статус: «Открыто сегодня до 21:00».
• Две крупные кнопки рядом: «Позвонить» и «Маршрут».
• Адрес с ориентиром: «Вход с торца здания, рядом с остановкой».
• Поле «Найти товар в этой аптеке».
• Раскрывающийся блок «График на неделю».
• Ниже, по нажатию, карта и фотография входа.

Всё необходимое помещается на один-два экрана прокрутки, а второстепенное раскрывается по желанию.

Скорость загрузки и формы заявки

Мобильный интернет бывает медленным, особенно в подвальных торговых центрах и на окраинах. Сожмите фотографии и подключайте их размеры под экран, уберите крупные баннеры на первом экране и лишние виджеты вроде тяжёлых онлайн-консультантов, которые грузятся сразу. Скорость можно оценить в инструментах разработчика браузера с имитацией медленного соединения или в бесплатных сервисах проверки скорости.

Формы бронирования или обратного звонка делайте короткими: имя и телефон, остальное по необходимости. Для телефона используйте поле нужного типа (type="tel"), чтобы открывалась цифровая клавиатура. Кнопки должны быть достаточно крупными, а подписи полей оставаться видимыми во время ввода. После отправки покажите понятное сообщение: что произошло и когда вам ответят.

Проверочный список перед запуском

• Телефон на каждой странице аптеки нажимается и открывает набор номера.
• Адрес, ориентир и график видны без прокрутки длинного текста.
• Кнопка маршрута работает на iPhone и Android.
• Поиск находит товар при опечатке и вводе с телефонной клавиатуры.
• Результаты читаются без горизонтальной прокрутки.
• Текст читается без увеличения пальцами, кнопки не расположены вплотную друг к другу.
• Страница открывается за приемлемое время при медленном соединении.
• Форма заявки заполняется одной рукой и подтверждает отправку.
• Информация о графике и наличии на сайте актуальна и обновляется кем-то из сотрудников.

Проверяйте не только в эмуляторе, но и на нескольких реальных телефонах, включая недорогие модели со старой версией системы. Попросите сотрудника, не участвовавшего в разработке, выполнить сценарии из первого раздела и отметьте, где он замешкался. Эти места и станут списком первых доработок.

Все статьи блога