Download - 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

I am here basically because I have been spending the last 9 months working a second full time job collecting around 60 patterns for mobiles.

When it comes out, it’ll be great. Buy one. Look for the book with the colorful parrot on the cover. It’ll be hard to miss.

Actually, it’s a lovebird. No, I don’t know why. And it’s been years since authors got to choose their animal.

Also, every bit of the patterns, and some other helpful informa-tion including over 70 links to platform-specific UI standards, templates and stencils are out there. Add to it if you want.

I want to define, briefly, what a pattern means to me.


MobileInterfaces

Designing

3

Patterns are universal

These are just some of the devices I actually own.

Here’s many of them if you want to rifle through.

A common question, right after “why a lovebird,” is what phone I carry.

Doesn’t matter. Right now, a Droid 2 Global. But in the last 3 years I have carried -- full time, porting my number and everything -- 7 dif-ferent devices with 4 different OSs. Part-time, a lot more than that.

I have TEN browsers on my handset now. I have a contract to do some browser design.

You need to keep your hand in the market, and not just stick to your favorite device. Because design is not about one device, or brows-er, and even if /your design/ is, you are missing out on other good ideas.


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

Patterns are very non-specifc. Even talking about specific examples sometimes bothers me; just like when showing off your design everyone gets hung up in details.

I use illustrations. The top is the complete set of illlustrations to describe the Scroll pattern. The bottom is the same for Remote Gestures.

Only when needed did I make an illustration including a real web page. And even that is drawn, to only focus on the dis-ussion points at hand.

On the bottom, notice nothing is assumed; arrows indicate (generally) axes of movement, etc.


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

Part of the analysis of the patterns is grouping, and not just by immediate relations, but by higher level categories, and related tasks in other categories.

Building a taxonomy of patterns helps understand them (it certainly helped me) and is designed to help you find them and use them correctly.

They also cross-link a lot.


MobileInterfaces

Designing

6

Patterns are explained

I’ve seen a number of new “pattern libraries” that simply take screenshots and post them by category.

These are fine, as galleries of design. But they are not pat-tern libraries.

You need to know what the pattern is, and why it is, so you can do the right thing, explore the edges, and avoid the wrong things.

There are nice simple pictures, bullets to follow, but also a LOT of other words. All of which matter.


MobileInterfaces

Designing

7

Patterns are best practices

Not necessarily common practice.

Noce necessarily popular, trendy.

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

Patterns are not just collections of popular themes in the world of design, or what I have taken to calling “common practice.”

Fashion and interior design work differently, but UX is ev-idence-based. Just because it’s popular doesn’t make it right, and if there is clear evidence (from research, gener-ally) that this is wrong, I say so.

Many patterns are improperly implemented in the majory of devices. Now, I didn’t buck the trend completely; this exam-ple is simply that you need to hide pointlessly repeating ava-tar stand-ins. But that’s an easy fix.


MobileInterfaces

Designing

8

Patterns are misunderstood

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

Obviously, this is not a key attribute of patterns that we want to have. But it’s true. Patterns are misunderstood, and therefore mis-used.• Design solutions are Reactionary and solve for point problems,

instead of considering the entire system.• Even when larger solutions are found, they are Single view or

only for one screen, one device or one platform.• The first satisfactory solution is accepted, and rapidly be-

comes entrenched. There should always be incentives to find the best possible solution.

• There is likewise no incentive to find unique, interesting or dif-ferentiable solutions. The Rote solution, or the published pat-tern, is used without modification (another reason I don’t like to give examples).

• Patterns that do consider solutions generally sometimes lead to excessively High-level design, with no reasoning (or an incom-prehensible one). VizDs and developers won’t understand what part is important so will modify it and miss the point.

I tend to call all of this the “heuristic solution.” It’s not /bad/ per se, in fact it checks all the boxes, but it’s not inspired, and is nev-er truly satisfactory.

It might even pass CSAT measures, and show improvement. But it levels off and you never get up to that really top-tier, no matter what you do.


MobileInterfaces

Designing

mobile design

avoidingthe heuristicsolution

Steven Hoober


11 June 2011

Speaking of CSAT, this is not your fault. It’s very, very institu-tionalized.

Just a few weeks ago I was in a presentation by [a top CSAT vendor]. The company had bought the extended anal-ysis, and had 120 pages of suggestions on how to fix the site. Which addressed each failure point as an individual problem, with an individual solution, and a best case from one industry leader or another.

Then an executive got up and said that this gives us direc-tion and (and I wrote this down) “now there’s no need to think, explore and do user research to figure out which of these options is right.“

And since it’s exective direction, that’s what’s happening.


MobileInterfaces

Designing

mobile design

avoidingthe heuristicsolution

Steven Hoober


11 June 2011

I originally had 20 slides of this stuff. but I realized I was go-ing too negative. If anyone disagrees with the premise, raise your hand, but I am otherwise just going to move on, to the solutions.


MobileInterfaces

Designing

11

Be a conscious designer

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

The key, to me, is that yoy be aware of why you are design-ing.

Patterns and heuristics (as well as formal uses of these methods, like heuristic evaluations) have value not just in the immediate use of them (e.g. does it pass the heuristic or not?) but in making the designer aware of the components, and the reasons they exist.

Patterns are communicated in a consistent manner, allowing you to understand them, pick the right one form several op-tions, combine related ones, and add your own.

This is also important later. When you need to revise, or when you are building the product.


MobileInterfaces

Designing

12

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

Design is not art.

I have an art degree, so I know this.

Design has goals, that pay the bills when they succeed. You need to work with others to find these.

Design is not just drawing the right line, or box, or button, but building an ecosystem to support that design, so you know what the right line, or box or button is.

I wrote a whole book-length treatise on some of my favorite design practices. Dozens of people use it now.

And over the years I have changed my mind enough, it’s out of date. These are the key objectives I work to now.


MobileInterfaces

Designing

13

Understand the problem

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

Create objectives, and stick to them.

Before even starting to design anything, ask questions.

Perform user interviews, ask the business what they want, and gather any other information about current and expected usage you can.

Develop measurable objectives, stick to them during design, and be sure to measure after it launches. Without feedback, you cannot learn.

Try not to draw. This is hard to do, for me at least, but sketching con-cepts early will tend to lock you into that thinking. You might be on the wrong track. Keep away from this, and seek to understand the prob-lem space first.

If you are wondering, this is a project I did for Hallmark, where one of the first things we did was have them to the office for two full days of interviews and data gathering, kicked off with a visit to a store, to really understand their current processes.


MobileInterfaces

Designing

14

Leverage your team

Studio methods to foster competition, creation of new ideas.

Manage them, to add challenge to each step.

Studio Methods

The best ideas come from individuals, or small teams, work-ing independently. To get the most good, unique ideas, task those individuals or small teams to develop quick, indepen-dent designs and regularly share and regroup, iterating to a final solution.


MobileInterfaces

Designing

15

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.

...So, everyone comes back with ideas and you review them.

Then you evaluate not complete designs, but each compo-nent. How does it fit into the overall concept... etc.

Assign components that are similar to other designs, so they are combined in interesting ways, and people get outside their comfort zones.

When working with design concepts, whether evaluating competitor sites, or with the design teams above -- remem-ber to approach the design from a modular point of view, and evaluate the suitability of each element to the overall goals, and process. Do not just accept (or reject) whole de-signs.


MobileInterfaces

Designing

16

No idea is worthy

Even with one idea, whether just trying to determine if the idea is good yourself, doing an eval or whatever, do not fall in love with the idea so much that you:1) Look at it as a whole2) Miss the flaws.

Deconstruct it, to understand what it is, what it is made of (patterns, components!) and then how it might NOT work.

This is a challenge again, but who said it would be easy.


MobileInterfaces

Designing

17

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.

Your competitors and forefathers do not have the magic formula.

Some just have better cultures of design. / Some just lucked into it.

When required to look at the competition, or the great previous-generation ideas, recognize that business models, customers, and goals are not the same over here, or these days.

Inspiration is fine, but use good process to find the right answer.

How many of you carry a Walkman phone? Of course, none. But for /years/ after the iPod came out, every pundit was sure Sony would come and crush the market.

Didn’t happen, because Sony (apparently) builds good products, not good ecosystems. It seems no one turned their tape player era devices into digital era music.


MobileInterfaces

Designing

18

Embrace your constraints

Brainstorming doesn’t work.

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

Brainstorming is for suckers: Doesn’t work. Boosters will say it does, and the counter studies aren’t doing it right. To which I say: no one does it right, such that I never want to call it “brainstorming.”• There are bad ideas• There are ideas that you shouldn’t even consider, as they

are out of scope.

Instead, I like to set preconditions and say Embrace your Constraints.

Whether in concepting exercises, workshops or as individu-al designers, only work within the domain, set preconditions and remind everyone that the goals and objectives define the desired end state.


MobileInterfaces

Designing

19


...

A common complaint about patterns is that they are too con-straining, and stifle creativity.

I never see this happen, except by those same designers who voice those complaints, when they take some great idea they see, and implement it without changes.

I am all for borrowing good ideas, and being inspired. But using another pattern without knowledge is dumb.



MobileInterfaces

Designing

20

Collaborate

Don’t just work together, collaborate.

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

Collaborate

I have a 10,000 character essay on this, which you can find on my blog. So this is necessarily a summary. If collaboration eludes you, or like I was, you get blamed for being not collaborative, check it out.

Design teams will, ideally, have a variety of individual skillsets, or at least multiple individuals, each with their own background and opinions. Use the individual skills of the team members to find solutions and explore concepts.

Some other key attributes of good collaboration have been outlined above. Be a conscious designer, so you can discuss your ideas, or de-fend them. And not because you like it; defend only what you know to be true from experience.

Collaboration can be very informal. When you get into it, you will start asking advice for even simple behaviors and problems. This sort of activ-ity is why some people like open plan offices. Just turn around and ask the team.


MobileInterfaces

Designing

21

Seek outside input

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

Unless you go looking.

Beyond collaboration, get input from people outside the de-sign team. This is expecially good in big places that have been around for decades, or centuries.

Not everyone has all knowledge of the arbitrarily complex sys-tems we work on all too much, so cross-functional collabora-tion can have great value in confirming concepts, getting input on the viability of concepts, and discovering tangential solu-tions already considered or in progress somewhere else.

This is not just useful for the gathering of information, which you should do up front, but to confirm your design works.

Often, those same people can add more value after they see what you mean. “Oh, you are using that information. Have you talked to these guys about their project in the stores?” etc.


MobileInterfaces

Designing

22

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.

So, now you have a great design settled on, and bought into, and not just by the business owner, but by everyone in the whole place, hopefully.

And now the gulf of execution. No, not Don Norman’s gap between stimulus and understanding, but the difference be-tween what you give design and what comes out of the de-velopment team.

And if I haven’t said it already, apologies to anyone who de-velops their own code, already has a terrific relationship with their developers, or believes your process solves all.

I’ve been there and say: Some day it won’t.


MobileInterfaces

Designing

23

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

In this example, I had a perfectly good relationship with the implementation team (and still work with them years later) and the first release simply didn’t follow specification. Like this, where the history is a dropdown, but as implemented it went full-screen.


MobileInterfaces

Designing

usercenteredexecution

What we need to solve this are principles of what we can call “user-centric execution.”

This is not yet a process, or series of fixed procedures, or a manifesto or anythinf. It is possible it may never be.

But like the principles, heuristics and patterns of design, the idea should be followed and there are best practices.

First, to principles:


MobileInterfaces

Designing

25

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

26

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.

Never walk awayAlways stick with the project through development, at least making yourself available for questions, rework, changes and testing.

Ideally, become integrated into the team, and attend daily meetings, test planning, and so on.

Plan on this from the start so your schedule and budget accounts for it.

You may not /actually/ be part of the implementation team, but try to become one. Or at least act like it. Go to meetings, etc.

At the very least, put your name a contact information on the spec. It’ll work. You’ll get calls from random developers in Bangalore at 2 am, and be able to give them good information to make sure the project keeps going.

After you get more sleep, you’ll be happy this happened.


MobileInterfaces

Designing

27

Set goals for everyone

Turn priciples into metrics. Then measure them.

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

Assure goals are for everyone

The business and user goals you should have developed at the beginning of the project must be translated into actual, measurable metrics.

Make sure that the whole organization has these goals as their top drivers, instead of cost savings, efficiency of devel-opers, or other internal measures.

While “we’re building for the end user” may not resonate, remind everyone they work for the larger company, not just their department. You may also have to push to include the analytical tools to make sure they get built, not forgotten.

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

28

Make object-oriented designs

Patterns are objects.

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

Use object-oriented principles when discussing and delivering --

The efficiencies and enforcement of consistency that compo-nentized, object-oriented practice emphasizes in design are just as valuable to software developers and development pro-cess.

Sometimes this is just called “modular re-use,” or other things, as “object oriented” is a larger set of principles (it all originated in development) and might confuse development. But I like the sound of it.

The core concept is the same: Instead of designing every de-tail for every state, and building by state or building hundreds of items to bolt together, a few dozen modules are built and re-used over and over in common templates.


MobileInterfaces

Designing

29

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

Learn big words.

Even if you don’t annoy others with them, there are some great concepts out there.

This is a subset of the previous one, but is harder for some organizations and designers to grasp, so has been broken out.

If there are several variations of an on-screen module you design, make sure you express them as variations of each other so these are clear. This is a polymorphic item.

Of course, if there is only one variant (omnimorphism) then that should be explicitly stated as well. Always keep in mind efficiency and re-use.


MobileInterfaces

Designing

30

Design principles are project principles

• Develop good objectives

• Design holistically• Get everyone to buy

into it• Own your design

What makes this work for me is that it’s all the same thing. I’ll admit I came to them from different approaches, but I’ve come to be aware that good principles of design are the same as the principles behind communicating design to im-plementation teams.

• Develop good design objectives for the project or product; no one elese’s will do.

• Design holistically; systems, not pages, not widgets, not buttons.

• Stick to the principles and get everyone to buy into it.• Own your design, all the way through, so you want to im-

prove it when the next release comes out.


MobileInterfaces

Designing

Steven Hoober

[email protected]

816 210 0455

@shoobe01

shoobe01 on:

www.donttouchme.comwww.4ourth.com

mobile design

Some of this, a bunch of design tools, and all the patterns are upon this website at “fourth mobile” (with a number 4).

That does include the full content of the book, so you don’t have to wait to start getting all that information.

It’s a wiki, so please add your own comments. It’s locked down, due to evil commie spam bots, but ask me and I’ll get you credentials for it.

I can take questions on other stuff. Like, if you are wonder-ing about a pattern, I can pop open the website, and we can talk about any of them.

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

Top Related