投稿日:

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



どもです。
先日、拙作Twitee iのマイナーアップデートを公開したのですが、Lite版時代から搭載していた「括弧一覧」の入力方法に変更を加えました。








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






見た目を変えず、操作ステップを削減



タイトルで、今回の変更の肝な部分を表現し切ってしまいました。

今までの操作方法は至ってありきたりで、
ボタンをタップ→表示されたリスト上のボタンをタップ
という2ステップでした。ステップ数としてはあまり問題ではありません。
問題だったのは、ボタンならでは、タップならではの「位置・場所」でした。

括弧ボタンをタップすると、括弧リストが下からニョキっと現れます。
現れたがために、直前にタップした(おおもとの)括弧ボタンの位置までも上に動いてしまう。



Twitee UI ユーザーインターフェイス 画像 参考 一覧 スマホ アプリ オススメ iPhone Twitter

Twitee UI ユーザーインターフェイス 画像 参考 一覧 スマホ アプリ オススメ iPhone Twitter


そのまま括弧を入力すれば自動でリストが閉じるのでそれで終わりですが、誤操作でリストを表示させてしまった場合はどうでしょう。
リストを閉じるために、再度ボタンをタップしなおすことになるんですが、ボタンはさっきと違う位置にあるのです。
しかも、そのボタンのすぐ下には(タップ機能のある)トラックボールが配置されています。
これはもう誤操作しないわけにはいかないでしょう!(はい、開発者本人がしまくりました。)



メジャーアップデートを機に括弧リストをボタンの上部から、下部へ移動したんですが、この仕様が障害を起こしてしまったようです。



そこで、タップを廃止し、ドラッグ操作(厳密にはパン操作)へ変更。
ボタンをパンし始めると、リストが現れ、指を離すとリストはすぐ隠れます。
リスト内の記号を選択する場合は、そのままその場所まで指を滑らせ、離すだけ。


Twitee UI ユーザーインターフェイス 画像 参考 一覧 スマホ アプリ オススメ iPhone TwitterVideo by instatwiteeTwitee UI ユーザーインターフェイス 画像 参考 一覧 スマホ アプリ オススメ iPhone Twitter
投稿した動画




指の動作そのものに着目すると、
平面上の場所違いを2度(軽く)叩く、ことから、
平面上をサッとなでる、ことに変わっており、動作そのものがシンプルになっています。
タッチ操作を真横から眺めている状態を想像していただければ想像しやすいと思います。


なでるだけで入力できるため、連打に近い速さで入力できないこともないです(ここでは連続入力の必要性すらないですが)。



この操作方法を取り入れた根底にあるのは、ボタンの煩わしさを減らしたい、ということですね。
Lite版リリース当時に書いたこちらの(偉そうに)書いた記事でも書いたんですが、基本的な考え方は今も変わっていません。

Twitee UI ユーザーインターフェイス 画像 参考 一覧 スマホ アプリ オススメ iPhone Twitter(その3)”ボタンUI” VS “ジェスチャーUI” 「Twitee Lite」の真髄 by 開発者 | Fum’styleTwitee UI ユーザーインターフェイス 画像 参考 一覧 スマホ アプリ オススメ iPhone Twitter




ただこの記事は言葉足らずすぎて誤解を招きかねないですね。(タイトルがもうアカン、、、)



ちなみにこの類いの操作でわかりやすい例は、iOSキーボードの「.?123」キーのスワイプ入力です。(この記事書いてる最中に気がついた)
キーをスワイプするとキーボードが数字・記号のキーボードに切り替わり、指を離せば文字の選択&キーボード切替になるところはまさに同じです。

Twitee UI ユーザーインターフェイス 画像 参考 一覧 スマホ アプリ オススメ iPhone Twitter



開発初期の頃からイメージしていた



実はこのスワイプ型の括弧選択インターフェイスは、Lite版をリリースする以前の初期の頃からイメージはしていましたし、こっちの方が(括弧だけに?)カッコいいから取り入れたいとずっと思っていました。
しかし当時は、知識もスキルもまだまだ未熟だったため、見送ったままでいたのです。


Twitee UI ユーザーインターフェイス 画像 参考 一覧 スマホ アプリ オススメ iPhone Twitter

今回のインターフェイスに限らず、ずっと前から実現したい、取り入れたいと思っている機能などがいくつも眠っているので、今後順番に形にしていけれたらと思っています。



今後の課題



操作方法を変えるのはいいんですが、それをどうやって分かりやすくユーザーさんに伝えるかが今後の課題でもあります。アラートだと文章を押し付けるだけだし、かといって初回起動時のようなスワイプ型のチュートリアルは大げさ。
ちなみに今回のアップデートではどう対処したかと言うと、何もしてません(笑
Twitterでもさっそく「変わっててびっくりした」とユーザーさんに言われてしまいました。
反省。

やはり括弧ボタンの上に小さいポップアップでも出すべきなのか。一番いいのは何も説明せずとも直感で操作方法が把握できるインターフェイスを作ることでしょうね。
僕はまだまだその辺りのスキルも足りないので、他のソフトウェアなどをよく観察していこうと思っています。



Sponsored Link





Comment