液晶巨大化におけるボトムナビの機能拡張を考える

UXUIデザイナーのasakoです。

ファブレット（英: Phablet）って知ってますか？

「Phone」と「Tablet」とを合わせた造語。明確な定義はない
（wikipedia）

恥ずかしながらちゃんと意識したの最近なんですが、画面の大きいスマートフォン と 画面の小さいタブレットのことを指して使う言葉です。

スマートフォンは昨今どんどん液晶の巨大化が進んでいます。

参考）安藤さん記事👀

私の私物スマホはiPhone7で、女性の小さめな手だと若干サイズ大きめだなーと思う程度。左上を片手で触るには、一段階手をずらして持ち直していたり、けっこう緊張感があります。
最近いろんなアプリを触る中で、無意識にボトムナビゲーションを駆使する動きをしていたことに気付き、いくつかのアプリを観察してみました。

1. 再タップで「戻る」

twitterやInstagramなどSNSのTLをスクロールした後、最新に戻るためにTLタブを再タップ。この動作は、もうすっかりおなじみ。

ボトムナビの右端に配置されがちな「プロフィール」や「メニュー」に関しても、その後プッシュで下層画面に入っていくものが多いですが、潜って潜って〜〜を繰り返した後、一気にTOP階層まで戻りたくて再タップ。これも無意識に結構活用してました。

アプリによっては、
1.下層画面で再タップ「TOP階層に戻る（スクロール位置は直前のまま）」
2.再々タップ「スクロールも上部に戻る」
という挙動をするものもあります。

noteのアプリもそうですね👀

2.再タップで検索フォーム入力へ

Spotifyに代表される、検索画面で上部の検索窓をタップせずに入力状態に移る挙動です👀
まだあまりこの動きは見かけるの稀かも。

3.左上から右下に移動したハンバーガー

スマホアプリでも、ボトムナビに入りきらない「その他メニュー」的なものは、今まで左上（ごく稀に右上）にハンバーガーメニューが置かれることが多かったですが、ボトムナビの右端に入れるものが増えてきました。（Facebookなど）

webサイトでも右下にある例もありますね👀

UX MILKのこの記事も参考になります。

モバイルではメニューを画面下に表示すべき理由

4.最上位機能をボトムナビのタブへ

今後、より画面内の一等地となるボトムナビゲーション。「そのアプリでユーザーがしたいことは何か？」「このアプリって何するためのものなんだっけ？」をもう一度見つめて、最優先の機能を配置する必要があります。

HIGやMaterial Designでは、個数についての推奨・規程もあります。

（HIG）
iPhoneでは3〜5個。それより多い場合は「その他」タブを用意する

（material design ）
3-5個まで。それより多い場合は上部タブ or ナビゲーションドロワーを使用

5.（予測）「＜（戻る）」は上部から消える？

iPhoneだと左上配置でおなじみの「＜（戻る）」は、右手でもつユーザーにとって、最も届きにくい位置にあります。

今後上部から姿を消し、他の操作も「戻る」トリガーになることが増えそうですね。
画面全体を左にスワイプして戻るのもその一つ。
Instagramのストーリーズでは、画面の右側・左側をタップして「戻る」「進む」操作のUIが馴染んできました。
また全面モーダルから半モーダルのUIが増えて、モーダルを「閉じる」操作も画面下部で下げちゃえば完結するので、最近はこれも「戻る」として使われているようなアプリも増えてきたように感じました。
（今一度「プッシュ」と「モーダル」の考え方も見直さないとなのかな...🤔）

まとめ

・ボトムナビゲーションの機能が拡張しつつある
・ユーザーがやりたい事を優先的に一等地に置いてあげる

個人的には手におさまるサイズ、なんならSEが好きなので、いちユーザーとしてはあまり大きめの端末に触れられていないのですが、ここの変化をしっかり見つめるとUXの介在するUIになるなあと思いました。
無意識の心地の良さを作っていきたいですね＾＾