Prototyping AppleTV apps with Keynote
Earlier this week I published a list of resources and articles for designers interested in creating apps for TV — this was mainly in reaction to the AppleTV announcement but actually spanned several different platforms.
I wanted to add to that list with a quick write up of my own experience of using Keynote to prototype apps for TV.
First off, I know that there are a ton of prototyping apps on the market and when it comes to TV interfaces I’ve experimented with a fair few. But in terms of alround features and ability, Keynote is by far the best.
Once the new AppleTV hits shelves the barrier to designing apps for all TV platforms will fall dramatically, but in the meantime (and for those with no interest in learning how to code) Keynote is an awesome place to start if you want to learn the fundamentals and get prototyping simple TV apps, quickly.
I wanted to avoid the basics of prototyping with Keynote and focus instead on the pros and cons of prototyping specifically for TV.
The Good
Setup
Setting up Keynote is simple. If you select Widescreen (16:9) when creating a new document in Keynote, the canvas size is preset to 1920 x 1080 which is the aspect ratio of most modern TVs.
I tend to use Keynude as the starter for all projects as it ditches any and all existing templates as well as those hideous preset element styles.
You now have your blank canvas.
Scaling
TV apps don’t adapt, they scale and one of the best things about Keynote is its ability to scale up to most TV screen sizes without any loss to resolution.
Obviously to achieve this, any assets (i.e. pack shots, album covers) need also to scale appropriately, but providing you use hi-res images, Keynote does most of the heavy lifting.
Templates
Almost all TV operating systems rely on templates to make their apps as easy to maintain as possible and reduce hardware resource (although this probably won’t be an issue for the new AppleTV).
Keynote is great at managing templates, meaning you can set up the various grid systems and layouts for your app and pull them in when needed — allowing you to experiment more quickly.
Magic Move
The Magic Move animation in Keynote makes complex transitions relatively effortless. You can string together deep flows quickly by duplicating slides, moving around the relevant elements and connecting them with an animation.
In my experience Magic Move does the job 80% of the time —and is a good representation of TV hardware limitations, but obviously for more intricate animations you can use the full suite of builds and actions.
Preview
Presentation mode, Keynotes most obvious feature, allows you to quickly preview and demo your prototype on a larger screen, regardless of whether or not you have AppleTV and AirPlay.
This is especially useful for checking font sizes, focus/selected states and layout spacing on the fly.
The Not So Good
Control
Keynote’s main disadvantage is it’s lack of interactivity. It’s awesome for click through prototypes that give an idea of how templates and screens connect, but in terms of tangible control it’s not going to answer all the questions.
As far as tools for TV prototyping go, this isn’t a deal breaker but its something to consider before forging ahead.
File Size
The size of .key files can get unruly very quickly, especially if they’re loaded with animations and images — this can cause major problems if you’re using AirPlay and AppleTV.
There is really little that can be done about this when resolution is so important, but separating flows into separate Keynote files is a good place to start.
Reliability
Generally… Keynote is a heap of shit. It crashes continually and the most recent version has a habit of quitting when you get to slides with specific combinations of assets and transitions.
CMD+S is your best friend.
Bonus Tip
Owning Magic Move
Its clear that Magic Move was not meant for interface and motion design.
Often you’ll find that elements act differently from slide to slide, despite being exact duplicates. For example rather than Keynote simply modifying the properties of an active element, it will transition it into position in place of an existing element.
After much experimentation I realised that if Keynote thinks an element is unique and in a give position for a specific reason, it will modify the style, rather than move the element. This is because in most presentations, elements would contain text or an image asset and Keynote would know not to move them.
Anyway… a fix for this is to give each element on the page an unique name (like naming layers in Sketch). As there are no object names in Keynote I achieved this by inserting text inside the element and reducing the font size to 1px to remove it from view.
Simple but effective ‘hack’
UPDATE
I’ve created a free Keynote template to help designers get started with AppleTV app prototyping.
If you have had any experience with Keynote prototypes for TV or if you have any questions or feedback, please leave a comment or tweet me.
Thank you for reading —
If you enjoyed this post, then I’d appreciate if you could recommend it. For more of the same you can subscribe to my newsletter or follow me on twitter.
