web-dev-qa-db-ja.com

フローティングフィードバックボタンは、最大限に使用するためにどこに配置する必要がありますか?

enter image description hereenter image description here 私は、次のアクションボタンと前のアクションボタンがブラウザの右下と左下に配置されているプロジェクトに取り組んでいます。フローティングフィードバックボタンがアプリケーションに追加されるまでは問題ありませんでした。このフローティングボタンは、右下に表示される次のボタンとフラッシュメッセージに重なっています。

この問題を解決するには、次の可能なオプションがあります。1.フローティングフィードバックの位置を左下隅に変更します。2.中央と次のボタンと前のボタン3.フラッシュメッセージの位置を右下から左下に変更します。

次のボタンと前のボタンはすでに集中管理していますが、フローティングボタンの位置を左下に入れ替えるかどうかは不明です。ボタンが無視され、ユーザーがボタンをクリックすることはないためです。また、フラッシュメッセージを左下に移動すると、ユーザーが重要なメッセージを無視する場合があります。

4
anjali shakya

ユーザーはフラッシュメッセージで何かをすることになっているのですか、それとも単に何かが起こったことを彼らに説明するだけですか?後者の場合は、右上に移動してみてください。それは周辺視野にあるため、ユーザーがすぐに一目でわかるほど十分に目立ちますが、フローに影響を与えたり、中断したりしてはなりません。

フィードバックボタンについては、ページの下部にさらに通気スペースを設けることで、粘着性があることによるオーバーレイの結果を解決できます。フィードバックやヘルプサービスで最もよく使用される場所なので、右下に置いておきます。アクション可能なボタンを一元化すると、あなたのケースでも機能します。

私が言おうとしていることの画像を追加しました:

http://imgur.com/a/Eoy4g

1
Wendy Wojenka

フローティングアクションボタン以外のUI要素(および配置)を検討しましたか?多くの場合、FABはページの主要なアクションとして意図されています。ここでは、タスクの完了が主な焦点であり、フィードバックは3次的です。

UIで何が機能していないかを理解するための唯一の手段としてフィードバックボタンを利用していますか、それともユーザーのテストと観察にアクセスできますか? Googleタグマネージャー などの操作を追跡するツールを使用することもできます。

ユーザーがフィードバックの提供に集中している場合、それは多くの場合、タスクを完了できないことを意味します。

パターンの規則違反(およびユーザーの期待)に関する注意

新しいエンティティの作成(または追加)によく使用されるMaterial componentを使用しています。

アプリケーション全体でのMaterialの卓越性により、例で使用しているものとは異なる機能(FABのプライマリアクション)を提供する基本的なUI要素の広範な使用によって強化されたパターンと競合しています。

ユーザーは、これらの要素が何をするかについての期待を高めています。

最も一般的なアクションを表すために、画面ごとに1つのフローティングアクションボタンをお勧めします。

フローティングアクションボタンは、昇格したアクションに使用されます。

enter image description here

現在のアプリケーション

上記の例では、ステップスルーがあるようです。焦点は、一連のアクションを実行することであり、それらをタスクに維持するフォーカスを作成します。

現在のところ、フィードバックは画面上の他のボタンよりもコントラストと目立ちがあり、最もアクティブに見えます。

マテリアルオルタナティブ:ナビゲーションバー

重要なガイドライン:ヘルプとフィードバックから

このしこりは助けとフィードバックを一緒に:

ユーザーが支払いや払い戻しなどの緊急の問題のヘルプを見つけやすくするために、アプリバーにヘルプアイコンを配置します。

デスクトップアプリケーションは、デスクトップUIにより多くのスペースがあるため、アプリバーにヘルプアイコンを配置する場合もあります。

以下はGoogle Cloudアプリケーションの例です。ナビゲーションバーの右上にあります。常に表示されますが、他のアクションの邪魔にはなりません。

enter image description here

アイコンとテキストを含むチャットアプリの例を次に示します。

enter image description here

1
Mike M

それを引き出しのようにページの途中まで配置してみませんか?これは、コンテンツに応じて左または右に配置し、Webサイトに合わせて色を付けることができます。

Feedback

0
DarrylGodden

フローティングアクションボタン は素晴らしいイノベーションですが、慎重に使用する必要があります。それらは常に意図した目的を果たすわけではなく、ページ上の他の要素と重なり、ページの残りの部分からフォーカスを引き寄せるので、ほとんどの場合は迷惑です。

FABはアクションを完了するための細かく合理的なアプローチを提示しますが、無視するのは非常に困難です。その結果、それらは全体的なUXにとって悪い動きになる可能性があります。

代替案は何ですか?

  • FABを使用する最良の方法の1つは、パーティションに配置することです。これにより、ボタンがベースになり、他のアクションやページ要素の邪魔にならないようにします(下のスクリーンショットを参照)。

  • スティッキーヘッダーを使用します。アクションが非常に重要な場合は、Dashboardアプローチを使用して、アクションを修正したヘッダーを維持します。

  • 別の方法は、ページの下半分で他の相互作用がないようにアプリケーションを設計することです。スティッキーフッターまたはボトムアクションバーをここで使用できます。

FAB on page partitionFixed footer with primary action

0