小さな画面のモバイルデバイスに座席選択を実装する方法は？

Question

イベントや映画のチケットをオンラインで予約したことがある場合は、おそらく座席の選択に苦労しています。講堂が大きいほど、座席は少なくなります。

映画のチケット予約サイトを作成しています。モバイルデバイスでの座席の選択により、UXに大きな問題が発生しています。問題を説明するために、中規模の講堂のスクリーンショットを添付しました（講堂は2倍または3倍に拡大することもできます）。講堂が大きいほど、座席は小さくなります。

座席の選択を簡単にするための潜在的な x ソリューションを探しています。

私が検討したこと：

デバイスを横向きにすることを推奨するメッセージを追加します（2番目のスクリーンショット）。これは問題を解決しませんが、座席を大きくするために使用できるより多くのスペースを追加します。
講堂をタップしてズームインおよびズームアウトできる複数のエリアに分割します。

＃2ソリューションの問題は、このような分割により、複数の分割/分割境界にまたがる座席の選択が複雑になることです。

Jack Aidley · Accepted Answer

1つの場所に確実に解決するには小さすぎるものに触れようとするときにAndroid=ブラウザが行うことを実行します-ズームして確認します。最初のタッチで、タッチの周りの領域をズームして、個々の座席は明確に分離可能です。2回目のタッチで、ズーム領域内の目的の座席を選択します。

これは通常のブラウジングエクスペリエンスの一部であるため、ユーザーにはなじみがあり、いずれにしても簡単に理解できます。

注：ズームされた領域は、事前定義された領域に分割されるのではなく、ユーザーのタッチに厳密に反応するため、これは提案2とは異なります。

Sanshizm · Answer

あなたはチェックできます book my show app 彼らは小さなウィンドウを与えて全体の座席を表示し、次にメイン画面に最大化されたビューを表示します。ズームアウトして、ワンクリックで複数の座席を選択できます。

Gajus · Answer

座席のグループを選択できるポインタ要素（iOSおよびAndroidのテキスト範囲選択ブラケットと同様）を使用することを選択しました。

視覚的には次のようになります。

ポインターは、座席選択の開始位置を指します。つまり、ユーザーが3つのチケットを購入している場合、ポインターは、座席ポインターが指している座席から始まる3つの座席を選択します。

ユーザーは、タップアンドドラッグ（パン）モーションを使用して選択を変更できます。他の提案されたソリューションとは対照的に、このアプローチは単一モーションの相互作用です。

ポインタのサイズは固定されています。つまり、講堂のサイズが大きくなると（したがって、個々の座席のサイズが小さくなります）、ポインタのサイズは一定のままです。これにより、小さな要素で表される特定の座席を選択できるという主要な問題が解決されます。

これは巨大な大講堂（700席以上）の問題を完全に解決するわけではありません。巨大な講堂の場合、席が非常に狭くなり、そのようなポインターのナビゲーションでさえあまりに急になってしまいます。ただし、そのような講堂はまれです。巨大な講堂の場合、アプリケーションはデバイスを横位置に傾けることを提案するメッセージを出力します。これにより、座席要素のサイズとポインターの感度が増加します。