タップ・長押し・ドラッグを、役割で使い分ける

選ぶ、続ける、位置を変える

味を選ぶのはタップ、機械を回し続けるのは長押し、棒の位置を変えるのはドラッグ。このように操作へ意味を割り当てると、同じ画面でも役割を見分けやすくなります。操作の種類を増やすこと自体を目的にせず、プレイヤーが調整したい量に合わせます。

長押しが必要なのに見た目が普通のボタンだと、一度押して離されやすくなります。「押している間、削る」のような短い文言と、押している間だけ動く表示を組み合わせます。押し始めるまで長い待ち時間を入れる場合は、その必要性も見直します。

指を離した瞬間まで設計する

押し始めと移動だけを実装すると、画面外へ指が出たときに機械が動き続けることがあります。Pointer Eventsには入力の中断を知らせるpointercancelがあります。通常の終了と中断の両方で、動作中の状態を解除する設計にします。これは操作を厳しくするためではなく、意図しない継続を防ぐためです。

• 押した直後に、対象が選ばれたことを見せる。
• 移動中は手元と対象の関係を保つ。
• 離したとき、中断されたとき、別画面へ移ったときの停止を決める。

補助操作でも判断を残す

円を描く操作が難しい人に、長押しで棒を回す補助を用意することはできます。その場合も、巻く場所、止める時刻、色の切り替えなど、本人が決める部分を残します。補助を選んだら最良の完成品が自動で出る設計では、試す楽しみがなくなります。

確認では、タップだけで意図せず長押しが始まらないか、スクロールしたい場所でゲームが動かないかを見ます。操作領域と説明文の領域を分け、必要な場所だけタッチ操作を扱うと、ページ全体の使いやすさも保ちやすくなります。