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- • <Cancel> F1 links are labeled with the element number. Links are surrounded by greater-than/less-than vated signs, buttons are surrounded by square brackets. b Audio Settings – First Time Use Pop-up Variations: • Explain that these are system • [OK] change settings Variant displays of a particular frame may be displayed within the box as shown, or may be sounds only (tones used on • <Tell me more> help D1 broken out among several boxes, mostly depending on the space available. each screen) Automated actions: • Inform users that even if muted, video will play with audio on, un- Used for items such as audio cues that appear when the page loads, or to describe automatic less the device volume is muted behaviors that cannot be covered in the Information side above. • Explain that the volume level set here is subsidiary to the device volume level 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 .