使い過ぎないで! 適切なフローティングアクションボタン使用でUX改善

フローティングアクションボタン(以下FAB)とは、アンドロイドアプリの操作によく利用されているアイコンのこと。ユーザーインターフェイス上に漂う丸い形のボタンで、メニューを呼びだせます。FABは非常にシンプルかつ実装が簡単なUIエレメントですが、たびたび誤った設計で実装されています。

この記事では、最も効果を発揮するFABの作り方をご説明します。

どんなときにFABを使う?

重要度の高いアクションのために利用するのが良いでしょう。

アプリの本筋と関わりの強い機能や、利用頻度の高い機能を強調するのにぴったりです。

音楽アプリのUI

FABは上のスクリーンショットのように、アプリの代表的な機能を表現するのに長けています。この画面では、音楽アプリのなかで最も利用頻度の高い「一時停止」や「再開」、「再生」のアクションを選択できます。また、このアプリが音楽アプリであることを、ユーザーに訴えかける役割も果たしています。

ウェイファインディングツールとして使うのが最適

ウェイファインディング(Way-finding)とは、ユーザーをより円滑にゴールまで誘導するためのデザイン、構成を指す言葉です。

FABは「次に何をするべきか」をユーザーに直感的に伝える手がかり、ウェイファインディングツールとしても活躍します。Googleの調査によると、ほとんどのユーザーは、不慣れな画面でもFABを操作しなければならないということがひとりでにわかっているのだとか。したがって、FABはアクションへの道標として非常に有効です。

以下はTwitterの画面ですが、ツイートをするためのウィンドウを開くのに、FABが使われています。

twitterのUI

すべての画面にFABを使う必要はない

FABはカラフルで、浮き上がっていて、グリッドから逸脱した存在です。目立つツールだからこそ、促進したいアクションのためだけに利用してください。

試しに、アンドロイドの『Googleフォトアプリ』のギャラリー画面を見てみましょう。ギャラリーを開くと、検索のためのFABが表示されていますが、このFABには2つの問題があります。

ほとんどのユーザーにとって検索機能はさほど重要ではなく、使う頻度は少ないです。なぜなら、重要なのは写真を見ることだから。FABの存在が、ユーザーの注意をメインコンテンツから逸らすことになります。

GoogleフォトのUI

設計の初期段階で主要なアクションを洗い出すのが難しい場合、まずはタスクを簡略化し、ユーザーインターフェイスにFABが必要かどうか5分間考えてみましょう。5分経っても主要なアクションを決めかねてしまったなら、その画面にFABは必要ないということです。

FABのベストプラクティスとは?

ここからは、FABの効果を最大限発揮するための使い方をご紹介します。

ミステリーミートナビゲーションは無視する

ミステリーミートナビゲーションとは、見ただけでは次のアクションが予測できず、次のアクションを知るにはタップ操作をする必要があるナビゲーションのことです。『That Suck』の創始者であるビンセント・フランダースがこの言葉を作ったと言われています。

FABはアイコンだけのボタンなので、非常に理解しにくいことが課題です。たしかに、ユーザーに広く認識されているアイコンは稀です。

たとえば、下のスクリーンショットにあるボタンがどのようなアクションか推測出来ますか?

分かり辛いFAB

タップするまでわからないでしょう?

このボタンが、まさにミステリーミートなのです。
「タップすればわかることだ」と、この問題を軽視する人もいます。
たしかにタップすればアクションを理解できますが、アイコンの意味を覚えておく必要があるため、ユーザーに認知的負荷がかかってしまいます。

FABは1画面に1つだけ

FABは非常に人目を引くので、使うなら1ページに1つまでです。

一つのUIに複数のFAB

ポジティブなアクションに使う

FABは作成やシェア、探索などのポジティブアクションを表します。
次のような使い方は避けましょう。

  • 削除やアーカイブなどのネガティブアクション。
  • 曖昧なアクションやアラート。
  • テキストの切り取りを行うなどの制限されたアクション。
  • ツールバーにあるべきアクション、たとえば音量の操作。

分かりにくいFABと分かり易いFAB

アニメーションとの相性は?

FABはモーションを加えやすいのが特徴。選択肢の増減やボタン自体の変形に対応できます。

ボタンの数を増やす

ひとつのFABから、新たなアクションを示すFABを展開させたり、戻したりすることができます。FABは画面上を大胆に移動しても違和感がないのがいいですね。しかし、ここに並べるアクションは相変わらず主要なもので、それぞれに関連性がなければいけません。また、展開されるFABの数は、元のFABを含めて3~6に収めると美しいです。

フローティングアクションボタン

大胆に変形するFAB

FABそのものがプレビュー画面や設定画面へと変化することがあります。これはユーザーの画面遷移を楽にするため。以下のアニメーションのように、ユーザーの感覚を導き、画面上で新たな展開までの因果関係をわかりやすく示すことができます。

フローティングアクションボタン
Ehsan Rahimi / Dribbble

スクロール中にFABを消す

ユーザーがコンテンツを見るのを邪魔しないように、スクロール時にはFABを非表示にすると親切です。アンドロイド向けの中規模アプリでは、一度隠れたFABが、スクロールの終点までいったときに再表示されるといったテクニックをよく利用しています。ユーザーがボタンを使いたいタイミングを見極めましょう。

フローティングアクションボタン

Juliane Lehmann / lambdasoup

まとめ

FABを使うときは、慎重に設計しなければならないということをご理解いただけたでしょうか。導きたいポジティブアクションはただひとつ、最も主要な機能にまで落とし込んでください。

アプリ設計の現場で、実践してみましょう。

(翻訳:Kazunari Mino)

SHARE

RELATED

  • お問い合わせ
  • お問い合わせ
  • お問い合わせ