私は映画を見に行く際に、映画館のアプリなどからチケット購入することが多いのですが、いまいち使い勝手が悪いと思っていました。

なぜ使い勝手悪いと感じるかを考えたときに、鑑賞する映画館、鑑賞する作品が決まっている前提で設計されているからじゃないかと思ったので、その辺を改善できるようなUIを自分なりに検討してみました。(スマホアプリです)

ユーザの想定ユースケース

ユーザの主なユースケースとしては、下記の2点を想定して設計しました。

1. 見たい映画を、自分の予定にあった時間帯、映画館で鑑賞する

2. 見る映画館は決まっていないが、近場の映画館で上映している作品の中から、自分の予定にあった鑑賞する映画を探す

チケット購入フロー

全体の流れとしては、次の2パターンです。

1-1. 見たい作品を選択する
1-2. 鑑賞エリアを選択する
1-3. 選択エリア内の対象映画館の上映スケジュールの中から、都合のいい時間帯を選択する
1-4. 座席などを指定し、購入

2-1. 鑑賞するエリアを選択する
2-2. 選択したエリアで上映している作品の中から面白そうな作品を選択する
2-3. 選択エリア内の対象映画館の上映スケジュールの中から、都合のいい時間帯を選択する
2-4. 座席などを指定し、購入

上記の画像から見てわかるように、購入時の各Stepを半モーダルにし、それを重ねていくようにしています。
こうすることで、いつでもどのStepに戻って内容を確認したり、元のStepに復帰したりすることが直感的にできるのではないかと思います。

半モーダルの使い方としてあってるのかどうかはわかっていないですが、各Stepを半モーダルを重ねていく方法は、各Stepへの行き来が直感的になり、ユーザが「何をすればいいのか」、「今どういう状態なのか」という不安を低減することができるのではないかと思ったので、今後使えるんじゃないかと思いました。

購入フローの各ステップについて

各ステップについて少し詳しく説明していきます。

作品選択
アプリのtopです。
まず人気の映画、上映中の映画から、見たい映画を選択すると、映画の詳細が表示されます。[チケット購入]をタップすると、次のステップに進みます。

エリア選択
このステップでは、鑑賞するエリアを選択します。よく使うエリアと、近くのエリア、その他のエリアから選択、の3項目からエリアを指定できる想定です。
右側にエリア内に作品を上映する映画館がいくつあるかを表示しています。

上映スケジュール選択
ここが一番のポイントです。
選択したエリア内にある映画館の上映スケジュールが一覧で表示され、その中から自分に都合のいい上映を選択できます。
また、マップ上で映画館の位置関係も把握できるようにしておくことで、一番いきやすい映画館を確認することができます。
対象映画館の中から、この映画館は対象から外したいという場合は、チェックを外すことができるようにしています。

確認
最後に、座席や席種を選択し、購入をタップすることで、購入の確定をすることができます。

その他の機能

チケットの購入の他に、マイページで購入したチケットの購入、鑑賞した作品の確認ができればいいかなと思ったので、その画面を一応作りました。

最後に

インターネット上で映画のチケット購入するときに、映画館施設の会社ごとに購入できるようになっていることが多いと思いますが、いろんな映画館をまたいでインターネットから購入できるようにするプラットフォームがあればいいなと感じました。

映画館側はそのプラットフォームを通してインターネットから購入できるようにし、購入者側は、そのプラットフォームに登録されている映画館の中から自分に都合のいい時間帯・場所のチケットを購入できれば、もっと映画が劇場で見やすくなるんじゃないかと思います。

とまあ、そんな思いで購入側のアプリUIを検討して見ましたが、半モーダルを重ねていくというのは、割といろいろな状況で使えそうな気がしました。
検証できる機会があれば検証してみようと思います。

一応Behanceのリンクも貼っておきます。
https://www.behance.net/gallery/77336633/Movie-Ticket-App?