web-dev-qa-db-ja.com

レスポンシブデザインでは、ツールチップをどのようにトリガーしますか?マウスホバーはもうありません

小さな免責事項。別のUIパターンのようにモバイル用のツールチップの代替を探すのではなく、ツールチップをトリガーする可能性のある別のインタラクションを探しています。これが明確になることを願っています。

質問

ホバーイベント/セレクターに依存する多くのuiパターンがあり、いくつかのパターンは有益であり、いくつかはインタラクティブです。

携帯電話/タブレットでは、ホバー効果は存在しません-これまでのところ、少なくとも???? -この問題に対処または回避するために使用できるテクニック/戦術はありますか?

ツールチップは良い例です:

Tooltip Example

画像ソース: https://uxplanet.org/tooltips-in-ui-design-f63e117aa3d1

答える前に

可能ですが、モバイルファーストの種類の回答は避けてください。デザインのバイブルに固執するのと同じくらいですが、実際には、モバイルファーストになれない多くのケースが存在します。それは優先事項ではなく、単にモバイルの側面を既存のWebデザインに追加するものでもありません。

1
UX Labs

これは、ほとんどの場合、ツールチップが適切なソリューションではない主な理由の1つです。

私の株式の主張は、ツールチップを使用する必要はないということです。情報は画面に正しく表示するのに十分重要であるか、重要ではないため、ツールチップで非表示にする必要すらありません。

あなたcould長いタップアンドホールドなどのより風変わりな操作の一部を使用しますが、それは単にユーザーが実際には必要としないUXの別のレイヤーに情報を隠しているだけです。

4
DA01

AndroidiOS の両方に長押しハンドラーがあり、ホバーツールチップ効果のシミュレーションに使用できます。 Material Guidelines のモバイルセクションに使用例を示します。

3
mrchaarlie

これは本当にUIのdiscover-abilityに関するものだと思います。ツールチップは、ユーザーインターフェースに注釈を付ける方法としてよく使用されます。これにより、ユーザーは、UIを説明で乱雑にすることなく、すべての機能の機能を学ぶことができます。

標準の関数名やアイコンなどの規則を一貫して使用することで同じ効果を得ることができます(この例では、Twitterのアイコンが何もないことをユーザーが知らない場合、Twitterのアイコンに注釈は必要ありません。 Twitterアカウント)。

2
Franchesca