人に関するさまざまな地理情報を表示するインタラクティブマップに取り組んでいます-働いた場所、教育、休日、自宅の住所など。全部で9つのカテゴリがあります。
場所を表すために色付きの円を使用してデータを表しています(ロールオーバーで公開される場所に関する情報)。
カテゴリが非常に多いので、ある種のカラーコードの凡例が必要になります。
また、ユーザーが必要に応じて、特定のカテゴリまたは複数のカテゴリを一度に表示できる機能も追加したいと思います。したがって、たとえば、ユーザーがジョブ履歴のみを表示したい場合、凡例でそれを選択すると、対応するグリーサークルのみが表示され、その他は約50%の不透明度にフェードアウトします。
私は当初、各凡例項目の横にチェックボックスを配置することを考えていましたが、ユーザーはそれらをオン/オフにできます。上部に「すべて表示」のオプションがあります。ただし、これは私にとっても不格好に感じられ、デバイスに過度のノイズと視覚的な重みを追加します。
それぞれの凡例を、それ自体が微妙なオン/オフ状態のボタンにすることの方が効果的ですか?もう一度、「Alを表示」ボタンを上に配置しますか?
伝説をインタラクティブにする必要がありますか、それとももっと良いテクニックがありますか?
インタラクティブな凡例は良いオプションですが、人々はそもそもインタラクティブであることを知る必要があります。
チェックボックスを使用することは、視覚的に最も魅力的な方法ではない場合があります(ただし、見栄えをよくするためにできることはたくさんあります)、チェックボックスはおそらく最も見つけやすい方法ですあなたはそれを見つけるでしょう。あなたは顧客に多くを説明する必要はなく、それはうまくいきます。
ボタンを使用すると、見た目はきれいに見えても、発見しやすさの点で問題が発生する可能性があります。また、オンとオフを示すために色を変更している場合、それらはおそらく微妙な変更であり、したがって、アクセシビリティーが低下します(色覚障害者または視覚障害者を考えてください)。
見栄えの良いチェックボックスの例として、これが Roger Attrill が作成したものです
AppleがiCalカレンダーアプリケーションで使用するオプションの1つは、色分けインジケータintoチェックボックスを作成することです。
各カレンダーの色はユーザーが変更できます(私はすべての個人用カレンダーに青を、すべての仕事用カレンダーに緑を使用し、必要に応じて他のカレンダーを他の色で使用することを選択しています)。
したがって、この1つのリストは、凡例と表示をフィルタリングするためのメニューの両方として機能します。
リピーター向けに設計している場合、特定の設計要素について、矢印と説明のあるウォークスルーを初めて使用することを検討できます。
これにより、非常にクリーンなインターフェースを使用でき、ユーザーはそれを使用する方法を学習します。
ただし、ユーザーがインタラクティブマップを1回だけ使用する、またはめったに使用しないことが予想される場合、これは最良のオプションではありません!
マッピングアプリケーションを作成しているとすると、Googleマップのドロップダウンは、フォローするのに役立つUIの例になる可能性があります。
NYタイムズのウェブサイトのインタラクティブ機能の一部(私は購読していないので、10ページしか見ることができません)を見るだけで、いずれの凡例もインタラクティブではないことがわかります(ホバーを表示することを除いて、情報より)。凡例をインタラクティブにすると、標準のコントロール(ドロップダウンリストや推奨されるチェックボックスなど)を使用して固定領域を用意するのではなく、ユーザーがさまざまな情報のセットを切り替えようとすると混乱するかもしれません。
さまざまなサービスのチェックボックスはいいです、それらを使用してください。これらは、サービスの種類を有効/無効にするためにマップで見つける一般的なUIです。 iPadのマップアプリ、Googleマップの RATPのマップ …
以前に@Kitが提供したiCalの例もいいです。
各凡例をボタンにしても、「私はボタンです。クリックできます!」さらに、オン/オフの状態を色だけで伝えることはアクセシブルではありません—ここでは最初に盲人を考えますが、これはより一般的です。アクセシビリティの問題。