並び替えUIをドラッグで実装するか２回クリックで実装するか
文字を並び替えて単語を作るWebゲームを作った。
そのなかで、『並び替えUIをドラッグで実装するか２回クリックで実装するか』という問題にぶち当たり、いろいろ悩んだので、記録しておく。
まずその両者についてどんなものか見ていこう。
ドラッグ操作
黄色の円はマウスを押したタイミングを表している。
見ての通り、いたって普通のドラッグ操作。だいぶ直感的。
２クリック操作
１回目のクリックで移動元を選択する。するとパネルがマウスを追従するようになる。そして２回めのクリックで移動先を選ぶ。
それぞれの長所短所
ドラッグ操作を選ぶ理由
- ドラッグ操作のほうが直感的で分かりやすい。
- タッチデバイスでは２クリック操作の途中の軌跡が表現できない。
２クリック操作を選ぶ理由
- ノートパソコンのトラックパッドではドラッグ操作が難しい。
- スマホでドラッグ操作するとパネルが指で隠れる。
試行錯誤
試行錯誤① PCとスマホで操作を分けてみる
- タッチデバイスでは２クリック操作の途中の軌跡が表現できない。
- ノートパソコンのトラックパッドではドラッグ操作が難しい。
この問題を一度に解決する為に
- PCは２クリック操作
- スマホはドラッグ操作
と操作方法を分けてみた。
しかし以下の問題が残る。
- スマホでドラッグ操作するとパネルが指で隠れる。
試行錯誤② 指で隠れないように表示を工夫する
選択しているパネルの文字を左上にうっすらの拡大表示するようにした。これで今なんのパネルを選択しているかわかる。
最終形 いっそ両方に対応してみる
- ドラッグ操作のほうが直感的で分かりやすい。
最後に残ったこの問題はなかなか悩ましい。
スマホが普及した今、ドラッグ操作のほうが多くの人にとって直感的なような気がする。
とはいえ、良く分からないUIを目の前に出された人が「まず試してみる操作」は、やはりクリックのような気もする。
というわけで、PCもスマホも操作方法を分けず、両方に対応することにした。
- マウスダウン(タッチダウン)してから20px以上動かしたらドラッグ、それ以下ならクリックとして扱う。
PCもスマホもこのルールで動くようにした。
最近のブラウザ[1]はPointer Eventという機能でマウスイベントとタッチイベントを透過的に扱えるので、これを使った。
まとめ
結局どっちも一長一短なので両対応という落とし所に落ち着いた。
ふと他のゲームはどう実装しているのだろうと思い、『ことばのパズルもじぴったん』のiOS版で遊んでみたところ、タップするとパネルが指の左上でホバーされた。
この記事の『試行錯誤②』のアプローチに近い。タッチ操作に特化したアプリならこれが一番無難なのかもしれない。マウスで同じ挙動だと、カーソルの左上でパネルがホバーするのはちょっと違和感があるかもしれない。やはり一長一短。
最後に、今回作ったゲームのURLを貼っておきます。React+SVG製です。
-
Safariだと13(2019年リリース)以降でないと使えない。幅広くサポートする必要があるサイトではちょっと厳しいかもしれない。 ↩︎
Discussion