Templates & guidelines
mobile design elements
Stencils and components
Prepared by Steven Hoober with contributions from Clayton Beese, Eric Berkman, Laura Fisk, Brian Mason, France Rupert & Jana Silverman
17 April 2011
Elements, unless noted, shared under Creative Commons MobileDesignElements-2011april15 Saved on 17 April 2011 at 4:02 PM Brand and format ©2011 Steven Hoober Attribution-Share Alike 3.0 http://creativecommons.org/licenses/by-sa/3.0/ 4ourth Mobile Design Elements, Stencils and Components A High Level Diagramming
1 Flow Charting & Annotation
Title all notes A1 A1 A1 A1 A1 A1 A1 Title all notes Title of Title of Title of Title of Title of Title of Title of Briefly state the Briefly state the in- information and Element Element Element Element Element Element Element formation and point point out the rel- out the relevant areas. evant areas. Avoid Avoid all superfluous all superfluous com- commentary. mentary. 6 Make sure the box is Make sure the box only as long as is need- A1 A1 A1 A1 A1 A1 A1 is only as long as is ed, and do NOT stretch needed, and do NOT Title of Title of Title of Title of Title of Title of Title of the pointer out. stretch the pointer Element Element Element Element Element Element Element out.
B Clustered element title
A1 A1 A1 A1 A1 A1 A1 Title of Title of Title of Title of Title of Title of Title of Element Element Element Element Element Element Element
Client Datastore
No CHK-A4 Valid signon?
Yes
E8 Exit 3-Strikes
Elements, unless noted, shared under Creative Commons MobileDesignElements-2011april15 Saved on 17 April 2011 at 4:02 PM Brand and format ©2011 Steven Hoober Attribution-Share Alike 3.0 2 http://creativecommons.org/licenses/by-sa/3.0/ 4ourth Mobile Design Elements, Stencils and Components A High Level Diagramming
2 Information Boxing
High level diagramming involves describing the entire interaction set of the prod- uct, without drawing elements or developing interface designs. Generally, flow F14 Audio Settings charts are followed by the boxes to the right detailing all display and interactive 217, 205, 716 • W-Web, Consumers elements for each state of the system. Information: Interaction:
Each element is described in order; items may be added or removed as needed: a Audio Settings Panel • Display current mute setting • Selector to mute all tones, over- Title block: • Display current status (enabled, rides the below setting Unique element number, descriptive title of the element. When applicable or needed, re- level) of each setting: • Selector to disable/enable or quirement numbers, domain and/or users. • Tone notices change volume level for each of • Tone alerts the following: Information: • Vibrate alerts • Tone notices All items displayed on the screen are described in detail. Conditional display items include • Voice readback of certain • Tone alerts the conditions. instructions • Vibrate alerts • When the mute function is • Voice readback of certain Interaction: activated, the setting for audible instructions Controls (including links, buttons, scrollbars and anything else) that the user can interact mode is visible, but “grayed out” • [Save changes] F1 with. The result is described and external links or refreshes are shown as arrows. External to make it clear this is deacti- •
On load: “Page loaded” tone
Elements, unless noted, shared under Creative Commons MobileDesignElements-2011april15 Saved on 17 April 2011 at 4:02 PM Brand and format ©2011 Steven Hoober Attribution-Share Alike 3.0 3 http://creativecommons.org/licenses/by-sa/3.0/ 4ourth Mobile Design Elements, Stencils and Components B Mid-Level Diagramming
These are valuable for developing and defining interaction – especially for flow charting – and for defining components to be used throughout an application. They specifically do not express the graphic or brand look of a service, so can be used to abstract the discussion, or to define a common set of behaviors for sev- eral looks (e.g. vendor specifications).
2 “Assign photo to” 5 “Picture ID” 7 “Contacts” 8 “Select a contact” 9 “Photo ID set”
Annunciator row Softkeys Main menu grid List / Single-select list Multi-select list
Softkey menu Forked dialog Forked dialog Forked dialog Standard single select Complete - confirm Media File Viewer Media File Viewer Media File Viewer Media File Viewer list Media File Viewer Image menu Assign 3 Screen Saver 6 “Assigned this Delete 4 “Incoming Calls” “Saving to phone” picture...” Phone number
or Go to Album Email Address Auto-Send
Single select with Form elements and Softkey menu open Print keyword filter widget select mode widget (e.g. address book)
Forked dialog Short wait Complete - timeout Media File Viewer Media File Viewer Media File Viewer
The diagram above is an example use of the Mid-level diagram as a Loading flow charting tool. Each link is defined, color codes (similar to those Short wait Pop-up Two-way Pop-up in button behaviors, later) are used to define active and inactive re- Informational Pop-up Multi-option Pop-up gions, and each frame is labeled with re-usable components contained Title within. Multi-option Pop-up with softkey behavior Message
Long wait Pop-up Completion confirm Pop-up
Elements, unless noted, shared under Creative Commons MobileDesignElements-2011april15 Saved on 17 April 2011 at 4:02 PM Brand and format ©2011 Steven Hoober Attribution-Share Alike 3.0 4 http://creativecommons.org/licenses/by-sa/3.0/ 4ourth Mobile Design Elements, Stencils and Components C Handsets, Screens & Frames
1 Small Screens (50% - 1pt = 0.5px)
128 x 176 px 176 x 220 px 240 x 320 px
3:52PM 3G 3G 3G 3G 3:52PM 3:52PM 3:52PM 3:52PM 5 px top margin 7 px top margin 10 px top margin Titles 14 pt. Titles 16 pt. Titles 18 pt. Web Browser Text Message Left align most Cannot Install: From: Sending service text. Which is 3 px wide Left align most text. 7 px left and Left align most text. 16 pt 10 px left and The application cannot be 12 pt. scroll indicator 14 pt medium. right margins medium. right margins installed on this device. A reminder was sent, but Small text is 10 pt. Small text is 12 pt. Small text is 14 pt. the application did not run, 5 px left and 4 px wide 6 px wide Or it can even be as Stuff can be centered if The device may be incom- and may need to be re- small as 9 pt. right margins you just have to. scroll indicator Stuff can be centered if you scroll indicator Left Right just have to. patible, or your carrier installed. Stuff can be centered if you just have to. If there’s too much to fit may not have a billing on one page, then you Stuff can be centered if agreement in place. Please download the appli- canLeft just keep typing,Right and you just have to. cation to continue: can just keep typing, and If there’s too much to can just keep typing, and fit on one page, then you can just keep typ- whatever you type can http://mobile.appname.com ing, and whatever you just extend below the /new.php?af1309e type can just extend page, no problem. If there’s too much to fit below the page, no problem. I’d add some line feeds onLeft one page, then youRight Options Back Options Back I’d add some line under the mask, and can just keep typing, and feeds under the repeat the part that gets can just keep typing, and mask, and repeat cut off so it’s more clear the part that gets it’s an extension of the can just keep typing, and cut off so it’s more clear it’s an exten- page. whatever you type can just sion of the page. extend below the page, no Footers should be differ- Footers should be dif- entiated somehow. problem. ferentiated somehow. I’d add some line feeds under the mask, and repeat the part that gets cut off so it’s more clear it’s an extension of the page.
Footers should be differenti- ated somehow.
To indicate a break To truncate a page, as (when a large amount when there is much of content would exist, content but the rest is but it would be cum- of no significance to bersome to show it all) the discussion, use this use this element. element.
Can be flipped to only show the bottom, or use two to show the middle of a page.
Elements, unless noted, shared under Creative Commons MobileDesignElements-2011april15 Saved on 17 April 2011 at 4:02 PM Brand and format ©2011 Steven Hoober Attribution-Share Alike 3.0 5 http://creativecommons.org/licenses/by-sa/3.0/ 4ourth Mobile Design Elements, Stencils and Components C Handsets, Screens & Frames
3 Scaled Handsets for Design Framing (50% - 1pt = 0.5px) DEF 3G 3G MNO
3:52PM 3:52PM Space WXYZ Back 3 6 9 # JKL TUV ABC Next OK 2 5 8 0 GHI Shift PQRS 1 4 7 *
1Q 2W 3E 4R 5T Y6 U7 I 8 O9 P0 !A @S #D $F %G H& J* K( L) Back _ - = + / ‘ “ CAPS Z X C V B N M Pg up OK : , ; ~ OK Back Shift Sym ? Space . Pg dn
1 2abc 3def 1 2abc 3def
4ghi 5jkl 6mno 4ghi 5jkl 6mno 1 2 ABC 3 DEF 7pqrs 8tuv 9wxyz 7pqrs 8tuv 9wxyz 4 GHI 5 JKL 6 MNO 0+ # 0+ # * * 7 PQRS 8 TUV 9WXYZ * Shift 0 Next # Space
3G 3:52PM Icons in annunciator bar drawn by 4ourth Mo- All these handsets were drawn by 4ourth Mo- Each device is at the true resolution, but of
EVDO 3:52PM bile except the Bluetooth icon; see Bluetooth.org bile. The candy featurephone to the left is a sort course can be re-scaled for new or other resolu-
15:52 for use of this outside of comps. of compsite device, if you were wondering. The tions as needed. sliding message phone is based on the Samsung The USB logo was traced by Little Springs, but Rant, but has been modified and simplified. it’s use outside of comps should be cleared at USB.org.
Elements, unless noted, shared under Creative Commons MobileDesignElements-2011april15 Saved on 17 April 2011 at 4:02 PM Brand and format ©2011 Steven Hoober Attribution-Share Alike 3.0 6 http://creativecommons.org/licenses/by-sa/3.0/ 4ourth Mobile Design Elements, Stencils and Components C Handsets, Screens & Frames
3 Scaled Handsets for Design Framing
iPhone 2 @ 50% - 1pt = 0.5px iPhone 4 @ 33.34% - 1pt = 1/3px
AT&T 3G 3:27 PM AT&T 3G 3:27 PM
The iPhone was drawn by 4ourth Mobile and is free for your use. Each device is at the true resolution, but of course can be re-scaled for new or other resolutions as needed (especiall the featurephone).
Elements, unless noted, shared under Creative Commons MobileDesignElements-2011april15 Saved on 17 April 2011 at 4:02 PM Brand and format ©2011 Steven Hoober Attribution-Share Alike 3.0 7 http://creativecommons.org/licenses/by-sa/3.0/ 4ourth Mobile Design Elements, Stencils and Components C Handsets, Screens & Frames
3 Scaled Handsets for Design Framing (50% - 1pt = 0.5px) 2
3G 3:52PM 3G 3:52PM
This device is a Samsung Omnia-2, more or less. Left Right Each device is at the true resolution, but of course can be re-scaled for new or other resolu- tions as needed (especiall the featurephone).
Elements, unless noted, shared under Creative Commons MobileDesignElements-2011april15 Saved on 17 April 2011 at 4:02 PM Brand and format ©2011 Steven Hoober Attribution-Share Alike 3.0 8 http://creativecommons.org/licenses/by-sa/3.0/ 4ourth Mobile Design Elements, Stencils and Components C Handsets, Screens & Frames
3 Scaled Handsets for Design Framing (50% - 1pt = 0.5px) 3
This device is a Nokia N8, just without the nameplate, so it’s a generic new/future Symbian handset.
Each device is at the true resolution, but of course can be re-scaled for new or other resolu- tions as needed (especiall the featurephone).
Elements, unless noted, shared under Creative Commons MobileDesignElements-2011april15 Saved on 17 April 2011 at 4:02 PM Brand and format ©2011 Steven Hoober Attribution-Share Alike 3.0 9 http://creativecommons.org/licenses/by-sa/3.0/ 4ourth Mobile Design Elements, Stencils and Components C Handsets, Screens & Frames
4 Un-scaled Handsets
All the devices on this page were drawn by 4ourth Mobile except the Nokia N95 and Sam- sung Omnia 2, which are extracted (and then modified) from the product manual PDF. They are presumably still owned by the manufcatur- ers, so should only be used for comps and so on.
Elements, unless noted, shared under Creative Commons MobileDesignElements-2011april15 Saved on 17 April 2011 at 4:02 PM Brand and format ©2011 Steven Hoober Attribution-Share Alike 3.0 10 http://creativecommons.org/licenses/by-sa/3.0/ 4ourth Mobile Design Elements, Stencils and Components C Handsets, Screens & Frames
5 Handsets in Context
. .
Photo reference lost to. the mists of time, but the Reference photo and art above by 4ourth Mo- Photo reference lost to the mists of time, but the art above hand-drawn by 4ourth Mobile. bile. art above hand-drawn by 4ourth Mobile.
This is an NFC transaction. The device logo is for ViVoTech. If you are not working on a proj- ect for them, you might want to get rid of it.
Elements, unless noted, shared under Creative Commons MobileDesignElements-2011april15 Saved on 17 April 2011 at 4:02 PM Brand and format ©2011 Steven Hoober Attribution-Share Alike 3.0 11 http://creativecommons.org/licenses/by-sa/3.0/ 4ourth Mobile Design Elements, Stencils and Components D Links, Forms & Buttons
1 Inputs & Selectors (50% - 1pt = 0.5px)
Text entry Selectors
Pick a user name Country: Select one of these: Enter your info... Hint text in the field steven Live field validation United States Pulldown Option one Radios are for select- Not unique indicators display Option two ing one of several City Select your country... Pick a user name onblur Pulldown, empty options. Lawrence Hint text below the steven1970 No abbreviations field Select your country... Must be unique Pulldown, open, with Receive emails about new City Checks are for selec- United States scrolling. In long products and so on? Lawrence Pick a user name tion/deselection of Entry type indicators: Canada lists, likely entries are Yes Abc ABC (caps) steven1970 Required field indica- United Kingdom individual items, ------repeated at the top. Abc (initial cap) Must be unique tors. whether in a list or City Abc * Afghanistan Select all that apply: Akrotiri not. Lawrence abc (lower case) Smoke Albania T9 (predictive) Fire 123 (numeric) Earthquake !@# (symbol) Select vehicle type... Even web pulldowns Home phone number Cars: can have indents, 785 838 3003 Multi-field phone - Coupe spaces, sections and Include area code - Sedan entry - Station wagon use some symbols. Set up a reminder:
Email address Take 1 Trucks: http:// Forms to direct cre- - Sport-utility vehicle Fields convert to pro- steven @ littlespringsde (dose?) (unit?) ation of natural-lan- gressive multi-form Multi-field email (how frequently?) [email protected] entry (on what day?) guage submissions. http:// selection/entry to Email address (at what time?) Search within... assist with formatted Application pull- w| steven @ (add a note?) data. Internet: downs can include www littlespringsdesign.com Google graphics and other www2 Set up a reminder: Yahoo! wap [email protected] Amazon formatting. Take 1 Answers Describe your issue eBay 200 mg capsule http://www. Text areas may need More choices... Text area with counter go scrollbars and should Tuesday, Thursday and only be as long as Sunday Local: google.com needed. Be sure to put a My history google.com/news counter on most of them at breakfast . google.com/docs googlefight.com Stop taking on June 15 21 characters remaining (add a note?)
Elements, unless noted, shared under Creative Commons MobileDesignElements-2011april15 Saved on 17 April 2011 at 4:02 PM Brand and format ©2011 Steven Hoober Attribution-Share Alike 3.0 12 http://creativecommons.org/licenses/by-sa/3.0/ 4ourth Mobile Design Elements, Stencils and Components D Links, Forms & Buttons
2 Actions (50% - 1pt = 0.5px)
Links Buttons
A highlighted link in text D1 Scroll & select, on Picked up D1 Mini-button, for inline effects, etc. - In focus. hover Picked up D1 Not in focus. a non-highlighted link in D1 Picked up text Scroll & select, on D1 Unavailable (grayed out). blur a clickable link in text D1 Stylus or touch Save changes D1 Normal button, page level submissions - In focus. Save changes D1 Not in focus.
Save changes D1 Unavailable (grayed out). Tooltips & auto-complete ⇒ Save changes D1 Optional (but suggested) html-entity “graphic” Tool-tip describing this labels. link, up to two lines long. a clickable link in text D1 On hover, can offer meaning name dec hex tooltips for links or ⊕ add ⊕ ⊕ ⊕ other items. ⊗ cancel/re- ⊗ ⊗ ⊗ move
City √ okay √ √ √ | When in focus, or ⇐ back/prev ⇐ ⇐ ⇐ Lawrence once typing has start- ⇒ continue ⇐ ⇐ ⇐ Mission ed suggestions may be Kansas City offered in a box below the field. Save changes D1 True graphic labels, also suggested. Devise items as needed. Cancel D1
Elements, unless noted, shared under Creative Commons MobileDesignElements-2011april15 Saved on 17 April 2011 at 4:02 PM Brand and format ©2011 Steven Hoober Attribution-Share Alike 3.0 13 http://creativecommons.org/licenses/by-sa/3.0/ 4ourth Mobile Design Elements, Stencils and Components E Lists
Text lists Block lists Nested text lists Fisheyes & linelets
1 The Internet Movie Dat... Numbers to Especially use- 15 Recently viewed Numbers Local results: Fisheyes reveal 1 My Reminders 8 6 2 Google the left are ful for settings 41 Yesterday afternoon indicated items Press # to see on map additional accesskeys. or other places within the information 3 Tabular WX - Mission 2 View next alert 7:15am Thunderbird home Iconic labels you want branch. Select- Party America when hovered, 4 Netflix: Queue 41 Blogger 1441 W 23rd Street may be used 3 My Neighbohood 2 to associate ing a branch Lawrence, KS 66046 as when scroll- 5 Design for Mobile 2010 Blogger: Mobile C... intead. values with a reveals subsid- Macelli’s ing through a My Delicious 4 Add a location listed item. Blogger: Blogger ... iary branches list. Anderson Rentals Blogger 5 Search SILVA Outdoor Profe... and leaves. Sunflower Rental Optionally, Bloglines Settings Silva model-25 com... Party America a click (as for Gmail Security information BattleLab Olive Dra... Party City touch devices) CNN Science News PROFESSIONAL INST... Bittersweet Floral and Des... can reveal this information, allowing a second click to link away. 1 The Internet Movie... Small circles 2 Google represent icons Accesskey assignments 3 Tabular WX - Mission (here, favicons) associated with 4 Netflix: Queue each listed Accesskeys should be assigned in a logical Key Suggested Functions 5 Design for Mobile 2... item. method. For QWERTY keyboards, short- 1 Zoom out My Delicious cuts are the best guidance, and following 2 Scroll up Blogger principles of desktop shortcuts work well. Abide by desktop heuristics whenever pos- 3 Zoom in Bloglines sible (e.g Cut, Copy, Paste as X, C, V). 4 Scroll left Gmail 5 Home, re-center, switch view CNN Science News For numeric (10-key) accesskeys, we have a few suggestions and best practices we like. 6 Scroll right Individual key suggestions are listed in the 7 none table to the right, but some principles are: 8 Scroll down 9 none • Scrolling-related functions assume the 1 2 3 4 5 6 7 8 9 0 # You can keypad is a 4-way pad, and assign up/ * Mark as favorite (star!) 1 2 3 4 5 6 7 8 9 0 # replace text down/left/right with 5 at the center. 0 Get help accesskeys • Use mnemonics if available, such as * # none with graphics. for favorite (star). Depends on the situation. • Exercise bilateral symmetry. Note that zoom is 1 and 3, never (say) 1 and 2.
Elements, unless noted, shared under Creative Commons MobileDesignElements-2011april15 Saved on 17 April 2011 at 4:02 PM Brand and format ©2011 Steven Hoober Attribution-Share Alike 3.0 14 http://creativecommons.org/licenses/by-sa/3.0/ 4ourth Mobile Design Elements, Stencils and Components F Advertising
1 Mobile Marketing Association standard banner ad sizes
6:1 S Unit 120 x 20 168 x 28 216 x 36 300 x 50 6:1 Medium Ad Unit 120 x 30 6:1 Large Ad Unit 4:1 Small Ad Unit 168 x 42 6:1 Extra-large Ad Unit 216 x 42 4:1 Medium Ad Unit 300 x 75 4:1 Large Ad Unit
128 x 128 4:1 Extra-large Ad Unit 160 x 128 x 160 160
176 x 208 aav 320 x 240
240 x 320
240 x 320
Elements, unless noted, shared under Creative Commons MobileDesignElements-2011april15 Saved on 17 April 2011 at 4:02 PM Brand and format ©2011 Steven Hoober Attribution-Share Alike 3.0 15 http://creativecommons.org/licenses/by-sa/3.0/ 4ourth Mobile Design Elements, Stencils and Components F Advertising
2 Banner ad implementations
Banners Ads on Interstitials
3G 3G 3:52PM Advertsing must be broken out from the in- 3:52PM The interstitial is primarily a loading process Titles 18 pt. teraction in some manner so it does not add size of ad in px screen. Whenever there is a sufficient delay and 216 x 36 6:1 Large Ad Unit cognitive load to the user. There should never no suitable information that should be presented
1 Bis nostrud exercitation be confusion as to whether an item is advertis- on the bulk of the screen, advertising can be ing or part of the site or application. added to it. 3 Ullam mmodo The example to the left is the most typical The advertising should not interfere with the 4 Duis aute in voluptate Ad Unit example, where the ad unit is at the extreme top user’s understanding of the application. Adver- or bottom of the screen, and is on a full-width tising should never animate, while the loading background different from the app or page Loading... indicator will, to imply activity. 7 At vver eos et itself. Left Right Left Right
3G 3:52PM Another option, especially useful if contrac- tual requirements mandate the advertising be integrated into the site, is to differentiate with 168 x 28 6:1 Medium Ad Unit alignment. This requires, as shown to the left, that the next-smaller MMA ad size is used, so there is spare room. 1 Bis nostrud exercitation Since all other elements will be centered or left- 3 Ullam mmodo aligned, a right-aligned image will be notably 4 Duis aute in voluptate different, and can be scanned past without confusion. Left Right
Elements, unless noted, shared under Creative Commons MobileDesignElements-2011april15 Saved on 17 April 2011 at 4:02 PM Brand and format ©2011 Steven Hoober Attribution-Share Alike 3.0 16 http://creativecommons.org/licenses/by-sa/3.0/ 4ourth Mobile Design Elements, Stencils and Components G Other In-Screen Elements
1 Small Elements
Bada & Faux-Bada elements Icons and sets with specific meanings
List or menu Bookmarks Book Friend Group Highlight Write 2 3 4
Home Tools or Settings Search View Location or iPhone Elements settings compass
Results Compare Done Unread or Message Compose Send Message or priority or message message message similar message services Note: Compare New Old MANY additional dialog/ thought bubbles off Sports & Shopping Store Weather Season Tornado page to the Outdoors (fall) alert right... Ratings & reviews
User reviews (459) Display modes Ringtones Games Screen Favorite or Search Car savers popular (V70)
User reviews (459) Motorola 3.1 rate it: 1 2 3 4 5 RAZR V3 idle screen Camera, video, Mail Calendar Address Browser 379 reviews icons photo book
Elements, unless noted, shared under Creative Commons MobileDesignElements-2011april15 Saved on 17 April 2011 at 4:02 PM Brand and format ©2011 Steven Hoober Attribution-Share Alike 3.0 17 http://creativecommons.org/licenses/by-sa/3.0/ 4ourth Mobile Design Elements, Stencils and Components G Other In-Screen Elements
1 Small Elements (Continued)
Technical & status (Annunciator row) Direction, playback, view
3G 1.5kb 3:52PM
Radio WiFi Bluetooth NFC Airplane Volume Lock Traffic Mail Synch Location USB Battery Current zoom level
off on Zoom or view Zoom Zoom in out off on
! 5 5 Interaction controls Notice Vibrate Brightness RSS feeds counter Back Close, quit, exit OK, Select Scrollbar Time & environment (rotate for vertical) Sunny Partly Charts and graphs cloudy Loading, Time Alarm Clock time or : Mostly Showers delay 15 44 cloudy InfoViz Sparkline Pointers and Cursors Special-use items
Tagged item Text Text Texta
Alert & information
Elements, unless noted, shared under Creative Commons MobileDesignElements-2011april15 Saved on 17 April 2011 at 4:02 PM Brand and format ©2011 Steven Hoober Attribution-Share Alike 3.0 18 http://creativecommons.org/licenses/by-sa/3.0/ 4ourth Mobile Design Elements, Stencils and Components G Other In-Screen Elements
2 Pop-ups (50%)
Guards Select from a few Select from many Additional details
Delete? Destructive actions Assign photo One to three selectable Pop-ups may also contain images, form ele- (application exit, dis- options should present Are you sure you want How do you want to ments, and other UI widgets as needed. to delete the contact carding user-entered assign a photo to the the options as buttons “Jason Falcone”? data, cancelling impor- contact “Alison Rog- within the Pop-up ers”? Delete tant processes) should itself. be protected by guard From album Cancel conditions. Informational dia- Take new logues will use the Sorry, this is not quite done yet. When I need one, I’ll complete it and update the docu- Cancel-guard, Delete- same layout, with ment. guard, and Exit-guard Cancel more information and will display a Pop-up only a dismiss button. Delete? with a clear title, and Are you sure you want to explicit explanation of delete the contact “Jason the consequences. But- Falcone”? Assign photo tons will have labels How do you want to Delete indicating their precise assign a photo to the actions; never use contact “Alison Rogers”? Cancel “yes” or “ok” or others From album that can be misinter- preted. Take new
Cancel
Exiting An alternative guard In 10 seconds... condition is to al- low conditions to be staged, notify of the impending action and allow cancelling. Go back For any of these, one or two primary conditions Exit now may be attached to softkeys instead of buttons within the Pop-up itself, if that is the preferred OS method of interaction.
Elements, unless noted, shared under Creative Commons MobileDesignElements-2011april15 Saved on 17 April 2011 at 4:02 PM Brand and format ©2011 Steven Hoober Attribution-Share Alike 3.0 19 http://creativecommons.org/licenses/by-sa/3.0/ 4ourth Mobile Design Elements, Stencils and Components H Actions
1 Physical Key Input
Available Key Behaviors Inline Key Actions
To define all behaviors available from a Exceptions should be defined inline as Used when flow charting or otherwise de- particular screen or element in a particular shown. picting a process diagramatically. Interrupt state, this can be added to an area adjacent the process line to indicate which key was to the drawn element, or alongside written Basic key behaviors should be defined at used to cause the action. When selecting requirements. the front of the document. An example of from lists, etc. this is usually not necessary, this is shown off the printed page to the and the behavior of scrolling and selecting The legend should always be included. left, if you have the InDesign document. is obvious. Note there are Object Styles used to quickly redefine each of the keys.
c [RIGHT-SOFTKEY] “Options,” see 3540
b [TALK] Dials number if available
d Key performs default action(s). See Requirement 3644. e Key disabled in this screen or state. TALKTALK Replace with the correct button label or generally 1 accepted name.
Used when there is an ex- Directional Input Methods pected delay. Timed or delib- 2 Seconds erate delays will be labeled
OK with the time and units.
2 Seconds
Elements, unless noted, shared under Creative Commons MobileDesignElements-2011april15 Saved on 17 April 2011 at 4:02 PM Brand and format ©2011 Steven Hoober Attribution-Share Alike 3.0 20 http://creativecommons.org/licenses/by-sa/3.0/ 4ourth Mobile Design Elements, Stencils and Components I Actions
2 General Touch Design Guidelines
The minimum area for touch activation, to The point activated by a touch (on capaci- address the general population, is a square tive touch devices) is the centroid of the
3/8” on each side (10 mm). When possible, 3/8” (10 touched area; that area where the user’s use larger target areas. Important targets finger is flat against the screen. should be larger than others. Screen surface The centroid is the center of area, whose There is no distinct preference for vertical 3/8” (10 mm) coordinates are the average (arithmetic Area touched or horizontal finger touch areas. All touch ? ? mean) of the co-ordinates of all the points can be assumed to be a circle, though the of the shape. This may be sensed directly Perceived touch area actual input item may be shaped as needed (the highest change in local capacitance for to fit the space, or express a preconceived projected-capacitive screens) or calculated notion (e.g. button). (center of the obscured area for beam-sen- sors). Area touched The visual target is not always the same as the touch area. However the touch area A larger area will typically be perceived may never be smaller than the visual tar- to be touched by the user, due to parallax Centroid get. When practical (i.e. there is no adjacent (advanced users may become aware of the interctive item) the touch area should be centroid phenomenon, and expect this). notably larger than the visual target.
Buttons on the edges of screens with flat bezels may take advantage of this to use Effective overflow touch area smaller target sizes. The user may place See the example to the right; the orange Visual target dotted line is the touch area. It is notably their finger so that part of the touch is on Bezel the bezel (off the sensing area of the screen). Edge of screen larger than the visual target, so a missed Touch area ? touch (as shown) still functions as expect- ? This will effectively reduce the size of their Screen ed. finger, and allow smaller input areas. Actual This effective size reduction can only be touch about 60% of normal (so no smaller than area 0.225 in or 6 mm) and only in the dimen- sion with the edge condition. This is practi- cally most useful to give high priority items a large target size without increasing the apparent or on-screen size of the target or touch area.
Elements, unless noted, shared under Creative Commons MobileDesignElements-2011april15 Saved on 17 April 2011 at 4:02 PM Brand and format ©2011 Steven Hoober Attribution-Share Alike 3.0 21 http://creativecommons.org/licenses/by-sa/3.0/ 4ourth Mobile Design Elements, Stencils and Components I Actions
3 Gesture
Finger or styus (on-screen) gestures Two-finger (multi-touch) gestures
Used on a wireframe or between frames of a flow-charted UI diagram (with the darker ar- rows as in the one example) to indicate the action undertaken.
Action labels are often examples of the most common state. Clearly, pinch can perform ac- tions other than zoom. Label appropriately.
When overlaid on a design, make sure the outer dot size corresponds to a 90th percentile user finger-tip size. Zoom in Zoom out Tap & hold, then second tap Momentary contact Pen Input
Continuous Tap Tap & hold Drag One-dimen- contact sion scroll
Rotate Rotate CW CCW
One-dimen- One-way One-way One-way One-way sion scroll scroll scroll with scroll scroll with Inspired by Kicker Studio, all designed and drawn by 4ourth Mobile. inertia inertia
Elements, unless noted, shared under Creative Commons MobileDesignElements-2011april15 Saved on 17 April 2011 at 4:02 PM Brand and format ©2011 Steven Hoober Attribution-Share Alike 3.0 22 http://creativecommons.org/licenses/by-sa/3.0/ 4ourth Mobile Design Elements, Stencils and Components I Actions
4 Gesture 2
Hand, arm or device gestures
Building off the on-screen gesture language, and used the same way as part of a diagram or flow chart. These are just a few to start with. If you make a device that has lots of accelerom- eter gestures, add them to the library. And share them with us if you can.
Tap two hand- Handset towards sets together non-phone RFID detector
Shake Roll handset Raise handset Gesture towards handset (face up to (to face) handset (non- face down) handset hand moves) All designed and drawn by 4ourth Mobile.
Elements, unless noted, shared under Creative Commons MobileDesignElements-2011april15 Saved on 17 April 2011 at 4:02 PM Brand and format ©2011 Steven Hoober Attribution-Share Alike 3.0 23 http://creativecommons.org/licenses/by-sa/3.0/ 4ourth Mobile Design Elements, Stencils and Components F Actions
5 Text Entry
Keypads Keyboards (mostly virtual)
OK
Talk End ! @ # $ % ^ & * ( ) ( 1 2abc 3def 1 2 3 4 5 6 7 8 9 0 9 4ghi 5jkl 6mno q w e r t y u i o p q w e r t y u i o p 7pqrs 8tuv 9wxyz : 0+ # Lock a s d f g h j k l ; ′ Sym a s d f g h j k l Return * ″ < : Shift z x c v b n m . > Shift 123 z x c v b n m . ; ′ , , ″ ! | ! Space Space Input Mode Indicators Sym / \ Done Shift ? Shift Done
ABC (ALL CAPS) ABC
Abc (Initial cap) Abc
abc (lower case) abc q w e r t y u i o p 123 123 (numeric) Sym a s d f g h j k l Return !@# or Sym (symbol) !@# : 123 z x c v b n m . ; ′ , ″ ! Space Shift ? Shift Done T9 word predictive abc lower case
T9 Word Predictive Abc 1 2 3 4 5 6 7 8 9 0 initial cap Sym a s d f g h j k l Return : 123 z x c v b n m . ; ′ , ″ ! Space Pen Input Shift ? Shift Done
3:52PM 3G 3:52PM 3G 3:52PM Just passed Sign on to continue Sign on to continue Q W E R T Y U I O P through Asheville, 1 2 3 4 5 6 7 8 9 0 you still on? L To prevent unauthorized To prevent unauthorizedletter Q W E R T Y U I O P access to your account, access to your account, Stuck in | l access has been locked. access has been locked.letter Sym Return A S D F G H J K L ! @ # $ % & * ( ) Back Password 123 Password | 123 A S D F G H J K L symbol TF43 TF43L 1 : _ number 123 ; Z X C V B N M . ′ CAPS - = + / ‘ “ OK meetings 1@& Continue Continue / , ″ Z X C V B N M Pg up symbol F 4 Exit3 F 4 Exit3 \ ! 1@& symbol 1@& Space : , ; ~ Shift ? Shift Done Shift Sym ? Space . Pg dn
Elements, unless noted, shared under Creative Commons MobileDesignElements-2011april15 Saved on 17 April 2011 at 4:02 PM Brand and format ©2011 Steven Hoober Attribution-Share Alike 3.0 24 http://creativecommons.org/licenses/by-sa/3.0/ 4ourth Mobile Design Elements, Stencils and Components F Actions
6 Audio & Vibration Output
This page is essentially a stub. We expect The elements to the right are insprired by haptics and audio to become more impor- 2009 work at Nearfield.org and modified tant sometime – with the continued ruckus to fit into the diagramming style. Still early. over distracted driving, and emerging wor- Likely to change. These work with an im- Action Action ries about accessibility, maybe shortly. plied timeline, for use in process diagram- (0.8 s) (0.25 s) ming. The process is assumed to start at the Anyone with design standards around device or contact, and move to the right. voice response or haptics is encouraged to submit them for inclusion here. These are sample conditions. The wave- form and annotation may be added to any The design elements shown below are as- action indicator. sociated with a particular page, frame or state. They may also be used with process or flow-chart documentation. General Variable The icon is accompanied by a description vibrate amplitude of the type of action, and the class or text of any output.
“Complete” here is the class Error tone “Now Complete or type of output. Somewhere (2 s) choose a (2 s) in the document, these will be defined. “Complete” is different time” from “error” or “enter infor- Action Action mation” for example. (1.5 s) Audio tone Audio read Vibrate (1.5 s) or alert or played
Directional Response to touch
Elements, unless noted, shared under Creative Commons MobileDesignElements-2011april15 Saved on 17 April 2011 at 4:02 PM Brand and format ©2011 Steven Hoober Attribution-Share Alike 3.0 25 http://creativecommons.org/licenses/by-sa/3.0/ 4ourth Mobile Design Elements, Stencils and Components G Content
1 Typography for Mobiles
Morten Hjerde, 20 January 2008 Fonts for Prototyping Mobile UIs http://sender11.typepad.com/sender11/2008/01/prototyping-mob.html
This is the best summary yet, so I am just reproducing it word * Sans-Serif (Monotype Inc.) cludes a glyph for all Unicode characters.) * Trebuchet MS for word here. For examples of each (of you have installed the You can extract the fonts from the Android SDK. * Verdana type located in the “LSD Basics” folder on the share drive) look You can get a TrueType version of this font by download- to the right. Those in gray are not actually shown, and sometime ing and installing the UIQ 3.0 SDK from the UIQ website. LiMo and other Linux variants * Zapfino we need to find a sample, or substitute for them. Motorola (various proprietary OSes) * Vera (Bitstream Inc.) and DejaVu Since there is no official iPhone SDK available yet, you can I’ve seen many prototypes of mobile UIs that can’t be only use these fonts in the browser. The way to get these * SynergyBasic (Bitstream Inc.) Bitstream gave the Vera font to the open source commu- built and if they could, would not be legible on a small fonts is of course to own a Mac. (Btw, I have a really, really nity. Vera has been modified and evolved into DejaVu. You LCD screen. So I thought I’d provide some pointers that I have a Bold only version that I once found somewhere nasty case of MacBook Air lust and I’m trying to convince can find these fonts a number of places, just google them. might help those of you that is starting out. Often, people on the intertubes, but I can’t locate it anymore. The font is my wife that we need yet another computer in the house.) starting out prototyping mobile phone UIs get the size of similar to Univers and you might get by with that. RIM Blackberry Font sizes the display right but the size of the font wrong. They try to Samsung and LG (proprietary OSes) Did you know that Blackberry typography is the univer- stuff way too much in there, and they use a font size and In Java ME you have 3 set font sizes Small, Medium and sally accepted definition of the word “awful”? I would font family that is not available in the phone. I don’t have information on what fonts their feature Large. With the new anti-aliased fonts, you have to mea- phones uses. If you know, leave a comment or send me an prefer to just put my head in the sand and pretend it sure what font size matches what phone screen size for the If you design applications, you can make pixel perfect email and I’ll update it here. didn’t exist - or at least looked better. But let’s put the different manufacturers. designs. If you design mobile web pages, you go for a pixel policing aside, here are the fonts you have access to rough estimate. Having the correct font is important if you The Symbian versions uses the S60 Sans font, the WM ver- from Java: Get some screen dumps from the phone, open them in design applications, less important if you make mobile sions uses Segoe Condensed or Tahoma. Photoshop and Visio (or whatever software you prefer) * Millbank and measure what point size equals the font size on the websites. HTC, Motorola, Samsung, etc running Windows Mobile 6 * Millbank Tall phone. For example: a 240x320 screen Series 40 phone uses Most current phones use anti-aliased fonts and many of * Segoe Condensed (Monotype Inc.) * System font heights of 16, 20 and 24 pixels. This equals a point size these are available in TrueType versions that you can use of 16, 21 and 25 in Photoshop. * Microsoft Nina for East Asian on your PC. I’ve provided links to “official” sources, you All are available in Regular, Bold, Italic and Bold Italic, In a phone web browser you can specify the font size, but may find more if you search the web, but quality may Available in Regular, Bold, Italic and Bold Italic. AFAIK. I have not found TrueType versions of these fonts vary. anywhere. how its rendered is dependent on the capabilities of both TrueType versions of Segoe and Nina are installed with the phone and the browser. It ranges from a single font Nokia Series 40 and S60 Vista and Office 2007. If you don’t have the Condensed iPhone size for all text to continuously variable size. I don’t think version of Segoe, you can get it by downloading the Win- it makes sense to spend a lot of time in Photoshop design- * Nokia BW fonts According to John Gruber, these fonts are included in the dows Mobile 6 Standard SDK. (Windows Mobile 6 Profes- ing mobile web pages. iPhone OS X: * S60 Sans (Monotype Inc.) sional or Classic includes Tahoma and Courier.) The entire mobile font size/screen size issue is somewhat * American Typewriter You can get a TrueType version of the S60 Sans font by Google Android complex and I’ll try to cover it in a future blog post. downloading and installing one of the Nokia S60 SDks. * American Typewriter Condensed * Droid (Ascender Corp.) The fonts currently used in Series 40 devices are the same * Arial (or close enough). Note that Series 40 and S60 does not use The Droid font family has a sans, a serif and a monospace the same font size for the same screen size however. * Arial Rounded MT Bold version. Strangely, the sans version does not have italics. * Courier New Prior to 3rd edition, Nokia used BW fonts, one font for S60 Sans (Regular, Bold) and one font for Series 40. I handmade TrueType versions * Georgia of these fonts 3 or 4 years ago. If you need them for the Serif (Regular, Bold, Italic, Bold Italic) * Helvetica purpose of mobile UI prototyping, send me an email. Mono (Regular) * Marker Felt Sony Ericsson OSE and UIQ Sans Asian (This is also the fallback font. Meaning it in- * Times New Roman
Elements, unless noted, shared under Creative Commons MobileDesignElements-2011april15 Saved on 17 April 2011 at 4:02 PM Brand and format ©2011 Steven Hoober Attribution-Share Alike 3.0 26 http://creativecommons.org/licenses/by-sa/3.0/ 4ourth Mobile Design Elements, Stencils and Components G Content
2 Sample Typography for Mobile
Fonts for Prototyping Mobile UIs
Good fake 1-line and AMPS faces Motorola (various proprietary OSes) RIM Blackberry None of these are going to be distributed, as Synchro LET Bitstream SynergyBasic Millbank Tall they are limited license faces. Sorry, this will Nokian System cause errors and you will see a lot of garbage to the left, but I can’t figure out a way to solve Mobile Man Windows Mobile 6 Tahoma Bold that. v5 Prophit cell dot fading Segoe Condensed (Monotype Inc.) *** * Since TrueType is resolution independent, but the Nokia Cellphone FC Small Tahoma Bold iPhone fonts themselves are originally “bitmap fonts”, there Cellpic ASFRTK*&* Microsoft Nina for East Asian American Typewriter is a separate font file for each size (small, medium and large). American Typewriter Condensed Nokia Series 40 and S60 (Home made) Google Android Arial To display the fonts correctly you MUST always * specify 10px size and set anti-aliasing method to Ememess S60 Small Bold Oblique Droid Sans Bold Arial Rounded MT Bold “none” in Photoshop. The Small, Medium and Ememess S60 Medium Bold Oblique Droid Serif Bold Italic Bold-Italic Large versions are actually separate typefaces, just Courier New remember to always specify 10px regardless of the Droid Sans Mono Georgia Ememess S60 Large Bold font you use. Ememess Mobile 9 Bold Oblique Helvetica ** Bitstream, but open-sourced (with limits, I think). LiMo and other Linux variants ** Marker Felt Get it here: http://ftp.gnome.org/pub/GNOME/ Ememess Mobile 12 Bold Oblique sources/ttf-bitstream-vera/1.10/ Bitstream Vera Sans Bold Oblique Times New Roman Ememess Mobile 16 Bold DejaVu is derived from Vera, mostly for the purpose Bold-Oblique Trebuchet MS Oblique of being totally and completely free (libre) and hav- Bitstream Vera Sans Mono Bold Verdana ing support for every language you can think of. S60 Sans (Monotype Inc.) - from Nokia S60 Oblique Bold-Oblique SDK... DejaVu LGC is a limited set of Latin, Greek & Cryll- Bitstream Vera Serif Bold lic only, to avoid incompatibility with the weird sets. DejaVu Sans Extra Light *** This is Segoe UI, from the desktop. Not the con- Sony Ericsson OSE and UIQ Zapfino DejaVu Sans Bold Condensed C-Bold densed one referenced. Sans-Serif (Monotype Inc.) - from UIQ 3.0 SDK (UIQ website) - which monotype sans???? Dejavu Sans Mono Xerox Sans Wide DejaVu Serif Bold Condensed C-Bold
Elements, unless noted, shared under Creative Commons MobileDesignElements-2011april15 Saved on 17 April 2011 at 4:02 PM Brand and format ©2011 Steven Hoober Attribution-Share Alike 3.0 27 http://creativecommons.org/licenses/by-sa/3.0/ 4ourth Mobile Design Elements, Stencils and Components G Content
3 Images
Image greeking Stand-in images & graphic widgets
September
Calendar
Weather radar (KC) Coverage map (KCMSA)
Greeting card
Football field. Used for game summary in sports widgets. Use grayscale in most places. Green Simple globe only when the image is key to the discussion.
Cartoons derived from some Hallmark characters. All other items, including reference photography, created by Little Springs.
Vector street map (Mission, KS) US as individual states
Elements, unless noted, shared under Creative Commons MobileDesignElements-2011april15 Saved on 17 April 2011 at 4:02 PM Brand and format ©2011 Steven Hoober Attribution-Share Alike 3.0 28 http://creativecommons.org/licenses/by-sa/3.0/ 4ourth Mobile Design Elements, Stencils and Components G Content
4 Video
3G 3G 3:52PM 3:52PM Video item Page title Back :12 Mute
Prev :12 Next
Options Back Options Back
Replace the green swoopy greeking with a raster image of the appro- priate dimensions (including black masks) when needed for comps or presentation mockups.
Elements, unless noted, shared under Creative Commons MobileDesignElements-2011april15 Saved on 17 April 2011 at 4:02 PM Brand and format ©2011 Steven Hoober Attribution-Share Alike 3.0 29 http://creativecommons.org/licenses/by-sa/3.0/ 4ourth Mobile Design Elements, Stencils and Components X What Else?
What, you Need More?
If I forgot to include anything, or you have something to contribute, just tell me.
Elements, unless noted, shared under Creative Commons MobileDesignElements-2011april15 Saved on 17 April 2011 at 4:02 PM Brand and format ©2011 Steven Hoober Attribution-Share Alike 3.0 30 http://creativecommons.org/licenses/by-sa/3.0/ Join the mobile community
mobile patterns wiki
Visit www.4ourth.com/wiki/ to contribute to the design patterns, and to add and view other mobile design tips and tools (like this document).
Elements, unless noted, shared under Creative Commons MobileDesignElements-2011april15 Saved on 17 April 2011 at 4:02 PM Brand and format ©2011 Steven Hoober Attribution-Share Alike 3.0 31 http://creativecommons.org/licenses/by-sa/3.0/