アプリケーションとマウスとタッチとメニューについて
WindowsのアプリケーションをとWebアプリケーションで、マウス操作がかなり違いますよね。最近ではiPadのようなタブレット端末対応も必須のような雰囲気で対応しなければいけない事が多すぎてたまりません。
それぞれのアプリケーションでの操作方法をちょっと整理してみました。
操作 | Windows アプリケーション | Web アプリケーション | ||
---|---|---|---|---|
マウス | タッチ | マウス | タッチ | |
シングルクリック | ○ | × | ○ | × |
右クリック | ○ | × | × | × |
ダブルクリック | ○ | × | △ | × |
ドラッグ | ○ | ○ | ○ | ○ |
スクロール | ○ | ○ | ○ | ○ |
タップ | × | ○ | × | ○ |
ダブルタップ | × | ○ | × | ○ |
長押し | × | ○ | × | ○ |
スワイプ | × | ○ | × | ○ |
ピンチ | × | ○ | × | ○ |
フリック | × | ○ | × | ○ |
hover, mouseover | ○ | × | ○ | × |
○:使う、×:使わない、△:あまり使わない
ですが、×でも必ずできないということではありません。
さて、かなり適当になってしまいましたが、それぞれの操作をどう違和感無くリンクさせていくか。
シングルクリックとタップ、ダブルクリックとダブルタップ、ドラッグ、スクロールは問題ないでしょう。
マウスでもタッチでも操作方法が違うとはいえ直感的に使えているはずです。
スワイプとピンチについてはタッチパネル独特の操作ですので、重要な機能は割り当てないか、マウスでも出来る方法(メニューボタンなど)用意するとよいでしょう。
フリックについてもタッチパネル独特の操作ですが、マウス操作で行う場合マウスジェスチャー的な機能を実装すれば良いでしょう。面倒ですが。
残るはmouseover、hoverと右クリックと長押しなんですが、ここからがまだ長いんです。
まずはデザインのお話
とくにwebの場合、mouseover、hoverでボタンの色を変えるなどのUIを作っていることが非常に多いのですが、これがタッチ操作では出来ません。カーソル操作の視認性を上げるという意味やっていたデザインは、タッチパネル時代では、本当にデザインのみで対処しなければなりません。
MicrosoftがWindows8に搭載したModern UIのように、アプリケーションデザインを変えていかないといけません。
ここら辺も参考に Designing UX for apps
そして機能のお話し
Windows(マウス)の場合、右クリックメニューというものを沢山使っていました。
web(マウス)の場合、右クリックが使えないので、hoverでツールチップを出したりメニューを表示させたりしました。
タッチの場合、なにかエレメントに対してメニューを出すとなると、残る操作は長押ししかないんですよね。iOSやAndroidでもそんな感じになってますね。
じゃあどうすんのさ?
デザインのほうは、がんばってとしか言いようがない・・・。
webアプリの場合、hoverと長押しでサブメニュー表示にしておくことにしました。
これでPCのマウス操作と、タブレットなどからのタッチ操作で機能が共有できます。
実際に実装する場合、Hammer.jsなどのスクリプトを使ってやるのが便利でしょう。
通常のスクリプトとjQueryのプラグインとあります。
これを使えば、
- タップ
- ダブルタップ
- スワイプ
- 長押し
- ピンチ
- ドラッグ
のイベントが取得できるようになります。
使い方はwikiに載ってます。
長々と書きましたが、
web開発って、すごく便利になってきてはいるけれど、かなり効率悪いよね・・・。
という心の叫び。
Web制作の現場で使うjQueryデザイン入門[改訂新版] (WEB PROFESSIONAL)
- 作者: 西畑一馬
- 出版社/メーカー: アスキー・メディアワークス
- 発売日: 2013/03/07
- メディア: 大型本
- クリック: 4回
- この商品を含むブログ (2件) を見る
実践 Web Standards Design ~Web標準の基本とCSSレイアウト&Tips~
- 作者: 市瀬裕哉,福島英児,望月真琴
- 出版社/メーカー: 技術評論社
- 発売日: 2008/11/29
- メディア: 大型本
- 購入: 18人 クリック: 293回
- この商品を含むブログ (60件) を見る