When Apple first introduced the new Apple TV in 2015, I was so impressed to see how perfectly the interaction works with the Siri remote, and also seamlessly works with their tvOS visual language. It really felt like every part of the design is trying to convey the same message that help users to navigate and response. I couldn’t help but ask myself how did the interaction designers visualize those slick interactions when they were designing.
The Future of Prototyping and Interaction Design
As a prototyping enthusiast, I’ve never seen a piece of interaction design like what Apple tvOS has achieved, not to mention how to test and validate it.
Many interactive prototypes that we use today are still considered as low fidelity, I’m saying that because when we really think about those interactions behind the scene, lots of details such as motion, transitions, trigger events are not designed nor described fully. And to be quite honest, sometimes we are still not very comfortable foreseeing what would happen on both interface side and user side when designing interaction. Shout out to devs who are so good at picking up the missing puzzles.
The good news for all interaction designers is there are more and more powerful prototyping tools being introduced everyday and it is time to move on to the next level.
Let’s Begin
Below you can see the final prototype.
And I will walk you through the process step by step. If you had Framer installed, feel free to download this prototype and follow along.
Start with the Structure and Visual
The first thing I do is to create a wrapper that contains everything, so you can easily center all your design elements by adding wrapper.centerX(). And we will use that to create the scroll down effect later.
Create a moviesContainer to contain those movie posters, and set it’s parent to wrapper.
Make all those movie posters by using for loop and arrays — check out David Lee’ Code Less & Achieve More with Arrays in Framer to learn more about how arrays can make your life so much easier.
Here’s another live example of how array is your best friend. I set up an array for all the movie titles, it’s easier to edit and maintain afterwards.
Since everything you created in Framer is all HTML/CSS and JavaScript, you can simply add HTML texts and custom the CSS styles.
Time to Have Fun with Your Game Controller
Here is what should happen. You press the D-pad of your game controller and navigate around those movie posters like you saw in the prototype.
But How?
All you need is to run the ControllerMate program to do it for you — Check out Johan’ Framer and Game Controllers for setting up the Xbox 360 controllers.
And if you have a PS4 controller like me, you can still follow the same steps from the above mentioned article. The only difference is you need to create Value Selector for each direction.
And the end result looks like this.
Set Up the Selected and Unselected States
Let’s go back to Framer and add states for the movie posters.
States are sets of layer properties and values in Framer. Here we add an unselected and a selected state. Remember to add two states for header (Interstellar poster) too. Lastly, set header as the default selected item and the rest as unselected.
Set Up the Scrolling Effect
Now you know why we put everything inside wrapper. We can make the scrolling effect by just adding a scrollDown and a scrollUp state. Super simple!
Fire Up the Interaction
Finally, we are ready to fire up the interaction!
Since Framer is based on JavaScript, we can add an Event Listener for listening keyboard inputs and also inputs from the game controller via ControllerMate.
The following example defines what will happen when you press left arrow key on your keyboard as well as left key of your game controller. The details for each line of code are written in comments.
You Made It!
Congrats! This should be your final look and feel.
Hope you enjoy reading this. If you have any questions or feedback, I am active in Vancouver and @jinn_rw, feel free to reach out to me and say hi :)
