Как показать что элемент кликабельный

Как показать кликабельность картинки

Посетители приучены нажимать на ссылки и кнопки. А как быть со ссылками по картинкам? Как показать, что на картинку можно нажать и получить некоторый результат?

Если кликабельность картинки никак не обозначена, большинство посетителей не догадаются об этом. Не стоит рассчитывать, что люди будут наводить курсор на картинку и наблюдать, сменилась ли «стрелочка» на «пальчик». Недавно я собрал статистику по главной deadland.ru и убедился в этом.

По картиночкам кликают неохотно

Отвлечемся от примера и посмотрим, в каких случаях посетители воспринимают ссылку по картинке.

1. Рядом с картинкой есть текст «Кликните по картинке, чтобы посмотреть изображение большего размера».

2. Рядом с картинкой есть ссылка «Изображение большего размера», дублирующая ссылку по картинке.

3. На превью в углу изображена лупа или похожий по смыслу значок.

4. Картинки — это превью, расположенные в несколько строк и столбцов. Посетители обычно понимают, что страница представляет собой галерею.

5. Картинка — это кнопка размера 81х33, баннер стандартного размера.

6. Картинка похожа на баннер — есть анимация, рекламная информация. Или это флеш.

Из первых трех решений наиболее изящным и в то же время универсальным мне кажется прием с пиктограммой в углу. Вторая тройка основана на опыте использования сайтов посетителями, на паттернах восприятия. Я бы сказал что эти решения менее надежны.

Наверняка что-то упустил, буду рад вашим дополнениям.

Как привлечь посетителей →

ScorpAL, 12.09.2008 15:44

Каким инструментом Вы собирали HeatMap?

Дмитрий Сергеев, 12.09.2008 19:43

Я бы вообще не стал использовать картинки в качестве «обязательного и единственного» элемента интерфейса.

По общему правилу важная ссылка должна быть в первую очередь текстовой с добавлением графики как вспомогательного элемента (или графической кнопкой с узнаваемым символом).

Впрочем, это не относится к сайтам, которые «играют» с посетителем, то есть оперативность и простота получения информации не является необходимым условием работы этого сайта.

«Неважные» ссылки могут быть любыми.

Дмитрий Сергеев, 12.09.2008 19:37

>> Важная ссылка должна быть в первую очередь текстовой.

Я согласен. Но иногда хочется выложить статью и не придумывать название для каждой иллюстрации только для того, чтобы продублировать ссылку по картинке.

Искал сейчас пример того, как мне нравится, но не нашел. Бывает так:

А мне нравится, когда превью сами по себе приличных размеров, пикселей 400 в ширину хотя бы. И без информации о размерах картинки. Просто лупа в уголке.

Тогда нужно придумать подходящий символ. Лупа явно намекает на зум, а не на переход по ссылке.

Дмитрий Сергеев, 12.09.2008 19:53

Обычно ссылка как раз на увеличенную версию картинки. Так что лупа пойдет. А если что-то другое, то можно сделать иконку с окошком, как в Google Analytics, или стрелочку вывернутую, как на ярлыках в Windows, или просто стрелку вправо.

Дмитрий Сергеев, 12.09.2008 19:48

+1 за то, чтобы убрать мерцание. Так теряется половина смысла. А идея с текстом интересная. Может даже лучше, чем с пиктограммой. Спасибо за пример.

Кликабельная картинка может быть оформлена как кнопка: псевдообъем, фаски, закругленные уголки падающая тень (в разных сочетаниях).

Тут возможны два сценария — либо это получится уже кнопка, а не картинка; либо это будет картинка, но со скругленными углами и тенью, что само по себе не является показателем кликабельности.

Дмитрий Сергеев, 12.09.2008 19:58

На сайтах в стиле http://www.tiji.fr/ уж точно 🙂

dirtykey, 13.09.2008 22:03

Тоже выбираю третий вариант. Только пиктограмма классической лупы больше воспринимается как иконка поиска, поэтому предпочитаю пользоваться пиктограммой лупы с небольшим крестиком в линзе.

Дмитрий Сергеев, 17.09.2008 19:46

Я бы назвал это «плюсиком» 🙂

otpad, 23.09.2008 10:33

Без этих самых картиночек любой сай убогий, а если они к тому же привлекают внимание, мало кто туда не ткнет пальцем.

Дмитрий Сергеев, 26 лет, разрабатываю сайты на Drupal, управляю интернет-проектами
dima.sergeev@gmail.com

Задать вопрос на форуме →

Источник

Снижение юзабилити, как последствия моды на плоский дизайн

Плоский дизайн (flat design) начал набирать популярность с 2010 года. Стало появляться все больше сторонников радикально облегченного дизайна интерфейсов, в котором интерактивные элементы не стилизовались под объемные, не снабжались анимацией, индикаторами текущего состояния и всплывающими подсказками. Как говорится, красота — в простоте.

И действительно, лаконичный, не перегруженный тенями и псевдо-3D дизайн многим пришелся по вкусу, а к концу 2013 стал, пожалуй, самым популярным при создании сайтов, лендингов и приложений.

Однако как эта мода отразилась на эффективности самих сайтов?

Тесты показывают, что если в пользовательском интерфейсе применяются интерактивные элементы без индикаторов текущего состояния и всплывающих подсказок, появляющихся при наведении курсора — это снижает юзабилити. И чтобы выровнять ситуацию, приходится использовать больше контекстных подсказок — в том числе текстовых.

При этом юные пользователи гораздо лучше воспринимают намеки, связанные с кликабельностью элементов, чем представители старших поколений. И во многом это обусловлено именно модой на плоский дизайн. Тем более, что со временем он принял несколько компромиссную форму — flat design 2.0, которая подразумевает использование легких визуальных эффектов, создающих впечатление «слоистости» веб-страницы.

Признаки кликабельности: до и после

Чтобы пользователь понимал, куда он может кликнуть на сайте, нужно давать ему определенные подсказки. Скажем, синим подчеркнутым текстом традиционно выделют интерактивные ссылки, и это четкий индикатор даже для неопытных пользователей.

Во времена расцвета скевоморфизма (направления, противоположного плоскому дизайну), интерактивность элементов выражалась более явно — объемные кнопки, тени, эффект глянца, анимация и так далее, в зависимости от фантазии дизайнера. При этом, чтобы определить, кликабелен ли элемент, пользователи, как правило, руководствовались двумя предположениями:

1. Если элемент ярко выделен — скорее всего, он кликабелен.
2. Если элемент не выделяется на общем фоне — скорее всего, он некликабелен.

С приходом плоского дизайна интерактивные элементы стали выделяться более тонко, или вообще не выделяться. К примеру, стали применяться «кнопки-призраки» — имеющие скрытые границы, проявляющиеся только при наведении курсора. И даже текстовые ссылки теперь не обязательно подчеркиваются. Например, на этом сайте кликабельный текст визуально не отличается от обычного:

Соответственно, у пользователя появилось уже три варианта:

1. Ярко выделенный элемент, вероятно, кликабелен.
2. Другие выделенные элементы тоже, возможно, кликабельны (однако могут быть выделены на общем фоне и просто из эстетических соображений).
3. Даже невыделенные элементы иногда кликабельны, и выяснить это можно, только наведя на них курсор.

Влияние плоского дизайна на юзабилити

Очевидно, оно неоднозначное. С одной стороны, интерфейс становится легче, лаконичнее, приятнее визуально. Однако есть и ряд негативных моментов.

Во-первых, пользователи вынуждены исследовать страницу, чтобы выявить, какие ее элементы кликабельны — наводить курсор на тот или иной элемент, ожидая всплывающей подсказки или другого визуального эффекта, или кликать на все подряд в надежде на то, что в итоге что-нибудь сработает. И даже если, в основном, пользователи способны достаточно быстро сориентироваться в интерфейсе сайта — они все равно вынуждены совершать целый ряд ненужных дополнительных действий и отвлекаться от своей основной цели.

Во-вторых, пользователи стали больше зависеть от реакции на клик (или на тап, если речь идет о мобильной версии сайта). Когда пользователь не уверен, что элемент является интерактивным — ему требуется немедленный отклик на совершенное действие (не более 0,1 секунды).

Реакция на клик может выражаться по разному, например:

Пример мобильного сайта (интернет-магазин одежды). Как вы думаете, какие из элементов здесь кликабельны, а какие нет? Как показали юзабилити-тесты, пользователи не смогли определить это сразу, тем более, что мобильные версии сайтов имеют естественные ограничения юзабилити интерфейса — например, на них нельзя реализовать подсказки, появляющиеся при наведении курсора.

И, наконец, люди стали больше зависеть от контекстных подсказок для определения кликабельности. Когда явные признаки отсутствуют — они ищут косвенные, например:

Вы можете спросить: но разве это плохо, что пользователь внимательнее изучает страницу, читает заголовки, обращает внимание на все ее элементы и их взаимное расположение? С точки зрения продаж — нет. Эффективный продающий сайт, наоборот, должен быть максимально наглядным и понятным, буквально за руку ведущим пользователя от одной микроконверсии к другой. Если же пользователи вынуждены разбираться с интерфейсом сайта — это лишь увеличивает показатель отказов.

Зависит ли эффективность плоского дизайна от возраста пользователей?

Некоторые дизайнеры утверждают, что это нормально, если пользователи старшего поколения не считают плоский дизайн интуитивно понятным, поскольку они просто к нему не привыкли. Плоский дизайн делает ставку на молодежь. И действительно, как показывают исследования Nielsen Norman Group, люди 18-30 лет, то есть представители «поколения игрек» (так называемые миллениалы, Millennials), гораздо быстрее распознают кликабельные элементы, чем люди постарше.

Есть несколько возможных причин этого явления, и любая комбинация из них может быть правдой.

1. Молодые люди более приспособлены к выявлению тонких признаков кликабельности чисто в силу возраста (лучше зрение, быстрее реакция).
2. Молодым людям приходится чаще разбираться в разнообразных интерфейсах (например, в компьютерных играх), что служит своего рода тренировкой.
3. Молодые люди быстрее обучаются новому, в том числе осваивают новые тенденции в дизайне интерфейсов.

При этом, несмотря на то, что игреки намного лучше распознают кликабельные элементы, они все равно тратят довольно много времени на изучение страницы.

К примеру, при проведении юзабилити-теста этой страницы (сайт музыкального фестиваля) исследователи задавали участникам вопрос: «Как вы определили, что имена исполнителей в списке кликабельны?». Ответы от миллениалов получились вполне ожидаемыми. Кто-то просто предположил, что за каждым именем должна скрываться дополнительная информация об исполнителе, а остальные и вовсе кликали наугад.

Как улучшить юзабилити сайтов с плоским дизайном?

Плохая новость: даже если на вашем сайте не плоский дизайн, пользователи, уже привыкшие к нему на других сайтах, продолжают тратить время на лишние клики и наведение курсора на все элементы.

Хорошая новость: эти новые модели поведения — не конец света. Нужно просто учитывать их при развитии своего проекта, чтобы создать простой, лаконичный, но при этом наглядный интерфейс, в котором пользователь разберется за считанные секунды.

Эксперты Nielsen Norman Group рекомендуют:

Выводы

То, что современные пользователи склонны быстрее разбираться в интерфейсах, вовсе не означает, что можно разрабатывать дизайн сайта спустя рукава. Ведь, когда пользователи не уверены, какой из элементов интерфейса кликабелен, а какой — нет, они вынуждены терять время на выяснение этого.

Сама идея плоского дизайна возникла из желания уйти от громоздких, подчас уродливых интерфейсов и сконцентрировать внимание людей на контенте сайта и решении своих задач. Однако неграмотное применение этого подхода может породить новые проблемы, отвлекая пользователя от главного. Поэтому, как и во всем, в этом вопросе приходится искать «золотую середину».

Источник

Дневник Web-разработчика

Заметки программиста, мысли и полезные ссылки

Делаем кликабельной любую область сайта

Недавно мне понадобилось сделать часть картинки из шапки сайта ссылкой на главную страницу.
Можно было конечно порезать картинку на части и сделать одну из частей ссылкой, но мне этот вариант не подходил.
Поразмыслив, я нашел другой способ сделать кликабельной какую-то область.

Создаем пустой див, задаем ему нужные нам размеры и позиционирование.
Добавляем свойство onClick и все готово.

Добавьте эти строки в свой файл стилей

если вам этого мало и вы хотите сделать объект нестандартной формы, то вам поможет тег «area»
элемент надо располагать внутри тегов

возможные свойства элемента
SHAPE — указывает форму объекта.
значения:
* rect — прямоугольник;
* circle — окружность;
* poly — многоугольник.
COORDS — задает координаты объекта. является «дополнением» атрибутом SHAPE. Способы задания координат для разных типов областей:

HREF — определяет область как гипертекстовую ссылку. Значение задается в виде ссылки (URL).

TARGET — определяет окно (фрейм), на которое указывает гипертекстовая ссылка. Этот атрибут используется только совместно с атрибутом HREF. В качестве значения необходимо задать либо имя одного из существующих фреймов (см. элемент FRAME) либо одно из зарезервированных имен, подробно описанных в атрибуте TARGET элемента A.

NOHREF — определяет область как неактивную (невосприимчивую к нажатию). Данный атрибут противоположен атрибуту HREF и используется для отмены действия последнего.

ALT — определяет альтернативный текст-подсказку для данной области.

Если у вас есть вопросы — пишите в комментариях, с удовольствием вам отвечу.
Не забывайте подписаться на RSS, чтобы не пропустить обновления.

19 комментариев к “ Делаем кликабельной любую область сайта ”

Большое спасибо за то, что часто радуете нас результатами своей работы. На этом сайте всегда нахожу что-то полезное для себя. Искренне надеюсь, что продолжите его развивать. Желаю успехов в этом непростом деле.

Согласен с предыдущими мнениями, добавлю в избранное

postseriously спасибо за отзыв. Кстати, на вашем сайте ole4ka.com поехала верстка в мозилле. Причина в том, что объект img в диве «head», больше него по высоте. Чтобы исправить эту проблему поставьте высоту «head» больше или равной высоте вложенного изображения т.е. минимум 283px.

А чего у блога такая посещаемость низкая… Кстати на твой блог порчу навели, помогу снять

microfollowfriday Посещаемость низкая т.к. нет времени наполнять блог. Про порчу улыбнуло))
co-nopay Спасибо.

Чувствуется творческий подход к теме, респект)

Очень жаль у меня так не сделать. мешают другие стили с заданной шириной. =(

Влад а в чем проблема? Используйте area или задай абсолютное позиционирование.

Автор выйди к напроду, вопросы есть!

Взгляните пожалуйста на главную страницу сайта la-belle.kz. Как можно реализовать подобное (изменяющий цвет и превращенный в ссылку графический текст, расположенный по кругу)?
СПАСИБО за внимание и обстоятельный ответ.

Nadir там все просто — текст сделан картинкой, при наведении картинка меняется. Посмотрите в файрбаге как это реализовано, там все просто — div с меняющимся фоном по событию hover.

изменение фона делается просто в css
#menu li:hover

чето не получается в joomla впилить ссылку((((

Источник

UX-дизайн кнопки: советы по созданию, типы и состояния

Ник Бабич разработчик, UX/UI специалист написал заметку в блоге UX Planet про UX-дизайн кнопки: советы по созданию, типы и состояния. Наша команда выполнила перевод данной статьи

Кнопки – это самый обычный, «повседневный» элемент дизайна взаимодействия. Именно поэтому на них нужно обратить особое внимание, ведь кнопки являются важнейшим элементом, обеспечивающим беспрепятственное взаимодействие в сети и приложениях. Мы обсудим типы и состояния кнопок — эту информацию нужно знать, чтобы создавать эффективные кнопки и совершенствовать опыт пользователя.

Советы по созданию кнопок

Кнопки должны выглядеть как кнопки

Давайте на минуту представим, как с помощью дизайна донести возможность выбора. Как пользователь поймет, что данный элемент и есть кнопка? Он ориентируется на цвет и форму.

Очень тщательно продумайте размер зоны прикосновения и внутреннего поля. Размер кнопок также помогает пользователю понять, что это за элемент. Каждая платформа дает свои рекомендации в отношении минимального размера зоны прикосновения. Результаты исследования, проведенного MIT Touch Lab, показали, что средний размер для прикосновения подушечками пальцев составляет 10-14 мм, а для кончиков пальцев — от 8 до 10 мм, при этом наиболее оптимальный минимальный размер зоны прикосновения будет 10Х10 мм.

Расположение и порядок

Разместите кнопки там, где пользователи без труда их найдут или там, где они ожидают их увидеть. Посмотрите, как в руководстве по разработке iOS советуют размещать кнопки.

Не забывайте о порядке размещения и положении кнопок. Порядок, в котором идут кнопки, особенно если есть парные кнопки (например, «предыдущий» и «следующий»), очень важен. Убедитесь, что основной акцент в дизайне сделан на основном или самом важном действии пользователя.

В примере ниже мы используем красную кнопку, которая содержит потенциально деструктивное действие. Обратите внимание, что основное действие не только более насыщенное по цвету и контрасту, но располагается в правой части диалогового окна.

Надписи

Надписи на кнопках должны означать действие, которое выполняет кнопка. Четко опишите, что произойдет при ее нажатии.

Точно такие же кнопки, как и вверху, но без соответствующей надписи. Чувствуете разницу?

Призыв к действию (CTA)

Самые важные кнопки (особенно, если они призывают к действию) должны выглядеть как самые важные кнопки.

Форма кнопки

Обычно кнопки стараются сделать прямоугольными с прямыми или округлыми краями, в зависимости от стиля сайта или приложения. Согласно некоторым исследованиям, округленные края усиливают восприятие информации и притягивают взгляд к центру элемента.

Можно проявить творчество и использовать другие формы, например, круг, треугольник и даже какие-то оригинальные и необычные формы. Хотя последний вариант все же рискованный.

Главное, соблюдайте единство стиля во всем интерфейсе, чтобы пользователь смог определить, где в вашем приложении находятся кнопки.

Типы кнопок и поведение

Объемная кнопка обычно прямоугольная с подъемом (градация оттенков показывает, что кнопка кликабельна). Объемные кнопки добавляют фактуру в преимущественно плоский макет. Они делают акцент на функциях в самых активных или широких областях.

Применение

На строке в один ряд. Используйте объемные кнопки, чтобы придать значимость действиям на сайте или в приложении с большим количеством разного контента.

Поведение

Объемные кнопки приподнимаются и заполняются цветом при нажатии.

Пример

Объемные кнопки выделяются на фоне плоских. Пример приведен для приложения Android.

Плоские кнопки не приподнимаются, но также заполняются цветом. Основное преимущество плоских кнопок в том, что они не отвлекают внимание от контента.

Применение

В диалоговых окнах (чтобы соблюсти единство действия кнопки и контента)

На панели инструментов

Расположение снизу, чтобы пользователь быстрее их нашел

Пример

Плоская кнопка в диалоговом окне приложения на Android.

Кнопка-переключатель позволяет пользователю переключаться между двумя или (более) состояниями.

Почти все переключатели применяются в качестве кнопок Вкл\Выкл.

Кнопки-переключатели также можно использовать для группы связанных между собой элементов. Но компоновка макета должна явно указывать, что эти кнопки являются частью всей группы элементов. Есть и другие требования:

· В группе должно быть не менее трех кнопок

· На кнопках должен быть текст, иконка или и то, и другое.

Иконки лучше всего использовать, когда пользователь может сделать выбор и отменить его, других вариантов нет. Например, дать или убрать звезду у товара. Размещают иконки обычно в панели приложения, панели инструментов, на кнопках действия или переключателях.

Очень важно выбрать правильную иконку для кнопки. Я рассказывал об этом в статье «Иконки как фактор удачного пользовательского опыта».

В Apple iOS переключатели использованы в разделе «Настройки».

4. Контурные кнопки

Контурные кнопки — это прозрачные кнопки простой формы, как правило, прямоугольной. Обычно по контуру кнопки идет очень тонкая линия, а внутренняя часть содержит обычный текст.

Пожалуй, не стоит использовать контурные кнопки для призыва к действию. Вот, посмотрите на Bootstrap. Контурная кнопка «Скачать» ничем не отличается от главного логотипа, что может запутать пользователей.

Лучше всего использовать такие кнопки для вторичного контента, так как они не будут (по крайней мере, не должны) конкурировать с вашим основным призывом к действию. Хотелось бы, чтобы пользователь сначала увидел основную кнопку CTA, а уже затем (если для него это не актуально) переходил ко второй кнопке.

Кнопка, призывающая к положительному действию, более контрастная и пользователь четко видит действие.

На сайте AirBnB есть контурные кнопки для действия «Стать хозяином».

5. Плавающая кнопка с выпадающим меню

Плавающая кнопка с выпадающим меню — один из элементов материального дизайна Google. Это круглая материальная кнопка, которая приподнимается и дает эффект чернильного пятна при нажатии.

Плавающие кнопки с выпадающим меню применяются для вызова функциональных клавиш.

Их можно сразу заметить по круглой иконке, парящей над UI. Они включают в себя такие типы поведения, как морфинг, запуск и перенос точки привязки.

Выбор стиля кнопки зависит от ее важности, количества контейнеров на экране, и от разметки экрана.

Функция: Достаточно ли важна и уникальна кнопка, чтобы сделать ее плавающей?

Размеры: Выбирайте тип кнопки, в зависимости от контейнера, в котором она будет располагаться и от того, сколько слоев глубины у вас на экране.

Разметка: Используйте преимущественно один тип кнопки на контейнер. Смешивайте типы кнопок только в том случае, если для этого есть основания, например, выделение важной функции.

Здесь пойдет речь не о том, как пользователь видит начальную кнопку, а о тех случаях, когда при наведении указателя на нее ничего не меняется. Пользователь не сразу поймет кнопка это или нет? Теперь придется кликнуть, что бы это выяснить …

Такой объект как кнопка имеет несколько состояний, и предоставление визуального отклика с целью отобразить текущее состояние кнопки должно быть приоритетной задачей.

Главное правило этого состояния – кнопка должна выглядеть как кнопка в нормальном состоянии. Windows 8 это показательный пример неудачного дизайна кнопки. Пользователю сложно понять кликабельны или нет объекты в меню настроек.

Состояние в фокусе

Правильно будет дать пользователю понять, что он наводит указатель на кнопку. Пользователь сразу понимает, что его действие было принято, и хочет визуального подтверждения.

Анимируя различные элементы своего дизайна, вы можете внести свежую ноту, проявить немного творчества и порадовать пользователя.

Есть два варианта – спрятать кнопку, либо отобразить ее в неактивном состоянии.

Преимущества скрытой кнопки:

Преимущества использования неактивного состояния:

Заключение

Кнопки предназначены для того, чтобы направить пользователя и подтолкнуть его к принятию интересующего вас действия. Плавное переключение способствует плавному взаимодействию; проблемы, такие как невозможность найти нужную кнопку являются в лучшем случае помехами, а в худшем – полным провалом.

UX дизайн кнопок это узнаваемость и ясность. Думайте о сайте или приложении как о беседе, начатой занятым пользователем. Кнопка играет критически важную роль в этой беседе.

Источник