見出し画像

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

UXUIデザイナーのasakoです。

ファブレット(英: Phablet)って知ってますか?

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

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

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

参考)安藤さん記事👀

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


1. 再タップで「戻る」

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

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

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

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


画像1


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

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

画像2

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

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

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

画像3

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


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

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

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

(HIG)
iPhoneでは3〜5個。それより多い場合は「その他」タブを用意する
(material design )
3-5個まで。それより多い場合は上部タブ or ナビゲーションドロワーを使用


5.(予測)「<(戻る)」は上部から消える?

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

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


まとめ

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

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



この記事が気に入ったら、サポートをしてみませんか?
気軽にクリエイターの支援と、記事のオススメができます!
うれしい!
10
UXUI Designer (YUMEMI,Inc.) / Graphic Designer (Freelance) 寝るのと 食べるのと デザインと 音楽が好きです🌝 「場」づくりに興味があります🌞

こちらでもピックアップされています

アウトプット
アウトプット
  • 558本

ゆめみの【勉強し放題制度】を活用したアウトプット、その他に、メンバーが自分自身で学んだことをまとめています。 ゆめみの独自制度である「勉強し放題制度」は、あらゆる学習費用を100%会社が負担します。書籍、社外セミナー、実験機材、認定資格の受験など、成長のためのコストは会社が全て負担。また、業務時間の10%は自由な活動に使うことができます。

コメントを投稿するには、 ログイン または 会員登録 をする必要があります。