web-dev-qa-db-ja.com

マテリアルデザインのフローティングアクションボタンは悪いUXを提供しますか?

Googleの マテリアルデザイン は、主にクリーンなビジュアルと優れたユーザーエクスペリエンスに焦点を当てていますが、私が疑問に思った機能が1つあります フローティングアクションボタン

これは、Googleの多くのAndroidアプリの右下に表示される大きなボタンです。ボタンはコンテンツの上部に浮かびます。

私には、これは視覚的に見た目が悪く、コンテンツの表示を妨げる​​と思います。私は、コンテンツの上に浮かぶのではなく、ボタンのバーにあるボタンに慣れています。もう1つの欠点は、フローティングボタンが1つしかないため、最も一般的なアクションを1つしか配置できないことです。

一方、このタイプのボタンは、ボトムバーでコンテンツをブロックしないことにより、追加の画面スペースを提供します。また、頻繁に押すボタンを画面の下部近く、大きなデバイスではユーザーの指の近くに配置することもできます。

このタイプのボタンは、ユーザーに優れたエクスペリエンスを提供しますか?他のアプリで使用すべきですか?それとも、これはGoogleの設計上の悪い決定でしたか?この種の実践は、デスクトップおよびWebアプリケーションにも拡張する必要がありますか?あなたの答えを裏付けるために、推論、さらに良い研究や記事を提供してください。

37
Keavon

慣れていないからといって、いい経験になるはずがないと言ってしまいがちです。変化は必然的に良い経験になると思います...快適ではありませんが、最終結果は実際には以前よりも良いかもしれません。

私たちはツールバーに慣れていますが、メニューで迷ったり、ボタンの列で混乱したりする頻度はどれくらいですか?単一のフローティングアクションボタンは、多くの点で、ユーザビリティの観点からの改善です。アプリのデザインはより慎重に検討する必要があり、ユーザーの可能なアクションは、単一の最も顕著な機能に要約する必要があります。画面の残りの部分が消費/読み取り用であると想定すると、ボタンは作成用でなければなりません。その配置は注意を引くために重要です。邪魔になる場合、下にスクロールするときに非表示にすることもできます

場合によっては、受信トレイアプリにあるように、ボタンがスピンアウトして他のいくつかのオプションを公開することが適切です。

だから、いや、マテリアルデザインがユーザーエクスペリエンスの低下とは言えません。実際には、より慎重に設計されたユーザーエクスペリエンスが促進されます。

いくつかの情報源を引用しながら、これについて詳しくお話ししたいと思いますが、現時点ではモバイルです。

29
Matt

良い点:フィットの法則:

悪い点:Googleのマテリアルデザインの最大の欠点は、ボタンを押したときのフィードバックにあります。現実の世界では、押されたボタンは背景に後退します。 GoogleのLollipopでは、反対のことが起こります。ボタンを押すと、ボタンが浮動します。これは、ユーザーが慣れていることに反しています。 pressed button

19
GRVNT

場合によっては、背後にあるものと混ざり合うのを見ることができましたが、これは悪いことです。

左利きの場合でも、親指で届く距離によっては、ボタンが届かない場合があるため、ボタンを押すためにデバイスの持ち方を変更する必要がある可能性があります。

7
ipavl

オブジェクト指向のアクション

フローティングアクションボタンを実装するマテリアルデザインのすべての例で、アプリ内でオブジェクト指向の概念が機能しているのを見てきました。

  • メール(受信トレイ)
  • ドキュメント(ドキュメント/ドライブ)
  • ニュース(ニューススタンド)
  • 方向(マップ)

間違いなく、単一の最も重要なアクションの概念は、アプリが処理する主要な概念オブジェクトを取り巻くユーザーアクションの適切な階層を作成し、誤って(または意図的に)ツールにフォーカスを提供します。

これは、ほとんどの場合、ユーザーが間違いなくアプリを開くための目的であるため、多かれ少なかれ永続的に表示される状態でアクションを実行し、視覚的慣習を使用する必要があることを意味します- 検索その1つのアクション。

ガイドラインを厳守しないでください

「もう1つの欠点は、フローティングボタンが1つしかないため、最も一般的なアクションを1つしか配置できないことです。」

興味深いことに、それが表示されるのは、提供された基本ルールに厳密に固執した場合に限られます。ただし、Googleはメールアプリの受信トレイにマテリアルデザインを実装することで非常に独創的です。見る: enter image description here

プライマリアクションボタンにカーソルを合わせると、状況に応じたアクションや関連するアクションが明らかになります。

4
yellow-saint

どちらかと言うと難しいです。私達は賛否両論をリストし、意見を提供することができますが、結局のところ、それは非常に意見に基づいたものになるでしょう。

そうは言っても、スクリーンショットの判断には注意してください。 UXで私たちが直面しなければならない大きなハードルは、静的なドキュメント(ワイヤフレーム、モックアップ、スクリーンショットなど)に基づいたフィードバックです。

これらのいずれも、相互作用のニュアンスを提供しません。多くの場合、これらのニュアンスは、エクスペリエンス全体のメイクまたはイットオアブレークです。

私は知っているではありませんが、あなたが述べた問題は実際の使用によって大幅に軽減されるという強い予感があります。フローティングボタンは静的であり、コンテンツは静的ではないため、静的な画像を見るときに「見る」ことができないレベルのコントラストを提供します。

2
DA01

透明性の使用はあなたが述べたコンテンツのブロッキングの問題を克服できると思います。スクロールウィンドウを備えたモバイルアプリで実際に動作することを確認しました。

真実はモバイルデザインにあり、アクションボタンを配置する場所を見つけることは本当に困難です。私はこの目的のためにFABが本当に好きで、彼らは本当にうまくいくと思います。残念ながら、それはデザインをIOSに転送するときにもう一度考えなければならないことを意味します!

A picture of a Balsamiq mobile mockup with a transparent floating action button

0
Lisa Tweedie

FABのいくつかの長所:

  • ボタンの重要性を区別する方法。これにより、ユーザーは最も重要なアクションが何であるかを知ることができ、認知負荷が軽減されます。
  • 最も一般的なアクションの明確なハイライト。これは、ユーザーが次のステップ(ほとんどの場合)を実行するのを支援し、認知負荷を軽減します。
  • より良い到達可能性。FABが表示される場所はさまざまですが、最も一般的な配置は、ツールバーよりも到達可能な場所です。また、ツールバーとは異なり、ボタンを配置する場所をより自由に設計できます。

とはいえ、FABはすべてのユースケースに適しているわけではありません。場合によっては、明確な主要なアクションがないか、ボタン自体に注意を向けすぎているか、ボタンが邪魔になっていることがあります。たとえば、フルスクリーンのビデオを視聴している場合、FABが私のビューをブロックしたくないでしょう。自分に適しているかどうかを確認するには、自分で試してみてください。

また、FABのようなボタンはマテリアルデザインに固有のものではありません。それはマイクロソフトによって使用されました:

Microsoft Photo Viewer

Windows Media Player

IE 11

そしてFirefoxによって:

enter image description here

いずれのコンテンツもオーバーレイしないことは事実ですが、FABはコンテンツをオーバーレイする必要はありません。 guidelines には、コンテンツがオーバーレイされない例がいくつかあります。 「マイファイル」アプリまたはメディアプレーヤー。また、コンテンツがオーバーレイされる場合、Googleはアプリケーションを注意深く処理し、スクロール可能な領域を増やしてFABに対応させることでコンテンツを表示できるようにします。

0
Tin Man