心魅 - cocoromi -

半角スペース時々全角

マウスとタッチの違いを改めて考えて、タッチ操作のためのUIに思いをはせる

Android端末を手に入れて初めてタッチデバイスを、使っている。
タッチだから使いやすいと言う人もいるかもしれないけど、全くそんなことはないと思っている。


タッチでも使いにくいものは使いにくい。多くのWEBページがiPhone用のViewも用意しているのがその証拠だろう。
(=タッチでも従来のWEBページは使いづらい)


どうなっていればタッチで使いやすいのだろうか?


って言うのを色々考えたやつを、メモしておく。


その為にマウス操作を引き合いにだして、タッチの特徴を考えて行きたい。
両者で、ボタンをクリックするような場合をイメージしてみよう。

マウスの場合

マウスはポインティングデバイスと言われるだけあって、何かを指す、そしてそこになんらかのアクションを加えるためのデバイスである。
マウスでの操作とは大きく分けて2つ、目標への「移動」と目標への「行動」がある。
ボタンを操作する場合は、「ボタンまで移動する」「ボタンを押下する」の2ステップで行われる。

マウスの移動は失敗の山

ここでマウスを移動させることを考えてみる。
人間がマウスを移動させようとするとき、無意識に以下のようなことを繰り返している。

  1. 目標に向かって移動する
  2. でも誤差が発生して目標にたどり着いていない
  3. 最初にもどる

これだと永遠に目標に辿り着けないが、通常目標に面積があるのでいつかは目標まで移動することができる。

このようにマウスの移動とは実はものすごい「失敗」しやすい操作である。
小さいボタンが使いづらいのは、「失敗」する回数が増えてしまうからである。
もちろんこの「失敗」はほとんどの場合、意識することはなく、修正の動作も無意識で行っている。

「移動」と「行動」が分かれているのはいいことだ

移動が、「失敗」しやすい動作だとすると、移動と行動の2ステップに分かれているのはすごく合理的であることがわかる。
もし、マウスが対象に移動しただけで何かアクションが起きるようなデザインに成っていたら、山ほどの誤爆を相手にしなければならないが、
「失敗」しやすい移動をまず確定させ、その後、行動を起こすことで、その正確性を向上させているのである。

タッチの場合

さて、一方でタッチ操作により、ボタンをプッシュする場合はどうだろうか。
これは完全に1ステップで行われ、タッチでは画面に触れた瞬間に押下するボタンが決定される。


タッチの場合、「移動」と「行動」が同時に行われている。
自身の指による操作なので、マウスに比べれば誤差は少ないかもしれないが、それでも発生しないわけではない。


スマートフォンのアプリでボタンを大きめに作る必要があるのは、このどうしても発生する移動誤差を吸収するために必要だからである。
でかい的には当たりやすいのである。

共通すること

マウス・タッチどちらの操作でも言えることは、操作の誤差(失敗)が許容されていれば使いやすいということだ。
例えばMacのアプリケーションメニューバーとWindowsのアプリケーションメニューバーでは多分Macの方が使いやすい。
それはMacのそれは画面最上部に設置してあり、マウスの移動で行き過ぎる心配が無く、マウス操作に精密さが求められないためで、Windowsの場合は左右だけでなく上下まで調節する必要がある。

つまり、UIの使いやすさとは誤差をいかに許容できるかにかかっていると言える。

タッチ誤差を許容しているUIの例

誤差を許容することで使いやすさが向上しているUIをいくつかあげてみたい。

iPhoneの(スクロールしない)リスト

iPhoneのリストUIでは、タッチ操作にも「移動」と「行動」の分離を取り入れている。
iPhoneのリストは画面にタッチしたときもし、目標の項目を選択できていなければ、そのまま指を移動することで操作対象の項目を変更することが出来る。
※スクロール可能な場合は上記の動作はスクロールを発生させてしまうためこの限りではない。


ちなみにAndroidのListViewにはこの機能はない。

フリック入力

iPhoneの日本語入力で有名なUI。従来の連打式の入力に比べて操作回数が少ないことがメリットとして挙げられることが多いが、
このUIでは、発生する誤差そのものを減らす仕組みにより使いやすさが向上するというメリットもある。

フリック入力ではタッチ地点からの角度(距離もだけど)で文字が選択される。このおかげで左を選択するときはタッチ地点から大きく左に移動すれば、ほとんど上下の移動は気にしなくて良くなる。
(=上下移動の誤差は発生しない
※フリック入力が中心を含めて5択だから出来る芸当で、これが9択(周囲に8個)とかだと誤差が無視できなくなってくるだろう。


まとめ:タッチ端末の画面デザイン(UIの配置など)で注意すること

ここまでの話をまとめていくと、画面デザインでは誤差の許容が使いやすさに大きな影響を与えている。
タッチ操作の誤差を許容するためには、以下のいずれかを組み込めばいい。

  1. 「移動」と「行動」を分離する
  2. 発生する誤差を減らす

最後に

デザインっていうのは7つの要素から良いか悪いかきまるらしいが、今回のはなしはそのうちのユーザビリティに関するはなしだった。
画面をつくるときは、今回のはなしをふくめ、ほかにも解りやすさなども求めていく必要がある。