10-foot 2 inches: designing apps for up-close & afar with jenna marino, patrick haney

129
brought to you by 10 Foot, 2 Inches Designing Apps for Up-Close & Afar

Upload: fitc

Post on 28-Oct-2014

471 views

Category:

Technology


0 download

DESCRIPTION

The landscape of internet-ready devices is quickly growing, allowing people to access content from pocketable devices and big screen TVs alike. But designing usable interfaces for big and small is a challenge, especially when those devices are being used to compliment each other. Hear firsthand from two seasoned designers about the pitfalls and best practices of designing for these unique experiences and the Second Screen. They’ll talk about handling different methods of input and finding room for varying amounts of output, designing within existing UI constraints, and much more.

TRANSCRIPT

Page 3: 10-Foot 2 Inches: Designing Apps for Up-Close & Afar with Jenna Marino, Patrick Haney

http://goo.gl/maps/yxVoV

Page 4: 10-Foot 2 Inches: Designing Apps for Up-Close & Afar with Jenna Marino, Patrick Haney

http://goo.gl/maps/yxVoV

Page 5: 10-Foot 2 Inches: Designing Apps for Up-Close & Afar with Jenna Marino, Patrick Haney
Page 7: 10-Foot 2 Inches: Designing Apps for Up-Close & Afar with Jenna Marino, Patrick Haney
Page 8: 10-Foot 2 Inches: Designing Apps for Up-Close & Afar with Jenna Marino, Patrick Haney

Designing for up-close & afar

near

far

http://youtu.be/iZhEcRrMA-M

Page 9: 10-Foot 2 Inches: Designing Apps for Up-Close & Afar with Jenna Marino, Patrick Haney

Designing for Up-Close & Afar

❖The (Device) Landscape

❖Assumptions & Realities

❖Device & Design Patterns

❖The Design Process

Page 10: 10-Foot 2 Inches: Designing Apps for Up-Close & Afar with Jenna Marino, Patrick Haney

Where we were

Page 11: 10-Foot 2 Inches: Designing Apps for Up-Close & Afar with Jenna Marino, Patrick Haney
Page 13: 10-Foot 2 Inches: Designing Apps for Up-Close & Afar with Jenna Marino, Patrick Haney

http://flic.kr/p/6esZpf

Page 15: 10-Foot 2 Inches: Designing Apps for Up-Close & Afar with Jenna Marino, Patrick Haney

Primary & Secondary Devices

+ +

+

Page 16: 10-Foot 2 Inches: Designing Apps for Up-Close & Afar with Jenna Marino, Patrick Haney

Designing for Up-Close & Afar

❖The (Device) Landscape

❖Assumptions & Realities

❖Device & Design Patterns

❖The Design Process

Page 17: 10-Foot 2 Inches: Designing Apps for Up-Close & Afar with Jenna Marino, Patrick Haney

Myth: Mobile devices are for when people

are mobile

Page 18: 10-Foot 2 Inches: Designing Apps for Up-Close & Afar with Jenna Marino, Patrick Haney

77%of mobile searches occur at home or work

http://haner.in/mobilesearchmoments

Page 19: 10-Foot 2 Inches: Designing Apps for Up-Close & Afar with Jenna Marino, Patrick Haney

Myth: Tablets are just an accessory

Page 20: 10-Foot 2 Inches: Designing Apps for Up-Close & Afar with Jenna Marino, Patrick Haney

http://youtu.be/btfbIVGES1I

Page 21: 10-Foot 2 Inches: Designing Apps for Up-Close & Afar with Jenna Marino, Patrick Haney

http://youtu.be/U7UlE-o8DQQ

Page 22: 10-Foot 2 Inches: Designing Apps for Up-Close & Afar with Jenna Marino, Patrick Haney

31%of American adults own a tablet computer

http://haner.in/deviceownership

Page 23: 10-Foot 2 Inches: Designing Apps for Up-Close & Afar with Jenna Marino, Patrick Haney

Myth: Design for 1024 x 768 or 320 x 480

Page 24: 10-Foot 2 Inches: Designing Apps for Up-Close & Afar with Jenna Marino, Patrick Haney

Range of computer screens

Page 25: 10-Foot 2 Inches: Designing Apps for Up-Close & Afar with Jenna Marino, Patrick Haney

Range of computer screens

Page 26: 10-Foot 2 Inches: Designing Apps for Up-Close & Afar with Jenna Marino, Patrick Haney

http://haner.in/isresponsive

Page 27: 10-Foot 2 Inches: Designing Apps for Up-Close & Afar with Jenna Marino, Patrick Haney

Myth: Television is just for watching

Page 28: 10-Foot 2 Inches: Designing Apps for Up-Close & Afar with Jenna Marino, Patrick Haney
Page 29: 10-Foot 2 Inches: Designing Apps for Up-Close & Afar with Jenna Marino, Patrick Haney
Page 30: 10-Foot 2 Inches: Designing Apps for Up-Close & Afar with Jenna Marino, Patrick Haney

77%of TV viewers use another device too

http://haner.in/multiscreenworld

Page 31: 10-Foot 2 Inches: Designing Apps for Up-Close & Afar with Jenna Marino, Patrick Haney

22%of smartphone searches prompted by TV

http://haner.in/multiscreenworld

Page 32: 10-Foot 2 Inches: Designing Apps for Up-Close & Afar with Jenna Marino, Patrick Haney

“Don't confuse context with intent”

globalmoxieJosh Clark

https://vimeo.com/48327889

Page 33: 10-Foot 2 Inches: Designing Apps for Up-Close & Afar with Jenna Marino, Patrick Haney
Page 34: 10-Foot 2 Inches: Designing Apps for Up-Close & Afar with Jenna Marino, Patrick Haney

“…people are buying 8,000 cars a week on eBay’s mobile app”John Donahoe, eBay CEO

http://haner.in/8000cars

Page 35: 10-Foot 2 Inches: Designing Apps for Up-Close & Afar with Jenna Marino, Patrick Haney

Sequential & Simultaneous

Page 36: 10-Foot 2 Inches: Designing Apps for Up-Close & Afar with Jenna Marino, Patrick Haney

Sequential Usage

Page 37: 10-Foot 2 Inches: Designing Apps for Up-Close & Afar with Jenna Marino, Patrick Haney

90%use multiple screens to sequentially accomplish a task http://haner.in/multiscreenworld

Page 38: 10-Foot 2 Inches: Designing Apps for Up-Close & Afar with Jenna Marino, Patrick Haney
Page 39: 10-Foot 2 Inches: Designing Apps for Up-Close & Afar with Jenna Marino, Patrick Haney

Simultaneous Usage

Page 40: 10-Foot 2 Inches: Designing Apps for Up-Close & Afar with Jenna Marino, Patrick Haney

Second Screen

Page 41: 10-Foot 2 Inches: Designing Apps for Up-Close & Afar with Jenna Marino, Patrick Haney
Page 42: 10-Foot 2 Inches: Designing Apps for Up-Close & Afar with Jenna Marino, Patrick Haney

http://zeebox.com

Page 43: 10-Foot 2 Inches: Designing Apps for Up-Close & Afar with Jenna Marino, Patrick Haney
Page 44: 10-Foot 2 Inches: Designing Apps for Up-Close & Afar with Jenna Marino, Patrick Haney
Page 45: 10-Foot 2 Inches: Designing Apps for Up-Close & Afar with Jenna Marino, Patrick Haney
Page 46: 10-Foot 2 Inches: Designing Apps for Up-Close & Afar with Jenna Marino, Patrick Haney

http://youtu.be/baFcUVyKZEw

Page 47: 10-Foot 2 Inches: Designing Apps for Up-Close & Afar with Jenna Marino, Patrick Haney

Input Methods

Page 48: 10-Foot 2 Inches: Designing Apps for Up-Close & Afar with Jenna Marino, Patrick Haney

http://haner.in/fingerfriendly

Page 49: 10-Foot 2 Inches: Designing Apps for Up-Close & Afar with Jenna Marino, Patrick Haney

Other Input Methods

Page 50: 10-Foot 2 Inches: Designing Apps for Up-Close & Afar with Jenna Marino, Patrick Haney

http://flic.kr/p/6hgDfB

Page 51: 10-Foot 2 Inches: Designing Apps for Up-Close & Afar with Jenna Marino, Patrick Haney

Samsung Blu-ray remote control

Page 52: 10-Foot 2 Inches: Designing Apps for Up-Close & Afar with Jenna Marino, Patrick Haney

Samsung Blu-ray remote control

Page 53: 10-Foot 2 Inches: Designing Apps for Up-Close & Afar with Jenna Marino, Patrick Haney

http://youtu.be/5C1nADiC6OE

Page 54: 10-Foot 2 Inches: Designing Apps for Up-Close & Afar with Jenna Marino, Patrick Haney
Page 55: 10-Foot 2 Inches: Designing Apps for Up-Close & Afar with Jenna Marino, Patrick Haney

http://youtu.be/EgyIFjGOtVc

Page 56: 10-Foot 2 Inches: Designing Apps for Up-Close & Afar with Jenna Marino, Patrick Haney

Resolution Differences

Page 58: 10-Foot 2 Inches: Designing Apps for Up-Close & Afar with Jenna Marino, Patrick Haney

164 326 264163

PPI

Page 59: 10-Foot 2 Inches: Designing Apps for Up-Close & Afar with Jenna Marino, Patrick Haney
Page 60: 10-Foot 2 Inches: Designing Apps for Up-Close & Afar with Jenna Marino, Patrick Haney

What about TV?

Page 62: 10-Foot 2 Inches: Designing Apps for Up-Close & Afar with Jenna Marino, Patrick Haney

Calculating PPI

Page 63: 10-Foot 2 Inches: Designing Apps for Up-Close & Afar with Jenna Marino, Patrick Haney

Calculating PPI

Page 64: 10-Foot 2 Inches: Designing Apps for Up-Close & Afar with Jenna Marino, Patrick Haney

Calculating PPI

Page 65: 10-Foot 2 Inches: Designing Apps for Up-Close & Afar with Jenna Marino, Patrick Haney

Calculating PPI

http://members.ping.de/~sven/dpi.html

Page 66: 10-Foot 2 Inches: Designing Apps for Up-Close & Afar with Jenna Marino, Patrick Haney

Designing for Up-Close & Afar

❖The (Device) Landscape

❖Assumptions & Realities

❖Device & Design Patterns

❖The Design Process

Page 67: 10-Foot 2 Inches: Designing Apps for Up-Close & Afar with Jenna Marino, Patrick Haney

Device or Brand?

Page 68: 10-Foot 2 Inches: Designing Apps for Up-Close & Afar with Jenna Marino, Patrick Haney

Following Device Design Patterns

Page 69: 10-Foot 2 Inches: Designing Apps for Up-Close & Afar with Jenna Marino, Patrick Haney
Page 70: 10-Foot 2 Inches: Designing Apps for Up-Close & Afar with Jenna Marino, Patrick Haney
Page 71: 10-Foot 2 Inches: Designing Apps for Up-Close & Afar with Jenna Marino, Patrick Haney
Page 72: 10-Foot 2 Inches: Designing Apps for Up-Close & Afar with Jenna Marino, Patrick Haney
Page 74: 10-Foot 2 Inches: Designing Apps for Up-Close & Afar with Jenna Marino, Patrick Haney
Page 75: 10-Foot 2 Inches: Designing Apps for Up-Close & Afar with Jenna Marino, Patrick Haney

Being Unique

Page 76: 10-Foot 2 Inches: Designing Apps for Up-Close & Afar with Jenna Marino, Patrick Haney

http://flipboard.com

Page 77: 10-Foot 2 Inches: Designing Apps for Up-Close & Afar with Jenna Marino, Patrick Haney
Page 78: 10-Foot 2 Inches: Designing Apps for Up-Close & Afar with Jenna Marino, Patrick Haney

Path

http://path.com

Page 79: 10-Foot 2 Inches: Designing Apps for Up-Close & Afar with Jenna Marino, Patrick Haney

Designing for Up-Close & Afar

❖The (Device) Landscape

❖Assumptions & Realities

❖Device & Design Patterns

❖The Design Process

Page 80: 10-Foot 2 Inches: Designing Apps for Up-Close & Afar with Jenna Marino, Patrick Haney

Research the Landscape

Page 81: 10-Foot 2 Inches: Designing Apps for Up-Close & Afar with Jenna Marino, Patrick Haney
Page 82: 10-Foot 2 Inches: Designing Apps for Up-Close & Afar with Jenna Marino, Patrick Haney

Competitive Analysis

Page 83: 10-Foot 2 Inches: Designing Apps for Up-Close & Afar with Jenna Marino, Patrick Haney
Page 84: 10-Foot 2 Inches: Designing Apps for Up-Close & Afar with Jenna Marino, Patrick Haney
Page 85: 10-Foot 2 Inches: Designing Apps for Up-Close & Afar with Jenna Marino, Patrick Haney
Page 86: 10-Foot 2 Inches: Designing Apps for Up-Close & Afar with Jenna Marino, Patrick Haney
Page 87: 10-Foot 2 Inches: Designing Apps for Up-Close & Afar with Jenna Marino, Patrick Haney

Review Current Standards

Page 88: 10-Foot 2 Inches: Designing Apps for Up-Close & Afar with Jenna Marino, Patrick Haney

Android Design Patterns

http://haner.in/androiddesignpattern

Page 89: 10-Foot 2 Inches: Designing Apps for Up-Close & Afar with Jenna Marino, Patrick Haney

Google TV Design Patterns

http://haner.in/googletvpatterns

Page 90: 10-Foot 2 Inches: Designing Apps for Up-Close & Afar with Jenna Marino, Patrick Haney

iOS Human Interface Guidelines

http://haner.in/iosdevhig

Page 91: 10-Foot 2 Inches: Designing Apps for Up-Close & Afar with Jenna Marino, Patrick Haney

Xbox Developer Network

http://www.xbox.com/en-US/developers

Page 92: 10-Foot 2 Inches: Designing Apps for Up-Close & Afar with Jenna Marino, Patrick Haney

Samsung TV User Experience Guidelines

http://haner.in/samsungguidelines

Page 93: 10-Foot 2 Inches: Designing Apps for Up-Close & Afar with Jenna Marino, Patrick Haney

Gathering Assets

Page 94: 10-Foot 2 Inches: Designing Apps for Up-Close & Afar with Jenna Marino, Patrick Haney
Page 96: 10-Foot 2 Inches: Designing Apps for Up-Close & Afar with Jenna Marino, Patrick Haney

http://haner.in/sketchiphone

Page 97: 10-Foot 2 Inches: Designing Apps for Up-Close & Afar with Jenna Marino, Patrick Haney
Page 98: 10-Foot 2 Inches: Designing Apps for Up-Close & Afar with Jenna Marino, Patrick Haney
Page 99: 10-Foot 2 Inches: Designing Apps for Up-Close & Afar with Jenna Marino, Patrick Haney
Page 100: 10-Foot 2 Inches: Designing Apps for Up-Close & Afar with Jenna Marino, Patrick Haney

Cross-Platform Design

Page 101: 10-Foot 2 Inches: Designing Apps for Up-Close & Afar with Jenna Marino, Patrick Haney

“The experience should transcend the device.”

notasausageMe, right now

Page 102: 10-Foot 2 Inches: Designing Apps for Up-Close & Afar with Jenna Marino, Patrick Haney

Styleguides

Page 103: 10-Foot 2 Inches: Designing Apps for Up-Close & Afar with Jenna Marino, Patrick Haney
Page 104: 10-Foot 2 Inches: Designing Apps for Up-Close & Afar with Jenna Marino, Patrick Haney

Create Seamless Experiences

Page 105: 10-Foot 2 Inches: Designing Apps for Up-Close & Afar with Jenna Marino, Patrick Haney

Designers should know how to code.

Page 106: 10-Foot 2 Inches: Designing Apps for Up-Close & Afar with Jenna Marino, Patrick Haney

Designers should understand what’s

possible.

Page 107: 10-Foot 2 Inches: Designing Apps for Up-Close & Afar with Jenna Marino, Patrick Haney
Page 108: 10-Foot 2 Inches: Designing Apps for Up-Close & Afar with Jenna Marino, Patrick Haney

Talk to each other.

Page 109: 10-Foot 2 Inches: Designing Apps for Up-Close & Afar with Jenna Marino, Patrick Haney
Page 110: 10-Foot 2 Inches: Designing Apps for Up-Close & Afar with Jenna Marino, Patrick Haney

Testing

Page 111: 10-Foot 2 Inches: Designing Apps for Up-Close & Afar with Jenna Marino, Patrick Haney
Page 112: 10-Foot 2 Inches: Designing Apps for Up-Close & Afar with Jenna Marino, Patrick Haney

South Henrietta Institute of Technology

Page 113: 10-Foot 2 Inches: Designing Apps for Up-Close & Afar with Jenna Marino, Patrick Haney
Page 114: 10-Foot 2 Inches: Designing Apps for Up-Close & Afar with Jenna Marino, Patrick Haney
Page 115: 10-Foot 2 Inches: Designing Apps for Up-Close & Afar with Jenna Marino, Patrick Haney
Page 116: 10-Foot 2 Inches: Designing Apps for Up-Close & Afar with Jenna Marino, Patrick Haney
Page 117: 10-Foot 2 Inches: Designing Apps for Up-Close & Afar with Jenna Marino, Patrick Haney
Page 118: 10-Foot 2 Inches: Designing Apps for Up-Close & Afar with Jenna Marino, Patrick Haney
Page 119: 10-Foot 2 Inches: Designing Apps for Up-Close & Afar with Jenna Marino, Patrick Haney
Page 120: 10-Foot 2 Inches: Designing Apps for Up-Close & Afar with Jenna Marino, Patrick Haney

Samsung Smart TV SDK & Emulator

http://www.samsungdforum.com/devtools/sdkdownload

Page 121: 10-Foot 2 Inches: Designing Apps for Up-Close & Afar with Jenna Marino, Patrick Haney

Use Real Devices

Page 123: 10-Foot 2 Inches: Designing Apps for Up-Close & Afar with Jenna Marino, Patrick Haney

http://opendevicelab.com/

Page 124: 10-Foot 2 Inches: Designing Apps for Up-Close & Afar with Jenna Marino, Patrick Haney

http://reflectorapp.com

Page 125: 10-Foot 2 Inches: Designing Apps for Up-Close & Afar with Jenna Marino, Patrick Haney

Documentation (and lack-therof)

Page 126: 10-Foot 2 Inches: Designing Apps for Up-Close & Afar with Jenna Marino, Patrick Haney

Create your own

Page 127: 10-Foot 2 Inches: Designing Apps for Up-Close & Afar with Jenna Marino, Patrick Haney

Undiscovered Territory

Page 128: 10-Foot 2 Inches: Designing Apps for Up-Close & Afar with Jenna Marino, Patrick Haney

Thank you.

http://flic.kr/p/7NYTor