Дизайн — статьи о сайтах
На сайт сервисного центра обычно приходят, когда что-то сломалось: ноутбук не включается, из стиральной машины не уходит вода, у телефона разбит экран. Человек торопится и часто сравнивает несколько вкладок. Первый экран главной страницы, то есть всё, что видно без прокрутки, должен быстро ответить на три вопроса: чинят ли здесь мою технику, где и как это происходит, как связаться прямо сейчас.
Какие вопросы посетитель задаёт в первые секунды
Заголовок вроде «Добро пожаловать в сервисный центр» ни на один из них не отвечает. Нужна конкретика: какие виды техники вы берёте в работу, в каком городе работаете, выезжаете ли к клиенту или принимаете устройство у себя. Если вы ремонтируете только технику Apple или только крупную бытовую, скажите об этом сразу. Так вы отсечёте нецелевые обращения и сэкономите время и себе, и посетителю.
Из чего собрать первый экран
- Заголовок с типом услуги и городом. Например: «Ремонт ноутбуков и планшетов в Самаре». Он должен совпадать с тем, что человек искал.
- Одна строка о формате работы. «Диагностика в день обращения», «Выезд мастера на дом», «Приём в сервисе без выходных». Пишите только то, что действительно выполняете.
- Выбор типа техники. Несколько крупных кнопок или плиток: телефоны, ноутбуки, стиральные машины и так далее. Они сразу ведут на нужный раздел.
- Способы связи. Телефон, который на смартфоне набирается одним нажатием, и мессенджер, которым вы реально отвечаете.
- Адрес и часы работы. Короткой строкой, без карты на весь экран.
- Одно доказательство. Срок работы, число мастеров или условия гарантии. Берите факты, которые можете подтвердить, а текст гарантии согласуйте с тем, кто отвечает за ваши договоры.
Условный пример первого экрана
Ниже схема для вымышленного центра, не реальный проект. В квадратных скобках то, что вы подставляете сами.
- Шапка: логотип, телефон [номер], значок мессенджера, пункт «Адрес и режим работы».
- Заголовок: «Ремонт ноутбуков, телефонов и бытовой техники в [город]».
- Подзаголовок: «Принимаем в сервисе на [улица] и выезжаем на дом. Диагностика — [условия: бесплатно или платно, и когда зачитывается в ремонт]».
- Плитки: «Телефон», «Ноутбук», «Стиральная машина», «Другая техника».
- Кнопки: «Позвонить» и «Описать поломку». Вторая открывает короткую форму: тип техники, модель, что случилось, телефон.
- Под ними строка: «Сегодня работаем до [время]».
Если у вас несколько направлений, не пытайтесь уместить все на первом экране. Достаточно плиток с разделами, подробности лежат глубже.
Что лучше не ставить на первый экран
Автоматически листающийся слайдер с акциями отвлекает от главного действия, а его слайды часто никто не успевает прочитать. Стоковое фото улыбающегося мастера ничего не сообщает; лучше показать настоящую приёмную или рабочее место, если фотографии качественные. Не нужны всплывающие окна с формой, закрывающие экран в первые секунды, и длинные формы с десятком полей. Перечень из сорока услуг тоже лишний: он нужен на отдельных страницах.
Отдельно о ценах. Если назвать точную стоимость нельзя, не ставьте на экран «от 300 рублей» ради красоты. Лучше честно напишите, от чего цена зависит и когда её назовут: после диагностики или по описанию в мессенджере.
Проверочный список для первого экрана
- По заголовку понятно, какую технику и в каком городе вы ремонтируете.
- Позвонить или написать можно без прокрутки и без поиска контактов.
- На смартфоне кнопки достаточно крупные, а нажатие на номер запускает звонок.
- Указаны адрес или формат выезда и часы работы.
- Условия диагностики сформулированы без двусмысленности.
- Форма просит минимум: технику, описание, телефон.
- Нет автоматических слайдеров и всплывающих окон поверх содержимого.
- Все обещания на экране вы выполняете на практике.
Проверьте экран так: покажите страницу знакомому на пять секунд на телефоне и попросите рассказать, что вы делаете и как с вами связаться. Если он затрудняется, меняйте заголовок и порядок блоков, а не добавляйте новые.
