avoiding the heuristic solution: creating inspiring mobile design with ux principles

Steven Hoober & Eric Berkman

MobileInterfaces

Designing

Steven Hoober

Float Mobile Learning Symposium

11 June 2011

mobile design

designingmobileinterfaces


MobileInterfaces

Designing

2


MobileInterfaces

Designing

www.4ourth.com/wiki


MobileInterfaces

Designing

3

Patterns are universal


MobileInterfaces

Designing

4

Patterns are generalized

Video services...

Netflix Hulu Plus Am

azon YouTube Slacker Media

Video services...

Netflix Hulu Plus Am

azon YouTube Slacker Media


MobileInterfaces

Designing

5

Patterns are organized

abc

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

3:52PM3G3G

Input Method Indicator

Directional Entry

Focus & Cursors

Clear Entry

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

Sign on to continue

TF43

Password 123

Continue

Exit

3:52PM3G 3:52PM3G

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

Sign on to continue

TF43

Password

Continue

Exit

3:52PM3G 3:52PM3G 123

OK

Just passed through Asheville, you still on?

Stuck in meetings, where are you stopping tonight?

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


MobileInterfaces

Designing

6

Patterns are explained


MobileInterfaces

Designing

7

Patterns are best practices

Not necessarily common practice.

Not necessarily popular, trendy or fashionable.

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


MobileInterfaces

Designing

8

Patterns are misunderstood

• Reactionary• Single view• First solutions• Rote solutions• Too high level


MobileInterfaces

Designing

mobile design

avoidingthe heuristicsolution

Steven Hoober

Float Mobile Learning Symposium

11 June 2011


MobileInterfaces

Designing

10

Be a conscious designer

Know why you draw• Define• Codify• Compare• Choose• Combine• Expand


MobileInterfaces

Designing

11

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


MobileInterfaces

Designing

12

Understand the problem

Put the markers down. First time, every time, ask the customer, their workers, the users.

Create objectives, and stick to them.


MobileInterfaces

Designing

13

Leverage your team

Studio methods to foster competition, creation of new ideas.

Manage them, to add challenge to each step.


MobileInterfaces

Designing

14

No idea is worthy

Don’t do a little dance for your great idea. I promise it has flaws.

Consider components individually, and look for flaws.


MobileInterfaces

Designing

15

There are no design wizards

Inspiration is fine. Copying is pointless.

Follow your process to find the right answer for your business, and the current world.


MobileInterfaces

Designing

16

Embrace your constraints

Brainstorming doesn’t work.

Working within your constraints adds focus to any design session and fosters ideas.


MobileInterfaces

Designing

17

Collaborate

Don’t just work together, collaborate.

Use everyone’s skill, and knowledge, to find the best solution.


MobileInterfaces

Designing

18

Seek outside input

Systems, process and business-intelligence knowledge is held by specialists you won’t see.

Unless you go looking.


MobileInterfaces

Designing

19

3©2008 Little Springs Design » Proprietary & Confidential

Bitstream ThunderHawk 3.0 Detailed Design Document November 6, 2008 Version 110608

A Home > ii URL EntryA2c URL entry

(widget)

Cancel11:14P

goog|google.com/newsgoogle.com/docsgoogle.com/search?q=Xpe...google.com/ig/setp?m_3_u...

Search for “goo”7

AutocompleteAny free-entry field(not just on this frame)will offer autocompletevalues in a modifiedselect list below theinput field.

Only a few itemsshould be shown, toavoid scrolling.

The last item shouldalways offer the abilityto perform an internetsearch (with the lastservice used on thehome page) for thevalue currentlyentered. The 7accesskey can beused to perform this,without scrolling to theitem.

When scrolled downto an autocompletefunction, the “Select”option/softkey will bothselect the item andmove to the next fieldof the URL.

DefaultThis screen (with noinformation populated)is the default entrypoint for any usertyping a new URL, anytime one has not beenvisited yet.

InputThe URL field hasfocus, and can befreely typed within.

If this mode isachieved by editing anexisting URL, the fieldwill be pre-populatedwith the existingvalues.

Schlock Mercenary, by Howar...

A2f URLoverscrollentry(widget)

http://www.schlockmercenar

Cancel11:14P

Schlock Mercenary, by Howard...

* Mark as favorite # Add to feeds

OverscrollWhen the user is atthe top of thebrowser, scrolling upseveral times, or for1/2 secondcontinuously, ortapping the URL bartwice, will open thismode.

URLThe complete URL forthe page is displayedin a text field. Selectingthis will move to editmode.

A1e

Reveal optionsTwo top options forpages, favorites andfeed saving, andshown here as links,and with theiraccesskey labels,when available.

ModalThis widget is modal.No other part of thepage can beaccessed while thisitem is opened.

SummaryThe site name, TLDand feed icon whenneeded, are displayedagain to clarify whichURL is being shown.

Select Cancel11:14P

Go Cancel11:14P

And now your design is perfect

What could possibly go wrong?

Well, execution.


MobileInterfaces

Designing

usercenteredexecution


MobileInterfaces

Designing

21

Your design isn’t done

UX teams can help:• Don’t walk away.• Set goals for everyone.• Make object-oriented designs.• Practice polymorphism.


MobileInterfaces

Designing

22

Don’t walk away

It’s your project, so stick with it.• Answer questions.• Check on progress.• Solve problems.

You are part of the implementation team.


MobileInterfaces

Designing

23

Set goals for everyone

Turn priciples into metrics. Then measure them.

Push for these to be the project level measure of success.

DMC eReader User Experience

DMC_Sitemap_14dec2009a LastModified:14December200910:16Page1

Sitemap – Modular Reuse of Components

A1Dashboard• MyDashboard• MyDashboardtoOthers• Friend’sDashboard• FriendListDashboard• GroupDashboard

K1Groups• MyGroups• Friend’sGroups• FriendListGroups• RelatedGroups

J2Friends• MyFriends• MyFriend’sFriends• Same• Different

• GroupMembers

J3FriendDetailsSee A1

K2GroupDetailsSee A1

F5Preview(webonly)

E1Read/Preview(Desktop/Device)

G1Library• MyLibrary• Friend’sLibrary• FriendListLibrary• GroupLibrary

G5GiftThisContent

G6Acquire/Re-acquire

G7RecommendtoFriend

D1Notebook• MyNotebook• FriendsAvailableNotebook• FriendListNotebook• PublicNotebook• GroupPublicNotebook• IndividualContentNotebook

D4ViewAnnotationDetails

D5WriteAnnotation

D6Conversations(Forum)• MyConversations• FriendConversations• FriendListConversations• GroupConversations• AllPublicConversations• IndividualContentConversa-tions

m620allowspagestoappearinmultiplecon-textualmodes,aslistedbelowthetitleforeachapplicablepage.

A2AnonymousLandingPage

Thisisamapofthetotalexpectedpages,statesorkeyfunctions.Processisnotdepicted.Manysubsid-iarystatesarenotdepicted.Seethelegendforele-mentswithineachpage.

B2AnonymousSignOn

B2bIdentifiedSignOn

B3CreateAcccount

• • • • • •

•••••••••••

•••••••••••

• •

••••

••••••••

• • • • • •

m901Masthead/Navm902MinimizedNav

m610Search,Filter,Sort

m660Tags&Keywords

m620ContextMode

m101NotificationListing • • • • • •

m120AnnotationsBar ••••••

m102NotificationListLong

m103ReadNotification

•

•

m105CreateAnnotation

m110NotificationStrip

Customitems

LegendofModularWidgets

••••

m220GroupPreviewPod

m320FriendPreviewPodm301FriendListing

m201GroupListing

m501ContentListing

m502ContentLarge

m590Readerm520ContentPreviewPod

m410ProfileDetails• • • • • •

•

• • • • •

• • • • •

• • • • • • • •

••••

F1Catalog• AllPublicContent(Catalog)

• • • • • • • •

••••

• • • • • • • •

••••

• • • • • • • •

••••

B4Settings&Options

B3aModifyAccount

G4ContentDetails

• • • •

••••

Lightbluedottedlinesdenotepagesthatsharemostorallelements,andshouldbeconsid-eredasingledesignanddevelopmenteffort.

• Multi-selectversionforusewhenchang-ingcontextmode(m620request)

F7PurchaseorGift

•

DMC eReader User Experience

DMC_Sitemap_14dec2009a LastModified:14December200910:16Page1

Sitemap – Modular Reuse of Components

A1Dashboard• MyDashboard• MyDashboardtoOthers• Friend’sDashboard• FriendListDashboard• GroupDashboard

K1Groups• MyGroups• Friend’sGroups• FriendListGroups• RelatedGroups

J2Friends• MyFriends• MyFriend’sFriends• Same• Different

• GroupMembers

J3FriendDetailsSee A1

K2GroupDetailsSee A1

F5Preview(webonly)

E1Read/Preview(Desktop/Device)

G1Library• MyLibrary• Friend’sLibrary• FriendListLibrary• GroupLibrary

G5GiftThisContent

G6Acquire/Re-acquire

G7RecommendtoFriend

D1Notebook• MyNotebook• FriendsAvailableNotebook• FriendListNotebook• PublicNotebook• GroupPublicNotebook• IndividualContentNotebook

D4ViewAnnotationDetails

D5WriteAnnotation

D6Conversations(Forum)• MyConversations• FriendConversations• FriendListConversations• GroupConversations• AllPublicConversations• IndividualContentConversa-tions

m620allowspagestoappearinmultiplecon-textualmodes,aslistedbelowthetitleforeachapplicablepage.

A2AnonymousLandingPage

Thisisamapofthetotalexpectedpages,statesorkeyfunctions.Processisnotdepicted.Manysubsid-iarystatesarenotdepicted.Seethelegendforele-mentswithineachpage.

B2AnonymousSignOn

B2bIdentifiedSignOn

B3CreateAcccount

• • • • • •

•••••••••••

•••••••••••

• •

••••

••••••••

• • • • • •

m901Masthead/Navm902MinimizedNav

m610Search,Filter,Sort

m660Tags&Keywords

m620ContextMode

m101NotificationListing • • • • • •

m120AnnotationsBar ••••••

m102NotificationListLong

m103ReadNotification

•

•

m105CreateAnnotation

m110NotificationStrip

Customitems

LegendofModularWidgets

••••

m220GroupPreviewPod

m320FriendPreviewPodm301FriendListing

m201GroupListing

m501ContentListing

m502ContentLarge

m590Readerm520ContentPreviewPod

m410ProfileDetails• • • • • •

•

• • • • •

• • • • •

• • • • • • • •

••••

F1Catalog• AllPublicContent(Catalog)

• • • • • • • •

••••

• • • • • • • •

••••

• • • • • • • •

••••

B4Settings&Options

B3aModifyAccount

G4ContentDetails

• • • •

••••

Lightbluedottedlinesdenotepagesthatsharemostorallelements,andshouldbeconsid-eredasingledesignanddevelopmenteffort.

• Multi-selectversionforusewhenchang-ingcontextmode(m620request)

F7PurchaseorGift

•


MobileInterfaces

Designing

24

Make object-oriented designs

Patterns are objects.

Objects are re-usable components, whether in design or code.


MobileInterfaces

Designing

25

Practice polymorphism

Variations of objects are still the same object.

Tell everyone, so variations are built as you designed them.

©2008 Little Springs Design » Proprietary & Confidential

Vocel Pill Phone v.2 Detailed Interaction Design Document May 13, 2008 Version 0501308

B Receiving & Viewing Alerts > vii Completion & RefillsB14 Done taking medications for now

All medications taken--------------------------------Next medication alert:

12:00pm Details--------------------------------Order refills

Done!

Place orders

ZolotranDetails

-----------------------------------------

E

Options Exit

• FrizilapDetails

Amotab ZEDetails

-----------------------------------------

Amotab ZEDr. Revels

816-766-9801no refills left

Order readyCVS Pharmacy Johns...

913-661-0500$10.00 (copay) qty. 60

Medication details

ZolotranDr. Revels

816-766-98011 refill left

CVS Pharmacy Johns... 913-661-0500$10.00 (copay) qty. 60

Medication details

E

Picked up

Audio:Onload:Success

“All medicationshave beentaken.”

If indicated:“See screen toorder yourrefills.”

B14a As loaded B14b Med ordering details

B14c Details – Order ready or pendingB14b

B14c

B14b

{Call Number}

E2

{Call Number}

{Call Number}

E2

{Call Number}

{Change state}{close frame}

Select for refillPreselected if indicated.Suppressed if unavailable.

Med informationThe doctor and pharmacyname and number aredisplayed.

Ordering informtionRefills remaining, the priceand the quantity of a refill(if known) are displayed.

StatusIf not available, reads“Order processing” andthe “picked up” button issuppressed.

StatusIf not available, reads“Order processing” andthe “picked up” button issuppressed.

Progress indicatorWhether multi-step or not,a completion message isshown here.

Refill statusChange to “Refillneeded!” if pharmacypushes notice, or userhas selected any inprevious screens.

B15

Pre-check......any items noted by theuser on previous screens.

Pharmacy alertsIf they think user is out, agraphic appears.

Pending or readyIf already ordered, do notallow selection, replacewith info icon.

Non-orderable itemsItems without a pharmacyrelationship are displayed,but do not have acheckbox to order online.

Button conditionalThe order button is“grayed out” and cannotbe selected until at leastone item is checked.

HomeMy MedicationsMy PharmaciesMy Pill BoxesPill BookSettingsExit

Softkey (Options menu):A1C4/C1A18/A19C9/C7E1D1{Exit}

“No,” not “zero”If the number of refills iszero, print it as “no”

OpeningScroll up so all info in the openedlayer is on the screen. If overflowis required, fit the top of theopened info the top of the screen.

ClosingScrolling out of the area will closethe drawer. The just-closed itemtitle should stay in place, and allother items move up to collapse.

18


MobileInterfaces

Designing

26

Design principles are project principles

• Develop good objectives

• Design holistically• Get everyone to buy

into it• Own your design


MobileInterfaces

Designing

Steven Hoober

[email protected]

816 210 0455

@shoobe01

shoobe01 on:

www.donttouchme.comwww.4ourth.com

mobile design

avoiding the heuristic solution: creating inspiring mobile design with ux principles

Technology