液晶巨大化におけるボトムナビの機能拡張を考える
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になるなあと思いました。
無意識の心地の良さを作っていきたいですね^^
この記事が気に入ったらサポートをしてみませんか?