33
REACH MORE PLAYERS SMART DESIGN FOR STREAMING MEDIA DEVICES Reach Engage Earn PETER HEINRICH DEVELOPER EVANGELIST, AMAZON

Reach More Players: Smart Design for Streaming Media Devices

Embed Size (px)

Citation preview

Page 1: Reach More Players: Smart Design for Streaming Media Devices

REACH MORE PLAYERSSMART DESIGN FOR STREAMING MEDIA DEVICES

Reach Engage Earn

PETER HEINRICHDEVELOPER EVANGELIST, AMAZON

Page 2: Reach More Players: Smart Design for Streaming Media Devices

WHY STREAMING

MEDIA DEVICES?

Page 3: Reach More Players: Smart Design for Streaming Media Devices

Streaming media device sales

growth is in the double digits

year-over-year, with no

slowdown in sight.

Page 4: Reach More Players: Smart Design for Streaming Media Devices

Since January 2015 through

today, Fire TV has held the top

sales position…

So in an rapidly growing

industry, Fire TV is out in front.

Page 5: Reach More Players: Smart Design for Streaming Media Devices

Prime Day 2016:

• 2.5x sales of Fire TV devices

over 2015

• Fire TV Stick was the best-

selling Amazon device

Page 6: Reach More Players: Smart Design for Streaming Media Devices

DESIGNING FOR THE

10' EXPERIENCE

Page 7: Reach More Players: Smart Design for Streaming Media Devices

You can target your games made for mobile, tablet and desktop for the living room.

Page 8: Reach More Players: Smart Design for Streaming Media Devices

You will have to design your user interface differently for people sitting 10 feet away from the display.

Page 9: Reach More Players: Smart Design for Streaming Media Devices

The goal of 10-foot user interface design is to make the user's interaction as simple and efficient as possible, with as few button presses as possible while still having an intuitive layout, in terms of accomplishing user goals—what is often called user-centered design.

http://en.wikipedia.org/wiki/10-foot_user_interface

Page 10: Reach More Players: Smart Design for Streaming Media Devices

NAVIGATION SHOULD BE

REMOTE-FRIENDLY• Focus on the core navigation buttons • Standard Android navigation for Menu,

Home and Back buttons.• Reserve media buttons for playback only.

Page 11: Reach More Players: Smart Design for Streaming Media Devices

ANTICIPATE USER NAVIGATION FLOWNever let the player get stuck or backtrack through navigation groups.

Page 12: Reach More Players: Smart Design for Streaming Media Devices

Chances are that your existing landscape designs will work perfectly as is assuming it supports:

• Button states for selected, disabled, etc.• Easy navigation via the Amazon Fire TV Remote• Clearly indicates how to move from screen to

screen

Page 13: Reach More Players: Smart Design for Streaming Media Devices

WORKING WITH TV

RESOLUTIONS

Page 14: Reach More Players: Smart Design for Streaming Media Devices

BUILD FOR ONE RESOLUTION

Page 15: Reach More Players: Smart Design for Streaming Media Devices

SETTING UPRESOURCE CONFIGURATIONS

If you design your app to run on platforms other than Amazon Fire TV, such as tablets, you can create different layouts and drawablesfor each platform, and store them in subdirectories of res/named for various platform and device configurations.

For more info, check out the Android developer resources at http://bit.ly/droid-screens

Page 16: Reach More Players: Smart Design for Streaming Media Devices

ORIENTATION

Page 17: Reach More Players: Smart Design for Streaming Media Devices

UNDERSTANDING HOW OVERSCAN WORKS

Page 18: Reach More Players: Smart Design for Streaming Media Devices

TV COLOR GAMUT

Page 19: Reach More Players: Smart Design for Streaming Media Devices

RESPONSIVE GAME

DESIGN

Page 20: Reach More Players: Smart Design for Streaming Media Devices

Handling different resolutions is all about understanding aspect ratios. Design for 16:9, 8:5 and 4:3 along with UI that dynamically adjusts for either ratio.

Page 21: Reach More Players: Smart Design for Streaming Media Devices

21

Fire Device ResolutionsSUPPORTED RESOLUTIONSAll current Fire devices are at 16:9 or 8:5 aspect ratios

Fire TV & Fire TV Stick

1920 X 1080(16:9)Fire HD 6, 8 & 10

1280 X 800(8:5)

Fire

1280 X 600(CLOSE TO 16:9)

Page 22: Reach More Players: Smart Design for Streaming Media Devices
Page 23: Reach More Players: Smart Design for Streaming Media Devices
Page 24: Reach More Players: Smart Design for Streaming Media Devices

Evolution Of The Console ControllerGAME INPUT EXAMPLEhttp://gizmodo.com/5110650/the-evolution-of-the-console-controller

Console Standards

Page 25: Reach More Players: Smart Design for Streaming Media Devices

With a lot of planning and consideration, it’s possible to have games work with a single input mechanic across different devices.

Page 26: Reach More Players: Smart Design for Streaming Media Devices

DETECT THE PLATFORMAnd always display the correct input controls based on the platform the game is being played on.

Page 27: Reach More Players: Smart Design for Streaming Media Devices

CONNECTION &

CONTINUITY

Page 28: Reach More Players: Smart Design for Streaming Media Devices

These notifications will appear for a short time and disappear without interaction.

Informational NotificationsNOTIFICATION EXAMPLE

Page 29: Reach More Players: Smart Design for Streaming Media Devices

Amazon

Fling bit.ly/amazonfling

Page 30: Reach More Players: Smart Design for Streaming Media Devices

DIALDIscovery And Launch

Page 31: Reach More Players: Smart Design for Streaming Media Devices

WHERE DO WE GO

FROM HERE?

Page 32: Reach More Players: Smart Design for Streaming Media Devices

WHAT’S NEXT?First steps:

• Side-load your game to Fire TV and play!

• Test remote and controller compatibility

• Look for overscan/color issues

Plan for the future:

• The 10’ experience & user-centered design

• Responsive design (single codebase)

• Aspect ratios, not resolutions

• Multiple input methods

• Amazon Fling & DIAL support

Page 33: Reach More Players: Smart Design for Streaming Media Devices

How did we do? http://bit.ly/devdaysurvey

Learn more: http://developer.amazon.com/FireTV

Follow us: @PeterDotGames

developer.amazon.com/blog