creating a specialized mobile ui

37
Creating a specialized Mobile UI Brian Suda http://suda.co.uk

Upload: briansuda

Post on 18-Dec-2014

6.948 views

Category:

Technology


1 download

DESCRIPTION

In this presentation we’ll have a look at a few real-world examples of successful mobile sites and what they do right and wrong. We’ll explore how the mobile Web fits into the larger stack of data that you already control. By modeling the Apple 3-tier approach, iTunes store (in the cloud), iTunes (desktop app), and iPod (mobile), you can use your company’s strengths to create a mobile site that complements your existing presence. By the end of this presentation you will understand some of the basic technologies used to target mobile devices and platforms, how to improve the user-experience and interaction with page elements such as forms, and generally what the mobile Web is and where it is heading in the near future—plus a bit of cheese slicing history thrown in for good measure. If your company is interested in getting involved in the mobile space or want to take your basic site to the next level, then this presentation is ideal for you.

TRANSCRIPT

Page 1: Creating a Specialized Mobile UI

Creating a specialized Mobile UI

Brian Sudahttp://suda.co.uk

Page 2: Creating a Specialized Mobile UI

Thor Bjørklund

Page 3: Creating a Specialized Mobile UI

Talking Heads

Page 4: Creating a Specialized Mobile UI

It is about the lifestyle

Page 5: Creating a Specialized Mobile UI

Full fat vs. Fat free

Page 6: Creating a Specialized Mobile UI

Types of Users

Page 7: Creating a Specialized Mobile UI

Repetitive Now

Types of Users

Page 8: Creating a Specialized Mobile UI

Types of Users

Bored Now

Page 9: Creating a Specialized Mobile UI

Urgent Now

Types of Users

Page 10: Creating a Specialized Mobile UI
Page 11: Creating a Specialized Mobile UI

Types of Devices

Nokia 1100 Apple iPhone

Page 12: Creating a Specialized Mobile UI

~14 Million by the end of 2008

200+ Million so far

Nokia 1100 Apple iPhone

Types of Devices

Page 13: Creating a Specialized Mobile UI

Browser Sniffing

Page 14: Creating a Specialized Mobile UI

Tel protocol

<a href=“tel:+123.456.7890”>call me</a>

Page 15: Creating a Specialized Mobile UI

Downcasting

á → aö → o

Page 16: Creating a Specialized Mobile UI

Downcasting

Résumé→ Resume

Page 17: Creating a Specialized Mobile UI

Downcasting

Rauðalækur

Page 18: Creating a Specialized Mobile UI

Downcasting

RauðalækurRaudalaekur

Page 19: Creating a Specialized Mobile UI

T9 and URLs

Activation Code: ABA2C

Page 20: Creating a Specialized Mobile UI

T9 and URLs

Activation Code: ADA3C

Page 21: Creating a Specialized Mobile UI

Dropdowns vs. Lists

Page 22: Creating a Specialized Mobile UI

Seek time vs. choices

http://www.37signals.com/svn/posts/1128-learning-from-bad-ui

Page 23: Creating a Specialized Mobile UI

Command Line Interfaces

Page 24: Creating a Specialized Mobile UI
Page 25: Creating a Specialized Mobile UI

3 tiered approach

Page 26: Creating a Specialized Mobile UI

2D barcodes

Page 27: Creating a Specialized Mobile UI

1D Barcodes

1D barcodes

Page 28: Creating a Specialized Mobile UI

2D barcodes

Page 29: Creating a Specialized Mobile UI

Train Timetable

2D barcodes

Page 30: Creating a Specialized Mobile UI

2D barcodes

Page 31: Creating a Specialized Mobile UI
Page 33: Creating a Specialized Mobile UI

Core Phones

Page 34: Creating a Specialized Mobile UI

TEST TEST TEST

Page 35: Creating a Specialized Mobile UI

Conclusions

Page 36: Creating a Specialized Mobile UI

Questions?

Page 37: Creating a Specialized Mobile UI

Real World Examples