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