Presentation held on 8th of May 2014 on Fraunhofer Media Web Symposium in Berlin. This presentation just scratches the surface of the important topics involved in good smart TV usability. Also it is set up to be accompanied by a lot of verbal explanation, details and examples. So please feel free to ask any questions you might have. You can contact me at r.mischke[at]TeraVolt.tv

1. DOs AND DON’Ts
OF SMART TV
USABILITY
FOR FRAUNHOFER MEDIA WEB SYMPOSIUM 2014

2. TeraVolt – Electrifying Media
Business Areas
Reference customers
Awards

3. 2‘ 3‘ 4‘ 5‘ 6‘ 7‘ 8‘ 9‘ 10‘ 11‘ 12‘13‘ 14‘ 15‘ 16‘ 17‘ 18‘19‘ 20‘ 21‘ 22‘ … 32‘ 36‘ 42‘ 46‘50‘55‘60‘ …
Control – The Biggest Screen is hardest to control
Smartphones Desktop PC TVNotebooks
ConvertiblesPhablets
Tablets
Hybrids
1 foot 3 foot 10 foot
DIRECT CONTROL
INDIRECT CONTROL
REMOTE CONTROLMOUSE/KEYBOARDTOUCH

4. STRUCTURE
Four levels are all you need
STRUCTURE

5. STRUCTURE
HUB
SELECTION
DETAIL
ACTION
HOME, offers access to all main
areas of the application
Work with previews of content if
possible
Larger set of meta information needed
Page to make content selection from
Fully detailed view for the specific
Content
View that allows action
Play, mark, forms, payment

6. STRUCTURE
No user should be afraid of selecting a button
KEEP
INTERACTIONS
COSTS LOW

7. STRUCTURE
Clear paths lead the way
LET GRIDS
WORK FOR YOU

10. „On Smart TVs Watchever
on works with Grids that can
be easily followed when it
comes to content. They
don’t however In navigation.
This jump of the Highlight is
much too far and
unexpected by the user,
who will leave his eyes at
the top right corner when
moving the highlight.“

11. STRUCTURE
Get into the user’s mind
RESPECT THE
USER’S
EXPECTATION

12. NAVIGATION
Where can I do what, now?!
INTERACTION
AREAS

13. „The Highlight, now on the
Celsius unit button, can’t be
moved to the left, even
though the elements look
very much like the buttons
on the right side, that can
be navigated to.”

14. „In this screen all the
elements that the highlight
can be navigated to look
alike. Even the arrows on
the edges of the screen.
That’s the way to go.”

15. NAVIGATION
Make elements look like what they are and stick to it.
MAKE ALL
ELEMNETS
DISTINCT

16. NAVIGATION
Another way, but never the only one.
SHORT CUTS

17. „Yes number short cuts are possible, but don't
overdo it. Don’t use them at all if you can. In
this particular case a menu would have been
easier for the user. All the features have been
connected to a number, so the
developers/designers must know what the user
would want to do, but accessing these
functions forces the user to move his eyes to
the remote control and find the digit.”

18. „Color key shortcuts are more
common and more or less accepted,
also the buttons are often closer to
the directional keys – the home of
the thumb. But always check if your
connotation of a color interferes with
platform paradigms that are already
established.

19. NAVIGATION
Don’t force the user to have it your way. Give them a choice.
ALWAYS ALLOW
ACCESS WITH
5-KEY-NAVI

20. DESIGN
The temptation of a big screen
FONTS AND
TEXT

21. „Good font size
and contrast. The
headlines are
clearly visible.”

22. „When the user wants to change the
section, he is presented with the tiniest font
size there is in the screen. The app “knows”
what the user wants to do, the app opened
the menu for exactly that purpose. But the
parameters to successfully fulfill the user’s
task are withheld.”

23. DESIGN
The temptation of a big screen
NOT SMALLER
THAN 18 PT
NO SERIFS

24. DESIGN
Design follows function
COLOR
AND
CONTRAST

25. „Even if it’s your CI
color, it might not be
suitable as a
highlight.”

26. DESIGN
Don’t trust the color preferences of the displaying device
MATCH COLOR
CONTRAST TO
PURPOSE

27. WHAT’S GOING ON?
Visual guidance
HIGHLIGHT
AND
FEEDBACK

28. Let’s Play a Game
Highlights
“FIND THE
FOCUS”

37. WHAT’S GOING ON?
Gain trust!
THE HIGHLIGHT
SHOULD BE THE
MOST PROMIENT

38. NAVIGATION
It’s hard work – only ask for what you really need
MINIMIZE TEXT
ENTRY
USE DIGITS ONLY

39. NAVIGATION
What would you do next? – Assume the most common path.
USE CLEVER
DEFAULTS AND
SORTING

40. NAVIGATION
Back logic – control Keys – Ways to exit
RESPECT THE
PLATFORM
PARADIGM

41. NAVIGATION
Where am I? What can I do here? How do I get back home?
TRUNK TEST!

42. MOST OF ALL
Use Cases should be useful on a TV
TV SHOULD
BE FUN

43. WHY?
First: prototype – Second: ask people – Third: use your own product
SUCCESS
MADE BY
USER

44. COSTS
Your Smart TV app deserves the same attention as your other apps.
PLAN WELL
AVOID SURPRISE
SAVE MONEY

45. LET‘S TALK
RACHEL MISCHKE
SEN. PRODUCT MANAGER
+49-40-298 677-32
r.mischke[at]TeraVolt.tv
www.TeraVolt.tv