web-dev-qa-db-ja.com

一度に1つしか選択できないときに、1つではなく2つの代替レイアウトボタンを使用する理由

Spotifyデスクトップアプリを見ていて、2つのボタンを使用して、アーティストのアルバムをグリッドレイアウトまたはリストレイアウトのいずれかで表示していることに気付きました。

下記参照:

enter image description here

一度に1つのレイアウトしか選択できない場合、レイアウトを切り替えるボタンを1つだけ使用するのではなく、2つの別々のボタンを使用するのはなぜですか。

これはデスクトップアプリケーション用ですが、デスクトップとモバイルの両方でエクスペリエンスを統合するためには、1つのボタンを使用する方が良いでしょうか。

45
user1

注意点がいくつかあります。1。機能の発見可能性、2。ラベルがない場合のアイコンの解釈、3。トグル(またはステートフルボタン)が表す状態の混乱。

1.発見可能性:視界の外、心の外

'Obvious always wins' のLukewは、メニュースペースを争うときにエンゲージメントが失われることを挙げています。

彼のモバイルの例には、あなたが参照するデスクトップアプリのケースよりもはるかに多くのスペースのトレードオフが関係しています。

トグルメニューは「よりきれい」に見えましたが、変更によりエンゲージメントは急激に減少しました。根本的な原因は?トグルメニューの背後に隠れていたため、アプリの主要なセクション間を移動する必要がなくなりました。

2.アイコンのデコードは難しい場合があります。一度に1つしか表示されない場合はさらに多くなります。

ユーザーがデコードしなければならない2つのアイコンがありました。ユーザーを支援するテキストラベルはありません。

これでアイコンが1つになります。これは、メモリ税があることを意味します。ユーザーは次のことを覚えておく必要があります。

  • 現在表示されているアイコンの意味(上にカーソルを移動しないで)
  • 以前表示されていたアイコンとは何か(およびその意味)

3.このアイコンは、現在のビュー(状態)を表しているか、それを選択して変更したいビュー(意図)を表しているか?

2つのビューコントロールを1つのボタンに圧縮する場合、いくつかの問題があります。

enter image description here

Alan CooperはこれについてAbout Faceでさらに説明しています。これは「フリップフロップボタン」と呼ばれています。

フリップフロップコントロールの問題は、ユーザーに現在の状態を通知するという、すべてのコントロールの2つ目の義務を果たせないことです。状態がオフのときにボタンに「オン」と表示されている場合は、設定が不明です。しかし、状態がオフのときにオフになっている場合、オンボタンはどこにありますか?それらを使用しないでください。ボタンやメニューにはありません!

93
Mike M

主に発見可能性を支援します。これは、オプションが存在すること、オプションとは何か、現在アクティブなオプションを明確に示しています。

13
SThor

他の回答と一緒に、リストビューボタン自体はハンバーガーメニューのように見えることを追加します。サイズが小さいため、行の横にある小さな丸い点に気付かないからです。グリッドビューボタンは、リストボタンの目的をより明確にするコンテキストを追加します。

6
Macpeters

発見可能性に加えて、UXの重要なポイントは Accessibility を念頭に置いて設計することだと思います。

アクセシビリティとは、障害を持つ人々のための製品、デバイス、サービス、または環境の設計です。アクセシブルなデザインの概念とアクセシブルな開発の実践により、「直接アクセス」(つまり、支援なし)と「間接アクセス」の両方が保証され、個人の支援技術(たとえば、コンピューターのスクリーンリーダー)との互換性を意味します。

多くの場合、スクリーンリーダーやその他のアシスタントツールは、代替テキスト、ホバーテキスト、その他のUIメタデータに対して機能します。この概念を設計の考慮に入れる場合、2つの異なるボタンを提供する方が簡単なアプローチです。

私の経験では、設計は、発見可能とアクセス可能のすべてのもののバランスをとるという点で、単に最大のネットを投げかけます。

5
CzarMatt

「リコールよりも認識」が良い答えだと思います。
https://www.nngroup.com/articles/recognition-and-recall/

認識とリコール

認識と再現の大きな違いは、記憶の回復に役立つ手がかりの量です。想起は、認識よりも少ない手がかりを伴います。

ハーマン・メルビルがモービー・ディックを書いたかなどの質問に答えますか?認識が必要です。提供された情報が正しいかどうかを認識するだけです。代わりに、誰がモビーディックを書いたのかと尋ねたら、想起のプロセスを使用して、記憶から正しい答えを取得します。

より多くの手がかりが含まれるため、認識は想起よりも簡単です。これらの手がかりはすべて、アクティブ化をメモリ内の関連情報に広げ、回答のアクティブ化を高め、それを選択する可能性を高めます。これが、回答者が回答を考え出さなければならない未解決の質問よりも多肢選択式の質問の方が簡単な理由です。

5
xul

「クリックさせないで!」 -UXデザインの自明性。

不動産、ホワイトスペース、コンテンツ、コンテキストの間にはバランスがあります。開発者はアプリケーションが何ができるか知っています...ユーザーは知りません。アプリケーションでのユーザーの不要なクリックの数は犯罪です!

アイコンを追加すると、ユーザーエクスペリエンスが向上します。

  • ユーザーのクリック数を減らします。
  • 機能を公開して、ユーザーがそれを探す必要がないようにします。

この場合、はい、両方のアイコンを表示することをお勧めします。

今いくつかのバランスのために:

  • メニューを選択すると機能が非表示になり、不満が生じます。それらは必要ですが、慎重に使用してください。
  • 反対も当てはまります。多くのアイコンが不動産を乱雑にし、ユーザーエクスペリエンスを妨げます。

例:もともと、Windows Officeにはたくさんの機能が付いていましたが、機能はたくさんありましたが、選択メニューの下には隠されていました。 MSフォーラムは常に機能を要求しましたが、それがどこかの選択メニューの下にすでに存在していることを発見しただけです。 MSは、UXと "リボン"メニューのバランスを再調整しました。

1
user123666