Дизайн — статьи о сайтах
Ссылку на сайт софтверной компании часто открывают не за рабочим столом: её прислали в мессенджере, и человек смотрит страницу в метро или между встречами. Устанавливать дистрибутив он не будет, зато решит, отвечать ли вам. Поэтому мобильную версию стоит готовить под конкретные действия, а не просто «чтобы ничего не ломалось».
Что посетитель делает на сайте ПО именно с телефона
Обычно это пять задач: понять, что за продукт и для кого он; проверить, подходит ли он под их систему и интеграции; прикинуть, из чего складывается стоимость; найти документацию, чтобы переслать её техспециалисту; оставить заявку на демонстрацию. Скачивание установщика на телефоне случается редко. Выберите три-четыре действия, которые важны вашему бизнесу, и пройдите их пальцем на реальном устройстве, а не мышкой в уменьшенном окне браузера.
Техническая основа: масштаб, шрифты, ширина
Проверьте, что в коде страницы есть мета-тег viewport. Без него телефон покажет уменьшенную версию для компьютера. Затем убедитесь, что ни одна страница не прокручивается вбок: чаще всего это ломают широкие таблицы, блоки кода и картинки без ограничения по ширине. Основной текст и поля форм делайте не мельче 16 пикселей: на iPhone при меньшем размере браузер сам приближает страницу при вводе, и форма «прыгает».
Отдельная проблема для сайтов ПО — скриншоты интерфейса. Широкое окно программы на экране в 375 пикселей превращается в нечитаемую полоску. Вместо него покажите кадрированный фрагмент с подписью, что именно на нём происходит, а полный снимок откройте по нажатию на весь экран с возможностью увеличить.
Таблицы тарифов и системные требования
Сравнение тарифов в пять колонок на телефоне не помещается. Рабочие варианты: карточки тарифов одна под другой с одинаковым порядком строк; пять-семь главных различий на виду, остальное в раскрывающемся блоке; системные требования списком вида «Платформа — …, база данных — …, браузер — …». Горизонтальную прокрутку оставляйте для действительно широких таблиц и показывайте, что она есть, например обрезанным краем последней колонки.
Код, документация и API
Если на сайте есть примеры запросов или инструкции по установке, пусть прокручивается сам блок кода, а не вся страница. Добавьте кнопку «Копировать» и не уменьшайте моноширинный шрифт ниже читаемого. Длинные адреса и названия методов не должны выталкивать текст за границы экрана, для них нужен перенос. В документации пригодятся сворачиваемое оглавление и поиск в верхней части страницы: на длинной странице без них человек теряется после первого же экрана.
Заявка на демо и кнопка «Скачать»
Оставьте в форме минимум полей. Для телефона задайте нужный тип клавиатуры (почта, номер) и включите автозаполнение. Кнопка отправки не должна прятаться под экранной клавиатурой или плавающим чатом. Если дистрибутив только для компьютера, одинокая кнопка «Скачать для Windows» на телефоне бесполезна. Добавьте рядом «Отправить ссылку на почту», чтобы человек вернулся к загрузке с рабочего места. Телефон оформите ссылкой, по нажатию на которую начинается звонок, и покажите мессенджер, если вы им пользуетесь для связи с клиентами.
Условный пример: страница продукта «Складской учёт»
Это иллюстрация структуры, а не описание реального проекта. Страница продукта для оптовых компаний на экране телефона может идти так:
- заголовок и одна строка: «Учёт склада для оптовой компании: приёмка, остатки, отгрузки»;
- две кнопки: «Заказать демо» и «Получить презентацию на почту»;
- блок «Подходит, если…» из трёх коротких пунктов;
- один кадрированный скриншот экрана приёмки с подписью;
- интеграции списком: сканеры штрихкодов, обмен с учётной системой, API;
- тарифы карточками, под ними раскрывающийся список системных требований;
- форма из трёх полей: имя, телефон или почта, комментарий (необязательно).
Такой порядок отвечает на вопросы в той последовательности, в которой они возникают: что это, мне ли это, как выглядит, с чем работает, сколько стоит, как связаться. Две кнопки в начале нужны потому, что одни готовы обсуждать сразу, а другим сначала надо переслать материал коллегам.
Проверочный список перед запуском
- В коде есть viewport, страницы не прокручиваются вбок.
- Основной текст и поля форм — от 16 пикселей.
- Кнопки и ссылки в меню и футере достаточно крупные и не лежат вплотную друг к другу.
- Скриншоты читаются без увеличения либо открываются на весь экран.
- Тарифы и требования читаются без горизонтальной прокрутки.
- Блоки кода прокручиваются внутри себя, есть копирование.
- Форма заявки заполняется одной рукой, клавиатура подходит к полю.
- Всплывающие окна и чат не закрывают кнопку и текст.
- Для десктопного продукта есть способ получить ссылку на загрузку по почте.
- Всё проверено на реальных iPhone и Android и при медленном соединении.
Если пройти список получается не полностью, начните с форм и тарифов: именно там мобильная версия сильнее всего влияет на то, напишет ли вам потенциальный клиент.
