* This is the version with my notes below the text. Only use it if you want to see descriptions. Else, another is under a similar name, as projected *
Steven’s forthcoming book Mobile Design Patterns (with Eric Berkman) will serve as a point of departure for a conversation on the topic of using the techniques of collaboration, team and workshop activities, and iterative design to develop inspired, delightful designs that can differentiate your product in the market, while still meeting proven design principles.
Presented 10 June 2011 at Float Mobile Learning Symposium, Bradley University, Peoria, Illinois.
Speaker notes were carefully crafted, but generally bear little relationship to what I said. While they communicate the basic point, they are in no way a transcript of my comments in person.
Cloud Revolution: Exploring the New Wave of Serverless Spatial Data
Avoiding the Heuristic Solution: Creating Inspiring Mobile Design with UX Principles
1. Steven Hoober
designing
Float Mobile Learning Symposium
11 June 2011
mobile
interfaces
mobile design
g
obile
2. Designing
Mobile
Interfaces www.4ourth.com/wiki
Steven Hoober
& Eric Berkman
2
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.
g
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
obile
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.
3. Patterns are universal
3
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
g carry.
Doesn’t matter. Right now, a Droid 2 Global. But in the last 3 years
obile
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.
4. 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 very non-specifc. Even talking about specific
examples sometimes bothers me; just like when showing off
your design everyone gets hung up in details.
g I use illustrations. The top is the complete set of illlustrations
to describe the Scroll pattern. The bottom is the same for
Remote Gestures.
obile
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.
5. 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
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.
g Building a taxonomy of patterns helps understand them (it
certainly helped me) and is designed to help you find them
and use them correctly.
obile
They also cross-link a lot.
6. Patterns are explained
6
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-
g 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
obile
wrong things.
There are nice simple pictures, bullets to follow, but also a
LOT of other words. All of which matter.
7. Patterns are best practices
Not necessarily
common practice. Contacts 21-25 of 125
Noce necessarily
Jane Adams
816 210 0123 (M)
Jamie Adamly
popular, trendy. 913 111 0234 (H)
Paula Adamowlsky
785 985 0345 (M)
Mike Adamson
314 987 0456 (O)
Mike Adler
210 618 0567
7
Patterns are not just collections of popular themes in the
world of design, or what I have taken to calling “common
practice.”
g 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.
obile
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.
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. 8
• 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-
g
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
obile
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.
9. Steven Hoober
avoiding
Float Mobile Learning Symposium
11 June 2011
the heuristic
solution
mobile design
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
g
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
obile
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.
10. Steven Hoober
avoiding
Float Mobile Learning Symposium
11 June 2011
the heuristic
solution
mobile design
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.
g
obile
11. Be a conscious designer
Know why you draw
• Define
• Codify
• Compare
• Choose
• Combine
• Expand
11
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
g 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.
obile
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.
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
12
Design is not art.
I have an art degree, so I know this.
g 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,
obile
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.
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.
13
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.
g 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-
obile
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.
14. Leverage your team
Studio methods to
foster competition,
creation of new ideas.
Manage them, to add
challenge to each step.
14
Studio Methods
The best ideas come from individuals, or small teams, work-
ing independently. To get the most good, unique ideas, task
g those individuals or small teams to develop quick, indepen-
dent designs and regularly share and regroup, iterating to a
final solution.
obile
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.
15
...So, everyone comes back with ideas and you review
them.
Then you evaluate not complete designs, but each compo-
g 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
obile
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.
16. No idea is worthy
16
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 whole
g 2) Miss the flaws.
Deconstruct it, to understand what it is, what it is made of
(patterns, components!) and then how it might NOT work.
obile
This is a challenge again, but who said it would be easy.
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.
17
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-
g generation ideas, recognize that business models, customers, and
goals are not the same over here, or these days.
obile
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.
18. Embrace your constraints
Brainstorming doesn’t
work.
Working within your
constraints adds focus
to any design session
and fosters ideas.
18
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.”
g • There are bad ideas
• There are ideas that you shouldn’t even consider, as they
are out of scope.
obile
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.
19. Embrace your constraints
19
...
A common complaint about patterns is that they are too con-
straining, and stifle creativity.
g I never see this happen, except by those same designers
who voice those complaints, when they take some great
obile
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
20. Collaborate
Don’t just work
together, collaborate.
Use everyone’s skill,
and knowledge, to
find the best solution.
20
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.
g 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
obile
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.
21. Seek outside input
Systems, process and
business-intelligence
knowledge is held by
specialists you won’t
see.
Unless you go looking.
21
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.
g
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-
obile
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.
24. user
centered
execution
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
g 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.
obile
First, to principles:
25. Your design isn’t done
UX teams can help:
• Don’t walk away.
• Set goals for everyone.
• Make object-oriented designs.
• Practice polymorphism.
25
g
obile
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.
26
Never walk away
Always 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,
g test planning, and so on.
Plan on this from the start so your schedule and budget accounts for
it.
obile
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.
27. Set goals for everyone
Turn priciples into
metrics. Then measure
them.
Push for these to
be the project level
measure of success.
27
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,
g measurable metrics.
Make sure that the whole organization has these goals as
their top drivers, instead of cost savings, efficiency of devel-
obile
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.
28. 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 A1
Objects are re-usable K2 Group Details
See A1
J3 Friend Detai
See A1
components, whether
in 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
m520 Content Preview Pod
m110 Notification Strip
m620 Context Mode
m120 Annotations Bar
•
•
•
•
•
•
m501 Content Listing
m590 Reader 28
•
•
•
•
•
•
•
m660 Tags & Keywords •
• m502 Content Large •
m610 Search, Filter, Sort
m901 Masthead/Nav Custom items
m620 Context Mode m520 Content Preview Pod
m902 Minimized Nav •
•
•
•
m590 Reader
m660 Tags & Keywords
Use object-oriented principles when discussing and delivering
m901 Masthead/Nav
m902 Minimized Nav
Custom items
-- DMC_Sitem
DMC_Sitem
The efficiencies and enforcement of consistency that compo-
g
nentized, object-oriented practice emphasizes in design are
just as valuable to software developers and development pro-
cess.
obile
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.
30. Design principles are project principles
• Develop good
objectives
• Design holistically
• Get everyone to buy
into it
• Own your design
30
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-
g plementation teams.
• Develop good design objectives for the project or product;
no one elese’s will do.
obile
• 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.
31. Steven Hoober
shoobe01@gmail.com
816 210 0455
@shoobe01
shoobe01 on:
www.donttouchme.com
www.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
g 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
obile
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.