2011年10月13日木曜日

スマートフォンなどのタッチUIで気を付ける点

 最近スマートフォンのブラウザサイトを作ってて思うことを書いてみる。

1) マウスのように「点」ではなく、「面」でのクリックなので、「面」でクリックしても誤クリックにならないようにする。
具体的にはリンクやボタンは大きめに。大きくできないなら余白を広く。

2) マウスとタッチで「リンクをクリックして遷移していくストレス・コスト」が違う。マウスのほうが直接画面をタッチするわけではないので、カーソルの軌道修正などのコストがあり、一回のクリックのコスト・ストレスはタッチより高い。
なので、スマホ版は画面が小さいというデメリットを、「通信が発生しない高速の画面切り替え」で補うと良い。
具体的には、メニューなどはタッチさせて、JavaScriptで表示要素を動的に出す感じとか。

3) 片手(左手など)で操作で操作する場合、親指での操作になるとおもうが、リンク・ボタンの位置によっては押しにくいことを認識すること。左側の方が押しやすい。最近のfacebookのスマホ版で左上のロゴがきえて、メニューになったのもそのあたりかと。