特定のデザインパターンを何と呼ぶかわからないため、私は特定のデザインパターンの調査に苦労しています。内部的にはこの概念を「ホットスポット」と呼んでいますが、これは標準的な専門用語ではないようです。画像内のアイコンをクリックして、詳細を表示するオーバーレイを起動します。
例:シンクの写真、食器洗い機、電子レンジなどの横に「+」記号のアイコンが付いたキッチンの写真がある場合があります。「+」記号をクリックすると、その項目の拡大表示されたオーバーレイが表示されます潜在的に付随するテキストの説明。これはツールチップよりも多くの情報ですが、モーダルレイヤーほど極端ではありません(ユーザーが別の「+」アイコンをクリックするなど、画面上の他のアイテムを操作できるため)。
私の質問は、これが機能を探索するための効果的な設計パターンであるかどうかに関するデータ/調査があるかどうかです(そうであれば、共通の名前がありますか?私の直感は、これが「すべてはスクロールせずに済む」設計の日であり、アイテムを探索するために常にクリックする必要があり、一度に1つの機能しか表示できないため、情報を表示するには非効率的な方法です(私の好みは、すべてを表示するか、より長いページの情報またはギャラリーのようなインターフェースを使用)ですが、これはより「インタラクティブ/没入型」のエクスペリエンスとして非常に強く推進されており、応答として使用するための直感以上のものを必要とするチームにいます。
あなたが私が「ポップオーバー」と呼ぶものを説明しているようです。言うまでもなく、単純なツールチップで処理できるよりも多くの情報(またはより複雑な情報)を表示する必要があるが、完全なオーバーレイよりも少ない情報を表示し、現在のコンテキストからユーザーを削除する必要がない場合に役立ちます。
Twitter Bootstrap には「ポップオーバー」JavaScriptウィジェットがあり、 ドリブルでポップオーバーを検索 すると、このパターンを示す多数のデザイン例が見つかります。
これは、たとえ非常に制限されていても、ユーザーのテストには熟しているように思えます。
キッチンのUIの前に誰かを置いて、「ここで何ができると思いますか?」彼らがポップオーバーをクリックするかどうかを見ると、多くのことがわかります。そして、彼らがそうしたら、彼らはそれを読んでそれが何をするかを見て、そしてあなたは「それについてどう思いましたか?」でフォローアップすることができます。
これは前後関係がありすぎて、正規のデザインパターンを実際に使用することはできません。カスタムキッチンの写真であるあなたの例では、インタラクションがエレガントで邪魔にならない場合、それは多くの可能性を秘めたアイデアであることがわかりました。
これは、90年代から存在しているHTMLのイメージマップと呼ばれる機能です。
ネットの使用頻度に関する統計をネットで検索してみてください。
これに関する問題の1つは、クリック可能な領域がボタンのように感じられないことです。マウスオーバーなどのイベントに反応しません。
また、画像が正しく描画されない場合、3Dの錯覚を与える境界を使用するボタンとは異なり、領域の境界との十分な区別がありません。
考えられるもう1つのアイデアは、ツールチップを使用して、ユーザーがアイテムをクリックした場合にどうなるかをユーザーに示すことです。