From our sponsor: Get suggestions for improving your content, targeting, and marketing automations to help you increase revenue.
Maybe you are familiar with those ticket booking systems where, at some point during the purchase flow, you have to choose a seat. This is usually done when selling tickets for games, movies, flights or concerts. Wouldn’t it be cool to have some kind of “realistic” preview of the seat, i.e. see the stage or screen from the perspective of the space you chose? Of course it would 🙂 This is the kind of question that resulted into a new experiment which we’d like to share with you today.
So the idea is to show some kind of cinema room where we can choose seats from a seating plan. When choosing a seat, we’ll move to the respective position in the room and allow the user to see the real view from the chosen place. There is also a button in the center of the page that allows to unlock the rotation of the viewer, something that is quite important for a realistic view considering that we can rotate and tilt our heads.
The trailer that we use in the demo is from Sintel, an animated movie by The Blender Foundation. It is licensed under Creative Commons Attribution 3.0.
Initially, we show a trailer box with the info of the movie and the option to choose the seats:
When we choose to select the seats, we’ll move the view to the back of the cinema room and show the seating plan:
Once a seat is clicked, the view moves to the respective position:
The little icon in the center of the screen allows for unlocking the view, i.e. allowing for the viewer to move around. This resembles the free movements of the head that are important for a realistic view.
At any point we can play the trailer and see how the screen is being perceived from that specific place.
Unfortunately, IE does not support
transform-style: preserve-3d which breaks nested 3D elements. So this demo won’t work in the versions that don’t support it.
- Internet ExplorerNot supported
We hope you enjoy this experiment and find it inspiring!
Check out the version by Sebastian Troć where the real seats are also colored: SebastianTroc/SeatPreview
I am impressed!
Have you shown this to fandango yet?
I dont believe what my eyes see. Worderfull! awesome! in dictionary there no adjectives to define that.
Wow!!!, Amazing!! 😀
I’m just amazed … can’t even compute this level of awesomeness
This is out this world, amazing stuff!
Holy shit! That’s superb!
Beta tester Feedback: I couldn’t pause the trailer. My fingers searched for one-click on screen pause.
Secondly, I click and click over the seats. But then I realized the seat selection section at the right. lol
Anyway… You’re the goddess of Web Design. You proved it again.
Woowww!! Amazing. No words for this. Mary Lou…..
WOW it’s amazing!
This is such an epic design! Kudos for putting this up 🙂
Amazing! Keep up the great works. Thanks for inspiring me today 🙂
This is really awesome!!
Amazing!!! How long did this take…?
Wow!!! Manoela Ilic for Developer of the Year 2016!!! Tks for inspiring every day!
awesome i really wish to come up with something like on my own like really just magnifik
This is really awesome work. Thanks for the inspiration. I bet ticketmaster or some co. will see this and flip out. Fingers crossed.
What is this I don’t even…
Good Think with innovation idea
This is truly amazing work!
Really nice keep up the good work 😉
Wish i could learn this much from you. Having a hard time working on UI/UX
This is really awesome, thanks for sharing!
this was Great…
thx for inspiring us
Awesome…Excellent..thanks for sharing such creative things.
This. is. sick. I have no words to express what I feel right now
this is very interesting. thanks..
Holly crap! I have a duck skin! Very awesome, much much like it! Big up!
This is awesome! We recently converted a section of our warehouse to a theatre, so I decided I would make a preview of the seat arrangements and add the location of our top hat heaters. So here it is if you want to take a look: Frone’s Cinema | Super Bowl 50
Woow, woow, just woow. Mary Lou you’re the best woman web developer I’ve ever seen. I follow you couple of years and I really love your works. You have great mind. Awsome work again. I hope all ticket sellers uses this plugin.
Can you include people for the seats that are already taken?
Wonderful, really great work
Wow!!! De lujo
Awwwwww… mannnnn… now this is the ultimate level of interaction and user experience… this is so awesome 🙂
Beautiful and clean work!
I always get inspiration from this website. Keep on the great work you do. This is some useful UX that Cinemas should adopt. One suggestions that i would love to see is to be able to select seats from the 3D view itself. May be you could show the already booked seats colored.
Very cool and simplistic design. Nice work Mary!
Did anyone find a workaround for IE? I love this and would like to use it!!