Graphic and interactive elements together in harmony can create a great user experience.

1. Designing Interface
Core Principles And Considerations

3. Sentence diagramming

4. Interface diagramming
Product
(noun)
Costs
Buy (verb)
(adverb)
Look (verb) Costs
(adjective)

5. The Language of Interface
Graphical (understanding) Interactive (doing)
• Layout • Affordances
• Objects • HUD
• Type • Feedback
• Color • Modes
• Line • Input
• Hierarchy • Navigation
• Relationships

6. Interactive Interface Design
DOING

7. Affordances

8. Buttons Look Pushable

9. Buttons with meaning

10. Links Look Clickable

11. Links Have Hierarchy

12. On Subtlety
When you don’t want to interrupt an action, be subtle (think of footnotes). If they are
reading, don’t bother them.
When you need to prompt an action, subtlety will send you to the poor house.
Tell your users what to do. Clarity is relaxing, not annoying.

13. HUD
Heads Up
Display:
Information
user needs
nearby to be
effective

14. A integrated approach

15. An email HUD
All HUD, no content

16. A social HUD

17. Feedback

18. Inputs

19. Form Principles
• Consider Context
• Set expectations
• Use appropriate inputs
• Give sift and clear feedback
• Ask for less
• AB test

20. Forms
http://www.lukew.com/ff/entry.asp?1502

21. Navigation
IA made visible
“Like putting an Armani suit on Attila the Hun, interface design only tells how to
dress up an existing behavior.” – Alan Cooper
21

22. Most IA is invisible
• A lot of work no one
sees
• Synonym rings, etc
• If it was seen, is would
be too much
• We show only a subset
22

23. The magic number?
• 13 tabs– no one
saw them. Six
tabs, everyone saw
them
23

24. Global links
But not everything is simple
Related Web search
Services inbox
masthead Log out
Mail tools
upsell
Folders
And there
inbox Write mail
tip
ads
isn’t even upsell ad
Other
properties
content!
Related
Services
Mail tools
ad
24

25. Navigation orders complex pages
25

26. Understanding Navigation
Message and Access
Global Navigation Where Am I?
Local Navigation
What's Nearby?
Content Lives Here, What's Related
With Contextual
Navigation Inline
To What's Here?
Or Separate.
26

27. Global navigation
• Where you are
– Brand/masthead
• Where you can go (site offering)
– Top level categories
• Safety nets
– Where’s my (shopping cart/account/help???)
27

28. Global Navigation ‘03 vs ‘12
28

29. Global navigation
29

30. Global navigation ‘03 vs ‘12
30

31. Local Navigation
• I’ve started down the path
• Now what?
– What are the categories of items?
– What are the siblings of what I see?
– What are the subcategories?
31

32. Local Navigation ‘03 vs ‘12
32

33. Local Navigation 2003
33

34. Secondary
navigation is now
temporal

35. Local Navigation
35

36. Contextual navigation
• Inline links
• Related items
• Document management
36

37. Inline links
37

38. Related items
38

39. Pagination
Useful to reduce page
download speed and
cognitive overload.
Annoying for printing.
Impossible to predict what
you’ll get
Users would rather scroll
than click
39

40. Ad negotiation
40

41. Print/email/clip
41

42. Sort
42

43. Secondary Navigation
• Site Maps
• Indexes
• Table of Contents
43

44. Have you ever seen this page?
44

45. How about this one?
45

46. How about this one?
46

47. You can make it helpful
“After testing several
different sitemap designs
on users, I decided to try
putting one on every page
of my small Columbian
web site. I then decided to
track how often it was
used for navigation. It
turns out the sitemap is
used for over 65% of all
navigation done on the
site.”
-- Usability Report by Peter Van
Dijck of poorbuthappy.com (Guide
to Columbia)
http://www.webword.com/reports/sitema
p.html
47

48. Conventions
It is certainly
probable, then, that
placing these objects in
expected locations would
give an e-commerce site
a competitive edge over
those that do not…
-- Examining User Expectations for the
Location of Common E-Commerce
Web Objects
Usability News
4.1 2002
48

49. Conventions
If 90% or more of the big sites do things in a single way,
then this is the de-facto standard and you have to
comply. Only deviate from a design standard if your
alternative design has at least 100% higher measured
usability.
If 60-90% of the big sites do things in a single way, then
this is a strong convention and you should comply
unless your alternative design has at least 50% higher
measured usability.
If less than 60% of the big sites do things in a single way,
then there are no dominant conventions yet and you
are free to design in an alternative way.
-- Jakob Nielsen, November 14, 1999 Alertbox column
"Identifying De-Facto Standards for E-Commerce Web Sites“ ©
2003 Heidi P. Adkisson
49

50. Conventions
• Some things are
becoming de rigor
• Deviate when
you’ve got
something better
• Not because you
are bored
"Identifying De-Facto Standards for E-Commerce Web Sites“ ©
2003 Heidi P. Adkisson
50

51. Now combine
• Follow expectations based on conventions
• Design a hierarchy based on task
importance
• Err on the side of simplicity
51

52. Homework
• Analyze two competitors, one complementor
– Layout
– Inputs/functionality
– Groupings
– Hierarchy
Product
– Trust/reassurance (noun)
Costs
Buy (verb)
(adverb)
Look Costs
(verb) (adjective)

53. Graphic Design
UNDERSTANDING

54. Designing to Understand
Use For
• Hierarchy • Importance
• Layout • Sequence
• Images • Location
• Type • Reassurance
• Color • Motivation
• Line • Involvement
• Relationships • Seduction
• Progression

55. WHAT IS THE SINGLE MOST
IMPORTANT THING?

61. LOOK
LOOK LOOK LOOK
LOOK
Law of Focal Point
The idea that a point of interest, something emphasised or different will
catch and hold the viewers attention (Chang, 2002).
HIERARCHY GIVES CLARITY

62. WHAT ORDER SHOULD I LOOK?

63. Order and Composition
LAYOUT

64. PAINTING

65. PAINTING

68. Comics are read in
the west left to
right, like a page.
However, good
artists add visual
elements to help
you flow.
http://samkieth.blogs
pot.com/

72. TYPE

73. I am a serifed font
I am sans-serif

74. I am Times New Roman
Hey, I’m arial

75. I am Comic Sans
I am the devil

76. I am Impact
LOL

78. Display fonts aren’t
readable
Use them only for titles.
(Hi, I’m Georgia, and I’m always welcome!)

82. COLOR

83. Cheaters Tricks
• One color, with variations. One accent. Period
• Use a generator site
http://www.colourlovers.com/
• Use nature
http://boxesandarrows.com/natural-
selections-colors-found-in-nature-and-
interface-design/

86. nature

92. IF PHOTO-HEAVY, USE LITTLE COLOR

96. LINE

97. Warm, hand drawn lines= Artisanal

98. Lines gently reinforce the grid = scientific

99. Simple lined Navigation = Artwork

100. Grid edged with lines=Modrian=Modern

101. RELATIONSHIPS

102. Which pair of pants are
now 39.99?

103. Which car is 49.99?

104. If you are putting boxes around things to make it
clear, you probably should start over

105. See http://contrastrebellion.com/
DIFFERENCE & CONTRAST

107. Take advantage of the medium
PROGRESSION

108. This is a very tall page

116. This one too

121. This is a long page

122. Flipboard
moves in a
variety of
directions

125. Even if you use the “wrong”
gesture, Flipboard reacts correctly.

126. Fake it til you make it
GRAPHIC DESIGN HACKS

127. Minimalist Design
• Only use one font. Preferably helvetica.
• Only use three, all very very different. Perhaps a
fourth for footer text.
• Only use one color, with variations, and one “accent”
color.
• Turn on the grid (if you are using photoshop, etc)
• Never align center.
• Don’t use stock photography, unless you have
awesome taste. It has no soul.
• Have a hierarchy

128. Cheats
• Patterns
• Kits like this
• Libraries
• Odesk
• Conference proceedings
You can’t buy taste

129. Homework
• Analyze two competitors, one complementor
• Do wire frames for three key screens
• Optional: begin interfaces