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