Посетители приучены нажимать на ссылки и кнопки. А как быть со ссылками по картинкам? Как показать, что на картинку можно нажать и получить некоторый результат?
Если кликабельность картинки никак не обозначена, большинство посетителей не догадаются об этом. Не стоит рассчитывать, что люди будут наводить курсор на картинку и наблюдать, сменилась ли «стрелочка» на «пальчик». Недавно я собрал статистику по главной deadland.ru и убедился в этом.
По картиночкам кликают неохотно
Отвлечемся от примера и посмотрим, в каких случаях посетители воспринимают ссылку по картинке.
1. Рядом с картинкой есть текст «Кликните по картинке, чтобы посмотреть изображение большего размера».
2. Рядом с картинкой есть ссылка «Изображение большего размера», дублирующая ссылку по картинке.
3. На превью в углу изображена лупа или похожий по смыслу значок.
4. Картинки — это превью, расположенные в несколько строк и столбцов. Посетители обычно понимают, что страница представляет собой галерею.
5. Картинка — это кнопка размера 81х33, баннер стандартного размера.
6. Картинка похожа на баннер — есть анимация, рекламная информация. Или это флеш.
Из первых трех решений наиболее изящным и в то же время универсальным мне кажется прием с пиктограммой в углу. Вторая тройка основана на опыте использования сайтов посетителями, на паттернах восприятия. Я бы сказал что эти решения менее надежны.
Наверняка что-то упустил, буду рад вашим дополнениям.
Дмитрий Сергеев, 26 лет, разрабатываю сайты на Drupal, управляю интернет-проектами
Комментарии
ScorpAL, 12.09.2008 15:44
Каким инструментом Вы собирали HeatMap?
Дмитрий Сергеев, 12.09.2008 19:43
ClickHeat.
Андрей Лось, 12.09.2008 16:00
Я бы вообще не стал использовать картинки в качестве «обязательного и единственного» элемента интерфейса.
По общему правилу важная ссылка должна быть в первую очередь текстовой с добавлением графики как вспомогательного элемента (или графической кнопкой с узнаваемым символом).
Впрочем, это не относится к сайтам, которые «играют» с посетителем, то есть оперативность и простота получения информации не является необходимым условием работы этого сайта.
«Неважные» ссылки могут быть любыми.
Дмитрий Сергеев, 12.09.2008 19:37
>> Важная ссылка должна быть в первую очередь текстовой.
Я согласен. Но иногда хочется выложить статью и не придумывать название для каждой иллюстрации только для того, чтобы продублировать ссылку по картинке.
Искал сейчас пример того, как мне нравится, но не нашел. Бывает так:
А мне нравится, когда превью сами по себе приличных размеров, пикселей 400 в ширину хотя бы. И без информации о размерах картинки. Просто лупа в уголке.
Андрей Лось, 12.09.2008 19:48
Тогда нужно придумать подходящий символ. Лупа явно намекает на зум, а не на переход по ссылке.
Дмитрий Сергеев, 12.09.2008 19:53
Обычно ссылка как раз на увеличенную версию картинки. Так что лупа пойдет. А если что-то другое, то можно сделать иконку с окошком, как в Google Analytics, или стрелочку вывернутую, как на ярлыках в Windows, или просто стрелку вправо.
Денис, 12.09.2008 16:04
Мне нравится как сделано на prophotos.ru.
Единственно, что бы я поменял - это показывал текст не по наведению, а изначально на картинке.
Дмитрий Сергеев, 12.09.2008 19:48
+1 за то, чтобы убрать мерцание. Так теряется половина смысла. А идея с текстом интересная. Может даже лучше, чем с пиктограммой. Спасибо за пример.
uggallery, 12.09.2008 16:57
Кликабельная картинка может быть оформлена как кнопка: псевдообъем, фаски, закругленные уголки падающая тень (в разных сочетаниях).
Андрей Лось, 12.09.2008 17:15
Тут возможны два сценария — либо это получится уже кнопка, а не картинка; либо это будет картинка, но со скругленными углами и тенью, что само по себе не является показателем кликабельности.
Дмитрий Сергеев, 12.09.2008 19:58
На сайтах в стиле http://www.tiji.fr/ уж точно :)
dirtykey, 13.09.2008 22:03
Мне думается, что самым надёжным вариантом пока нет единого решиния, которое бы явно указывало на кликабельность(вроде подчёркивания у ссылок) - это выстроить дизайн и структуру сайта и пр. таким образом, чтобы мягко подтолкнуть человека к мысли "ага, по этой картинке можно кликнуть".
В фотогалерее, например, грех куда-нить не нажать: одни фотки кругом и явно не просто мелкие иконки выложили, мышь так и тянется к рисункам, к исследованиям и, по смене курсора всё становится ясно, а ещё если тайтл всплывающий есть, типа "Нажмите, для просмотра полного изображения", то вообще прекрасно.
Если какие-то картинки участвуют в построении навигации по основным разделам, то это тоже должно быть ясно, по тому же тексту на них. Такую категорию картинок как баннеры, неопытные юзеры очень быстро начнут отделять от тематического контента сайта и сомнений в их кликабельности возникать не будут. В этом им помогут сходные способы расположения баннеров на страницах, стандратные размеры многих из них и т.п.
Вообще, не стоит недооценивать наших довольно сообразительных сограждан, пусть и начинающих юзеров :) Если с картинками и их кликабельностью случаи не совсем уж клинические, то проблем возникнуть не должно.
rotor, 14.09.2008 22:51
Тоже выбираю третий вариант. Только пиктограмма классической лупы больше воспринимается как иконка поиска, поэтому предпочитаю пользоваться пиктограммой лупы с небольшим крестиком в линзе.
Дмитрий Сергеев, 17.09.2008 19:46
>> ...предпочитаю пользоваться пиктограммой лупы с небольшим крестиком в линзе.
Я бы назвал это "плюсиком" :)
otpad, 23.09.2008 10:33
Без этих самых картиночек любой сай убогий, а если они к тому же привлекают внимание, мало кто туда не ткнет пальцем.