Sierra Nevada College, Marketing 350 class lecture, Sept 23, 2013: User Interface

1. Online & New Media
Tools of Digital Marketing
SNC-MKTG350
September 23, 2013

2. Tonight’s Agenda: User Interface
• Read Chapters 3+4 in Don’t Make Me Think text
• Quiz 5
• 0 blog posts to review
• Creating Good User Experience
– User interface concepts
– Reliable framework
- Menus, expectations
- Sitemaps
– Heat mapping
– A/B testing

3. Key Points: Don’t Make Me Think #3
• Design for scanning
– Simple language
– Universal language
– Consistent colors
– Verbs first

4. Key Points: Don’t Make Me Think #4
• Simplify choices:
– The user might do what you want
them to
– Helps them move through a desirable
pathway
– Remember conversions?

5. From Tools to Building…
• We’ve taken a survey of online marketing
tools
• Now to evaluate if we’re delivering good
marketing offerings with our tools

6. User Interface Concepts
• What is a user?
• What is an interface?
Goal: make it easy for a visitor to do what they
want to do on your site.
– Includes information structure
– Includes design decisions

7. Sitemaps help you organize
Becomes your
menu

8. Sitemaps help you organize
Becomes your
menu

9. Sitemaps for content structure…
User interface for design structure

10. User Interface Concepts
• Do they know where to go?
• Can they find what they’re looking for?
• Have you made it easy to sell your wares or
information?
• Does your design add to your credibility?
• Does your design add to your sales effort?

11. User Interface Conventions
• Menu on top or left, reading left to right
• 3-7 menu items
• Upper left logo = home
• Links are underlined or “hot”
• Page content limited to 1-2 ideas
• Sounds, music are user-prompted
• No more Flash
• No “hunting” required

12. User Interface Example – Focal Point

13. User Interface Example – First Step?

14. User Interface Example – Credibility

15. User Interface Example – Credibility

16. User Interface Example – Unfamiliar

17. User Interface Example - Hunting

18. User Interface Example - Speed

19. User Interface – Why Do We Care?
• Increase sales
• Reduce bounce rate
• Increase time on site
• Reduce complaints
• Increase site visibility on search
• Keep your job

20. Fixing UI - Heatmaps

21. Fixing UI - Heatmaps

22. Fixing UI - Heatmaps

23. Heatmaps – What have we learned?
• Readers don’t read everything you write
• We are culturally anchored to the left
• The first two paragraphs must have the most
important info
• Start sub-heads, paragraphs and bullets with
info-packed words (like verbs??)

24. Fixing UI – A/B Testing
• Roll out two versions of a page, email,
design, banner ad, etc.
• On a small scale, see which one
converts better

25. Fixing UI – A/B Testing

26. Fixing UI – A/B Testing
• What can you test?
– The call to action’s (i.e. the button’s) wording, size,
color and placement
– Headline or product description
– Form’s length and types of fields
– Layout and style of website
– Product pricing and promotional offers
– Images on landing and product pages
– Amount of text on the page (short vs. long)

27. A/B Testing – What have we learned?
• Try it: see what your audience prefers
• Have to have analytics in place
• Little tests provide a lot of information
• Testing doesn’t have to be complicated

28. Next session: Wed, Sept 25
• Read Chapters 6 in Don’t Make Me Think text
• Read Chapter 5 in Persuasion text
• 3 blog posts to review
• Creating Good User Experience
– Persuasive design
– User comments/peer recommendations