diagrams and illustrations for designing mobile...

Elements, unless noted, shared under Creative CommonsAttribution-Share Alike 3.0http://creativecommons.org/licenses/by-sa/3.0/

DesigningMobileInterfaces-2011dec9 Saved on 9 December 2011 at 12:10 PM Brand and format ©2011 Steven Hoober

Diagrams and Illustrations forDesigning Mobile Interfaces

Prepared by Steven Hooberfor the O’Reilly book Designing Mobile Interfaces by Steven Hoober & Eric Berkman

9 December 2011

Templates & guidelines

mobile design patterns


2DesigningMobileInterfaces-2011dec9 Saved on 9 December 2011 at 12:10 PM ©2011 Steven Hoober

This file contains editable copies of all the illustrations (and a few of the screenshots and photos) included in the book Designing Mobile Interfaces.

If you didn’t notice the Creative Commons thing in the bottom of each page, look now. The whole point of the book is to share knowledge, so to that end you are free to re-use any of these diagrams when designing or specifying anything yourself.

These are derived from one type of drawing in the Mobile Design Elements document I have shared since 2007. You can find it, and every other design template, stencil or guideline at:

http://4ourth.com/wiki/Drawing%20Tools%20%26%20Templates

Preface

IntroductionDesigning Mobile Interfaces: Patterns for Interaction Design can be purchased from Amazon or direct from O’Reilly in both print and various eBook formats.The entire contents (regularly updated as well) are also shared on a wiki at 4ourth Mobile:http://4ourth.com/wiki/



v

We deliberately chose not to include a lot of screenshots. In fact, we include hardly any. We did not arrive at this decision lightly; we gathered and extensively annotated screenshots for the first several patterns.

To solve the problems with screenshots, we used illustrations almost exclusively throughout the book. These are all of the same basic style, but vary widely in the detail level used, sometimes in adjacent drawings in the same pattern.In each case, only the required amount of detail is used. Sometimes that detail is just boxes and lines, and the words and images are implied. Sometimes words and so on have to be in there to communicate the point. Sometimes actual raster icons or websites, drop shadows, and other effects are used.As a general rule, large blank areas on a page do not mean there’s nothing there. It just means we’re not discussing that component, so we removed placeholder information for clarity. The Annunciator Row is almost always assumed, so space is provided, but is not displayed—again, for clarity and to reduce clutter.

Color, especially when clearly not naturalistic, generally has a meaning: Yellow usually refers to the displayed, interactive elements. Blue is for images, and graphical displays such as information

visualizations. A different color is used so that it is clear that it’s not just a box.

Grays represent nonselectable items, like the parent when a child has popped up over it.

Orange is used when the item is in focus, as when scrolling in a list, or to indicate the primary button that is going to be selected for a process. This includes hardware buttons, and the arrows or other indicators of gesture and directional control.

Fuchsia squares are visible in this document, but not the book. They are just spacers to keep grouped frames a consistent visual distance apart. Ignore or delete them.

Preface

Examples & Illustrations



3:52PM3G

MASTHEAD

ALERTSLOCATOR

CONTENT

Footer

Page

4ourth Mobile Design Elements, Stencils and Components

0 PrefaceiFigure 1-2Figure 1-1



The page is the area that you will spend your time designing for any application or web- site. A part of it is visible in the viewport of the mobile screen during its current state.

There are states and modes and versions to be considered, as well as addressing what is fixed to the page, what can float, and what is locked to the viewport.

Based on cultural norms of reading conventions and how people process information, you have to design elements for the page, and place items on it in ways your users will understand. You also want to create information that is easy to access and easy to locate. Your users are not stationary, nor are they focused entirely on the screen. They’re everywhere, and they want information quickly and to be able to manipulate it easily.

Part I

Page



!

Steven Hoober says: “I’m on the way over

now.“

New Message

Read

Respond

3:52PM3:52PM 3:52PM 3:52PM

3 Voicemail

2 Text Message

5 Updates

Clear all

3 Voicemail 5 Messages 3 Voicemails 5 Messages

Mom: 8:15pm

Alison: 8:05pm

Office: 6:25pm

Clear all

1 Bookmarks

2 View mode...

Windows

3 Download

0 URL

7 Favorites

#Preferences

1 Bookmarks

2 View mode...

Windows

3 Download

0 URL

7 Favorites

#Preferences

View mode:

Mobile

Fit columns

Desktop

Full screen

Split screen

Cross Circle Box Point More...

Cross Circle PointBoxMore...


View mode:

Mobile

Fit columns

Desktop

Full screen

Split screen


Content Title (Source)2:45 HD


View mode:

Mobile

Fit columns

Desktop

Full screen

Split screen


Label

Label

Label

Label

Label

Label

Label

Label

Label

Label

Label

Label

Label

Label

Label

Label

Label

Label

Label

Label

Label

Label

Label

Label

Label

Label

Label

Ad Unit

7:58am

7:58am

7:58amSaturday, Nov 27


7:58amSaturday, Nov 27Saturday, Nov 27

Menu

To Unlock:Press END and *

3 Voicemail

2 Text Message

5 Updates

Finding the best price for

sprockets

Loading...

Loading...36%

Learn more

320 x 240

240 x 320

128 x 128

128 x 160160 x

160

176 x 208176 x 220

240 x 320

300 x 50

6:1 Extra-large Ad Unit

216 x 36

6:1 Large Ad Unit

120 x 206:1 S Unit

120 x 304:1 Small Ad Unit

168 x 286:1 Medium Ad Unit

168 x 42

4:1 Medium Ad Unit216 x 42

4:1 Large Ad Unit

300 x 75

4:1 Extra-large Ad Unit

Section TitleAt vero eos et accusamus et iusto odio dignissimos ducimus.

SubtitleQuos dolores et quas molestias excepturi sint, ob-caecati cupiditate non.

Sub-Subtitle:Est laborum et dolorum fuga. et harum quidem rerum facilis est et expedita distinctio. nam libero tempore, cum

Page Title




Page Title




Page Title

Ad Unit




Page Title

Ad Unit

Ad Unit Ad Unit

Ad Unit

Jane Adams 816 210 0123 Jerry Adamly 913 111 0234 Mary Adamowlsky 785 985 0345 Allan Adamson 314 987 0456 Dee Adler 210 618 0567 Bill Anderson 913 722 2828 Ferris Bueller 913 722 2828 (H)


OK

Scroll 3:52PM

3:52PM

3G

1.5kb3G

Annunciator Row

NotificationsWindow Title

Page Title


SubtitleQuos dolores et quas moles-tias excepturi sint, obcaecati cupiditate non.

Sub-Subtitle:Est laborum et dolorum fuga. et harum quidem rerum facilis est et expedita distinctio. nam libero tempore, cum soluta nobis est eligendi




Page TitleSite: Title of page is t... Page Titlehttp://www.4ourth.com/Titles

Reveal Menu

Home & Idle Screens

Advertising

Interstitial Screen

Lock Screen

Fixed Menu


2 WrapperiFigure 1-3

Figure 1-10

Figure 1-16

Figure 1-23 Figure 1-24 Figure 1-25 Figure 1-32

Figure 1-33

Figure 1-34

Figure 1-26

Figure 1-29 Figure 1-30 Figure 1-31

Figure 1-27 Figure 1-28



Figure 1-11

Figure 1-12


Figure 1-6 Figure 1-7Figure 1-8

Figure 1-4 Figure 1-5

Not Used



Part II

ComponentsComponents, as described here, are a section or subsection of a designed interactive space.

They take up a significant portion of the screen and may be as large as the viewport (or larger) or, when smaller, may appear to be in front of other displayed information.

Components must display a range of information types—images, ordered data, expand- able lists, and notifications. They also allow the user to interact with the system in some significant, primary manner. Combining them with small, reusable, interactive, or display widgets gives the designer an almost unlimited number of options.



z

TitleMore info

7/16

TitleMore info

7/16

Title - More info

7/16

TitleMore info

7/16

TitleMore info

7/16

TitleMore info

7/16

TitleMore info

7/16

Vertical List:

Infinite List:

Thumbnail List:

Fisheye List:

Carousel:

Grid:

Film Strip:

Title of List 21-25 of 125Title of Page

7/167/16 7/16

TitleInformation

TitleInformation

Label

Label

Label

Label

Label

Label

Label

Label

Label

Label

Label

Label

Label

Label

Label

Label

Label

Label7/16 8/16

21 Name of item Additional details22 Name of item Additional details23 Name of item Additional details24 Name of item Additional details25 Name of item Additional details

History

Name of itemName of itemName of itemName of itemName of item

Title of list: 1-5 of 32

Load More

Blogger: Blogger Cre...

Google: Silva Type 27...

SILVA Outdoor Profes...

Silva model-25 comp...

Schlock Mercenary, b...

1 Macelli’s

2 Party America 1441 W 23rd Street Lawrence, KS 66046

3 Party City

4 Anderson Rentals

1 Macelli’s

2 Party America

3 Party City 8400 W 135rd Street Overland Parl, KS 66202

4 Anderson Rentals

Alison Hoober

Christine Hoober

Steven Hoober816 210 0455 (M)[email protected]

Xavier R. Hoober, Dr.

Slideshow:

Infinite Area:

Select List:

Title - Information

8/16

TitleInformation

7/16Title

More info

7/16

B

C

DE

TitleYou are here

TitleInformation

TitleInformation

Contacts 21-25 of 125

Jane Adams 816 210 0123 (M) Jamie Adamly 913 111 0234 (H) Paula Adamowlsky 785 985 0345 (M) Mike Adamson 314 987 0456 (O) Mike Adler 210 618 0567



Title - Information


3 Display of Informationii



Confirmation

Sign On

Exit Guard

Cancel Protection

Timeout

You have chosen to exit, but made changes to files without saving.

Unsaved changes

Save Changes

Exit Without Saving

Shoobe01

12771277

Steven HooberNot you?

Username Abc

Password 123Password 123

OptionsOptions

Sign on to purchase:Sign on to purchase: Shoobe01

luth

Luther Yesterday

Other matches:LutheranLutheran Church Mis...Luther VandrossLuthierLuther BrewerLuther Burger

••••••

Email

[email protected]

Pick a user name

Enter your password

How would you prefer to receive updates?

Create your account:

9 7 5

2

8

1

4

6

3

7 8 9

4

1

5

2

6

3

8:46pm 8:46pm

ContinueContinue

You have chosen to exit, but made changes to files without saving.

To prevent unauthorized access to your account, access has been locked.

The application will exit in a few seconds:

5 sec...

Press and hold the Power/End key to turn

off the device

5 sec...

Unsaved Changes

No activity detected

Exit Application? Powering Off...Exit Application?

Exit NowSave Changes

Continue working

Exit nowExit Without Saving

Exit

Title

This afternoon

Item 1

Item 2

Item 3

This morning

Tuesday

Recent History

No activity. Will lock in 16 sec.


Sign on to continue

1277

Password 123

Continue

Exit

Timeout(20 min)

www.


4 Control & Confirmationii



Windowshade

Pop-Up

Hierarchical List

Returned Results

Phone number

orEmail Address

Section 3Section 2

Section 3

Section 1Section 1 Section 1 Section 1

• Details• Details• Details

Section 2• Details• Details• Details

Section 2

Section 3Section 2

Section 3

Section 1

• Details• Details• Details

Section 2

Section 3

Category A

Category B

Category C

Category D

Category E

Category A

Item 1

Item 2

Sub-category 3

Category B

Category A

Item 1

Item 2

Sub-category 3

Category B

Category A 41

Item 1

Item 2

Sub-cat. 3 4

Category B 103

Category A

Item 1

Item 2

Sub-category 3

Category B

Category A

Cat. A Details

Item 1

Item 2

Sub-category 3

1 Title Location Summary of results2 Title Location Summary of results3 Title Location Summary of results4 Title Location Summary of results5 Title Location Summary of results

Title Location Sponsor Blurb from sponsor1 Title Location Summary of results2 Title Location Summary of results3 Title Location Summary of results4 Title Location Summary of results

1 Macelli’s

2 Party America 1441 W 23rd Street Lawrence, KS 66046

3 Party City

4 Anderson Rentals

1 Title Location Summary of results2 Title Location Summary of results3 Title Location Summary of results4 Title Location Summary of results

B

C

DE

TitleInformation

TitleInformation


5 Revealing More Informationii



Part III

WidgetsThe word widget can mean a number of things, even within related Internet technologies. Even the savvy user may be confused by the lack of common terminology and the lack of any inherent meaning.

The term may apply to bits of code, applets, engines, and GUI elements.

However, the scope of this book, and of this part of the book, is solely concerned with mobile GUI widgets. These widgets are display elements such as buttons, links, icons, indicators, tabs, and tooltips. Numerous additional elements (sometimes called GUI widgets), such as scroll bars, are discussed as components and functions in Part I.



Tabs

Peel Away

Simulated 3D Effects

Pagination

Location Within

Weather

Partly cloudy

LocationMission, KSToronto, ONSan Jose, CACharlotte, SCMore...

Local Weather Local Weather Title 2/16Top News Money Sports Local

77°F/41°

F

3 Voicemail

2 Text Message

5 Updates

Page:

Prev Next

of 16

First Last

Go2

Prev 2/16 Next 1 2 3 4 5 6 7 8 9 ...

yers (an arrow pointing to a vertical line) are often en-countered, but do not have a single meaning, so will require discovery and training.

Organic display of pagination can imply position by showing the current page as the top of a stack of pages (or the currently open pair of leaves in a book).

To give more space, this may be reduced or eliminated after a brief timeout. When a complete spread is shown, both the left and right sides should present this implied position. Otherwise, the viewport should display only the “right side” of the notional physical book.

yers (an arrow pointing to a vertical line) are often en-countered, but do not have a single meaning, so will require discovery and training.



yers (an arrow pointing to a vertical line) are often encountered, but do not have a single meaning, so will require discovery and training.



Footer information 2

not present pulldown lists of pages that are longer than about a dozen items, even on large screen devices. Offer typed entry, or some entirely other solution instead.

Avoid overdoing mapping of shortcuts to keys. For ex-ample, mapping “Beginning of document” to the Up key induces a risk that the user will accidentally perform this action, and cannot return to their previous location.

Footer information




Footer information

3

2

Label

Label

Label

Label

Label

Label

Label

Label

Label

Label

Label

Label

Label

Label

Label

Label

Label

Label

Label

Label

Label

Label

Label

Label

Label

Label

Label

7/16

1/7/10 Nancy in a box

7/16 8/16


6 Lateral Accessiii

3G

3:52PM3G3:52PM3G3:52PM3G 3:52PM3G



Link

Button

Indicator

Icon

Stack of Items

Annotations

Prev 2/16 Next Prev 2/16 Next

Prev 2/16 Next

Prev 2/16 Next Prev 2/16 Next

There are no true variations of the link. Links may be found anywhere on the page, and are differentiated from non-linked content, with a change in color and underline (for text), or a colored border (for images).

Other text which must function as a link should be the label within a Vertical List, have an associated Indicator or be the label for an Icon or Button.

Interaction DetailsLinks can be selected by pressing the OK/Enter key while in focus (for scroll-and-select devices) or tapping directly on the link text for pen and touch devices.







Documentation:

• Product manual (236 kb PDF)

• Tablet computing quickstart card (88 kb PDF)

• Overview of Microsoft XP Tablet Edition 2005

• Microsoft HID Guidelines

• IX325 tablet quickstart card (88 kb PDF)

Drivers: • RealTekAudio.exe

Documentation:

• Download the product manual PDF

• Download the tablet computing quickstart card (PDF)

• Download an overview of Microsoft XP Tablet Edition 2005 from Microsoft

• Download the Microsoft HID Guidelines

• Download the IX325 tablet quickstart card PDF

First few bits of the...Name of sender DateFirst few bits of the...Name of sender DateFirst few bits of the...Name of sender DateFirst few bits of the...Name of sender DateFirst few bits of the...Name of sender Date

New Message


Jane Adams816 210 0123 (M)Jerry Adamly913 111 0234 (H)Mary Adamowlsky785 985 0345 (M)Allan Adamson314 987 0456 (O)Dee Adler210 618 0567Bill Anderson913 722 2828 (H)Ferris Bueller 913 722 2828 (H)

Shoobe01

••••••

Pick a user name

Enter your password


Continue

Exit

Shoobe01

••••••

Pick a user name

Enter your password


Continue

Exit

Receive updates?

Form is not yet complete.

Add a pointGet directions

7:58am

Email WiFi WiFiEmail

5off offon onCalendar Contacts WebMail

Photos

Videos

Albums Photos Photos

1218 W Rte YY Galena, KS6 miles, 108°

1218 W Rt YYGo there

June 10th1122.25





1218 W Rt YYGo there


7 Drilldowniii



Ordered Data

Wait Indicator

Reload, Synch, Stop

December 23 Wintry Mix to Rain/ 37° 2° 60% From the South 23mph Wind

Dec 24 AM Snow Showers 25° 7° 50% Northwest 15mph

Dec 25 Few Showers 38° 5° 30% South-Southeast 17mph

Dec 26 Few Showers 58° 6° 30% S 19mphDec 27 Partly Cloudy 37° 6° 10% WNW 16mph

Dec 27 P-cloud 37° 6° WNW 16Dec 28 Sunny 45° 0° SW 15

Dec 29 Sunny 46° S9

2) Abbreviate:Wind direction, common terms, even dates, can all be abbreviated to save space.

1) Remove descriptors:As in the wind direction, when there is no extra space, remove the “from the” portion to save space.

3) Remove information:Value-added features – like this percentage of precipitation – can be removed when space becomes scarce.

4) Reduce information:When ranges, or other multiple datapoints are offered, consider if a single value can serve as a sum-mary. Here, only the high is shown for the day.

5) Combine fields:Items which are already closely coupled (like wind direction and speed) can be displayed concat-enated to save on table formatting space.

Tooltips

Avatar





The area of the page viewable in the display.

Nancy in a box2:45 HD

3:52PM

Nancy in a box2:45 HD

3:52PM

Volume

Volume 86%

3:55PM 3:55PM

http://cnn.com/story/video/012011/ Loading... (86%)



Text Messaging Contacts 21-25 of 125






Just passed through Asheville, you still on?

Stuck in meetings, where are you stopping tonight?

Think I’ll be push-ing all the way to Atlanta and sleep

Finding the best price for

sprockets

Photos Photos

3:55PM

Loading... (56%) Loading... (86%)

3:55PM

Loading page... (56%)

3:55PM

Loading page... (56%)

3:55PM

National & World National & World News

Loading... (56%) Loading... (86%)

Settings Shoobe01

Blocking & Filtering...

Time Zone...

Synch Schedule...

Synch Now

View Modes...

Pantone cookies, love it shoobe01 29 min

Emily, 6 yr.s calls it: Stee franceui 44 min

Now, if Rodgers wins, Gre matthewm 1 hr

To all my Bears fan friend visualman 1 hr

Wow. Gas prices seriousl laura 2 hr


8 Labels and Indicatorsiii



HDMI Cable 6 ft shielded

Class 10 Micro SD card

2 TB USB External Hard

3 Pack, Universal Touch

Otterbox Defender Case

Garmin portable friction

Olympus PEN EP-1 12.3 M


Lumix DMC GF-1 Digital

Panasonic 45-200 f/4.0-5

Panasonic Lumix f/4.5 G

RainbowImaging Nikon to

Body Lens Kit Accessory









Panasonic H-FS014045PP 14-45mm


Panasonic H-FS014045PP


Zoom & Scale

Location Jump

Search Within

Sort & Filter

3:55PM

Mar Apr May Jun Jul Aug 6 7 8 9 10 11 12 13 14

2015105k0

2015105k0

June2010

66 44

2010

50 mi 2000 ft

Jane Adams816 210 0123 (M)Jerry Adamly913 111 0234 (H)Mary Adamowlsky785 985 0345 (M)Allan Adamson314 987 0456 (O)Dee Adler210 618 0567Bill Anderson913 722 2828 (H)Ferris Bueller 913 722 2828 (H)



A

B

C

D

E

F

A

B

C

D

E

F

A

B

C

D

E

F


Contacts 1-5 of 125


A


Label

Label

Label

Label

Label

Label

Label

Label

Label

Label

Label

Label

Label

Label

Label

Label

Label

Label

Label

Label

Label

Label

Label

Label

Label

Label

Label

3:52PM3G3:52PM3G 3:52PM3G

42

7/16

1/7/10 Nancy in a box 22 /107 8/16

3:52PM3G Oct2010

Nov2010

Dec2010

Jan2011

Feb2011

Apr2011

Mar2011

3/17/11 2:40 pm

2000 ft

Grill 51 Directions

Benjamin L. Kelley 816 210 0123 Mubenah Kahn 913 111 0234 Benamin Ku 785 985 0345 Ben Long 314 987 0456 Ruben Ruiz 210 618 0567 Ryan Tobaben 913 722 2828 Ferris Bueller 913 722 2828 (H)

Contacts 11 found

Ben

2




Footer information

GoBook

Prev Next22 “Restaurants”

Abacavir Sulfate

Abarelix

Abatacept

Abciximab

Abelcet

Abilify

Ablavar

Formulary 12,265

Electronics 12,876 Cameras 627Cameras 627 Cameras 85 Cameras 85

Micro Four-thirds

Abacavir Sulfate

Abarelix

Abatacept

Abciximab

Abelcet

Abilify

Ablavar

Neo-Synephrine

Neodecadron

Neomycin

NeoProfen

Neoral

Neosporin

Neostigmine

Search “Neo” 128

Neo

Neo-Synephrine

Neodecadron

Neomycin

NeoProfen

Neoral

Neosporin

Neostigmine

Electronics > “Micro Four-Thirds”...

Electronics > “Micro Four-Thirds” > Brand: Panasonic

Sort by:Best match

Price: low to highPrice: high to low

Panasonic Price range...

Prev 2/16 Next

Electronics > “Micro Four-Thirds” > Brand: Panasonic

Search


9 Information Controlsiii



Part IV

Input & OutputThe varying ways in which people prefer to interact with their devices highly depend upon their natural tendencies, their comfort levels, and the context of use.

As designers and developers, we need to understand these influences and offer user interfaces that ap- peal to these needs.

User preferences may range from inputting data using physical keys, natural handwriting, or other gestural behaviors. Some users may prefer to receive information with an eyes- off-screen approach, and instead relying on haptics or audible notifications.

This part of the book will discuss in detail the different mobile methods and controls users can interact with to access apartnd receive information.








Sign on to continue

TF43

Password 123

Continue

Exit


Sign on to continue

TF43L

Password 123

Continue

Exit

Keyboards & Keypads

Pen Input

Mode Switches

Autocomplete and prediction

Input Method Indicator

2abc 6mno 6mno

1

4ghi

2abc

5jkl

8tuv

0+

3def

#*7pqrs

6mno

9wxyz

Talk End

OK

DoneShift

123

Sym

Shift

Return

q

a s d f g h j k l

w e r t y u i o p

z x c v b n m :.

!?

;, ′

″

SpaceDoneSym

Shift Shift

Lock

q

a s d f g h j k l

w e r t y u i o p

!

1@

2#

3$

4%

5^6

&

7*8

(

9(

9)

0

z x c v b n m <.

|\

!/

>,

:; ′

″

Space

A Am An

3:52PM3G 3:52PM3G3:52PM3G 3:52PM3G3:52PM


Stuck in |

meetings 1@&

F1@&

4 3 F1@&

4 3

L letter

lletter

|symbol

1number

/symbol

\symbol


Sign on to continue

TF43

Password 123

Continue

Exit


Sign on to continue

TF43

Password

Continue

Exit

3:52PM3G 3:52PM3G 3:52PM3G3:52PM3G 3:52PM3G 123

ABC (ALL CAPS) ABC

Abc (Initial cap) Abc

abc (lower case) abc

123 (numeric) 123

!@# or Sym (symbol) !@#

T9 word predictive abc lower case

T9 Word Predictive Abc initial capDone

Done

Done

Shift

Shift

Shift

123

123

123

Sym

Sym

Sym

Shift

Shift

Shift

Return

Return

Return

q

1

Q

a

a

A

s

s

S

d

d

D

f

f

F

g

g

G

h

h

H

j

j

J

k

k

K

l

l

L

w

2

W

e

3

E

r

4

R

t

5

T

y

6

Y

u

7

U

i

8

I

o

9

O

p

0

P

z

z

Z

x

x

X

c

c

C

v

v

V

b

b

B

n

n

N

m

m

M

:.

:.

:.

!?

!?

!?

;,

;,

;,

′″

′″

′″

Space

Space

Space

goog|

3:52PM3G 3:52PM3G

google.com/newsgoogle.com/docsgoogle.com/search?q=...google.com/ig/setp?mu...

luth

Luther Yesterday

Other matches: Lutheran Lutheran Church Mis...Luther VandrossLuthierLuther BrewerLuther Burger

3:52PM3G 3:52PM3G 3:52PM3G3:52PM3G3:52PM3G 3:52PM3G3:52PM3G 123

word

word

Going to be a little late sibling

abc

Going to be a little late pibking you sibling

picking shaking

Going to be a little late picking


10 Text & Character Inputiv



General Interactive Controls - Chapter Introduction

? ? 3/8” (10 mm)

?

Visual target

Touch area

Effective overflow touch area

Actual toucharea

Screen surface

Edge of screenBezel

Screen

3/8”

(10

mm

)

Area touched

Area touched

Perceived touch area

Centroid

?

GICintro-Size.png GICintro-Target.png GICintro-Centroid.png

GICintro-Bezel.png


11 General Interactive Controlsiv



Benjamin L. Kelley 816 210 0123 Mubenah Kahn 913 111 0234 Benamin Ku 785 985 0345 Ben Long 314 987 0456 Ruben Ruiz 210 618 0567 Ryan Tobaben 913 722 2828 Ferris Bueller 913 722 2828 (H)

DoneShift

123

Sym

Shift

Return

q

a s d f g h j k l

w e r t y u i o p

z x c v b n m :.

!?

;, ′

″

Space

Directional Entry

Press & Hold

Focus & Cursors

Other Hardware Keys

OK





áâàäå

3:52PM3G 3:52PM3G

Name point:|

Save

Text Text Texta


Sign on to continue

TF43

Password

Continue

Exit


Sign on to continue

Password

Exit

3:52PM3G 3:52PM3G3:52PM3G 3:52PM3G123 123

•••••••••

Continue

3:52PM3G 3:52PM3G 123

Contacts 11 found

Ben

Volume

Accesskeys

Dialer

HDMI Cable 6 ft shielded

Class 10 Micro SD card

2 TB USB External Hard

3 Pack, Universal Touch

Otterbox Defender Case

Garmin portable friction

Press to see on map

Party America1441 W 23rd StreetLawrence, KS 66046

Macelli’s

Anderson Rentals

Sunflower Rental

Party America

Party City

#

Electronics 12,876

Micro Four-thirds

#

1

2

3

4

5

Press and hold the Power/End key to turn

off the device

5 sec...

Device options Powering Off...

Power off

Airplane mode

Silent mode

Local results:No alerts

Local Weather

Travel

9

Forecast

Pollen

1

4

Radar 2

3

8

1 6 1

3:52PM3G 3:52PM3G 123

816-210-0455

Missouri

Options

3:52PM3G 3:52PM3G 123

816-210-0455

Options

3:52PM3G 3:52PM3G 123

8


Options

3:52PM3G 3:52PM3G 123

8161

Allan Adamson 816 161 0456 Dee Adler 816 161 0567 Bill Anderson 816 161 2828 Ferris Bueller 913 722 2828 (H)

Options

7:58am

1

4ghi

2abc

5jkl

8tuv

0+

3def

#*7pqrs

6mno

9wxyz

Talk End

OK

Steven Hoober 816-210-0455

3





On-screen Gestures

Kinesthetic Gestures

Remote Gestures

Both move, pinchTap One-axis drag

Press & hold

Free movement drag

Both move, dragOne-axis drag

Two-axis drag

Axis and movement

Recent Applications

3:52PM

OnScreenGestures-One-Finger.png

KinestheticGestures-Orien-tation.png

KinestheticGestures-Ges-ture.png

KinestheticGestures-User.png

KinestheticGestures-Device.png

OnScreenGestures-TwoFinger.png OnScreenGestures-Deconflict.png

Shake handset

Roll handset (face up to face down)

Tap two handsets together

Handset towards non-phone NFC/

RFID detector

Video services...

Netflix Hulu Plus Am

azon YouTube Slacker Media

Video services...

Netflix Hulu Plus Am

azon YouTube Slacker Media

Gesture towards handset (non-handset hand moves)

RemoteGestures-Touch.png

RemoteGestures-Scroll.png






Stuck in meetings, where are you stopping tonight?

Input Areas

Form Selections

Spinners & Tapes

Clear Entry

Continue

Shoobe01

••••••

Pick a user name

Enter your password

Must include both letters and numbers


Set alarm:

Continue

Exit

Continue

Pick a user name:

Shoobe01

5600 Rus 5600 Rus

Your city... Your city...

Your state... Your state...

66202 66202

Shoobe01

Both abc and 123 Password...

Username Abc

Password 123

Options

Continue Select

Options

Sign on to purchase:

Shipping Address: Shipping Address:


Continue Continue

3:52PM3G3G

abc

Going to be a little late

abc

Going to be a little late picking you up. Go get some coffee and I’ll text when getting clo

Pick a username...

Select a password...

Options


Continue

3:52PM3G3G

8 of 16

Shoobe01

123

Text Size:

Small

Medium

Large

Display mode:

Split screen

Magnifier

Select a Contact View Settings:Select Contacts 2/189Your state...

Alabama AlaskaAmerican SamoaArizonaArkansasCaliforniaColoradoConnecticutDelawareDistrict of ColumbiaFloridaGeorgiaGuamHawaiiIdaho

5600 Rus

Your city...

Your state...

66202

ContinueSave

Shipping Address: Alabama Alaska American Samoa Arizona Arkansas California Colorado Connecticut Delaware District of Columbia Florida Georgia Guam

Your state...

Select

Jane Adams 816 210 0123 Jerry Adamly 913 111 0234 Mary Adamowlsky 785 985 0345 Allan Adamson 314 987 0456 Dee Adler 210 618 0567 Bill Anderson 913 722 2828

Jane Adams 816 210 0123 Jerry Adamly 913 111 0234 Mary Adamowl... 785 985 0345 Allan Adamson 314 987 0456 Dee Adler 210 618 0567 Bill Anderson 913 722 2828

Device options

Power off

Airplane mode

Silent mode

:5 51 4 :15 45127

127

Pick a tone...

Once only

Recurring

:15 45

Alarm volume:

Alarm time:

abc

Going to be a little late picking you up. Go get some coffee and I’ll text when getting clo

3:52PM3G3G

Start selection

Paste

Copy all

Cut all

Shoobe01

••••••

Pick a user name

Enter your password


Continue

Clear

Cancel


12 Input & Selectioniv



7:58AMSAT

URDAY

, NOV

27

2Text M

essages

5Updates

3Voic

emails

Tones

Voice Input

Voice Readback

Voice Notification

Haptic Output

“Click” “Be–”

“Say your command”“Loading Browser bookmark for Weather...”

“Click”(0.15 s)

3 Voicemail 2 Text Message 5 Updates






3 Voicemail 2 Text Message 5 Updates


“Beep”

“Show weather”

“Say your command”“Loading Browser bookmark for Weather...”





“Show weather”

Search

3:52PM3G 3:52PM3G

Search Search

Cranberry cookie recipe

3:52PM3G 3:52PM3G3:52PM3G 3:52PM3G

Speak your search...Learn more Reading back...

Say “no” if incorrect, “OK” to search.Learn more




Footer information





“...this may be reduced...”

Copy selection

Cut selection

Select none

Read selection

New alert received at 3:45 pm

Loading....

3:45 pm:

Take 1 500mg Abelcet with water.

Blue and yellow capsule. Prescribed by Dr. Rainer.

3:46PM 3:46PM

3:45pmSaturday, Nov 27

To Unlock:Press END and *

Med Reminder Afternoon Reminder

Pause

“Time to take your 3:45 pill... Take one blue and yellow, 500 milligram Abelcet, with water.”

Turn Right onto Rte YYGo 6 miles

“Turn coming up... Turn right onto Missouri Highway Y - Y in 500 yards... 6 miles to next turn.”

“Beep”(0.5 s)

“Buzz”(0.15 s)


13 Audio & Vibrationiv



SpaceShift Sym

CAPS OK

Back!A @S #D $F %G H& J* K( L)_Z

-X =C +V B / N‘ M“

: ? . , ~;

1Q 2W 3E 4R 5T Y6 U7 I 8 O9 P0

Pg dn

Pg up

Radar

Mission, KS Weather

Flash flood watch details

Currently67°

Partly cloudyRain

Pollen

Back

DEF3ABC21MNO6JKL5GHI4

WXYZ9TUV8PQRS7Space#Next0Shift*

OK

Radar

3:52PM

News, Travel, We...USATODAY.com3:52

PM

News, Travel, We...USATODAY.com

LED-USB.png

LED-USB.png DisplayBrightnessControls-PopUp.png

LED-Lens.pngLED-Annunciator.png

DisplayBrightnessControls-Settings.png

Orientation-Rotate.png Orientation-Keyboard.png Orientation-Anti1.png

LED

Display Brightness Controls

Orientation

Location

Front view

Top view

Lens

45º0º 60º 90º

Static: Standard vertical view.

Rotating: Text remains vertical.

Rotating: Text transitions (animated redraw) to horizontal

Static: Rotate com-plete, standard horizontal

Save

Display:

DSC_0767

3

Automatic brightness

Brightness:

Backdrop:

Rotate Automatically

OK

Volume

Brightness

Automatic

7

10

Volume

Brightness

Automatic

7

11

3:52PM

News, Travel, We...USATODAY.com3:52

PM

News, Travel, We...USATODAY.com

3:52PM

News, Travel, Weather, Sports, Loc...USATODAY.com3:52PM

News, Trav

el, Weath

er, Sports,

Loc...USATODAY.com

Mission, KS Weather

Menu

Flash flood watch details

SpaceShift Sym

CAPS OK

Back!A @S #D $F %G H& J* K( L)_Z

-X =C +V B / N‘ M“

: ? . , ~;

1Q 2W 3E 4R 5T Y6 U7 I 8 O9 P0

Pg dn

Pg up

Radar

Local Weather

PollenOakRagweed

Back DEF

3A

BC

21

MN

O6

JKL

5G

HI

4W

XYZ

9TU

V8

PQ

RS

7Space

#N

ext

0Shift

*

OK

Mission, KS (66206) Weather

Currently

Menu

Flash flood watch until 9 pm details

67°Partly cloudy

Rain

Local Weather

Back DEF

3A

BC

21

MN

O6

JKL

5G

HI

4W

XYZ

9TU

V8

PQ

RS

7Space

#N

ext

0Shift

*

OK

Menu

Currently67°

Partly cloudyRain

15S UD 565 21039° 01’ N 94° 39’ W

340 350 360 010 020

3:52PM3G 3:52PM3G 3:52PM3G

N E

SW23mph

300 mAccuracy


14 Screens, Lights & Sensorsiv7:58AM




Appendixes

AppendixesTo keep the patterns focused on design and implementation, we have pulled all kinds of supporting information out of them. However, a lot of it is still very interesting.

And there’s no good way for a designer or developer to get a summary of this sort of information.

So we have included it here in the form of appendixes, ordered so that you can just pretty much read it from one end to the other.

You’ll find that a few of the appendixes are actually just lists of resources. And in this day and age, resources are links to websites—which, of course, will go out of date soon. Luckily, we keep this up to date on the 4ourth Mobile Design wiki.

Visit anytime to get the latest updates, or just to avoid typing in long links from a piece of paper. And please add your own information, or update old or changed links.



Intro to Mobile Radiotele-phony

PagingAccess

P to MP - Rcv OnlySynch

Freq Correction

SpeechData

Downlink124 Channels

ControlCCH

Cell BroadcastCBCH

TrafficTCH

Uplink124 Channels

Ch 108 Ch 109

Guard frequency

26 repeating frames. Time and frequency differentiated.Most frames TCH. At least 1 for CCH and CBCH, sometimes more. Unused capacity is wasted.

Ch 107

ID-1ID-00

ID-000Mini-UICC

1111 2222 3333 4444

JANE DOE

Pilot signal

PowerPresenceP/N Code

System infoHandset pres-

enceData encod-ing param-

eters

RingingPick-upPaging

SMSAGPS?

Data

Data

Encoded signal Data

Spreading code

Audio

Vocoder

Vocoder

Spreading code... ...Walsh codes:

AudioData

VoiceOperator voice services (vmail, etc.)

Circuit-switched data

Synch Paging Traffic Channel

Antenna

Cell

Sector


Appendixiv



Greeking Introduction to mobile typography

Designing with wordsMany of these issues become worse on mobiles, with small column widths. Greeked text will wrap in ways unlike real content. This is even worse if the real text is in a particular technical language as there are no compound words, and phrasing is not organized in this manner.

TitleSed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo. nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut.

Title

Title

Title

Type-rasterVector.png

Type-lines.png

Type-forms.png

Type-parts-1.png

Type-parts-2.png

Type-stress.png

Type-serifs.png


Appendixiv

Sans serif(none)

Serif Square serif(Slab serif)

Stressed Unstressed

Bowl

Stem

Descender

Crossbar

Ascender

Serif

KerningNegative

kerning

Counter form

Letter form

Cap heightx-height

Baseline

Descender line

1 em

Glyph Bitmap(12 pt)

Lead

ing

is th

e di

stan

cebe

twee

n ba

selin

es

Conventional accentsare above the cap height...

...but letterforms are available that are modified to reduce the required leading.

Un-stressedforms

S60 Sans 16 pt:

Descender height 17%

x-height 69% Clean, opencounters

Type-legs.png

Type-width.png

Type-kern.png

Type-leading.jpg

Type-accents.png

Type-s60sans-sample.png



General Touch Interaction Guidelines ?

Visual target

Touch area

? ? 3/8” (10 mm)3/

8” (

10

Screen surface

Area touched

Area touched

Perceived touch area

Centroid

Effective overflow touch area

Actual toucharea

Edge of screenBezel

Screen?


Appendixiv



Join the mobile community

Steven Hoober

[email protected]

816 210 0455

@shoobe01

shoobe01 on:

www.4ourth.com

Visit 4ourth.com/wiki to view and add to patterns and other mobile design resources

mobile design for every screen Slacker Media

diagrams and illustrations for designing mobile...

Documents