Apple TV UX: 8 Guidelines for greater Apps

CELLULAR
CELLULARCELLULAR
Apple TV UX: 8 Guidelines for greater Apps
Best practice:
Using the TV itself is super easy and
almost the same for the past 40 years.
Best practice:
Using the TV itself is super easy and
almost the same for the past 40 years.
Even my grandma knows how to do it!
Best practice:
„The future of TV is apps.“
Best practice:
But how do you build an
outstanding TV App?
Best practice:
CELLULAR’s 8 Guidelines:
Best practice:
„Already little deviations to the standard Apple TV UI, can eventually
pose a bigger challenge for the development than an iOS app.“
SVEN JANSEN , DEVELOPMENT CELLULAR
STICK TO THE
APPLE GUIDELINES
Best practice:
Apple TV works different from other TV
boxes. The all new touch remote changes
the interaction with the box and implies
new UI principles.
STICK TO THE APPLE GUIDELINES
Best practice: Showtime
Recommendations
If you decide to deviate from the
guidelines, your layout needs to
create a new value for the user
Use interface elements from UI Kit
Best practice:
MAKE FOCUS OBVIOUS
„The speed of the Touch Remote is one of the best features on the new Apple TV.
Therefore, a clear focus is essential for a good orientation.“
TARA WESTON , CREATION CELLULAR
Best practice:
While using the Apple TV, the user sits
at a distance and needs to have a clear
view on what he is doing and where he
is navigating. Additionally, he is able to
skip through content extremely quickly.
MAKE FOCUS OBVIOUS
Best practice: ZDF App
Recommendations
Therefore content needs to
be clearly visible at all times
Add certain information when your
item comes on focus.
Apple for example is adding the title
Don’t let other content distract your focus
Best practice:
„Don’t see the focus as a limitation, but as a chance.“
JOHANNA OPPENHEIM , CREATION CELLULAR
DISCOVER THE FOCUS
AS A VALUE
Best practice:
Focus gains a totally new and higher
significance on TV and needs to be
rethought.
DISCOVER THE FOCUS AS VALUE
Recommendations
See, that focus on TV gives you a whole
new level to show information
Know, that focus on a TV Box works
completely different than a mouse over in
web and is of way greater importance
Distinguish which information need to
always be shown and which on focus
Best practice: Airbnb
Best practice:
„The remote does not support diagonal directions.
Therefore you should avoid diagonal routes for your user.“
THORSTEN JONAS , CREATION CELLULAR
NO DIAGONAL
NAVIGATION
Best practice:
Even though the touch remote invites the
user to make diagonal touch gestures,
the Apple TV does not support diagonal
navigation.
NO DIAGONAL NAVIGATION
Best practice: Movies
Recommendations
Build a structure that is easy to use
with up, down, left and right navigation
Arrange contents in vertical and horizontal
lines and avoid dimensional grids
If that’s not possible, change your structure
and stay with one of the templates
Best practice:
„Finally I can touch the TV without having to get up from the couch.“
JÖRN SIEDENTOPP , CREATION CELLULAR
USE THE
TOUCH PAD
WISELY
Best practice:
The new Apple TV remote works completely
different than all other remotes. It has a touch
pad, which enables a much faster navigation
and uses a floating instead of a fixed focus,
for example.
USE THE TOUCH PAD WISELY
Recommendations
Make use of animations as a result to
an user interaction to explain context
whenever possible
Support the users feeling of touching
the interface by providing teasers with
parallax effect
Best practice:
„Simplicity and reduction need to be the guiding
principles during the creation process.“
SIMONE BRAUNER , CREATION CELLULAR
REDUCE
Best practice:
The Apple TV impresses with its light and airy
design, which only works without overloaded
screens. Furthermore, no one wants to read
long copies on TV.
REDUCE
Best practice: Airbnb
Recommendations
Detect the essential information
Know at what point which
information is relevant for your user
Try to show as much information
as possible by using images
Best practice:
„Latency in visual feedback to touch input can harm the user experience extremely.
That‘s why we made every effort in optimizing the performance of the user interface.“
KAI HUPPMANN , DEVELOPMENT CELLULAR
PERFORMANCE DEFINES
THE QUALITY
Best practice:
The new Apple TV lives through its fluent
and vivid navigation. Every jiggle strikes even
more attention than on mobile devices.
People are used to having their TV work
perfectly at all times.
PERFORMANCE DEFINES
THE QUALITY
Best practice: Plex
Recommendations
Technology builds the basis
Improve the performance of your app
and make it work perfectly for your user
Performance is a feeling -
Use structure, UX, UI, and technology
to generate this feeling
Best practice:
„TV is great, because it is getting personal.“
GUNNAR HAMM, CREATION CELLULAR
BE EMOTIONAL
Best practice:
The TV is the flagship for big and beautiful
visuals. Make every screen a cinematic
experience
BE EMOTIONAL
Best practice: Yummly
Recommendations
Don’t try to fill every empty space
Use rather less content and arrange
it generously
Avoid tiny artwork, but use fullscreen
images to support the cinematic feeling
Best practice:
A TV app should be as easy
to use as the TV itself.
Naturally this leads to one principle:
Thank you.
CELLULAR
Hamburg, Germany
info@cellular.de
Thorsten Jonas
Head of Concept
tjonas@cellular.de
Tara Weston
Concept
Constantin Rueff
Design
Credits: Apple TV Product Photos by Apple, ZDF App Photos by CELLULAR
1 of 24

Recommended

Apple Watch / Smartwatch UX: 7 Guidelines for greater Apps by
Apple Watch / Smartwatch UX: 7 Guidelines for greater AppsApple Watch / Smartwatch UX: 7 Guidelines for greater Apps
Apple Watch / Smartwatch UX: 7 Guidelines for greater AppsThorsten Jonas
6.1K views22 slides
Ux design environment for samsung tv application by
Ux design environment for samsung tv applicationUx design environment for samsung tv application
Ux design environment for samsung tv applicationParlinggoman Hasibuan
954 views13 slides
UX on the big screen - MobX Conference 2016 by
UX on the big screen - MobX Conference 2016UX on the big screen - MobX Conference 2016
UX on the big screen - MobX Conference 2016Thorsten Jonas
2.4K views115 slides
The ZDF App Universe by
The ZDF App UniverseThe ZDF App Universe
The ZDF App UniverseThorsten Jonas
1.5K views97 slides
Computer club iphone 1 4-2017 by
Computer club iphone 1 4-2017Computer club iphone 1 4-2017
Computer club iphone 1 4-2017blasecarl
13 views54 slides
Computer club iphone with voice by
Computer club iphone with voiceComputer club iphone with voice
Computer club iphone with voiceblasecarl
25 views54 slides

More Related Content

What's hot

What is MVP? by
What is MVP?What is MVP?
What is MVP?Ready4S
191 views11 slides
Benefits of Enplug for Customers by
Benefits of Enplug for CustomersBenefits of Enplug for Customers
Benefits of Enplug for CustomersColin Bovet
380 views5 slides
Lytro by
LytroLytro
LytroJiří Jón
382 views9 slides
Indoor Location / iBeacon @ Digital Summit Ireland by LocalSocial by
Indoor Location / iBeacon @ Digital Summit Ireland by LocalSocialIndoor Location / iBeacon @ Digital Summit Ireland by LocalSocial
Indoor Location / iBeacon @ Digital Summit Ireland by LocalSocialSean O'Sullivan
1.3K views30 slides
Phoneography, by KPCC's Grant Slater by
Phoneography, by KPCC's Grant SlaterPhoneography, by KPCC's Grant Slater
Phoneography, by KPCC's Grant SlaterEric Athas
307 views3 slides
What I Learned about Mobile UX... The Hard Way by
What I Learned about Mobile UX... The Hard WayWhat I Learned about Mobile UX... The Hard Way
What I Learned about Mobile UX... The Hard WayJosh Jeffryes
704 views55 slides

What's hot(19)

What is MVP? by Ready4S
What is MVP?What is MVP?
What is MVP?
Ready4S191 views
Benefits of Enplug for Customers by Colin Bovet
Benefits of Enplug for CustomersBenefits of Enplug for Customers
Benefits of Enplug for Customers
Colin Bovet380 views
Indoor Location / iBeacon @ Digital Summit Ireland by LocalSocial by Sean O'Sullivan
Indoor Location / iBeacon @ Digital Summit Ireland by LocalSocialIndoor Location / iBeacon @ Digital Summit Ireland by LocalSocial
Indoor Location / iBeacon @ Digital Summit Ireland by LocalSocial
Sean O'Sullivan1.3K views
Phoneography, by KPCC's Grant Slater by Eric Athas
Phoneography, by KPCC's Grant SlaterPhoneography, by KPCC's Grant Slater
Phoneography, by KPCC's Grant Slater
Eric Athas307 views
What I Learned about Mobile UX... The Hard Way by Josh Jeffryes
What I Learned about Mobile UX... The Hard WayWhat I Learned about Mobile UX... The Hard Way
What I Learned about Mobile UX... The Hard Way
Josh Jeffryes704 views
"Mobile Apps, beyond downloads, what’s next?" by Philippe Dumont by TheFamily
"Mobile Apps, beyond downloads, what’s next?" by Philippe Dumont"Mobile Apps, beyond downloads, what’s next?" by Philippe Dumont
"Mobile Apps, beyond downloads, what’s next?" by Philippe Dumont
TheFamily1.2K views
Diary of editing by kreeve98
Diary of editingDiary of editing
Diary of editing
kreeve9884 views
QASMT - PAJ 2015 by LifeTec
QASMT - PAJ 2015QASMT - PAJ 2015
QASMT - PAJ 2015
LifeTec360 views
Five Things You Should Experience This Week: 11.24.14 by Joanna Peña-Bickley
Five Things You Should Experience This Week: 11.24.14Five Things You Should Experience This Week: 11.24.14
Five Things You Should Experience This Week: 11.24.14
Google Glass - Explorer's Eye View by Kimberly Mahan
Google Glass - Explorer's Eye ViewGoogle Glass - Explorer's Eye View
Google Glass - Explorer's Eye View
Kimberly Mahan559 views
9 Engagement Emails You Can Send To Your Mobile App Users by Dave Goldstein
9 Engagement Emails You Can Send To Your Mobile App Users9 Engagement Emails You Can Send To Your Mobile App Users
9 Engagement Emails You Can Send To Your Mobile App Users
Dave Goldstein8.2K views
Lens That - Facebook Camera & Snapchat AR Creative Studio by Lens That
Lens That - Facebook Camera & Snapchat AR Creative StudioLens That - Facebook Camera & Snapchat AR Creative Studio
Lens That - Facebook Camera & Snapchat AR Creative Studio
Lens That613 views
The five best photo booth apps by Incubasys
The five best photo booth appsThe five best photo booth apps
The five best photo booth apps
Incubasys75 views
Zoom & Enhance: A State of the Art by Phillip Herndon
Zoom & Enhance: A State of the ArtZoom & Enhance: A State of the Art
Zoom & Enhance: A State of the Art
Phillip Herndon469 views
How did you use new media technologies in by shannonbutler2412
How did you use new media technologies inHow did you use new media technologies in
How did you use new media technologies in
shannonbutler2412137 views

Similar to Apple TV UX: 8 Guidelines for greater Apps

Designing for Multiple Channels by
Designing for Multiple ChannelsDesigning for Multiple Channels
Designing for Multiple ChannelsJulie Guinn
207 views44 slides
UX beers – Designing for TV – Sjoera Roggeman & Tine Lavrysen by
UX beers – Designing for TV – Sjoera Roggeman & Tine LavrysenUX beers – Designing for TV – Sjoera Roggeman & Tine Lavrysen
UX beers – Designing for TV – Sjoera Roggeman & Tine LavrysenUX Antwerp Meetup
164 views58 slides
Mobile UX Workshop General Assembly by
Mobile UX Workshop General AssemblyMobile UX Workshop General Assembly
Mobile UX Workshop General AssemblyDoralin Kelly
1.1K views52 slides
Interface evaluations by
Interface evaluationsInterface evaluations
Interface evaluationscarolineyes
275 views9 slides
Overview of video production by
Overview of video productionOverview of video production
Overview of video productionSabir Haque
33 views16 slides
2009: User experience in action by
2009: User experience in action2009: User experience in action
2009: User experience in actionJonathan Hassell
603 views37 slides

Similar to Apple TV UX: 8 Guidelines for greater Apps (20)

Designing for Multiple Channels by Julie Guinn
Designing for Multiple ChannelsDesigning for Multiple Channels
Designing for Multiple Channels
Julie Guinn207 views
UX beers – Designing for TV – Sjoera Roggeman & Tine Lavrysen by UX Antwerp Meetup
UX beers – Designing for TV – Sjoera Roggeman & Tine LavrysenUX beers – Designing for TV – Sjoera Roggeman & Tine Lavrysen
UX beers – Designing for TV – Sjoera Roggeman & Tine Lavrysen
UX Antwerp Meetup164 views
Mobile UX Workshop General Assembly by Doralin Kelly
Mobile UX Workshop General AssemblyMobile UX Workshop General Assembly
Mobile UX Workshop General Assembly
Doralin Kelly1.1K views
Interface evaluations by carolineyes
Interface evaluationsInterface evaluations
Interface evaluations
carolineyes275 views
Overview of video production by Sabir Haque
Overview of video productionOverview of video production
Overview of video production
Sabir Haque33 views
Best Mobile UX Trends 2019 by Vani Jain
Best Mobile UX Trends 2019Best Mobile UX Trends 2019
Best Mobile UX Trends 2019
Vani Jain103 views
How to fix netflix working on phone and not on tv by saralouish
How to fix netflix working on phone and not on tvHow to fix netflix working on phone and not on tv
How to fix netflix working on phone and not on tv
saralouish44 views
Devmento발표100525 by jinwook shin
Devmento발표100525Devmento발표100525
Devmento발표100525
jinwook shin765 views
Mobile changes how you engage customers and employees by Zhou Wenhan
Mobile changes how you engage customers and employeesMobile changes how you engage customers and employees
Mobile changes how you engage customers and employees
Zhou Wenhan728 views
10 tips for a video presentation by Ben Libberton
10 tips for a video presentation 10 tips for a video presentation
10 tips for a video presentation
Ben Libberton185 views
Design Principles | An Easy to use guide by Amol Chandwadkar
Design Principles | An Easy to use guideDesign Principles | An Easy to use guide
Design Principles | An Easy to use guide
Amol Chandwadkar521 views
From Zero to A11Y: Building an Accessibility Culture by VMware Tanzu
From Zero to A11Y: Building an Accessibility CultureFrom Zero to A11Y: Building an Accessibility Culture
From Zero to A11Y: Building an Accessibility Culture
VMware Tanzu226 views
VIP session Content Marketing Lab by Calin Rotarus
VIP session Content Marketing LabVIP session Content Marketing Lab
VIP session Content Marketing Lab
Calin Rotarus233 views
Powerful tip-to-start-you tube-channel by abilashiniN
Powerful tip-to-start-you tube-channelPowerful tip-to-start-you tube-channel
Powerful tip-to-start-you tube-channel
abilashiniN14 views
The Evolution of the Connected TV User Experience by Ian Valentine
The Evolution of the Connected TV User ExperienceThe Evolution of the Connected TV User Experience
The Evolution of the Connected TV User Experience
Ian Valentine831 views
10 powerful tips to know before starting guruprasanth.s by GURUPRASANTH33
10 powerful tips to know before starting  guruprasanth.s10 powerful tips to know before starting  guruprasanth.s
10 powerful tips to know before starting guruprasanth.s
GURUPRASANTH3329 views

Recently uploaded

type book PDF to PPT.pptx by
type book PDF to PPT.pptxtype book PDF to PPT.pptx
type book PDF to PPT.pptxsamboggiano
7 views54 slides
Dragon Troubles__Personal Project_______ by
Dragon Troubles__Personal Project_______Dragon Troubles__Personal Project_______
Dragon Troubles__Personal Project_______pulkkinenaliisa
12 views73 slides
ATPMOUSE_융합2조.pptx by
ATPMOUSE_융합2조.pptxATPMOUSE_융합2조.pptx
ATPMOUSE_융합2조.pptxkts120898
27 views78 slides
Indian wedding dresses design.pdf by
Indian wedding dresses design.pdfIndian wedding dresses design.pdf
Indian wedding dresses design.pdfAur Dikhao
5 views7 slides
boggiano_project 2.pptx by
boggiano_project 2.pptxboggiano_project 2.pptx
boggiano_project 2.pptxsamboggiano
25 views8 slides
tony moura bio.pdf by
tony moura bio.pdftony moura bio.pdf
tony moura bio.pdfjenki442
7 views20 slides

Recently uploaded(20)

type book PDF to PPT.pptx by samboggiano
type book PDF to PPT.pptxtype book PDF to PPT.pptx
type book PDF to PPT.pptx
samboggiano7 views
Dragon Troubles__Personal Project_______ by pulkkinenaliisa
Dragon Troubles__Personal Project_______Dragon Troubles__Personal Project_______
Dragon Troubles__Personal Project_______
pulkkinenaliisa12 views
ATPMOUSE_융합2조.pptx by kts120898
ATPMOUSE_융합2조.pptxATPMOUSE_융합2조.pptx
ATPMOUSE_융합2조.pptx
kts12089827 views
Indian wedding dresses design.pdf by Aur Dikhao
Indian wedding dresses design.pdfIndian wedding dresses design.pdf
Indian wedding dresses design.pdf
Aur Dikhao5 views
boggiano_project 2.pptx by samboggiano
boggiano_project 2.pptxboggiano_project 2.pptx
boggiano_project 2.pptx
samboggiano25 views
tony moura bio.pdf by jenki442
tony moura bio.pdftony moura bio.pdf
tony moura bio.pdf
jenki4427 views
DR Portfolio.pptx by robertsd2
DR Portfolio.pptxDR Portfolio.pptx
DR Portfolio.pptx
robertsd226 views
DR Portfolio 2023.pptx by robertsd2
DR Portfolio 2023.pptxDR Portfolio 2023.pptx
DR Portfolio 2023.pptx
robertsd27 views
Samsung Galaxy Watch 5 Presentation by aryasheel1
Samsung Galaxy Watch 5 PresentationSamsung Galaxy Watch 5 Presentation
Samsung Galaxy Watch 5 Presentation
aryasheel114 views
BREAKFAST GONE WRONG____________________ by pulkkinenaliisa
BREAKFAST GONE WRONG____________________BREAKFAST GONE WRONG____________________
BREAKFAST GONE WRONG____________________
pulkkinenaliisa10 views
Legal PPT Presentation.pptx by 125071063
Legal PPT Presentation.pptxLegal PPT Presentation.pptx
Legal PPT Presentation.pptx
1250710635 views
Free International civil aviation day template from best presentation design ... by slideceotemplates
Free International civil aviation day template from best presentation design ...Free International civil aviation day template from best presentation design ...
Free International civil aviation day template from best presentation design ...
COE catalog-compressed.pdf by daniel103814
COE catalog-compressed.pdfCOE catalog-compressed.pdf
COE catalog-compressed.pdf
daniel10381413 views
GMP2 Powerpoint presentation for maker lab by rpham9987
GMP2 Powerpoint presentation for maker labGMP2 Powerpoint presentation for maker lab
GMP2 Powerpoint presentation for maker lab
rpham998711 views

Apple TV UX: 8 Guidelines for greater Apps

  • 1. Apple TV UX: 8 Guidelines for greater Apps
  • 2. Best practice: Using the TV itself is super easy and almost the same for the past 40 years.
  • 3. Best practice: Using the TV itself is super easy and almost the same for the past 40 years. Even my grandma knows how to do it!
  • 4. Best practice: „The future of TV is apps.“
  • 5. Best practice: But how do you build an outstanding TV App?
  • 7. Best practice: „Already little deviations to the standard Apple TV UI, can eventually pose a bigger challenge for the development than an iOS app.“ SVEN JANSEN , DEVELOPMENT CELLULAR STICK TO THE APPLE GUIDELINES
  • 8. Best practice: Apple TV works different from other TV boxes. The all new touch remote changes the interaction with the box and implies new UI principles. STICK TO THE APPLE GUIDELINES Best practice: Showtime Recommendations If you decide to deviate from the guidelines, your layout needs to create a new value for the user Use interface elements from UI Kit
  • 9. Best practice: MAKE FOCUS OBVIOUS „The speed of the Touch Remote is one of the best features on the new Apple TV. Therefore, a clear focus is essential for a good orientation.“ TARA WESTON , CREATION CELLULAR
  • 10. Best practice: While using the Apple TV, the user sits at a distance and needs to have a clear view on what he is doing and where he is navigating. Additionally, he is able to skip through content extremely quickly. MAKE FOCUS OBVIOUS Best practice: ZDF App Recommendations Therefore content needs to be clearly visible at all times Add certain information when your item comes on focus. Apple for example is adding the title Don’t let other content distract your focus
  • 11. Best practice: „Don’t see the focus as a limitation, but as a chance.“ JOHANNA OPPENHEIM , CREATION CELLULAR DISCOVER THE FOCUS AS A VALUE
  • 12. Best practice: Focus gains a totally new and higher significance on TV and needs to be rethought. DISCOVER THE FOCUS AS VALUE Recommendations See, that focus on TV gives you a whole new level to show information Know, that focus on a TV Box works completely different than a mouse over in web and is of way greater importance Distinguish which information need to always be shown and which on focus Best practice: Airbnb
  • 13. Best practice: „The remote does not support diagonal directions. Therefore you should avoid diagonal routes for your user.“ THORSTEN JONAS , CREATION CELLULAR NO DIAGONAL NAVIGATION
  • 14. Best practice: Even though the touch remote invites the user to make diagonal touch gestures, the Apple TV does not support diagonal navigation. NO DIAGONAL NAVIGATION Best practice: Movies Recommendations Build a structure that is easy to use with up, down, left and right navigation Arrange contents in vertical and horizontal lines and avoid dimensional grids If that’s not possible, change your structure and stay with one of the templates
  • 15. Best practice: „Finally I can touch the TV without having to get up from the couch.“ JÖRN SIEDENTOPP , CREATION CELLULAR USE THE TOUCH PAD WISELY
  • 16. Best practice: The new Apple TV remote works completely different than all other remotes. It has a touch pad, which enables a much faster navigation and uses a floating instead of a fixed focus, for example. USE THE TOUCH PAD WISELY Recommendations Make use of animations as a result to an user interaction to explain context whenever possible Support the users feeling of touching the interface by providing teasers with parallax effect
  • 17. Best practice: „Simplicity and reduction need to be the guiding principles during the creation process.“ SIMONE BRAUNER , CREATION CELLULAR REDUCE
  • 18. Best practice: The Apple TV impresses with its light and airy design, which only works without overloaded screens. Furthermore, no one wants to read long copies on TV. REDUCE Best practice: Airbnb Recommendations Detect the essential information Know at what point which information is relevant for your user Try to show as much information as possible by using images
  • 19. Best practice: „Latency in visual feedback to touch input can harm the user experience extremely. That‘s why we made every effort in optimizing the performance of the user interface.“ KAI HUPPMANN , DEVELOPMENT CELLULAR PERFORMANCE DEFINES THE QUALITY
  • 20. Best practice: The new Apple TV lives through its fluent and vivid navigation. Every jiggle strikes even more attention than on mobile devices. People are used to having their TV work perfectly at all times. PERFORMANCE DEFINES THE QUALITY Best practice: Plex Recommendations Technology builds the basis Improve the performance of your app and make it work perfectly for your user Performance is a feeling - Use structure, UX, UI, and technology to generate this feeling
  • 21. Best practice: „TV is great, because it is getting personal.“ GUNNAR HAMM, CREATION CELLULAR BE EMOTIONAL
  • 22. Best practice: The TV is the flagship for big and beautiful visuals. Make every screen a cinematic experience BE EMOTIONAL Best practice: Yummly Recommendations Don’t try to fill every empty space Use rather less content and arrange it generously Avoid tiny artwork, but use fullscreen images to support the cinematic feeling
  • 23. Best practice: A TV app should be as easy to use as the TV itself. Naturally this leads to one principle:
  • 24. Thank you. CELLULAR Hamburg, Germany info@cellular.de Thorsten Jonas Head of Concept tjonas@cellular.de Tara Weston Concept Constantin Rueff Design Credits: Apple TV Product Photos by Apple, ZDF App Photos by CELLULAR