avoiding the heuristic solution: creating inspiring mobile design with ux principles
Post on 13-May-2015
1.082 Views
Preview:
DESCRIPTION
TRANSCRIPT
Steven Hoober & Eric Berkman
MobileInterfaces
Designing
Steven Hoober
Float Mobile Learning Symposium
11 June 2011
mobile design
designingmobileinterfaces
Steven Hoober & Eric Berkman
MobileInterfaces
Designing
2
Steven Hoober & Eric Berkman
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.
Steven Hoober & Eric Berkman
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.
Steven Hoober & Eric Berkman
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.
Steven Hoober & Eric Berkman
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.
Steven Hoober & Eric Berkman
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.
Steven Hoober & Eric Berkman
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.
Steven Hoober & Eric Berkman
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.
Steven Hoober & Eric Berkman
MobileInterfaces
Designing
mobile design
avoidingthe heuristicsolution
Steven Hoober
Float Mobile Learning Symposium
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.
Steven Hoober & Eric Berkman
MobileInterfaces
Designing
mobile design
avoidingthe heuristicsolution
Steven Hoober
Float Mobile Learning Symposium
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.
Steven Hoober & Eric Berkman
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.
Steven Hoober & Eric Berkman
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.
Steven Hoober & Eric Berkman
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.
Steven Hoober & Eric Berkman
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.
Steven Hoober & Eric Berkman
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.
Steven Hoober & Eric Berkman
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.
Steven Hoober & Eric Berkman
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.
Steven Hoober & Eric Berkman
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.
Steven Hoober & Eric Berkman
MobileInterfaces
Designing
19
Embrace your constraints
...
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.
Embrace your constraints
Steven Hoober & Eric Berkman
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.
Steven Hoober & Eric Berkman
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.
Steven Hoober & Eric Berkman
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.
Steven Hoober & Eric Berkman
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.
Steven Hoober & Eric Berkman
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:
Steven Hoober & Eric Berkman
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.
Steven Hoober & Eric Berkman
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.
Steven Hoober & Eric Berkman
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
•
Steven Hoober & Eric Berkman
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.
Steven Hoober & Eric Berkman
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.
Steven Hoober & Eric Berkman
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.
Steven Hoober & Eric Berkman
MobileInterfaces
Designing
Steven Hoober
shoobe01@gmail.com
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.
top related