投稿日:

【UI】目的のアカウントを素早く手軽に選択する切り替えインターフェイス

どーもです。
先日、拙作アプリ「Twitee i」のバージョン5.1を公開し、新しいアカウント切り替えを搭載しました。
面白いUIができたので、ちょいと(というかガッツリ)紹介したいと思います。







style="display:inline-block;width:336px;height:280px"
data-ad-client="ca-pub-3481943934845626"
data-ad-slot="8806407289">





以前のアカウント切り替え



以前のUIは画面下のバーを上へサッとスワイプして、上下にアカウント名が並んだリストが出てくるという極めて原始的なものでした。
しかもそれは投稿画面にはなかったため、「投稿画面で切り替えさせてくれ!」というユーザーさんからの要望はLite版リリース時からずっとありましたし、僕もなんとかしたいとずっと思っていて、それがようやく実現できた次第です。



スクリーンをサッと一度撫でるだけ



こちらが切り替えをする前のスクショ。




そしてこちらが切り替え中のスクショ。

Twitee スマホ アプリ UI 参考 ユーザーインターフェイス デザイン メニュー


以前と比べ、かなり視覚的なものになりました。
テキストボックス上には現在選択中のアカウントが鎮座し、それをスワイプすると他のアカウントたちがポンポン飛び出してきます。
要領的には括弧一覧の選択と同じで、スクリーン上を指で撫でるだけです。
テキストボックス上のアイコンをスワイプし始めた途端に、他のアイコンが現れ、そのほかのアイコンの上で指を離せば選択・切り替わります。

一度慣れてしまえば簡単かつ素早く切り替えられるのではないかと思います。
また、(片手でiPhoneを握って操作しているとすると)親指は常にスクリーンに触れたままなわけなので、親指が離れている状態よりも本体をしっかりホールドできるというメリットもあります。
画面上部を何度もタップするインターフェイスよりも、iPhone本体を安定してホールドしたまま操作できるのではないでしょうか。


指に引っかかっているような感触



テキストボックス上のアイコンをスワイプし始めると同時にそのアイコンが指に沿ってぷくぷくと膨らみ始めます。

Twitee スマホ アプリ UI 参考 ユーザーインターフェイス デザイン メニュー


そしてある程度大きくなると「ぱんっ!」と弾けると同時に(まるで合図が鳴ったかのように)その背後から他のアイコンたちがポンポン飛び出してくるわけです。


けっこう遊び心あるんじゃないかと思ってるんですが、ただの遊び要素ではなく、「スワイプし始めると何か起こる」というのをユーザーに察してもらうためというのが一つ、そして拡大スケールさせることによってスワイプ操作にフィードバックを持たせるという2つの機能があります。
この辺りかなり悩んだんですが、もっといい方法があれば教えてください(笑)



利き手に寄ってくる



スワイプフラワーを下へスワイプすると、テキストボックス上のアイコンがそのスワイプフラワーの位置(右なら右方向、左なら左方向)へシュッと移動します。

Twitee スマホ アプリ UI 参考 ユーザーインターフェイス デザイン メニュー

Twitee スマホ アプリ UI 参考 ユーザーインターフェイス デザイン メニュー


これは利き手で操作しやすくするための配慮です。右手で使ってるのに左端にアイコンがあったら親指届きませんからね。


ちなみにスワイプフラワーは下げ切らなくても、クイっと少し動かすだけでアイコンは寄ってきます。


その他のジェスチャーへの反応



アカウントを切り替えるにはスワイプしないといけませんが、タップや長押しにもアイコンは反応してくれます。
長押しすると、そのアイコンのアカウント名が表示され、確認することができます。

タップをすると、なんと斜め下に飛び跳ねるだけ。(!!)

なぜ飛び跳ねるのかと言うと
「この俺をスワイプしてくれ!」
って全身で訴えているんですよw
ユーザーさんがそれを感じとってくれるのかはわかりません。


タップにもアカウント切り替えを割り当てようかとも思ったんですが、実装がすこぶるめんどくさく、操作方法の選択肢が多いと、使う側は心理的に疲れてしまうんです。それなら手段は一つに絞った方がいいよねってことで、タップは全身で訴えさせることにしました。


メジャーアプリのUIと比較



Twitterクライアントとしてメジャーな「Tweetbot3」「feather」と比較してみます。

Twitee スマホ アプリ UI 参考 ユーザーインターフェイス デザイン メニュー


左からTweetbot3, feather, Twitee iのアカウント切り替え画面です。
Tweetbotは上下にアイコンをズラし、featherは左右にフリックをして選択します。どちらも画面上部に位置しており、指が届きづらく、featherに至ってはアカウントが増えれば増えるほど特定のアカウントを選択する手間が多くなります。
それに対しTwiteeでは、(Twiteeの中では操作位置が高いものの)他のアプリよりは低い位置にあり、他のアイコンは下へ下へと表示される設計になっています。
アカウントが12以内ならすぐにアクセスできますし、13以上でも画面下部まで指を滑らせればリストが上へズレる仕様になっており、30ほどのアカウントであればすぐアクセスできます。



以前のUIだと未選択アカウントは最大8つしか表示できなかったんですが、新しいUIでは一度に表示できるだけでも12はあるので大幅に増えたことになります。

Twitee スマホ アプリ UI 参考 ユーザーインターフェイス デザイン メニュー


Twitee スマホ アプリ UI 参考 ユーザーインターフェイス デザイン メニュー

ちなみにTwiteeをダウンロードしてくれた人の中では最大で16のアカウントを持っている人がいました(笑)



まとめ



ずっと以前から作りたいと思っていたものをまた一つ出せたのでスッキリ爽快です。
ユーザーさんの反応もなかなかいいようで安心しました。

Twitee スマホ アプリ UI 参考 ユーザーインターフェイス デザイン メニュー

Twitee スマホ アプリ UI 参考 ユーザーインターフェイス デザイン メニュー

喜んでもらえるのは最高のご褒美ですホント。



Instagramの動画はこちら。


ではでは。

【UI】操作ステップを減らし必要最小限の表示に抑えた一覧選択インターフェイス。 | Fum’s style






Sponsored Link



Comment