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

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

<p>в зависимости от того, кого вы спрашиваете, они могут даже сказать вам, что интерфейс, который <em> нуждается в </em> подсказках для инструментов, чтобы быть понятными, должен быть плохо переработан (см. джеф раскин : <em> гуманный интерфейс </em>).</p><p>на самом деле подсказки являются решением <em> очень </em> специфической проблемы: пиктограммные кнопки без надписей, такие как на панелях инструментов. всякий раз, когда у вас есть ярлыки, используйте их. не нужно указывать подсказку, потому что у вас <em> уже есть текст </em>, чтобы сообщить, что собирается делать конкретный элемент управления.</p><p>более того, сенсорные интерфейсы не очень хорошо соотносятся с современной <a href="http://en.wikipedia.org/wiki/wimp\_(computing)">wimp</a> моделью интерфейса. многие элементы управления хороши для работы с указателями мыши, но неудобно использовать их пальцем. меню, флажки, радио-кнопки приходят на ум. поэтому парадигма интерфейса <em> </em> для сенсорных интерфейсов должна выглядеть несколько иначе, чем в современных интерфейсах, управляемых мышью и клавиатурой.</p><p>так что я думаю, что проблема заключается не столько в недостатке подсказок, сколько в том, что мы не исследовали много новых способов взаимодействия с компьютером за последние 30 лет (в основном, не после исследования, проведенного <a href="http://en.wikipedia.org/wiki/doug\_engelbart">даг энгельбарт</a> и <a href="http://en.wikipedia.org/wiki/parc\_(company)">xerox parc</a> в 60-х и 70-х годах).</p><p>сенсорный ввод достаточно похож <em> </em>, что он <em> своего рода </em> работает для большинства целей. но ему не только не хватает компонента определения местоположения без прикосновения, но и точности. в основном, все, что нужно для сенсорного ввода - это прикосновение к чему-либо и перетаскивание чего-либо. даже двойное касание сложно, так что нам <em> на самом деле </em> нужно кое-какие фундаментальные изменения в том, как разрабатывать и изготавливать пользовательский интерфейс специально для сенсорного интерфейса.</p><p>некоторые из них вы увидите в выделенных устройствах, таких как iphone, просто потому, что это платформа, которая не имеет ни указателя мыши, ни клавиатуры и <em> только </em> сенсорный , это означает, что вам не нужно создавать пользовательский интерфейс, который должен быть пригоден для использования всеми возможными способами взаимодействия (проблема с чумами windows в настоящее время; у меня есть ноутбук с поддержкой мультитач, но для многих задач сенсорный экран просто не работает) но только с одним. но я думаю, что решение общего назначения для "нормального" программного обеспечения и компьютеров в данный момент довольно далеко.</p><p>поэтому я бы посоветовал вам подумать немного иначе о <em> том, как </em> вы разрабатываете свой пользовательский интерфейс. как было сказано ранее (и может быть прочитано в <a href="https://rads.stackoverflow.com/amzn/click/com/0470084111"><em> about face </em></a> ), подсказки предназначены для маркировки элементов управления, которые не есть метки или там, где места не хватит, чтобы разместить их. ключевым сценарием использования здесь являются панели инструментов. но интерфейс, разработанный для касания, в любом случае увеличил бы все элементы управления. многие маленькие значки, тесно сгруппированные вместе, неудобно использовать при сенсорном вводе даже <em>, если </em> у вас были всплывающие подсказки, просто из-за недостаточной точности.</p>

<p>чтение здесь заставило меня задуматься. всплывающие подсказки обычно используются для присвоения <em> метки </em> безтекстовым кнопкам, но они также являются отличным способом предоставления дополнительной информации в ограниченном пространстве, доступном в интерфейсе. иногда он используется для предоставления контекстно-зависимой помощи или подробного объяснения одного виджета.</p><p> <a href="https://stackoverflow.com/users/69993/tchalvak">tchalvak</a> <a href="https://stackoverflow.com/questions/1737773/tooltips-in-the-era-of-touch/1737803#1737803">это идея</a> предоставление всем элементам графического интерфейса общего поведения одним щелчком мыши и предоставление всплывающей подсказки при двойном щелчке имеет свои преимущества и даже может быть несколько обнаруживаемым, поскольку многие люди используются для двойного щелчка <em> всего </em>, который они видят, независимо от элемента.</p><p>но я вспомнил старый <kbd>?</kbd> кнопка, которая была так популярна много лет назад, нажатие которой превратило бы курсор в знак вопроса. как только вы щелкнете по виджету, вы увидите маленькую подсказку или информационный шарик. я считаю, что что-то подобное можно легко использовать на сенсорном интерфейсе. из-за отсутствия курсора пользователю следует дать другую визуальную подсказку, сообщающую ему, что он находится в режиме <em> предоставления справки </em>. может быть, изменить оттенок экрана и дать небольшой текст. это также может быть сделано через мультитач, требуя <kbd>?</kbd> кнопка, нажимаемая при нажатии другого виджета, чтобы получить всплывающую подсказку (которая должна отображаться в немного отстоящем месте, чтобы не быть слишком скрытой пальцем).</p><p><img src="https://i.stack.imgur.com/2aeuw.png" alt="those ? buttons were popular in the win 95 days, but have largely dissapeared now."></p><p>но даже если возможно, чтобы у нас, программистов, была та же техническая функциональность, чтобы у нас были всплывающие подсказки, мы должны думать о <em> намерении </em>, для чего мы будем его использовать.</p><p>я бы использовал его только для расширенной помощи, когда вы сталкиваетесь с небольшим экраном, в противном случае, чтобы область помощи всегда была видна в нижней части "окна" (применительно к любому виду квадратного интерфейса с интерфейсом io) , который изменяет свое содержимое, чтобы предоставить подробное объяснение и/или помощь для выбранного виджета, как это делается в некоторых окнах настроек при наведении курсора.</p><p>в заключение, даже если мы <em> способны </em> предоставить простые в использовании всплывающие подсказки, мы должны думать о том, что бы вы добавили в них. в сенсорном интерфейсе я бы <strong> не </strong> поместил бы безошибочную неоднозначную кнопку, для которой <em> требуется </em> всплывающая подсказка , но будет использовать его для предоставления контекстно-зависимой расширенной помощи и устранения неполадок.</p>

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

<p>я могу придумать пару решений этой проблемы</p><p>1) создайте свое приложение, чтобы не нуждалось в подсказках поместите текст на кнопки (пусть маленькие), используйте простые значки или отобразите "всплывающую подсказку" о "первом использовании кнопки" (с возможностью "не показывать это снова", как только пользователь узнает, для чего кнопка)</p><p>2) отвечайте на события при <em> касании </em>, а не при касании. отвечайте на прикосновения, которые удерживались в течение 0,5-1 секунды, отображая всплывающее окно с подсказкой если отображается всплывающая подсказка, нормальное событие кнопки не срабатывает <em> </em> (поэтому пользователи, ищущие помощь, не в конечном итоге инициируют действия).</p><p>3) используйте парадигму перетаскивания "вопросительный знак", которую предлагает <a href="https://stackoverflow.com/a/1738121/111307">@ voyager</a> . или попросите пользователя сначала нажать на знак вопроса, а затем на элемент, с которым ему нужна помощь.</p>

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

<p>я нахожу <strong> всплывающие подсказки очень полезными </strong>, и я думаю, что все, кто утверждает, что они не нужны в хорошем дизайне пользовательского интерфейса, считают себя очень ограниченными.</p><p>просто чтобы дать вам некоторое представление ...</p><p>обычно <strong> хороший дизайн пользовательского интерфейса </strong> (как и многие другие в жизни) <strong> является эффективным и действенным </strong> в течение определенного периода времени использования. эффективно означает, что вы можете <strong> делать то, что ожидали, вы могли бы </strong> (например,<em>делать вызов с мобильного телефона</em>). эффективное средство, это <strong> выполнимо с минимальными усилиями пользователя </strong> (например,<em>просто набрав цифры и нажимая какую-то кнопку "набора номера"</em>, не имея для навигации по некоторым меню в первую очередь).<em>в течение определенного периода времени</em>означает, что <strong> он может быть неоптимальным при первом использовании или, наоборот, после того, как вы узнали об этом и все, что находится между </strong> (например,<em>экран терминала аэропорта, возможно, должен быть более сфокусирован на одноразовых "манекенах", чем программное обеспечение для редактирования видео для профессионалов, таких как adobe premiere</em>).</p><p>это сказало, что я нахожу подсказки чрезвычайно полезными в ситуациях, где</p><ul> <li>как дизайнер <strong> вы не хотите/не можете объяснить все детали некоторых функций графического интерфейса в определенной области пользовательского интерфейса </strong> <ul> <li>из-за удобства использования, свободного места и т. д.</li> <li>например принимая приведенные выше примеры, это может быть полезно даже для простого пожилого человека<em>сценарий мобильного вызова </em>[ <ul> <li>это может быть не знакомо со многими вещами, которые мы, "уроды", считаем тривиальными.</li> <li>и их следует поощрять к тому, чтобы они не боялись случайно позвонить на горячую линию покупок и, наконец, убедились, что они не могут жить без пылесоса за 1000 евро.</li> <li>поэтому в этом случае парадигма всплывающей подсказки может иметь смысл <ul> <li>как правило, я бы не советовал, хотя</li> </ul> </li> </ul> </li> </ul> </li> <li>как пользователь <strong> вы не уверены в значении некоторых предусмотренных действий/кнопок и т. д. </strong> <ul> <li>снова придерживаясь предыдущих примеров, даже<em>опытный пользователь adobe premiere может не помнить все подробности об определенной функциональной области всех доступных модулей/плагинов </em> <ul> <li>например если большую часть времени вы режете видео и редко настраиваете аудио</li> <li>в то время как у других может быть проблема наоборот</li> </ul> </li> </ul> </li> </ul><p>теперь вернемся к ограничениям и возможностям сенсорного интерфейса ...</p><ul> <li><strong> :-) hover </strong>: я недавно где-то видел, что некоторые устройства могут <strong> распознать палец до того, как он действительно коснется сенсорной панели </strong> или он различает <strong> интенсивность касания </strong> (например, только очень мягкое касание). это может показаться идеальным дополнением к установленной функциональности всплывающей подсказки в wimp интерфейсах для меня <ul> <li>конечно, это будет зависеть от возможностей сенсорного оборудования</li> </ul> </li> <li><strong> :-) пользовательский интерфейс масштабирования </strong>: мне действительно <strong> нравится понятие <a href="http://en.wikipedia.org/wiki/zooming\_user\_interface">пользовательский интерфейс масштабирования</a> </strong>, упомянутое<em>джои</em>также <ul> <li>концепция использования только двух пальцев уже достаточно распространена для масштабирования, и идея довольно интуитивна, например,<em>показывает больше деталей, например, обычную информацию о всплывающей подсказке, при увеличении масштаба кнопки</em></li> <li>но по общему признанию вводит проблему разграничения между<em>мне нравится иметь подсказку для этой кнопки</em>и<em>мне нравится увеличивать всю область в/out, не имея всплывающей подсказки рядом с моими пальцами </em> <ul> <li>хотя я думаю, что типичные области с подсказками сильно отличаются от масштабируемых областей в целом <ul> <li>например область содержимого некоторых pdf читателей обычно визуально довольно отделена от, например, какая-то панель инструментов (кнопка)</li> </ul> </li> <li>всплывающие подсказки для областей без действий, таких как некоторые<em>область текста</em>, опять-таки не тривиальны в обработке или требуют более "соглашения о разграничении жестов"</li> </ul> </li> <li>с точки зрения развития это также кажется достаточно надежным</li> </ul> </li> <li><strong> :-) qm </strong>: решение <strong><em>щелкнуть мышью или перетащить функцию</em></strong> может быть хорошей альтернативой тоже. <ul> <li>многие из них на экране кажутся глупыми, особенно когда им нужно найти определенное пространство, чтобы их можно было нажимать/перетаскивать</li> <li>перетаскивание повсюду кажется лучше, но опять-таки потребуется место для него на экране</li> <li>с точки зрения разработки, я нахожу это по крайней мере немного сложным в качестве общего решения, потому что перетаскивание является общей особенностью, и в пользовательском интерфейсе делается различие между<em>вот некоторые всплывающие подсказки, которые мне нужно обрабатывать</em>и<em>здесь происходит какое-то удаление файла, которое я должен обработать</em>(например, в<em>область загрузки файла</em>) может быть нелегким или, по крайней мере, общим основанием для существующих структур</li> </ul> </li> <li><strong>: - | удерживать </strong>: идея вызова всплывающей подсказки <strong>, если пользователь не отпускает push по истечении определенного периода времени </strong>, например, 1s, кажется, второе лучшее решение для меня <ul> <li>это уже общая черта в некоторых сценариях, как упомянутое всплывающее окно на экранной клавиатуре (например, опираясь на "o" и получая список возможных альтернатив, таких как<em>oóòô</em>)</li> <li>опять же требуется от пользователя<em>trust</em>, чтобы он не выполнял действие областей в выпуске</li> <li>на некоторых кнопках может быть трудно различить, что пользователь хочет сделать, например, нажатие на знак "+" для увеличения номера и удержание его для увеличения или увеличения может противоречить этой функции всплывающей подсказки</li> <li>для неактивных областей действие push-hold может не показаться интуитивным</li> <li>с точки зрения развития это может быть довольно легко, хотя могут существовать некоторые поведенческие противоречия, подобные упомянутым</li> </ul> </li> <li><strong>: - | sct/dca </strong>: решение <strong><em>отображение подсказки в один клик, двойное нажатие при выполнении действия</em></strong>, которое я мог себе представить быть <strong> полезным в ограниченных сценариях </strong> <ul> <li>например<em>мобильный вызов для некоторых пожилых или пустышек</em>упомянутых выше или где <strong> действие </strong> должно быть <strong><em>вид защищен от бессознательного или неуверенного использования</em></strong></li> <li>снова перспектива развития выглядит надежной снова здесь</li> </ul> </li> <li><strong>: -/sca/dct </strong>: решение <strong><em>один щелчок выполняет действие, двойной щелчок показывает подсказку</em></strong> мне кажется очень странным <ul> <li>если вы не уверены в какой-либо функциональности, вам не хотелось бы нажимать кнопку вообще, и уж точно не дважды, особенно если вы не уверены, можете ли вы ожидать такого поведения</li> <li>перспективы развития здесь могут быть проблематичными: <ul> <li>по истечении которого происходит двойной щелчок двумя щелчками мыши?</li> <li>что, если второй щелчок не распознан или не может быть распознан, например, потому что появляется какое-то другое всплывающее окно, макет пользовательского интерфейса внезапно меняется, пользователь не прицеливался тщательно, ...</li> </ul> </li> </ul> </li> <li><strong>: -/другие жесты </strong>: использовать другие упомянутые жесты, или я мог бы подумать, например <strong> нарисовать вопросительный знак над областью подсказок </strong> , <strong> каким-то образом проводите по области </strong> и т. д. <ul> <li>потому что это не похоже на общий язык, я бы не хотел, потому что это также может заблокировать другие функции, доступные в противном случае</li> </ul> </li> </ul>

<p>преимущество всплывающей подсказки состоит в том, что она добавляет вышележащий этап (очень незначительной) информации до того, как произойдет действие. поэтому мне кажется, что добавление этого слоя обратно с помощью "<em> двойного щелчка </em>" для выполнения действия "одним щелчком" для отображения информации будет эквивалентная идея.</p><p>я думаю, что мы все видели фильмы с будущими экранными интерфейсами, где кто-то касается экрана, и вокруг этого прикосновения появляется геометрическая форма информации. почему бы не использовать эту концепцию, чтобы первое касание раскрыло информацию о действии как полезную всплывающую подсказку, а затем второй щелчок в том же месте подтвердит/выполнит действие.</p><p>если не "click-on-item-shows-tooltip-second-click-execute-action", как насчет <em> близости </em>? если вы хотите получить информацию о виджете пользовательского интерфейса с достаточным интервалом, вы можете нажать рядом с виджетом и получить информацию о нем, коснуться виджета и выполнить действие.</p><p>как правило, всплывающие подсказки предоставляют так мало информации (указатель против руки, всплывающая подсказка, всплывающая подсказка), и я думаю, что вы также можете просто дублировать информацию всплывающей подсказки, обращая пристальное внимание на действия пользователя <em> история </em>. если в последнее время они нажимали на две вещи чаще, чем на другую, имейте всплывающую подсказку по умолчанию и добавленную ценность и акцент, чтобы показывать эти несколько чаще нажимаемых вещей вместо других.</p><p><strong>edit:</strong> кроме того, если больше думать об этом, <em> перетащите </em> в пространство, которое не требует прокрутки или тому подобное, похоже на хорошо триггер для информации всплывающей подсказки. возьмите клавиатуру iphone, например. каждая буква имеет всплывающую подсказку, когда вы ее перетаскиваете, тогда как сама буква фактически активируется при отпускании. помогает в точности позиционирования.</p><p>кроме того, я думаю, что особенности вступают в игру. вы говорите о планшете? сенсорный интерфейс телефона с очень ограниченным пространством? я думаю, что доступное пространство играет большую роль в том, как вы должны делать вещи с сенсорным интерфейсом.</p>

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

<p>это может быть полезно:</p><p> <a href="https://material.google.com/components/tooltips.html">google material tooltips</a> </p><p>они говорят, что подсказки</p><blockquote> <p>вызван:</p> <ul> <li>наведите курсор на элемент с курсором</li> <li>фокусировка на элементе с помощью клавиатуры (обычно клавиша табуляции)</li> <li>на ощупь</li> </ul> </blockquote><p>он не имеет много информации только о мобильном телефоне. единственное, с чем вы можете встретиться - это касание, которое разочаровывает, если ваша кнопка что-то делает, вы не хотите касаться ее, прежде чем узнаете, что она делает. длительное нажатие может работать, но для некоторых приложений требуется длительное нажатие для других функций, это используемый путь ux, и пользователь не будет ожидать всплывающих подсказок, если вы не скажете им.</p><p>я думаю, что всплывающие подсказки могут просто не творить чудеса на мобильном телефоне, как на настольном компьютере. без наведения вам нужен еще один зарезервированный способ быстро напомнить или показать пользователю, что делает значок или кнопка.</p><p>лучшее, что я могу придумать, это режим справки. нажмите "настройки", затем "справка", в нижней части экрана появится короткая карточка с надписью "нажмите на элемент для получения справки" и кнопкой "отменить". затем ударив инструмент наконечником элементов покажет вам дополнительную информацию для них.</p><p>я вижу выше это упомянутое, но другой современный случай использования для этого - игры. они часто разрабатываются с учетом джойстика, что означает, что у них есть примерно 14 кнопок для работы, но большинство из них используются игровыми функциями.</p><p>в ролевых играх они обычно имеют сложные экраны статистики, которые гарантированно неизвестны игроку (часто они изобретают новые системы для каждой игры), полные чисел, которые важны, но игроки не знают. многие из них позволяют вам нажимать кнопку выбора, чтобы войти в режим подсказки/объяснения.</p><p>это может хорошо работать в приложении, которое достаточно сложное, чтобы требовать всплывающих подсказок на мобильном телефоне, и является единственным шаблоном, который я могу видеть прямо сейчас, который не так уж далек от обычных ux-дизайнов.</p>

<p>мой ответ, возможно, не такой практичный, но ...</p><p>проблема была бы решена, если бы все приложения поддерживали функциональность отмены, и люди привыкли знать, что они всегда могут отменить любое действие.</p><p>как говорит андреас, "если вы не уверены в какой-либо функциональности, вам не хотелось бы нажимать кнопку вообще".</p><p>но с отменой в качестве защитной сетки может быть больше "дел", и меньше "стесняйся, волнуйся, узнай, что произойдет, прежде чем я нажму ... коснусь".</p><p>это одна из причин, по которой кнопка "назад" так популярна, и android даже сделала ее доступной для всей системы.</p><p>к сожалению (вот непрактичность ...)</p><ul> <li>создание надежной всеобъемлющей отмены намного сложнее, чем всплывающих подсказок</li> <li>достаточно приложений должно поддерживать его, чтобы изменить мышление всех пользователей (ха!)</li> </ul>

<p>помните, что всплывающие подсказки - потрясающая помощь для новичков, и им не нужно никаких действий, чтобы учиться для них, потому что новички всегда медлительны, и они всплывают при небезопасном перемещении курсора. с другой стороны, они превосходны, потому что они не замедляют опытных пользователей.</p><p>для планшетов я бы взял идею вопросительного знака, но добавил бы немного больше сложности:</p><p>1) когда вы нажимаете на знак вопроса, он включает режим "справка". 2) затем вы можете нажать на соответствующий элемент управления, и он показывает всплывающую подсказку. 3) если вы затем снова нажмете на тот же элемент управления, он завершит режим справки и выполнит то, что должен делать элемент управления. 4) если вы нажмете на любой другой элемент управления, он показывает его всплывающую подсказку, и режим справки остается включенным. 5) можно отключить режим справки, снова нажав знак вопроса.</p>

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