YouTubeの再生バーが教えてくれたナビゲーションバーの新しい形

こんにちは！トマト 🍅(@tomatog29)です！
今回は、スマホUIにおけるナビゲーションバーの使い心地があまり良くないのでは？という疑問をきっかけに、より使いやすいナビゲーションのあり方について考えてみました！

普段スマホアプリを使っていて、
ナビゲーションバーを操作するために、わざわざスマホの持ち方を変えて使っている場面が多くあります

電車で立って操作しているときや、片手操作が必要になる時では特にです。
その瞬間にスマホを落としそうになったことが、私は何度もありました。

毎回起きるわけではないのでぎりぎり許容されている感じがしていますが、確実に小さなストレスが存在しています。

使用頻度の高い「ホーム」タブが、一番左に配置されている構造でした。
本来、高い頻度で触られるはずのUIが、親指から届きにくい位置にある。

この体験をきっかけに、ナビゲーションバーをより使いやすくするためのUIを考え始めました！！

「右に寄せれば解決」ではダメだった理由

最初に思いついたのは、かなりシンプルな案でした。
「全部右に寄せれば、使いやすくなるんじゃない？」

UIが完成し、実際に使ってみたときの第一印象はかなり良いものでした。
親指が届かない範囲がなくなり、「これは使いやすいUIができたのでは？」と思いました。
作ってみたのはいいが、左利きの人使いづらすぎる......。かなり致命的です。

なので左利きの人にも使いやすくするという形でこのUIを進化させていきました！！

寄せるデザインの派生系2案

1.角度センサーを使う案

次に考えたのが、スマホの角度センサーを使用して傾けた方向にナビゲーションバーを移動させるという案でした！

技術的には実現可能で、理屈としても筋が通っています。
ですがこれも検討を進める中で、致命的な問題がたくさん見えてきました。

姿勢によって勝手にUIが動いてしまったり、寝転んだ状態ではナビの位置が安定しなかったりします。
さらに、「なぜ今UIが動いたのか」をユーザーが理解しづらく、デバイスごとにセンサー精度の差が出ることなどがありとてもUXがよくないと考えました。

結果として、この案は予測不能でイライラするUIになってしまいました。

UXにおいて予測可能性はとても重要です。
ユーザーが次に何が起きるか分からないUIは、それだけでストレスになります。
その時点で、この案はUXとして成立しないと判断しました。

２.左利きモードを用意する案

もう一つ検討したのが、設定画面に「左利きモード」にするボタンを用意する案です。

ただ、これも問題がありました。
そもそも多くのユーザーは設定画面を積極的に見に行きませんし、その設定の存在自体に気づかれない可能性が高いです。

気づかれなければ、使いにくさは我慢されるだけで終わってしまいます。
仮に分かりやすい場所(トップ画面とか)に置いたとしても、今度はU画面を圧迫し、本来見せたい情報の邪魔になってしまいます。

どちらの案も、確かに改善はしますがそれによっての副作用がたくさん出てしまい最終的にUXが悪くなってしまっています。

スライド式のナビゲーションバーという形

そこでたどり着いたのが、スライド式のナビゲーションバーという考え方です。

最初は、円形に配置してスライドさせるUIなどを検討しました。
「指の位置を起点に操作できる」という点ではとても良かったのですが、見た目が特殊になり初見での学習コストが高かったりと、使いやすさとは別のハードルが残ってしまいました。
この方向性自体は間違っていないものの、そのままでは多くの人にとって自然なUIにはなりません。

そこで改めて、「すでに多くの人が慣れているスライド操作はないか」と考え直したときに、着目したのがYouTubeの再生バーでした！！

YouTubeの再生バーは、親指の位置を基準に相対的に動きます！
片手でも操作しやすく、右手でも左手でもほぼ同じ感覚で使えます！
それにもかかわらず、誰もそれを「特殊なUI」だとは感じていません！

この構造をナビゲーションバーに応用すれば、
片側に寄せるUIが抱えていた左利き問題を、自然な形で解消でき回転式UIのように慣れが必要な操作でもありません！

私にはこれが、考える中での最適解だと思いました！！！！

これは“特殊UI”ではなく、自然な進化

このUIの一番の強みは、説明がいらないことです。

ナビゲーションバーの元の形を保ちつつ、再生バーという既存の操作方法を合わせたものなので使う人は慣れており、違和感なくかつ使いやすく操作できます。

ですが、現時点ではまだあまりない形であるので、アクティブ時のマーカーがスライドするアニメーションを入れたり、マーカーを横長にしたりといった、「スライドできる」と自然に気づける誘導は必要だと考えています。

最後に

今回、ナビゲーションバーを見直す中で強く感じたのは、
「右に寄せる」という使いやすさを追求したはずのUIが、別の誰かにとっては使いづらさになる事実に気づいた時、UI設計の難しさと面白さを同時に感じました。

スライド式ナビゲーションバーは、YouTubeの再生バーのように、すでに私たちが慣れ親しんでいる操作の延長線上にあるものです。だからこそ説明はいらず、設定も不要で自然に使えると思いました。

実際、このUIはすでに一部のアプリで採用されていました。
友人から「学園アイドルマスターがそのUIを使っている」と聞き驚きました。
触ってみたところ、違和感もなく快適に使うことができにこにこでした。

この視点が、ナビゲーションバーに限らず、
これからのモバイルUIを考えるヒントになれば嬉しいです！