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

Post on 28-Oct-2014

471 views 0 download

Tags:

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 of 10-Foot 2 Inches: Designing Apps for Up-Close & Afar with Jenna Marino, Patrick Haney

http://goo.gl/maps/yxVoV

http://goo.gl/maps/yxVoV

Designing for up-close & afar

near

far

http://youtu.be/iZhEcRrMA-M

Designing for Up-Close & Afar

❖The (Device) Landscape

❖Assumptions & Realities

❖Device & Design Patterns

❖The Design Process

Where we were

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

Primary & Secondary Devices

+ +

+

Designing for Up-Close & Afar

❖The (Device) Landscape

❖Assumptions & Realities

❖Device & Design Patterns

❖The Design Process

Myth: Mobile devices are for when people

are mobile

77%of mobile searches occur at home or work

http://haner.in/mobilesearchmoments

Myth: Tablets are just an accessory

http://youtu.be/btfbIVGES1I

http://youtu.be/U7UlE-o8DQQ

31%of American adults own a tablet computer

http://haner.in/deviceownership

Myth: Design for 1024 x 768 or 320 x 480

Range of computer screens

Range of computer screens

http://haner.in/isresponsive

Myth: Television is just for watching

77%of TV viewers use another device too

http://haner.in/multiscreenworld

22%of smartphone searches prompted by TV

http://haner.in/multiscreenworld

“Don't confuse context with intent”

globalmoxieJosh Clark

https://vimeo.com/48327889

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

http://haner.in/8000cars

Sequential & Simultaneous

Sequential Usage

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

Simultaneous Usage

Second Screen

http://zeebox.com

http://youtu.be/baFcUVyKZEw

Input Methods

http://haner.in/fingerfriendly

Other Input Methods

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

Samsung Blu-ray remote control

Samsung Blu-ray remote control

http://youtu.be/5C1nADiC6OE

http://youtu.be/EgyIFjGOtVc

Resolution Differences

164 326 264163

PPI

What about TV?

Calculating PPI

Calculating PPI

Calculating PPI

Calculating PPI

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

Designing for Up-Close & Afar

❖The (Device) Landscape

❖Assumptions & Realities

❖Device & Design Patterns

❖The Design Process

Device or Brand?

Following Device Design Patterns

Being Unique

http://flipboard.com

Path

http://path.com

Designing for Up-Close & Afar

❖The (Device) Landscape

❖Assumptions & Realities

❖Device & Design Patterns

❖The Design Process

Research the Landscape

Competitive Analysis

Review Current Standards

Android Design Patterns

http://haner.in/androiddesignpattern

Google TV Design Patterns

http://haner.in/googletvpatterns

iOS Human Interface Guidelines

http://haner.in/iosdevhig

Xbox Developer Network

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

Samsung TV User Experience Guidelines

http://haner.in/samsungguidelines

Gathering Assets

http://haner.in/sketchiphone

Cross-Platform Design

“The experience should transcend the device.”

notasausageMe, right now

Styleguides

Create Seamless Experiences

Designers should know how to code.

Designers should understand what’s

possible.

Talk to each other.

Testing

South Henrietta Institute of Technology

Samsung Smart TV SDK & Emulator

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

Use Real Devices

http://opendevicelab.com/

http://reflectorapp.com

Documentation (and lack-therof)

Create your own

Undiscovered Territory

Thank you.

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