Что лучше отображать дополнительную информацию на веб-странице? Всплывающее при нажатии или при наведении курсора?

Question

Мне нравится показывать больше информации по определенным ключевым словам на веб-странице. Я не хочу отправлять посетителя на другую страницу и предпочитаю показывать дополнительную информацию в верхней части текущей страницы.

Ключевые слова находятся в списке HTML. Это в основном список функций, и я хочу предложить больше информации о функциях. Итак, у меня есть две идеи, основанные на наличии «Подробнее» или «?» гиперссылок.

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

Какой из них предлагает более дружественный пользовательский интерфейс?

Мне нравится № 1, потому что им не нужно щелкать, чтобы открывать, и щелкать, чтобы закрывать, но недостатком является то, что окна могут открываться непреднамеренно, когда они наводятся на странице.

Answer 1

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

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

Answer 2

Чего ожидают ваши пользователи? Старайтесь не нарушать эти ожидания.

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

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

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

Но это может варьироваться в зависимости от контекста вашего приложения.

Answer 3

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

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

Answer 4

Лично я бы пошел с опцией щелчка. В Интернете есть стандартная схема работы вещей, которая гласит, что указатели предназначены для получения информации о самой ссылке и о том, какое действие будет выполнять нажатие на нее («Просмотреть дополнительные комментарии», «Щелкните для получения справки» и т. Д.), Тогда как нажатие - это то, что на самом деле выполняет действие.

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

Answer 5

Люди не ожидают всплывающее окно при наведении курсора - я определенно пойду с кликом.

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

При нажатии на ссылку вы ожидаете, что что-то произойдет - перенаправление на другую страницу, всплывающее окно с информацией, отправляемая форма и т. Д.

Я не говорю, что это лучший способ сделать что-то, но - это , как работает 99% веб-сайтов, и я прошу пользователей иметь дело с всплывающими окнами при наведении курсора и т.п. это хороший способ отвратить их. Я знаю, что лично я не читаю никаких страниц с двойными подчеркнутыми ссылками; Это хороший признак того, что случайный перерыв в прокрутке для чтения содержимого может привести к тому, что моя мышь переместится по ссылке с привязанной к ней рекламой.

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

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

Answer 6

Очки для размышления:

• Если предметы настолько плотные, что повсюду, где вы двигаете мышь, что-то всплывает при наведении, НЕ делайте указатель!
• Можете ли вы сделать так, чтобы при наведении курсора отображалась очень краткая информация, а щелчок показывал более подробно? Это может быть лучшим из обоих миров, если это работает для вас.
• У вас может быть выделенное поле, в котором отображается информация при наведении курсора? Это может быть лучше, чем любое всплывающее окно. Мнения разные ...

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

Answer 7

В качестве пары дополнительных прецедентов вы можете рассмотреть функциональность тегов acronym и abbr HTML. Оба позволяют вам предоставлять дополнительную информацию о конкретном фрагменте текста на странице, и оба работают по принципу «наведения».