web-dev-qa-db-ja.com

クリック可能な「ホットスポット」機能

特定のデザインパターンを何と呼ぶか​​わからないため、私は特定のデザインパターンの調査に苦労しています。内部的にはこの概念を「ホットスポット」と呼んでいますが、これは標準的な専門用語ではないようです。画像内のアイコンをクリックして、詳細を表示するオーバーレイを起動します。

例:シンクの写真、食器洗い機、電子レンジなどの横に「+」記号のアイコンが付いたキッチンの写真がある場合があります。「+」記号をクリックすると、その項目の拡大表示されたオーバーレイが表示されます潜在的に付随するテキストの説明。これはツールチップよりも多くの情報ですが、モーダルレイヤーほど極端ではありません(ユーザーが別の「+」アイコンをクリックするなど、画面上の他のアイテムを操作できるため)。

私の質問は、これが機能を探索するための効果的な設計パターンであるかどうかに関するデータ/調査があるかどうかです(そうであれば、共通の名前がありますか?私の直感は、これが「すべてはスクロールせずに済む」設計の日であり、アイテムを探索するために常にクリックする必要があり、一度に1つの機能しか表示できないため、情報を表示するには非効率的な方法です(私の好みは、すべてを表示するか、より長いページの情報またはギャラリーのようなインターフェースを使用)ですが、これはより「インタラクティブ/没入型」のエクスペリエンスとして非常に強く推進されており、応答として使用するための直感以上のものを必要とするチームにいます。

2
Michael Histen

あなたが私が「ポップオーバー」と呼ぶものを説明しているようです。言うまでもなく、単純なツールチップで処理できるよりも多くの情報(またはより複雑な情報)を表示する必要があるが、完全なオーバーレイよりも少ない情報を表示し、現在のコンテキストからユーザーを削除する必要がない場合に役立ちます。

Twitter Bootstrap には「ポップオーバー」JavaScriptウィジェットがあり、 ドリブルでポップオーバーを検索 すると、このパターンを示す多数のデザイン例が見つかります。

2
Matt Obee

これは、たとえ非常に制限されていても、ユーザーのテストには熟しているように思えます。

キッチンのUIの前に誰かを置いて、「ここで何ができると思いますか?」彼らがポップオーバーをクリックするかどうかを見ると、多くのことがわかります。そして、彼らがそうしたら、彼らはそれを読んでそれが何をするかを見て、そしてあなたは「それについてどう思いましたか?」でフォローアップすることができます。

これは前後関係がありすぎて、正規のデザインパターンを実際に使用することはできません。カスタムキッチンの写真であるあなたの例では、インタラクションがエレガントで邪魔にならない場合、それは多くの可能性を秘めたアイデアであることがわかりました。

1
Hello Erik

これは、90年代から存在しているHTMLのイメージマップと呼ばれる機能です。

ネットの使用頻度に関する統計をネットで検索してみてください。

これに関する問題の1つは、クリック可能な領域がボタンのように感じられないことです。マウスオーバーなどのイベントに反応しません。

また、画像が正しく描画されない場合、3Dの錯覚を与える境界を使用するボタンとは異なり、領域の境界との十分な区別がありません。

考えられるもう1つのアイデアは、ツールチップを使用して、ユーザーがアイテムをクリックした場合にどうなるかをユーザーに示すことです。

0
Danny Varod