The document provides an overview of designing mobile interfaces. It discusses that patterns are universal, generalized, organized, and explained as best practices. However, patterns can also be misunderstood if taken from a single view or as rote solutions. The presentation emphasizes avoiding heuristic solutions and being a conscious designer by defining problems, comparing options, and combining approaches. It outlines methodologies for design success, including understanding problems, leveraging teams, embracing constraints, collaborating, and seeking outside input. The design is not complete until tested through user-centered execution.

1. Steven Hoober
designing
Float Mobile Learning Symposium
11 June 2011
mobile
interfaces
mobile design

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

3. Patterns are universal
3

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

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

6. Patterns are explained
6

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

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

9. Steven Hoober
avoiding
Float Mobile Learning Symposium
11 June 2011
the heuristic
solution
mobile design

10. Be a conscious designer
Know why you draw
• Define
• Codify
• Compare
• Choose
• Combine
• Expand
10

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
11

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.
12

13. Leverage your team
Studio methods to
foster competition,
creation of new ideas.
Manage them, to add
challenge to each step.
13

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.
14

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.
15

16. Embrace your constraints
Brainstorming doesn’t
work.
Working within your
constraints adds focus
to any design session
and fosters ideas.
16

17. Collaborate
Don’t just work
together, collaborate.
Use everyone’s skill,
and knowledge, to
find the best solution.
17

18. Seek outside input
Systems, process and
business-intelligence
knowledge is held by
specialists you won’t
see.
Unless you go looking.
18

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

20. user
centered
execution

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

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.
22

23. Set goals for everyone
Turn priciples into
metrics. Then measure
them.
Push for these to
be the project level
measure of success.
23

24. 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
m110 Notification Strip
m620 Context Mode •
m520 Content Preview Pod
m501 Content Listing 24
•
•
•
• m590 Reader •
•
m120 Annotations Bar •
•
•
•
•
•
m660 Tags & Keywords •
• m502 Content Large •

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

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

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