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
That’s crazy Manoela, one of the most amazing thing you created! Impressive
wow wow that’s just AWESOMEEEEE @Mary
Wowzers, that is mind blowing. Not only impressive, but you capture something that is elementary in the ticket-buying process. Respect!
WOOOOOOW THAT’S AWESOME!!!
Haha. that’s crazy!!! Awesome crazy that is.
By the way, preserve-3D isn’t experimental anymore right? It’s just that Internet Explorer doesn’t support it. Edge, Microsoft’s new browser, supports it fully!
Man, this is so goddamn rad! I love it! Well done!
This is called out of box !!
This is the most innovative way to book your cinema tickets. Awesome work Manoela!
Wow it’s extremely stunning and inspiring. Great job.
SUPER AWESOME <3
This is awesome. Good job!
Brilliant! I guess they will disable for the rows closest to the screen! :p
Based on your example I will do something like this on top of Electron. All credits to tympanus of course.
wow! looks great!
You’re the Steve Jobs of webdesign, at top of the world! Amazing job Mary Lou!
Just got my mind blown! Thanks for these examples, they are really inspiring 🙂
Wow. You continue to impress. AMAZING!
Wow, you redefine the ways to think about. It really is amazing. Great Work 😀
This is very impressive and I’d definitely use this feature if it were available at my local cinema/theatre. One thing I would like to highlight though is that the ‘click the middle icon’ thing is not that obvious. I would make the call to action a little clearer to avoid user frustration.
ML, as amazing as your other demos are, this takes amazing to a whole new level. How are going to top this one?
Standing ovation from me …. whistling & cheering ….
Super cool, super useful and very high value ad. Next stop, licensing via rottentomatoes?
UNBELIEVABLE! This is huge. Well done guys.
Cinema websites need to totally build tools like this.
Dang, GREAT JOB! Good start to 2016 🙂
OMG!! This is the best thing I have ever seen!!!!!! TRUELY AMAZING!
Thank you for sharing!
Wooooww!! You are crazy!!! Always… Great work! Thanks!
Amazing codrops… amaaaaazing Mary Lou, just don’t have words to describe what a huge idea this cinema preview, and how useful it’s going to be…
Thank You Codrops team
Aww! This has the potential to revolutionise the cinema booking process.
amazinnnnnnnnnnnnng! that was awesome! great work!
Oh my GOD ….
Very impressive, It should be adopted as the reservation system in all cinemas.
Everytime I see a project or demo posted in this category I think “there’s no possible way to they can top that”. But a few weeks pass and what do you do? You find a way to top it.
It’s truly amazing! Well done!
Only One Word Amazing….
I don’t have words to describe….
I rarely comment on your personal projects Mary as they’re all equally impressive, but this is some next-level UX. Absolutely amazing. Love it!
This is fantastic!
Wow! Amazing! Thanks Codrops for this sharing!
Wow, amazing . Should be used in every ticket shopping website
Ahahaha, so funny, I had the exact same idea this week and posted it on dribbble today: https://dribbble.com/shots/2455519-Book-movie-tickets-3D
I prefer your version though 😀
Very well done!! Love the concept!! Damn.. you guys are good hahahah!!
Amazing!! This is what one should expect when purchase a ticket online!
WOW, Mary Lou!!! That’s a freakin’ awesome concept! Hands down!
Good job, Mary Lou.
And it will be more real if users can raise their head ~