mixiグループ Advent Calendar 2017 4日目の記事です。
Qiitaに書こうかと思っていましたが、完全にポエムになったので自分のブログに書きます。長いです。
時間がない人向けに結論だけ
・人間の目線は画面左上から右下に動く
・なので、左上→右下に目線が流れる動線にした方が自然
・FABには次の画面に繋がったりするようなアクションしか置いてはいけない
・FABを画面右下に配置すれば画面全部を見た後に次の画面に行けて自然な動線になる
自己紹介
@seto_hi です。株式会社ノハナでAndroidエンジニアをやりつつアプリのUIデザインを考えたりしています。
Material Designが好きで、DroidKaigi2017でMaterial Designに関する発表をしたり、知り合いからはMaterial Design警察と呼ばれたりしています。
前提
僕は「Material Designはプラットホームである」という考え方に賛同しています。Material Designのガイドラインに書いてあることがすべてではなく、背景を理解してガイドラインに書いていないことを行ってもいい(もっと言えばガイドラインを破ってもいい)という考えです。
本題
FloatingActionButton(以下FAB)がなぜ画面右下にあるかについて本気出して考えます。厳密に言うとLTR言語ではFABが右下にあり、RTL言語ではFABが左下にある理由を考えます。
なお、今回はAnchorありFABについては言及しません。
右利きが操作しやすいから右下？
世界に右利きの人が多く、画面の右下にボタンを置けば一番操作しやすいからという考え方はあると思います。
しかし、RTL言語の方向けの画面ではFABは左下に配置されます。RTL言語を使う国でも右利きの人が多いらしく、FABを左下に配置することは操作性の低下に繋がります。
RTL向けのUIでは左右反転するものとしないものがあります。操作性だけを考えるならFABの位置も反転しなくても良かったのではないでしょうか？
これを考えると操作性のため「だけ」に右下に配置しているのではないような気がします。
(ユーザーの大半を占めるLTR言語の人に操作しやすいという観点も当然入っていると思います)
Androidの世界と右と左
Androidの世界では画面の左右の配置に意味があります。
右は未来・肯定などを表し、左は過去・否定などを表します(RTLの場合は逆)。
例を挙げるとBackボタンやHomeAsUpは画面左にあり、ダイアログのボタンは右側に肯定アクション、左側に否定アクションを置くことになっています。
なぜ右が未来・肯定、左が過去・否定
これは人間の目線の動きに由来していると考えています。
人間の目は文章を読むときにZ字型に目線が動くと言われています。アイコン付きリストの場合には逆N字型と言われています。
画面の最右に次の画面への動線を置くと、目線が左から右に進んだ先で動線にたどり着くので自然な体験になります。
肯定的な内容は次の画面へ進む動線になることが多く、否定的な内容は前の画面に戻る動線になることが多いです。
このような理由から、「右が未来・肯定、左が過去・否定」という世界になったのだと思います。
FABのガイドライン
FABのガイドラインには、ボタンに置くべき操作についての記載があります。
雑にまとめると、
・ポジティブなアクション(新規作成、お気に入り、共有、Navigate、Exploreなど)は置いて良い
・マイナーだったり破壊的なアクション(削除、エラー、具体的でないアクション、操作系)は避けるべき
となっています。
これとAndroidの左右の話を合わせると、FABは画面右に配置することが正しいという気持ちになりました。
結論
・人間の目線は画面左上から右下に動く
・なので、左上→右下に目線が流れるUIにした方が自然
・FABには次の画面に繋がったりするようなアクションしか置いてはいけない
・FABを画面右下に配置すれば画面全部を見た後に次の画面に行けて自然な動線になる
記事は以上です。
蛇足
色々とUIを考えていくと、UIに関する疑問が湧いてきました。
・NavigationDrawerの呼び出しボタンは画面左上だが否定的な内容ではない
・左上にバーガーメニューを置くのは慣習になっていますが、実はMaterial Design的ではないのでは？
・Toolbarの右部分に表示されるActionMenuに操作アクションを入れることは、FABのアクションの制約と同じ理論で考えると良くないことでは
・メールなどの一時保存ボタンはメールの作成画面を閉じることになるので、画面左側に配置すべき？
このあたりの議論をしたい方、答えを知っている方、是非お声がけいただきたいです。
以上！いいポエムが書けました！
