スマートフォンアプリで2つのオプションから選択しますか?

Aug 23 2020

ピザ屋向けのスマートフォンアプリを用意しており、ユーザーは「配達」または「持ち出し」を選択でき、個別に最寄りまたは格安を表示できます。

これらは私が見つけた2つのオプションです:

選択範囲の下に水平線があるので、ユーザーが何を選択したかが非常に明確です。しかし、私は縦線が本当に好きではありませんが、ユーザーは混乱するかもしれません。

また、多くのアプリが水平線を使用して選択範囲を表示しています。私のアプリは、他の誰もが使用しているのと同じ退屈なデザインのさらに別のアプリです

セグメント化されたコントロールについても検討しました。androidにはios13のセグメント化されたコントロールがないため、おそらく次のようになります。

もう少し気に入っていますが、最大の問題は、2つのオプションしか使用できない場合に、どのオプションが選択されているかが明確でないことです。これについては、ここに記載されています。同僚(アンドロイドユーザー)に聞いたら、「白ワイン」が選ばれたと思いました。だから、その混乱があります。

他にどのようなオプションがありますか?

回答

5 SoorajMV Aug 23 2020 at 13:17

上記の2つの画面は「ナビゲーション」の例であり、一般に「選択」には使用されません。

食品を選択できるアプリだとおっしゃっていましたが、ユーザーがカテゴリから複数の食品/飲料を選択したい場合はどうすればよいですか?または、デフォルトの食品がユーザーが好むものであることをどのように確認できますか?

確立されたパターンを使用して、条件に基づいてリストからアイテムを選択できます。

マテリアルデザインによるフィルターチップ: https://material.io/components/chips#filter-chips

Tom Aug 30 2020 at 09:03

提示されているように、私は明快さの観点から下線のアプローチを好みます。何が選択され、何が選択されておらず、どのオプションがペアになっているのかがはっきりとわかります。そうは言っても、才能のあるビジュアルデザイナーは、2番目のパフォーマンスを向上させることができると確信しています(たとえば、選択したフォントを太字にする)。

また、あなたのお気に入り、私のお気に入り、レスポンダーのお気に入りを選んだり、同僚の好みを平均したりしないことをお勧めします。UXスタッフは通常、ユーザーテストに任せるのが最善のマイナーなUIバリエーションについて議論し、議論するのに多くの時間を浪費します。すべてのアプローチを収集し、ユーザーに決定させます。これには「5秒テスト」をお勧めします。各オプションを5秒間だけユーザーに表示してから、何が選択されたかをユーザーに尋ねます。

最後に、より重要であると私が信じるより深い問題、つまりスケーラビリティがあることを付け加えておきます。後で「テイタートッツ」を追加するように求められたらどうなりますか?両方のオプションが壊れます。将来はもっと多くのものを追加すると常に想定してください。したがって、SoorajMVのチェックボックス/フィルターチップアプローチをお勧めします。うまくスケールアップするだけでなく、スケールダウンもします。それはたった1つのオプション(たとえば「ベイクドポテト」)で機能します。

その後、ユーザーはもちろんそれをテストします。

isaac Sep 04 2020 at 03:40

この答えは、編集された写真に関するものです。以前の写真には、オプションのグループ化があまり明確ではなかった製品(ワイン、ジャガイモ料理)の選択が表示されていました。

ここで、ユーザーが行う必要のある選択には違いがあります。

  1. 彼はどのような種類のサービスを望んでいますか?
  2. サービスは近いのか安いのか?

選択肢1と選択肢2が提供する回答の種類には違いがあります。

以下のために選択肢1、ピザは、どちらかのオファーの配信を置くか、そうではありません。キャリーアウトを提供するか、提供しないかのどちらかです。ピザ屋には2つのグループ(配達と持ち出し)があり、両方にピザ屋がいくつかあります。

以下のために選択肢2別のピザの場所に比べた場合にのみ、ピザの場所が最も近いです。つまり、Choice 2は、近いものから遠いものまでのスケールと、安いものから高いものまでのスケールを作成します。「最も近い」をクリックすると、スケールの「最も近い」端に特定の数のピザの場所が表示されます。ユーザーに提示されるとき、その定義された数の近いピザの場所も、最も近いものから最も遠いものの順に表示(ソート)され、最も近いものが最初にリストされます。

これを念頭に置いて、より強力な階層を確立し、ユーザーが必要なものをより迅速に見つけるのに役立てることができます。

最初のレベルでは、場所です。2番目のレベルでは、ピザ店の2つの主要なグループから選択できます。3番目のレベルである近いものから遠いものまでのスケールは、ユーザーがピザの場所を最も近いものから順に並べ替えるか、最も安いものから順に並べ替えることができる並べ替え機能によって確立されます。

ユーザーは注文する前にピザを配達してもらいたいかどうかを知っていると想定できます。これは、ユーザーが近くや価格の前にピザの場所のタイプを定義することを正当化するものです。しかし、それは仮定であり、より適切にテストされます。ピザ店(選択肢2)の近くまたは価格がより重要になる場合は、選択肢1をオプションのフィルターとして(チェックボックスまたはチェックボックス付きのドロップダウンを介して)実装する必要があります。近隣または価格(選択肢2)が選択肢1よりもはるかに重要であることが判明した場合、選択肢2はレベル2に移動する必要があります。次に選択肢1はオプションのフィルターとしてレベル3に移動します。