バスの座席の予約に使用されるタッチUIの提案
バスのチケット予約アプリのレイアウトをデザインしようとしています。ユーザーは予約したい座席を選択できます。以下は私たちに提供されたレイアウトです。
ユーザーが予約したい座席を選択できるようにする革新的で簡単な方法の観点から、Android/iOSアプリで同じように再現する方法に関するいくつかのインスピレーションと提案を探しています。
モバイルデバイスでの座席の選択は、いくつかの条件を満たす必要があります。
- 出入り口やトイレ（ある場合）など、車両の主要な物理的特徴は明確にマークする必要があります。
- すべてのアクティブ領域は、簡単に「押す」ことができるように十分に大きくなければなりません。
- コンテンツが画面にうまく収まらない場合は、特定の方向でさらに利用できることを示すインジケータが必要です。
- 選択プロセスは、縦向きにも横向きにも等しく使用できる必要があります。
したがって、次のことを行う必要があります。
- 座席の周囲にバスの基本的な輪郭を描き、空間を比例的に表現します（座席のアイコンは互いに接触できますが、合計の空間は座席のスペースと足元の部屋のスペースに等しくなければなりません）。
- 各座席のアイコンのサイズを大きくして、隣の座席のアイコンを誤ってアクティブにすることなく押すことができるようにします。
- 搭乗/移動プロセスで重要な役割を果たす場合を除き、指揮者の座席をレイアウトと凡例から削除します。
- 背景と要素のコントラストを上げる。黒の背景に濃い青色のテキストはありません。
- 混乱を避けるため、または人間の形のアイコンを追加するために、利用できない座席から座席番号を削除します（ユナイテッド航空の例を参照）。
- 画面に凡例用のスペースがない場合は、凡例を切り替える
BackおよびBook the ticketが必要な下部のコントロールにボタンを追加します。 注：これはベストプラクティスではありませんが、限られた画面領域のために強制されます。 - すべての座席が1つの画面に収まらない場合は、スクロールするための手がかりとしてより多くの座席が利用できるエッジにグラデーションフェージングを適用します。
- 横向きのレイアウトが使用可能であることを確認してください。
例：
ユナイテッド航空の座席選択表。翼の位置、実際のサイズの比率、および占有されている座席のアイコンに注意してください。
可能性のある座席選択のモックアップ（それぞれ縦長と横長で、実寸ではありません）：
水平スクロールアフォーダンスのモックアップ：
座席を予約するときに、乗客の意思決定プロセスに影響を与える要素について考えます。どの要因が彼らの選択に影響を与えますか？
- 窓側の席
- アイルシート
- 非常口
- 車いす用スペース
- トイレに近接
- 旅行パートナーの近さ
- など...
個人的には、これらの要素のいずれかが適切でない限り、どこに座ってもかまいません。そのため、座席を選択してもらうと、より良い体験が得られます。
横から考えることをお勧めします。ユーザーが目標を達成できるようにするために、グラフィックレイアウトに固執する必要はありません。この従来の形式から離れると、さらに改善が見られる場合があります。
これが私の提案です：
- バスの座席数の半分だけを表示します。このようにして、ユーザーはクリックするためのより大きな「シート」ボタンを持つことになります。ユーザーは上下にスクロールして座席を表示できます。
- 凡例を座席画面の外に表示します。ただし、常に画面の上部/下部に表示されます。
- バスの特徴がどこにあるかいくつかの指標を提供します。つまり、ドア、緊急事態、車輪などです。
- サイズに関して顧客が期待できるものの（現実的な）スケーリングされた表現を提供します。 （通路部分は、写真の3席幅のようです）
- 適切な色を使用して（顧客の人口統計、聴衆の文化に応じて）、座席予約のさまざまな状態を示します（私の文化的なコンテキストでは、利用不可は赤などにする必要があります）。
- ユーザーが予約している内容のコンテキストを提供するには、バスサービス番号、ルートなどの詳細情報を提供する必要があります。
- そして最も重要なことは、予約を許可するために「予約する」ボタンを用意することです。
まだ調査段階にある場合は、Webコンベンション調査 http://seatguru.com by Tripdvisorに含めることを検討してください。
ユーザーはフライトを検索できます>フライトが結果に表示されると、飛行機は図のトップレベルビューに表示されます>ユーザーは（iPadでは実用的ではありません）シートの上にカーソルを合わせると、その特定のシートに関する特定の情報が表示されます。情報には、トイレへの近さ、ヘッドレストのTV画面、クラスタイプ、その他の役立つ情報が含まれます。関連する詳細を提供するクリック可能なアイコンが付いた便利な機内アメニティキーもあります。
Seatgurusの機能のいくつかはあなたのアプリにうまく翻訳できます。