Entries

スマホUI考3 ~ ジェスチャ入力について

スマホUI考1 〜 ボタンについて
スマホUI考2 〜 フィードバックについて

スマホといえばジェスチャー入力、ジェスチャーといえばスマホ。そんなジェスチャーについて、つれづれと。
でも個人的には、ジェスチャーはほとんど要らないと思う。

ジェスチャ全般
・ジェスチャは補助操作。メイン操作ではない。
・ボタンでできる操作をプラスアルファで、ジェスチャでもできるようにする。
・なぜならジェスチャの有無は視覚的にわからない。
・ユーザーがジェスチャを理解しなくても操作できるのがよい。
・またジェスチャー時に、画面のかなりの部分が指で隠れる。
・極論ジェスチャなしでもアプリがリリースできる状態なのがよい。
・つまり予算や工数があまったときに入れよう。

タップ
・マウスクリックではなくタップ。
・ボタンの精度は指のサイズに依存する。
・細かい座標指定はできない。
・ロールオーバーがない。
・触ってみなければわからない → ボタンとフィードバックの設計重要
・もろもろ第1考第2考を参照

ダブルタップ
・素早く2回タップ。
・とりあえず禁止。
・画像/地図のダブルタップでズームぐらいで一般的でない。
・ユーザーは画像をダブルタップしてなにも起きないと不快に感じる。
・最終的に、ボタンや画像をダブルタップしなくなる。
・ダブルタップするのは「操作がわからなくなった時」がメイン。
・ただしズームできる画像には、できるだけダブルタップでのズームはサポートする(純正のマナーに従う)。

ホールド
・しばらく押しっぱなしにする。
・とりあえず不用意な使用は禁止。
・そのオブジェクトがホールドできるかの視覚的手がかりがない限り、ユーザーは発見できない。
・唯一の例外はiOSそのものの作法の一部として使うこと。
・文字の選択。
・アイコン等のドラッグの予備動作(ホールド&ドラッグ)
・いかに手がかりを与えるか?
・文字が選択できない人、アイコンを並び替えられない人がどれだけいるか?
・例えば、ボタンを大きめにしてホールド中には点滅させる。
・例えば、ボタンを押している最中に円形プログレスバー的なものを表示する。

スワイプ
・横や縦に、指をすっと動かすジェスチャー。
・スワイプとフリックの違いは?
・スワイプは画面をなぞる操作。スクロールなど。
・フリックは高速に短距離を動かす操作。
・ページをめくれる場合は、以下のようにすることでスワイプのジェスチャーを示唆できる
・1:要素の下にページインジケーター(ドット)をつける。
・2:要素の左右に余白をもうけ、要素自体も影をつけるなどして少し浮かべる。
・3:要素の左右に余白をもうけ、連続する要素をすこし見切れるように見せる。
・4:ホーム画面のアンロックのように、アニメーションで示唆する。

フリック
・横や縦に、指をすっと動かすジェスチャー。
・スワイプとフリックの違いは。
・イメージとしては単発の素早く短いスワイプ。
・携帯型キーボードの日本語入力のUIのイメージ。
・実装レベルでのフリックとスワイプの違いは、UIScrollViewを使うかGestureRecognizerを使うかの違い?
・純正アプリですら基本的にこのジェスチャーの存在は見えない。
・フリックは主にTableViewのセルに対して行われる。
・メールアプリのメールの削除。
・フリック中は、指の下にあるものは隠れてしまい確認しにくい。
・補助的なUIとして指で隠れる部分をポップアップで見せる(日本語入力UI等)
・できるだけ過程もアニメーションや演出で見せる。
・ジェスチャー終わっていきなり効果発動はわかりづらい。
・ジェスチャー開始時から、「なにか起こりそう」ということを示唆する。
・やはり基本的に使用は避ける

ドラッグ
・基本的にはドラッグは極力避ける。
・ドラッグできる場合、それをどう明解にするか?
・iPhoneのアンロック画面を参考にする。→スライド用の物理的なくぼみメタファー、横にながれるアニメーション。
・ドラッグを知覚可能にするには、タップした時点で影をつけ微妙に拡大させて、浮かせるとよい。
・ボタン等の凹むアニメーションと、浮かすアニメーションで対比させる。
・補助的なUIとして指で隠れる部分をポップアップで見せる(iPadカレンダーの日付スライダ等)

ピンチ
・2本指でつまむジェスチャー。
・拡大縮小のジェスチャー
・地図や画像などではできるだけつける。
・片手操作はムズイ。
・つまり片手で操作することが前提のタスクでは、必要としない。

ロテート
・2本指で回転させる。
・ピンチの拡張。
・角度の厳密な操作は難しい為、ダブルタップ等による角度のスナップなどがあるとよい。
・片手操作はムズイ。
・つまり片手で操作することが前提のタスクでは、必要としない。

2本指スワイプ
・基本的に使わない。
・一部のお絵描きソフトではスクロールに使う。(1本指のドラッグが、「描く」ことに割り当てられる為)。
・片手操作はムズイ。
・つまり片手で操作することが前提のタスクでは、必要としない。

そういえばAmazonに、「iPhoneアプリ設計の極意」が再入荷された模様です。
この本は僕はあくまで「監訳」なので、本と僕のブログで意見が違ってるとことかもあったりしますが、とにかくとてもいい本だと思います。よろしければ是非。