web-dev-qa-db-ja.com

優れたモバイルUXの議論:スクロールまたはクリック

ここにステージがあります:

Windowsモバイルに検査アプリがあります。 HTML版を検討中です。多数の検査があり、かどうかについて内部の議論があります

  • すべての質問はデフォルトで開いている必要があります、または
  • 前の質問に回答するときに、各質問を開く必要があります。

これは3つの質問のモックアップですが、20もの質問があると想定できます。Inspection/Form Mockup

議論されたポイントのいくつかはここにあります:

オプション1.ほとんどの場合、質問は連続ユーザーであり、次の質問を見る必要はありません。ボタンを押す必要があるようにすると、システムが使いにくくなるだけです。

オプション2.ユーザーは、必要のない場合でも、すべての質問を簡単に見られるようにしたいと考えています。さらに、ボタンをクリックして質問に答えるには、次の質問を表示するためにスクロールを要求するよりも簡単です。

オプション3.妥協し、両方のオプションを提供します。

誰がどちらが優れているかについての研究がありますか?私は常にオプション2と3がユーザーがハンドヘルドデバイスで好むものである(そして、スクロールホイールを備えたコンピューターのようにスクロールが自由ではない)と仮定していました(そして、私はそれをどこかで読みました)。

15
Chris Kluis

オプション1は、指定した理由により、優れたサウンドになります。スワイプ/スクロールするよりも、タップして次の質問に進む方が簡単でエラーが発生しにくくなります。一般的なルールは、コンテンツを任意に分割しないようにスクロールを使用することです。あなたの場合、一度に1つの質問全体しか画面に表示できない場合は、恣意的ではありません。 Usability.govのWebサイトの スクロールとページング に関する推奨事項で引用されている関連研究が見つかるかもしれません。

しかし、ユーザーは、「必要がない場合でも」すべての質問を表示できることを望んでいるとも言えます。それは観察ですか、それとも仮定ですか?スクロールを提供する場合、ユーザーは以外をスクロールして次の質問にいつ進みますか?

ユーザーが次善の行動を望んでいるのを観察するときはいつでも、より多くの調査を行って理由を見つける必要があります。これにより、デザインに含める必要があるものがわかります。スクロールをサポートする必要があるとは限りません。例えば:

  • ユーザーは常に質問に順番に回答するとは限らないため、まだ回答していない質問を表示できるようにしたいと考えています。この問題をスクロールするためのより良い解決策は、回答された質問の質問タイトルのチェックマークです。

  • たぶん、ユーザーは現在の質問に答えるために以前の答えを見る必要があります。より良い解決策は、ユーザーの回答を質問のタイトルに要約するか、別の質問の回答を一時的に見る場所を失うことなく手段を提供することです(たとえば、指を押している間だけ回答を表示するコントロール;指を離す)画面が現在の質問に戻ります)。

  • おそらく、ユーザーはすべてをコミットする前に回答を確認したいと思うかもしれません。より良い解決策は、最後の質問の後の要約画面です。また、彼らがいつでも使用できる「ズームアウト」コントロールを提供することもできます。

  • ユーザーは、現在の質問への回答方法を判断するために、回答する次の質問のプレビューを求めているかもしれません。より良い解決策は、次の質問に必要な詳細を表示するが、後続の(および前の)質問は完全に折りたたまれている魚眼ビューです。

  • たぶんユーザーはスクロールを楽しむだけです。おそらく、同じレベルのエンターテインメントを提供するために、同じように興味深いアニメーションで各質問を開くことができます。

3番目のオプションは、降伏であるため、妥協案ではありません。何をすべきかわからないため、設計上の決定をユーザーにプッシュします。それはめったにうまくいきません。 3番目のオプションは、十分に理解されている問題の効果的な解決策である場合にのみ追求してください。たとえば、ユーザーの調査で次のことがわかった場合、

  • 2つの異なるユーザーグループ、環境、またはサブタスクがあり、一方はスクロールが優れているが、他方は悪い(例:回答を提供することと回答を確認すること)。

  • ユーザーは、必要に応じてすべての質問を折りたたんだり開いたりするタイミングと方法を理解します。

10

2番目のデザインは、最高のユーザーエクスペリエンスを提供する方法に最も近いと思います。

膨大な数の質問と回答のページで訪問者を圧倒すると、タスクを開始しても訪問者を先延ばしにする可能性が高いため、オプション1は最適なルートではない可能性があります。 3番目のオプションでは、すべてを開く/折りたたむオプションが表示されますが、これはページの上部でのみ使用できます。 20問中4問に回答したら、すべてを開いたままにしたい場合は、トップに戻る必要があります。彼らはここの質問リストで彼らの場所を失うでしょう。

2番目のデザインの場合。現在の質問に答えたら、次の質問が自動的に拡大すると仮定して正しいですか?これは、ユーザーにフォームから一気に選択肢を誘導するのではなく、一度に1ステップずつユーザーを誘導するのに最適なルートです。

ただし、技術的な観点からは、これがどれほど適切かはわかりません。すべてのデバイスが対応できるわけではないJavaScriptが必要になります。そのためには、このアプリ/ HTMLサイトで作業するために何が必要になるかについて、いくらか検討する必要があります。

6
JonW

1つのリスト内の20の多肢選択問題は、特に小さなデバイスで表示した場合、非常に圧倒される可能性があります。 20の質問を論理的なサブセクション、テーマ、またはその他の自然なグループに分割できますか?

その場合は、質問をグループごとに展開するか、複数のタブまたはページを使用できます。これにより、1つまたは20つの質問を選択する代わりに、いつでも4〜5つの質問を開くことができます。

質問をグループ化することが望ましくない場合は、おそらく2番目のオプションを選択します(一度に開く質問は1つです。前の質問を完了すると、次の質問が自動的に開きます)。ユーザーが以前の答えを本当に見る必要がない限り:その場合、すべてを一度に表示します。

1
Marielle

どのデバイスをターゲットにしていますか?まともなタッチスクリーンがあればスクロールは無料で、古いデバイスではすでにネイティブアプリを持っています。

JavaScriptを適切にサポートするブラウザーで携帯電話をターゲットにしていると仮定すると、マルチページインターフェイス(実際には、JavaScriptを使用したトランジションを持つ1つのHTMLページ)を使用します。

  • 質問のリスト-必要に応じてユーザーに概要を提供します
  • 質問ごとに、前/次/リストのオプションと大きなボタンを表示します。おそらく、進捗状況を示すために「質問2/3」をどこかに含めてください。回答済みの質問を表す色付きのボックスの行もうまく機能します。

これらのページ間の遷移は完全にクライアント側なので、基本的にはスクロールと同じですが、2つの質問の半分が表示されないことを除きます。ボタンが煩わしいのは、ボタンが遅いワイヤレス接続でサーバーの往復をトリガーする場合だけです。

1
Tom Clarkson

この場合、提案した3番目のオプションが最もユーザーフレンドリーです。他のいくつかの回答では、人々がこのアプリケーション専用のデバイスを購入する可能性が高いと述べています。これは、それらが高度に訓練されていることを示しているようです。そのため、ユーザーがアプリケーションを好きなように操作できるようにするボタンは、アプリケーションに慣れるとすぐに表示されます。

初心者は質問の折りたたみやページングなどの最初のアプローチに慣れているかもしれませんが、しばらくすると、パワーユーザーは不要なタップに不満を感じるようになります。

空港を一歩一歩案内されるようなものだと考えてください。最初の数回はあなたの手を握ったのはいいことです。その後、彼らはあなたがすぐにあなたが行く必要がある場所に行くのを妨げています。

0
William