Как я могу сделать очевидным, что элемент страницы должен быть завис?

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

Как я могу сделать окна похожими на то, что они должны быть навешены мышью? В настоящее время они представляют собой сплошные квадраты, и нет ничего, что говорило бы: «Наведите на меня», если они не сделают это случайно.

11 голосов | спросил davidscolgan 9 32011vEurope/Moscow11bEurope/MoscowWed, 09 Nov 2011 17:26:29 +0400 2011, 17:26:29

8 ответов


6

Прежде всего рассмотрим, является ли это наилучшим способом отображения содержимого. Как часто используется контент? Насколько важно содержание. Если его использовать часто или очень важно, нужно отображать содержимое по-другому.

Если вы уверены, что этот шаблон «on hover» является правильным, для этого вам нужно обратить внимание на него. Как правило, этот эффект используется в тексте, таком как имя пользователя stackexchange. Это просто стиль, аналогичный обычной ссылке. Как правило, идея заключается в том, что использование обнаруживает это для себя, поэтому вы не размещаете важную информацию здесь. Или вы также предлагаете onlclick, чтобы перейти к более подробному представлению пользователя.

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

ответил Sheff 9 32011vEurope/Moscow11bEurope/MoscowWed, 09 Nov 2011 17:57:37 +0400 2011, 17:57:37
6

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

ответил ScottK 9 32011vEurope/Moscow11bEurope/MoscowWed, 09 Nov 2011 17:51:40 +0400 2011, 17:51:40
5

Требования

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

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

  3. Действие наведения должно немедленно активироваться - не дожидаться двух секунд, как много текстов справки стиля подсказки. Это также помогает случайному обнаружению, когда пользователь передает свою мышь и рассеивает любые мысли «это-есть-кнопка»

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

  5. Всплывающее окно должно скрыть, как только вы перейдете за пределы своего собственного пространства, а не пространство исходной области, которая активировала всплывающее окно.

  6. Если возможно, попробуйте указать, что должно произойти, например, покажите фрагмент «обрезания» контента, чтобы он выглядел так, будто что-то будет выходить или быть выставлено, или стрелка выходя из края области, чтобы указать, что вы собираетесь вытащить страницу или всплывающее окно.

Примеры

Типичные сценарии, которые объединяют эти шаги, можно найти на:

  • сайты электронной торговли - например, для информации о продукте - цена /список корзины - все преходящие данные
  • веб-формы для получения справки по каждому элементу
  • пункты меню навигации

Вот пример на карусели (на момент написания статьи использовался веб-сайт johnlewis.com )

введите описание изображения здесь>> </p>

<p> Есть четкий призыв к действию, очевидно, что произойдет из-за стрелки и половины скрытого содержимого во всплывающем окне, действие наведения будет незамедлительно, поблизости нет другого интерактивного контента, и всплывающее окно исчезнет, ​​как только как я отхожу от него. </p>

<p> <img src = dontclick.it/, где после первой страницы ВСЕ взаимодействие выполняется с помощью hover и не требуется никаких кликов .

Я также видел интересное поведение, которое начинает постепенно исчезать на небольшой информационной панели, когда вы начинаете перемещать мышь ближе к объекту наведения (на некотором максимальном расстоянии), чтобы вы не Фактически, нужно нависнуть над ним, прежде чем вы начнете видеть панель. Это может потребовать немного проб и ошибок, чтобы получить право на данный сценарий, и это зависит от того, что объект зависания несколько отделен от основного контента или других областей взаимодействия. К сожалению, я не могу вспомнить, где я это видел. Тестирование было бы важно с этой концепцией!

ответил Roger Attrill 10 42011vEurope/Moscow11bEurope/MoscowThu, 10 Nov 2011 13:29:06 +0400 2011, 13:29:06
1

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

ответил Assaf Lavie 9 32011vEurope/Moscow11bEurope/MoscowWed, 09 Nov 2011 19:27:33 +0400 2011, 19:27:33
1

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

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

ответил Erics 10 42011vEurope/Moscow11bEurope/MoscowThu, 10 Nov 2011 05:53:43 +0400 2011, 05:53:43
1

Я хотел бы опираться на приведенные выше ответы; Значок с символом «?» в нем, вероятно, будет только наводящим на размышления пользователей, ищущих помощь. Почему бы не использовать информационный значок ( вот несколько примеров )? Я думаю, что они более наводящие на размышления людей, ищущих «больше информации».

ответил Nick van der Wildt 10 42011vEurope/Moscow11bEurope/MoscowThu, 10 Nov 2011 20:16:15 +0400 2011, 20:16:15
0

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

Сказав это, мне нравится Ответ ScottK : показать значок увеличительного стекла.

ответил GUI Junkie 10 42011vEurope/Moscow11bEurope/MoscowThu, 10 Nov 2011 12:53:25 +0400 2011, 12:53:25
0

Вы можете сделать это с помощью CSS, если он поддерживается браузером. IE 6 все еще используется, и он не поддерживает многие новые функции CSS.

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

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

ответил James Drinkard 9 32011vEurope/Moscow11bEurope/MoscowWed, 09 Nov 2011 23:24:02 +0400 2011, 23:24:02

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132