Avoiding the Heuristic Solution: Creating Inspiring Mobile Design with UX Principles

Steven Hooberdesigning Float Mobile Learning Symposium 11 June 2011mobileinterfaces mobile design

Designing Mobile Interfaces www.4ourth.com/wiki Steven Hoober & Eric Berkman 2

Patterns are universal 3

Patterns are generalized Vi Vi deo deo se se N r r et vic N et vic fli es fl e H ul x ... H ix s... u ul Pl u Am u Am Plu a s a s Yo zon Yo zon uT uT u u Sl be Sl be ac ac ke ke rM rM ed ed ia ia 4

Patterns are organized Directional Entry Input Method Indicator OK 3G 3:52PM Sign on to continue To prevent unauthorized access to your account, access has been locked. Password 123 TF43 Continue Exit 3G 3:52PM abc 3G 3:52PM 123 Going to be a little late picking you up. Go get Sign on to continue some coffee and I’ll text To prevent unauthorized access to your account, when getting clo access has been locked. Password TF43 3G 3:52PM Just passed through Asheville, Continue you still on? Exit Start selection Stuck in meetings, where are you Paste stopping tonight? Copy all abc Going to be a little late Focus & Cursors Cut all picking you up. Go get some coffee and I’ll text when getting clo Clear Entry 5

Patterns are explained 6

Patterns are best practicesNot necessarilycommon practice. Contacts 21-25 of 125Not necessarily Jane Adams 816 210 0123 (M) Jamie Adamlypopular, trendy or 913 111 0234 (H) Paula Adamowlsky 785 985 0345 (M)fashionable. Mike Adamson 314 987 0456 (O) Mike Adler 210 618 0567 7

Patterns are misunderstood• Reactionary• Single view• First solutions• Rote solutions• Too high level 8

Steven Hooberavoiding Float Mobile Learning Symposium 11 June 2011the heuristicsolution mobile design

Be a conscious designerKnow why you draw• Define• Codify• Compare• Choose• Combine• Expand 10

Design methodologies to success• Understand the problem• Leverage your team• No idea is worthy• Your competitors are not wizards• Embrace your constraints• Collaborate• Seek outside input 11

Understand the problemPut the markers down.First time, every time,ask the customer, theirworkers, the users.Create objectives, andstick to them. 12

Leverage your teamStudio methods tofoster competition,creation of new ideas.Manage them, to addchallenge to each step. 13

No idea is worthyDon’t do a little dancefor your great idea. Ipromise it has flaws.Consider componentsindividually, and lookfor flaws. 14

There are no design wizardsInspiration is fine.Copying is pointless.Follow your process tofind the right answerfor your business, andthe current world. 15

Embrace your constraintsBrainstorming doesn’twork.Working within yourconstraints adds focusto any design sessionand fosters ideas. 16

CollaborateDon’t just worktogether, collaborate.Use everyone’s skill,and knowledge, tofind the best solution. 17

Seek outside inputSystems, process andbusiness-intelligenceknowledge is held byspecialists you won’tsee.Unless you go looking. 18

And now your design is perfect Bitstream ThunderHawk 3.0 Detailed Design Document Novemb A Home > ii URL EntryWhat could possibly A2c URL entry (widget) A2f URL overs entry (widggo wrong? goog| google.com/news google.com/docs Input google.com/search?q=Xpe... The URL field has google.com/ig/setp?m_3_u... focus, and can be 7 Search for “goo” freely typed within. Autocomplete If this mode is Any free-entry field achieved by editing an (not just on this frame) Summary existing URL, the field will offer autocomplete The site name, TLD will be pre-populated values in a modified and feed icon whe with the existing select list below the needed, are display values. input field. again to clarify whi URL is being show Only a few items should be shown, to Default avoid scrolling. This screen (with no information populated) The last item should is the default entry always offer the ability point for any user 11:14P Cancel to perform an internet typing a new URL, any search (with the last time one has not been service used on the Modal visited yet. home page) for the This widget is mod value currently No other part of th entered. The 7 page can beWell, execution. accesskey can be accessed while thi used to perform this, item is opened. Select 11:14P Cancel without scrolling to the item. When scrolled down to an autocomplete function, the “Select” option/softkey will both Go 11:14P Cancel select the item and move to the next field of the URL. ©2008 Little Springs Design » Proprietary & Confidential 19

usercenteredexecution

Your design isn’t doneUX teams can help:• Don’t walk away.• Set goals for everyone.• Make object-oriented designs.• Practice polymorphism. 21

Don’t walk awayIt’s your project, sostick with it.• Answer questions.• Check on progress.• Solve problems.You are part of theimplementation team. 22

Set goals for everyoneTurn priciples intometrics. Then measurethem.Push for these tobe the project levelmeasure of success. 23

DMC eReader User Experience Sitemap – Modular Reuse of Comp This is a map of the total expected pages, states or key functions. Process is not depicted. Many subsid- iary states are not depicted. See the legend for ele- ments within each page.Make object-oriented designs This is a map of the total expected pages, states or key functions. Process is not depicted. Many subsid- iary states are not depicted. See the legend for ele- ments within each page. K1 Groups J2 Friends • My Groups • Multi-select version • My Friends • • Friend’s Groups for use when chang- • • My Friend’s Friends • • Patterns are objects. • • • Friend List Groups ing context mode • • • Same • • • Related Groups • • • • (m620 request) • • • Different • • • • • Group Members K1 Groups J2 Friends • My Groups • Multi-select version • My Friends • • Friend’s Groups for use when chang- • • My Friend’s Friends • • • Friend List Groups • • • ing context mode • • Same • • • • • • K2 Group Details • Related Groups (m620 request) • • • • • • J3 Friend Detai • Different • Group Members See A1 See A1Objects are re-usable K2 Group Details See A1 J3 Friend Detai See A1components, whetherin design or code. Legend of Modular Widgets m101 Notification Listing • • m220 Group Preview Pod • • • • m201 Group Listing • • • • m102 Notification List Long Legend of Modular Widgets • • m320 Friend Preview Pod m103 Read Notification m101 Notification Listing • m220 Group Preview Pod • • m301 Friend Listing • • • • • • • m201 Group Listing • • m 105 Create Annotation • • m102 Notification List Long m410 Profile Details • • m110 Notification Strip m320 Friend Preview Pod m103 Read Notification m501 Content Listing • • m301 Friend Listing • • • • m120 Annotations Bar • • • • • • • • • • • m 105 Create Annotation • m502 Content Large • m610 Search, Filter, Sort m410 Profile Details m110 Notification Strip m620 Context Mode • m520 Content Preview Pod m501 Content Listing 24 • • • • m590 Reader • • m120 Annotations Bar • • • • • • m660 Tags & Keywords • • m502 Content Large •

Practice polymorphism Vocel Pill Phone v.2 Detailed Interaction Design Document May 13, 2008 Version 0501308B Receiving & Viewing Alerts > vii Completion & RefillsB14 Done taking medications for now Variations of objectsProgress indicatorWhether multi-step or not,a completion message is B14a As loaded Select for refill Preselected if indicated. Suppressed if unavailable. B14b Med ordering details Zolotran E are still the sameshown here. Done! Dr. Revels All medications taken Med information 816-766-9801 {Call Number}Refill status The doctor and pharmacyChange to “Refill -------------------------------- name and number are 1 refill leftneeded!” if pharmacy displayed. CVS Pharmacy Johns... Next medication alert: object.pushes notice, or user 913-661-0500 {Call Number}has selected any inprevious screens. 12:00pm Details B15 Ordering informtion $10.00 (copay) qty. 60 -------------------------------- Refills remaining, the price Medication details E2 and the quantity of a refillPre-check... Order refills (if known) are displayed....any items noted by theuser on previous screens. Zolotran EPharmacy alerts Details B14b B14c Details – Order ready or pending Tell everyone, soIf they think user is out, a -----------------------------------------graphic appears. Amotab ZE Softkey (Options menu): Amotab ZE Home A1 “No,” not “zero” Dr. RevelsPending or ready Details B14c My Medications C4/C1 If the number of refills is zero, print it as “no” 816-766-9801 {Call Number}If already ordered, do not My Pharmacies A18/A19 variations are built asallow selection, replace Options Exit My Pill Boxes C9/C7 no refills leftwith info icon. Pill Book E1 Settings D1 Status {Change state} ----------------------------------------- Exit {Exit} If not available, reads Order ready Picked up {close frame}Non-orderable items CVS Pharmacy Johns...Items without a pharmacy • Frizilap “Order processing” and you designed them. the “picked up” button is 913-661-0500 {Call Number}relationship are displayed,but do not have a Details B14b Audio: suppressed. $10.00 (copay) qty. 60checkbox to order online. Onload: Medication details E2 SuccessButton conditional Place ordersThe order button is “All medications“grayed out” and cannot have beenbe selected until at least taken.” Opening Closingone item is checked. Scroll up so all info in the opened Scrolling out of the area will close If indicated: layer is on the screen. If overflow the drawer. The just-closed item “See screen to is required, fit the top of the title should stay in place, and all order your opened info the top of the screen. other items move up to collapse. refills.” 25 ©2008 Little Springs Design » Proprietary & Confidential 18

Design principles are project principles• Develop good objectives• Design holistically• Get everyone to buy into it• Own your design 26

Steven Hoober shoobe01@gmail.com 816 210 0455 @shoobe01 shoobe01 on: www.donttouchme.com www.4ourth.commobile design

Avoiding the Heuristic Solution: Creating Inspiring Mobile Design with UX Principles

by shoobe01

Accessibility

Categories

Upload Details

Usage Rights

1 Embed 75

Statistics

Avoiding the Heuristic Solution: Creating Inspiring Mobile Design with UX Principles Presentation Transcript