Подсказки в эпоху прикосновений

Question

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

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

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

Answer 1

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

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

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

Так что я думаю, что проблема заключается не столько в недостатке подсказок, сколько в том, что мы не исследовали много новых способов взаимодействия с компьютером за последние 30 лет (в основном, после исследования, проведенного * 1019). * Дуг Энгельбарт и Xerox PARC в 60-х и 70-х).

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

Некоторые из них вы увидите в выделенных устройствах, таких как iPhone, просто потому, что на этой платформе нет ни указателя мыши, ни клавиатуры, а только touch. Это означает, что вам не нужно создавать пользовательский интерфейс, который должен быть пригоден для использования всеми возможными способами взаимодействия (проблема с чумами Windows в настоящее время; у меня есть ноутбук с поддержкой мультитач, но для многих задач сенсорный экран просто не работает) но только с одним. Но я думаю, что универсальное решение для «нормального» программного обеспечения и компьютеров в данный момент довольно далеко.

Так что я бы посоветовал вам просто немного подумать о как вы проектируете свой пользовательский интерфейс. Как было сказано ранее (и может быть прочитано в About Face Алана Купера), подсказки для инструментов предназначены для маркировки элементов управления, у которых нет меток или где недостаточно места для их размещения. Ключевым сценарием использования здесь являются панели инструментов. Но интерфейс, разработанный для касания, в любом случае увеличил бы все элементы управления. Многие маленькие значки, тесно сгруппированные вместе, неудобны для использования с сенсорным вводом, даже , если у вас были всплывающие подсказки, просто потому, что ему не хватает точности.

Answer 2

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

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

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

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

Я бы использовал его только для расширенной помощи, когда вы сталкиваетесь с небольшим экраном, в противном случае, чтобы область помощи всегда была видна в нижней части «окна» (относясь к любому виду квадратной формы-io -интерфейс), который изменяет свое содержимое для предоставления подробного объяснения и / или помощи для выбранного виджета, как это делается в некоторых окнах настроек при наведении курсора.

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

Answer 3

Я могу придумать пару решений этой проблемы

1) Создайте приложение так, чтобы не требовалось всплывающих подсказок. Поместите текст на кнопки (пусть маленькие), используйте простые значки или отобразите «всплывающую подсказку» о «первом использовании кнопки» (с возможностью «не показывать это снова», когда пользователь узнает, для чего кнопка) *

2) Отвечать на события при touch up , а не touch down. Реагируйте на прикосновения, которые удерживались в течение 0,5-1 секунды, отображая всплывающее окно с подсказкой. Если отображается всплывающая подсказка, обычное событие кнопки не срабатывает при исправлении (поэтому пользователи, ищущие помощь, не в конечном итоге инициируют действия).

3) Используйте парадигму перетаскивания «вопросительный знак», предложенную @ voyager . Или попросите пользователя сначала нажать на знак вопроса, а затем на элемент, с которым ему нужна помощь.

Answer 4

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

Answer 5

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

Просто чтобы дать вам представление ...

Обычно хороший дизайн пользовательского интерфейса (как и многие другие вещи в жизни) - это эффективный и эффективный в течение определенного периода времени использования. Эффективно означает, что вы можете делать то, что ожидали, вы могли бы (например, делать вызов с мобильного телефона ). Эффективное означает, что это выполнимо с минимальными усилиями пользователя (например, , просто набрав цифры и нажав на какую-нибудь кнопку набора номера , без необходимости сначала перемещаться по некоторым меню). В течение определенного периода времени означает, что может быть неоптимальным при первом использовании или, наоборот, после того, как вы узнали его, и все, что находится между (например, * 1023) * экран терминала аэропорта, возможно, должен быть более сфокусирован на одноразовых «манекенах», чем программное обеспечение для редактирования видео для таких профессионалов, как Adobe Premiere ).

Это говорит о том, что я нахожу подсказки чрезвычайно полезными в ситуациях, когда

• как дизайнер вы не хотите / не можете объяснить все детали некоторых функций графического интерфейса в определенной области пользовательского интерфейса
  • из-за удобства использования, свободного места и т. Д.
  • например. Принимая приведенные выше примеры, это может быть полезно даже для простого сценария мобильного вызова для пожилых людей .
    • Это может быть не знакомо со многими вещами, которые мы, "уроды", считаем тривиальными.
    • И их следует поощрять, чтобы они не стеснялись звонить по горячей линии для покупок и, наконец, убедились, что они не могут жить без пылесоса за 1000 евро.
    • так что в этом случае парадигма всплывающей подсказки может иметь смысл
      • обычно я бы не советовал, хотя
• как пользователь вы не уверены в значении некоторых предусмотренных действий / кнопок и т. Д.
  • снова придерживаясь предыдущих примеров, даже опытный пользователь Adobe Premiere может не помнить все подробности об определенной функциональной области всех доступных модулей / плагинов
    • например. если большую часть времени вы режете видео и редко настраиваете параметры звука
    • тогда как у других может быть проблема наоборот

Теперь вернемся к ограничениям и возможностям сенсорного интерфейса ...

• :-) Hover : я недавно где-то видел, что некоторые устройства могут распознавать палец до того, как он действительно коснется сенсорной панели или он различает интенсивность прикосновения (например, только очень мягкое касание). Мне показалось бы, что это идеальный вариант для функционала всплывающей подсказки на интерфейсах WIMP.
  • конечно, это будет зависеть от возможностей сенсорного оборудования
• :-) Масштабирующий пользовательский интерфейс : мне действительно нравится Масштабирующий пользовательский интерфейс концепция , упомянутая Joey .
  • концепция использования только двух пальцев уже достаточно распространена для масштабирования, и идея довольно интуитивна, например, Отображение более подробной информации, например, типичной информации о всплывающей подсказке, при изменении масштаба кнопки
  • но по общему признанию вводит проблему дифференциации между Мне нравится иметь всплывающую подсказку для этой кнопки и Мне нравится увеличивать / уменьшать всю область, не имея подсказки для кнопки рядом с моими пальцами в виду
    • хотя я думаю, что типичные области с всплывающими подсказками сильно отличаются от масштабируемых областей в целом
      • например. область содержимого некоторых программ чтения PDF обычно визуально довольно отделена от, например, какая-то панель инструментов (кнопка)
    • всплывающие подсказки для областей без действия, например, для некоторых текстовых областей , опять не тривиальны для обработки или требуют более «соглашения о разграничении жестов»
  • с точки зрения развития это также кажется достаточно надежным
• :-) QM : отличной альтернативой может быть и решение с кнопкой мыши или перетаскиванием .
  • иметь много таких повсюду на экране кажется глупым, особенно когда им нужно найти определенное пространство, чтобы их можно было нажимать / перетаскивать
  • лучше перетащить его куда угодно, но опять-таки потребуется место для него на экране
  • с точки зрения разработки, я нахожу это по крайней мере немного сложным в качестве общего решения, потому что перетаскивание является общей особенностью, и в пользовательском интерфейсе различают , вот некоторые всплывающие подсказки, с которыми я должен справиться и здесь идет некоторая потеря файла, с которой мне приходится справляться (например, в области загрузки файла ) может быть непросто или, по крайней мере, найти общий язык с существующими фреймворками
• : - | Удержание : идея вызова всплывающей подсказки , если пользователь не отпускает толчок по истечении определенного периода времени , например, 1s, кажется, 2-е лучшее решение для меня
  • это уже обычная функция в некоторых сценариях, так как упомянутые всплывающие подсказки на экране (например, "o" и получение списка возможных вариантов выбора, таких как oóòô )
  • снова требуется некоторое доверие от пользователя, чтобы он не выполнял действие областей в релизе
  • на некоторых кнопках может быть трудно различить, что пользователь хочет сделать, например, нажатие на знак «+» / кнопку для увеличения некоторого числа и удержание ее для увеличения или увеличения может противоречить этой функции всплывающей подсказки
  • для областей без действия действие удержания-нажатия может не показаться интуитивным
  • с точки зрения развития это может быть довольно легко, хотя некоторые поведенческие противоречия, подобные упомянутым, могут существовать
• : - | SCT / DCA : решение всплывающая подсказка с одним щелчком мыши, выполнение действия по двойному щелчку Я могу представить себе полезным в ограниченных сценариях
  • например. мобильный вызов для некоторых пожилых или фиктивных людей , упомянутых выше, или где действие должно быть как-то защищено от бессознательного или неуверенного использования
  • снова перспектива развития здесь снова выглядит надежной
• : - / SCA / DCT : решение один щелчок выполняет действие, двойной щелчок показывает всплывающую подсказку мне кажется очень странным
  • если вы не уверены в какой-либо функциональности, вам не хотелось бы нажимать кнопку вообще, и уж точно не дважды, особенно если вы не можете быть уверены, можете ли вы ожидать такого поведения
  • перспективы развития здесь могут быть проблематичными:
    • по истечении которого производится двойной щелчок двумя щелчками мыши?
    • что, если второй щелчок не распознан или не может быть распознан, например, потому что появляется какое-то другое всплывающее окно, макет пользовательского интерфейса внезапно меняется, пользователь не прицеливается, ...
• : - / Другие жесты : с помощью других упомянутых жестов или, как я мог подумать, например , нарисовав вопросительный знак над областью подсказок , смахивание в некотором роде и т. д.
  • потому что это не похоже на общий язык, я бы не хотел, потому что он также может блокировать другие функции, доступные в противном случае

Answer 6

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

Answer 7

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

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

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

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

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

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

Answer 8

Это может быть полезно:

Google Material Tooltips

Они говорят, что всплывающие подсказки

Призвано:

• Наведение на элемент курсором
• Фокусировка на элементе с помощью клавиатуры (обычно клавиша табуляции)
• При прикосновении

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

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

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

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

В ролевых играх у них обычно есть сложные экраны статистики, которые гарантированно неизвестны игроку (часто они изобретают новые системы для каждой игры), полные чисел, которые важны, но игроки не знают. Многие из них позволяют вам нажимать кнопку выбора, чтобы войти в режим подсказки / объяснения.

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

Answer 9

Мой ответ не такой практичный, но ...

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

Как говорит Андреас, «если вы не уверены в какой-либо функциональности, вам не хотелось бы нажимать кнопку вообще».

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

Это одна из причин, по которой кнопка «Назад» так популярна, и Android даже сделал ее работающей во всей системе.

К сожалению (вот непрактичность ...)

• Создание надежной всеобъемлющей отмены намного сложнее, чем всплывающих подсказок
• достаточно приложений, чтобы поддержать его, чтобы изменить мышление всех пользователей (ха!)

Answer 10

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