mktg350 lecture 09232013
DESCRIPTION
Sierra Nevada College, Marketing 350 class lecture, Sept 23, 2013: User InterfaceTRANSCRIPT
![Page 1: Mktg350 lecture 09232013](https://reader033.vdocument.in/reader033/viewer/2022051817/548762c55806b5a82f8b45a5/html5/thumbnails/1.jpg)
Online & New MediaTools of Digital Marketing
SNC-MKTG350September 23, 2013
![Page 2: Mktg350 lecture 09232013](https://reader033.vdocument.in/reader033/viewer/2022051817/548762c55806b5a82f8b45a5/html5/thumbnails/2.jpg)
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
![Page 3: Mktg350 lecture 09232013](https://reader033.vdocument.in/reader033/viewer/2022051817/548762c55806b5a82f8b45a5/html5/thumbnails/3.jpg)
Key Points: Don’t Make Me Think #3
• Design for scanning– Simple language– Universal language– Consistent colors– Verbs first
![Page 4: Mktg350 lecture 09232013](https://reader033.vdocument.in/reader033/viewer/2022051817/548762c55806b5a82f8b45a5/html5/thumbnails/4.jpg)
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?
![Page 5: Mktg350 lecture 09232013](https://reader033.vdocument.in/reader033/viewer/2022051817/548762c55806b5a82f8b45a5/html5/thumbnails/5.jpg)
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
![Page 6: Mktg350 lecture 09232013](https://reader033.vdocument.in/reader033/viewer/2022051817/548762c55806b5a82f8b45a5/html5/thumbnails/6.jpg)
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
![Page 7: Mktg350 lecture 09232013](https://reader033.vdocument.in/reader033/viewer/2022051817/548762c55806b5a82f8b45a5/html5/thumbnails/7.jpg)
Sitemaps help you organize
Becomes your menu
![Page 8: Mktg350 lecture 09232013](https://reader033.vdocument.in/reader033/viewer/2022051817/548762c55806b5a82f8b45a5/html5/thumbnails/8.jpg)
Sitemaps help you organize
Becomes your menu
![Page 9: Mktg350 lecture 09232013](https://reader033.vdocument.in/reader033/viewer/2022051817/548762c55806b5a82f8b45a5/html5/thumbnails/9.jpg)
Sitemaps for content structure…
User interface for design structure
![Page 10: Mktg350 lecture 09232013](https://reader033.vdocument.in/reader033/viewer/2022051817/548762c55806b5a82f8b45a5/html5/thumbnails/10.jpg)
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?
![Page 11: Mktg350 lecture 09232013](https://reader033.vdocument.in/reader033/viewer/2022051817/548762c55806b5a82f8b45a5/html5/thumbnails/11.jpg)
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
![Page 12: Mktg350 lecture 09232013](https://reader033.vdocument.in/reader033/viewer/2022051817/548762c55806b5a82f8b45a5/html5/thumbnails/12.jpg)
User Interface Example – Focal Point
![Page 13: Mktg350 lecture 09232013](https://reader033.vdocument.in/reader033/viewer/2022051817/548762c55806b5a82f8b45a5/html5/thumbnails/13.jpg)
User Interface Example – First Step?
![Page 14: Mktg350 lecture 09232013](https://reader033.vdocument.in/reader033/viewer/2022051817/548762c55806b5a82f8b45a5/html5/thumbnails/14.jpg)
User Interface Example – Credibility
![Page 15: Mktg350 lecture 09232013](https://reader033.vdocument.in/reader033/viewer/2022051817/548762c55806b5a82f8b45a5/html5/thumbnails/15.jpg)
User Interface Example – Credibility
![Page 16: Mktg350 lecture 09232013](https://reader033.vdocument.in/reader033/viewer/2022051817/548762c55806b5a82f8b45a5/html5/thumbnails/16.jpg)
User Interface Example – Unfamiliar
![Page 17: Mktg350 lecture 09232013](https://reader033.vdocument.in/reader033/viewer/2022051817/548762c55806b5a82f8b45a5/html5/thumbnails/17.jpg)
User Interface Example - Hunting
![Page 19: Mktg350 lecture 09232013](https://reader033.vdocument.in/reader033/viewer/2022051817/548762c55806b5a82f8b45a5/html5/thumbnails/19.jpg)
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
![Page 20: Mktg350 lecture 09232013](https://reader033.vdocument.in/reader033/viewer/2022051817/548762c55806b5a82f8b45a5/html5/thumbnails/20.jpg)
Fixing UI - Heatmaps
![Page 21: Mktg350 lecture 09232013](https://reader033.vdocument.in/reader033/viewer/2022051817/548762c55806b5a82f8b45a5/html5/thumbnails/21.jpg)
Fixing UI - Heatmaps
![Page 22: Mktg350 lecture 09232013](https://reader033.vdocument.in/reader033/viewer/2022051817/548762c55806b5a82f8b45a5/html5/thumbnails/22.jpg)
Fixing UI - Heatmaps
![Page 23: Mktg350 lecture 09232013](https://reader033.vdocument.in/reader033/viewer/2022051817/548762c55806b5a82f8b45a5/html5/thumbnails/23.jpg)
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??)
![Page 24: Mktg350 lecture 09232013](https://reader033.vdocument.in/reader033/viewer/2022051817/548762c55806b5a82f8b45a5/html5/thumbnails/24.jpg)
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
![Page 25: Mktg350 lecture 09232013](https://reader033.vdocument.in/reader033/viewer/2022051817/548762c55806b5a82f8b45a5/html5/thumbnails/25.jpg)
Fixing UI – A/B Testing
![Page 26: Mktg350 lecture 09232013](https://reader033.vdocument.in/reader033/viewer/2022051817/548762c55806b5a82f8b45a5/html5/thumbnails/26.jpg)
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)
![Page 27: Mktg350 lecture 09232013](https://reader033.vdocument.in/reader033/viewer/2022051817/548762c55806b5a82f8b45a5/html5/thumbnails/27.jpg)
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
![Page 28: Mktg350 lecture 09232013](https://reader033.vdocument.in/reader033/viewer/2022051817/548762c55806b5a82f8b45a5/html5/thumbnails/28.jpg)
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