web-dev-qa-db-ja.com

非ボタンコントロールのアクションを伝達する最良の方法

質問の要約:オブジェクト自体のアクションを詳しく説明することができない場合に、ユーザーがオブジェクトをクリックするとどうなるかをユーザーに伝えるためのいくつかの推奨されるアプローチは何ですか? (つまり、オブジェクトはクラシックボタンではありません)。


オブジェクトにテキストタイトルがある場合、私が知っている従来のアプローチは、タイトルテキストを単にハイパーリンクに変えることです。しかし、従来のウェブサイトではない場合、ユーザーがクリックすると実際に何が起こるかわからないかもしれません。 (対照的に、Webサイトの場合、「別のページを参照する」パラダイムは非常に明確に定義されているため、ハイパーリンクはWebページで適切に機能します)。

具体的にはここに私の状況があります:

  • Google Analyticsのホームページと同じように、約20〜30種類のメジャーインジケーターのあるページがあります。各インジケーターには、スパークライントレンドチャート、メジャーの現在の値、および前の期間からのデルタ(変化)を示す小さな上/下矢印があります。

  • 各インジケーターに対してユーザーが実行する必要がある2つのアクションがあります。

    • (1)インジケーターを展開して詳細を表示できる(メジャー、評価などの追加の統計を表示)-この展開はコンテキスト内で発生し、ユーザーを別のページに移動しません。
    • (2)インジケーターを選択し、ワークフローのステップ2である別のページに移動します。ここで、ユーザーはインジケーターをさらに評価および調査できます。 2番目のアクションは、ユーザーが最も頻繁に行う主要なアクションです。

上で述べたように、インジケーター名をハイパーリンクにして、クリック可能であることをユーザーに通知するだけです。ただし、何が起こるかわからないままユーザーが何かをクリックしなければならないようにしたくはありません(実際、ユーザーは特に別のページに移動します)。これは、ユーザーにラベルのないボタン!

ユーザーに伝えたい重要なことは、インジケーターを選択することで、分析ワークフローを開始することです。このワークフローは、インジケーターの「評価」から始まります。上記のように、インジケーターに二次的な「拡張」アクションもあるという事実により、制御はさらに複雑になります。

1つの明らかな解決策は、各オブジェクトの横に「評価」ボタンを配置することです。ただし、ページに20〜30個の「評価」ボタンを配置しないようにします(20〜30個のインジケーターがあるので参照)。

  • オプションA:これを解決する1つの方法は、単にツールチップに依存することです。言い換えると、インジケーター領域全体がクリック可能であり(マウスオーバーでエリアを強調表示/アウトラインで示す)、マウスオーバーするとツールチップが表示され、「インジケーターxを評価」と表示されます。

  • オプションB:私が考えた別のアプローチは、マウスオーバーで「評価」ラベルを表示することかもしれませんが、ツールチップではなく、ラベルをハイライトボックスの一部にするので、ツールチップと非常に似ています。フローティングオーバーレイではなく、インジケーターオブジェクトにもう少し統合されていることを除いて、デザイン。

  • オプションC:これは間違っているように思われますが、議論のために言及します-「評価」ボタンのアイデアに固執しますが、マウスオーバー時にのみボタンが表示されます。ユーザーが「マウスオーバー」領域からマウスカーソルを移動するときに、表示されたコントロールが消える可能性があるため、「マウスオーバー、コントロールを表示してからクリック」操作は推奨されないことを読んだことを思い出しますオブジェクト自体。

2番目の「インジケーターの展開」アクションについては、各インジケーターの横に小さな「+」または「詳細情報」コントロールを単に配置することを考えていました。

BまたはCが違反しているUXデザインルールはありますか?最良の(またはより良い)アプローチに関する推奨事項はありますか?

参考までに、アプリケーションが現在行っているのは、インジケーター拡張内に評価ボタンを配置し、インジケーター全体を拡張クリックオブジェクトにすることです。ユーザーが最初にインジケーターを展開する必要があるため(セカンダリワークフローであり、必要でない場合もあります)、[評価]ボタンを取得する必要があるため、これは明らかに間違っています。

2
M.A.X

概要

適切なアフォーダンスを取得してナビゲーションアクションを削減する方法は、「評価」する2つのルートを提供することです。 1つのルートはアフォーダンスの良いボタンを使用し、もう1つのルートはスパークラインから直接です。組み合わされた結果は、発見可能なUIです-ユーザーは評価機能を見つけます-そしてそれは効率的です-経験豊富なユーザーは最小限の手順でそれを使用できます。

これを説明する

master-details パターンを使用して、 Assess ボタンを1回押します。モックアップは、変更されたツリーを使用してマスター詳細(その1レベルのみ)を実行します。ここでは、ベルギーの詳細が展開されています。

Sparkline Master-Details

[+]ボタンをクリックすると、開いているアイテムが閉じ、その1つのスパークラインアイテムの詳細が表示されます。 Assess ボタン。これにより、ボタンの急増を回避できます。

他の場所でのアフォーダンスを改善するには、スパークライン自体にスタイルの変更にカーソルを合わせて、クリックされたときに何かを行うことを示します。ホバーの通常の2.5秒よりも長い遅延の後にツールチップを表示できます。ツールチップは、経験豊富なユーザーの邪魔にはなりませんが、インターフェイスをゆっくりと探索する一部の新しいユーザーに追加のヒントを提供します。ツールチップはオプションです。カジュアルユーザーは既に「評価」するための合理的な方法を簡単に見つけることができるため、これに依存することは避けています。

必要に応じて、代わりにインジケータ名にハイパーリンクまたはボタンを作成し、[+] [-]コントロールから少し離して、同じように遅いツールチップを使用してもかまいません。

ツールチップよりも重要な点は、「評価」アクションを元に戻すことができ、特に時間がかかる場合は簡単に停止できるため、インターフェイスを安全に探索できることです。

5
James Crook