どもです。
昨年12月にカスタムキーボードをリリースしたわけですが、
今回はそれのキーボードではなくアプリ側のUIのアイデアなどについてお話したいと思います。
style="display:inline-block;width:336px;height:280px"
data-ad-client="ca-pub-3481943934845626"
data-ad-slot="8806407289">
一般的なキーボード設定のUIは本当に適切？
いくつものカスタムキーボードを触ってきましたが、どのキーボードアプリもアプリ本体のUIはすごく似通っていることに気がつきました。
そうです、「左に大きな項目リスト、右に具体的な設定内容」という設定アプリと同じアレ。
似通うこと自体はともかく、普通すぎてどうも面白みがないし、使いやすいとも思えない。
いざ自分のキーボードの説明ページを作るとき、どんなUIがいいのか悩みました。
iPad用に何か優れたタブインターフェイスはないかと。
少なくとも設定アプリ風のUIは取り入れたくなかった(笑)
それに観察してみるとわかるんですが、それらキーボードアプリをiPadで開いてみると画面内の空白が非常に多い！モンゴリアンもびっくりな広大さです。
iPhone向けのものを拡大しただけなんでしょうね。
そこでひらめきました。
よし、これだ！(iOSのAppスイッチャー)
今でこそiOS9で仕様が変わりましたが、iOS7,8で使われていたAppスイッチャー風のタブインターフェイスを取り入れることにしました。
そしてできたものがこちら。
左右にスクロールしてタブ移動ができる。
アクセス性の優れたインターフェイス
特徴1.可動軸が2つしかない
まず可動軸が左右(x)と上下(y)の２つしかないため、シンプルでわかりやすい。
ここはPlayStationのホームでおなじみのXMB(クロスメディアバー)と同じですね。
それに対し、ATOKなどの設定アプリ風UIはy軸が2,3ほどあります。
左の大項目で1つ、右側のリストで1つ、さらにリスト選択後の移動先の画面で1つ。
ツリー状構造なのでx軸は階層が深くなるほど多くなります。
OSのように膨大な量の設定項目がある場合はツリー状構造は打ってつけですが、
カスタムキーボードに必要な項目数なんてOSに比べたらたかが知れていますよね。
特徴2.暗黙的な2種類の左右スクロール
プレステのXMBはおそらくコントローラの十字キー操作を軸に考案されたんじゃないかと勝手に想像してますが、
今回のAppスイッチャー風UIはジェスチャー操作に優しい作りになっています。
その一つが、２種類の横スクロールが存在すること。
その２種類はページそのものをスワイプするか、タブアイコンをスワイプするかによって変わるスクロール速度の違いから来ます。
iOS8のAppスイッチャーもアプリ画面をスクロールするか、アプリアイコンをスクロールするかで速度が変わりました。(iOS9ではなくなっています)
「一番端っこのタブに行きたい！」って時はアイコン部分をサッと一度だけスワイプすればOK。
たいしたことではないかもしれませんが、自分のジェスチャーそのものがショートカットになることが肝です。
特徴3.狙ったタブに直接アクセス
スクロールの話ばかりだったんですが、もちろんタップして目的のタブに切り替えることも可能です。
直接そこへジャンプするようなイメージですね。
僕は普段Coardの設定をしたい時は、歯車アイコンをタップして設定画面を直接開いています。
特徴4.ページからはみ出た上下スクロール
で、スクロールに戻ります。
横軸の話を進めてきましたが、お次は縦軸。
縦軸の移動はもちろんコンテンツを表示している白いビューの上下スクロールなんですが、
Coardでは白いビューの外側もスクロールできるようにしています。
ここです。
なぜわざわざこんなことをするんでしょうか？
iPadを持った状態で、親指を伸ばし、白いビューをスクロールするのが
見た目以上にしんどいからです。
(長くてハンサムな指を持っていない人は多いはず)
では白いビューを横幅いっぱいまで引き伸ばせばいいんでしょうか？
レイアウト的にそれはNGだと判断しました。
「いくつかのページが横に(間を空けて)並んでいるんだな」っていう空間的な認知をする余地が減るような気がしたので。
このアイデアはPinterestのiPad公式アプリでも使われていました。現バージョンではレイアウトが変わってますが、以前はピンを拡大した時にウインドウが中央に現れました。その外側も上下スクロールが出来たため、親指での操作が楽だった印象があります。
また、OS Xにも似たようなものがあり、「フォーカスしていないウインドウのスクロール」がそれ。
OS Xではそのウインドウがアクティブ(最前面)になっていなくても、マウスポインタを持っていけばスクロールがちゃんと反応します。
Windows7か何かはそれができず、使いづらさを感じましたね。
特徴5.画面の片隅だけで全てのページに移動可能
ここまで材料が揃えばタイトルにある「画面の片隅だけで全てのページに移動」を説明できます。
つまりこういうことですね↓↓
特徴1.可動軸が2つしかない
特徴2.暗黙的な2種類の左右スクロール
特徴3.狙ったタブに直接アクセス
特徴4.ページからはみ出た上下スクロール
これらの特徴がうまく組み合わさり、ジェスチャー領域を画面いっぱいに広げたことによって、
スクリーン隅っこの親指が十分届くエリアで上下左右、端から端までビューを表示できるようになりました。
このインターフェイスはタブレットやファブレットのような大きな画面ほど効力を発揮するのではないでしょうか。
ではでは。
Coard製品紹介ページ
