web-dev-qa-db-ja.com

使用できないオプション:無効または非表示?

私はこれらの要素を持つフォームを持っています:

  • チェックボックス
  • オプションのリストを含むドロップダウン

ポイントを通貨として利用するeコマースサイトです。チェックアウト中、ユーザーは次のオプションを使用できます。チェックボックスを使用すると、サイトポイントの代わりにクレジットカードで注文を支払うことができ、ドロップダウンを使用すると、配送方法(標準、速達、店頭受け取りなど)を選択できます。すべての配送ユーザーがポイントで支払う場合、方法は利用できますが、ユーザーがクレジットカードでオプションの支払いを確認すると、一部のオプションは利用できません。

UXの観点からは何がベストでしょうか?使用できないオプションを表示して、無効として表示しますか?または、単にドロップダウンにオプションを表示しないのですか?または、より良い解決策はありますか?

7
Amapola

チェックボックスに関係なくメニュー(およびその選択)が存在する場合は、使用できないオプションを非表示にせず、代わりに無効にしてください。

一部のメニューオプションは常に使用可能で、チェックボックスをオンにするとスコープされるようです:それは正しいですか?

ユースケースに関する具体的な情報はあまりないので、私の最初の想定が間違っている場合はお知らせください。

ユーザーは、アプリケーション内のオブジェクト間の関係を理解する必要があります。要素が消え始めたら、これらはアプリケーションの失敗と間違われる可能性があります。

mockup

download bmml sourceBalsamiq Mockups で作成されたワイヤーフレーム

これはChromeのドロップダウンメニューにも表示されます。

enter image description here

Appleのヒューマンインターフェイスガイドラインから:

メニュー項目が使用できない場合でも、メニューを有効にしてください。コマンドが使用できない場合でも、すべてのメニューの内容を参照して、コマンドがどこにあるかを知ることができることが重要です。

おそらく、以下のこのアドバイスは、Nielsen Normanのフォームドロップダウンにもう少し適用されます。

使用できないオプションは削除せずにグレー表示します。選択できない項目は表示されたままにする必要があります。追加のUXクレジットについては、グレー表示されたオプションの上に1秒以上カーソルを合わせた場合、短いバルーンヘルプメッセージを表示して、そのオプションが無効になっている理由とアクティブにする方法を説明することを検討してください。無効化されたアイテムが削除されると、インターフェースの空間的な一貫性が失われ、学習が困難になります。

5
Mike M

Webフォームのドロップダウンリストの場合、何らかの方法でユーザーに関連するオプションのみを表示し、それ以外のものは注意散漫になります

ユーザーが無効になっているオプションを知っていることに何らかの価値がある場合。これは、無効化されたオプションを表示するよりも、ユーザーが対話、プロセス、製品の提供をよりよく理解するのに役立ちます。

私たちのアプリケーションでは、エントリレベルの製品の資格のみを持っているユーザーに完全な製品リストを表示することが多いため、ユーザーはより大きくより良いオプションの存在を認識しています。

また、この質問に対するMike Mの回答で示唆されているように、利用できないオプションがコンテキストにとって重要であるUIの状況(メニューなど)がいくつかあり、それらは無効として表示されるべきです。

しかし、あなたの場合、Webフォームのドロップダウンで、利用できないオプションを認識しているユーザーに価値がない場合、それらのオプションを見たことがない場合、インタラクション(およびこのような将来のインタラクション)はまったく同じになるでしょう。その後、それらは不要であり、非表示にするか削除する必要があります。

たとえば、チェックボックスがオペレーティングシステムの指定を要求し、ドロップダウンにソフトウェアのリストが含まれている場合、選択したオペレーティングシステムに関係のないソフトウェアオプションを非表示にすることは理にかなっています。

4
dennislees

詳細を知らなければ難しいことですが、ここでは、オプションを非表示または無効にするための「ベストプラクティス」に準拠する以上の問題が発生する可能性があります。最も重要なことは、ユーザーがチェックアウト全体を通じて情報に基づいた進捗状況を作成できることです。

ユーザーが最初にチェックボックスまたはドロップダウンを使用することを期待しているかどうか、またはこれらが同時に使用可能であることがこの競合の原因となっているかどうかは不明です。順序付けされているが、簡単に修正可能なフローである必要があります。

2つの可能なイベントの順序を検討してください。

1)チェックボックスで支払いオプションを選択し、ドロップダウンで配信オプションを選択します。

これは間違っているようです。最終的な価格がわかったら、人々は支払いオプションを選択します。優先オプションは、ユーザーに十分なポイントがないか、クレジットカードを使用したくないことを意味する場合があります。

配送方法により、取引が成立または不成立になります。今週末の迅速な配達ができないなら、私は興味がありません。最初に支払い方法を選択してから、配信オプションを選択するオプション(おそらく、以前に使用したもの)が拒否された場合は、放棄する可能性があります。

2)配送オプションを選択してから、支払い方法を選択します

これが通常の方法です。バスケットにアイテムを追加し、配送方法を選択し、クーポンを追加し、最後に合計が得られたときに、実際の支払いの詳細を入力する直前に支払いタイプを選択します。

ここでは、ユーザーはまだすべての配信オプションを持っています。ユーザーはまだクレジットカードで支払うことを期待している可能性があるため、次のステップで支払いオプションを静かにまたは目に見えない形で拒否すると、ユーザーが混乱する可能性があるため、配信方法を選択する時点でユーザーに通知する必要があります。

一部の配信オプションがクレジットカードオプションを使用できないことを意味する場合は、そのことを事前に示す必要があります。そうすれば、支払いオプションに関しては驚きはありません。

これを行う1つの方法は、デフォルトで配信オプションを選択することです。これにより、両方(またはすべて)の支払いオプションが有効になり、ユーザーに最も多くの選択肢が与えられます。次に、ユーザーが配送オプションを無効/非表示にする配送オプションに変更すると、支払いオプションの変更が表示されます。ユーザーは、影響を見たので、必要に応じて配信オプションを再び切り替えることができます。

例として、XCartは非常によく似た動作をします。以下の例では、ユーザーは最初に「店舗で受け取る」または「宅配便」のオプションを表示します。デフォルトの「店内」オプションは、現金およびカード決済オプションが利用可能であることを意味します。ユーザーが宅配便オプションに変更した場合、(この場合)現金オプションのみが利用できます。

enter image description here

enter image description here

それでも、「より多くのお支払い方法の配信オプションを変更」できることをユーザーに個別に示すこともできます

0
Roger Attrill