Сначала разберитесь, что видит клиент
Многие воспринимают «ссылку на изображение» как техническую задачу, но клиент вообще не видит код ссылки. На странице клиент видит три вещи: само изображение, текст рядом с ним и альтернативный текст, который появляется, если картинка не загрузилась. Снизить затраты на понимание — значит сделать так, чтобы все три вещи указывали на одно и то же, и клиенту не приходилось гадать, что откроется при клике.
Типичный негативный пример: изображение — упаковка продукта, имя файла — IMG_2043.jpg, alt — «banner», а рядом написано «Узнать больше». До клика клиент совершенно не понимает, что увидит, и действует наугад. Это и есть высокие затраты на понимание.
Имя файла: сначала пусть команда сама сможет его найти
Имя файла напрямую не отображается на странице, но влияет на две вещи: во-первых, это один из критериев, по которым поисковые системы оценивают изображение при сканировании; во-вторых, сможет ли операционная команда позже найти эту картинку в медиатеке. В названии рекомендуется использовать комбинацию «тема содержимого + назначение или место», соединяя слова дефисом, например valve-product-cover.jpg, factory-workshop-01.jpg. Избегайте стандартных номеров камеры, китайских символов с пробелами или множества подчёркиваний.
Критерий простой: если отправить имя файла коллеге отдельно, сможет ли он примерно сказать, что это за изображение. Если нет — значит, название не выполняет свою функцию. Для одной партии изображений рекомендуется единый стиль: не смешивайте английский, пиньинь и номера, иначе последующая систематизация будет очень трудоёмкой.
Alt-текст: одно пояснение для тех, кто не видит картинку
Alt — это альтернативный текст изображения. Он отображается при неудачной загрузке картинки, а также читается скринридерами. Его задача — объяснить, что выражает изображение, а не набить ключевые слова. Рекомендуется одной фразой описать содержание картинки, при необходимости указав тему страницы, на которую она ведёт, например «Схема процесса контроля качества в цехе», а не «цех контроль качества процесс производитель цена» — такой набор слов.
Если изображение само является входной точкой ссылки, alt можно написать как то, что клиент увидит после клика, например «Посмотреть описание процесса контроля качества». Здесь важно обозначить границу: написание alt относится к уровню организации контента, а то, как конкретно поисковые системы используют alt и влияет ли это на ранжирование, — это вопрос механизмов, требующий проверки, и в этой статье выводы не делаются. С точки зрения операционной работы главное — чтобы клиент и вспомогательные инструменты понимали, и это направление надёжное.
Окружающий текст: не позволяйте картинке и тексту говорить о разном
Клиент понимает изображение часто не по самой картинке, а по тексту рядом. Если изображение — это продукт, а рядом написано «Нажмите, чтобы посмотреть подробные характеристики», клиент знает, что попадёт на страницу характеристик. Если рядом написано «Добро пожаловать за консультацией», клиент подумает, что откроется окно чата с поддержкой. Это совершенно разные ожидания.
При написании окружающего текста сначала определите, на какую страницу ведёт клик по этому изображению, а затем одной фразой объясните, что эта страница может предложить. Когда изображение, alt и окружающий текст указывают на одно и то же содержание, затраты на понимание естественно снижаются. И наоборот, если эти три элемента не согласованы, клиент даже при правильном клике почувствует неудобство.
Область клика и расположение: дайте клиенту понять, что здесь можно нажать
Некоторые ссылки на изображения клиенты вообще не воспринимают как кликабельные, потому что они выглядят как обычные иллюстрации. Что можно скорректировать: придать кликабельным изображениям явное визуальное состояние, например лёгкое изменение при наведении; размещать кликабельные изображения там, где клиент ожидает нажать, например в списке товаров; избегать вставки кликабельного изображения в середину абзаца текста, чтобы клиент не путался, нажимать на картинку или на текст.
Кроме того, не стоит вешать на одно изображение две разные цели перехода. На некоторых страницах клик по левой части картинки ведёт на страницу товара, а по правой — на страницу консультации; клиенту трудно определить, и он легко ошибается. Если действительно нужны два входа, используйте два изображения или две текстовые кнопки отдельно.
Проверка перед публикацией: рекомендуемый порядок
- Выпишите все ссылки на изображения на странице и поочерёдно确认, на какую страницу ведёт клик по каждой.
- Проверьте, удобно ли искать имена файлов, единообразен ли стиль命名 для одной партии изображений.
- Проверьте, ясно ли alt описывает содержание изображения, нет ли набивки ключевыми словами.
- Проверьте текст рядом с изображением: соответствует ли он содержанию страницы после клика.
- Откройте страницу на телефоне и посмотрите, заметны ли кликабельные изображения и легко ли по ним попасть.
- Временно скройте изображения или загрузите страницу без сети и проверьте, позволяет ли альтернативный текст клиенту понять, что здесь находится.
Эта проверка не требует профессиональных инструментов — операционная команда может выполнить её самостоятельно. После этого ссылки на изображения превращаются из «клиент нажимает наугад» в «клиент знает, что увидит после клика» — это и есть практический эффект снижения затрат на понимание.
