Focus on tvOS
Thinking for non-touch or click interfaces
A few days after tvOS was released, I took a piece of paper and started imagining which app would make sense on the big screen. New medium, new way of thinking. Gammes seemed like the good candidate, I was pretty confident that something could be MVP-ed pretty quickly. The app is a library of about 60 music scales, and I already re-wrote in Swift 2 my scale-drawing engine. Sweet!
A few days after, Airbnb released this article about Apple’s focus engine, what Apple made to navigate in a no-cursor world: http://nerds.airbnb.com/tvos-focus-engine/
I didn’t read it, thinking that I could figure it out. Spoiler : I was wrong :)
(Update : I presented this content at Cocoaheadsmtl, here are the slides : http://fr.slideshare.net/SraphinHochart/focus-on-tvos-53999504 )
A few hours in, after building a little API (since Parse.com is not compatible for tvOS… yet) and doing a few tweaks, I got it working on the simulator.
Not too bad looking so far.
From simulator to device
I got the email telling me that I was in for the Apple TV Dev Kit. Great, I let the project on the side for a bit, the Kit was shipped to France, and my parent shipped it to Canada, to it took a bit longer than expected, but still a great deal for 1 euro.
What I build had a pretty bad UX once in device. Video here.
To keep the story short, here is what didn’t work :
Diagonal navigation does not work.
Because the music instruments and root note where on the top middle section, and the scales list was on the right, and the description button was on the bottom left, every time you go from one to the other, it changes your current selection.
Solution?
- Use the Netflix/iTunes/Airbnb strategy : each screen should only have one direction of navigation. Top to bottom, or Left to right.
(Thanks to Pierre, UX Designer at Breather, for the recommendation :) )
2. Space your inputs so any move from one to the other has a clear path.
3. Build a UI for easy focus, the less elements and the clearer navigation the better. Use defaults components when you can, as users will already have to learn how to navigate on those new devices. When possible, design your UI to avoid excessive input.
4. If all else fails… then you can use some coding tricks (and actually read Airbnb’s wonderful article or Apple’s constantly evolving docs).
After spending a lot of time on the Apple developer forum, I realized that I wasn’t the only one struggling with that navigation paradigm. There are a few tools that will come handy. They recommended the use of UIFocusGuide(s) (= defined areas of your screen), with a specific preferredFocusView within each area.
That way you clearly specify what needs to be focused on when you move from one area to the other.
Hope that helped!
More tips on the tvOS Interface Guidelines
