Presentation to UofC Internet Marketing.

1. Internet Marketing and Social Media – Course
# BMC - 291- 001
Usability and Form Design

2. What is Bad Design?
Tries to talk itself out of the
problem…

3. What is Bad Design?
WARNING…could cause seizures.

4. What is Bad Design?
WARNING…could cause seizures.

5. What is Good Design?
…effectively anticipates and works with
behaviours as they emerge and evolve…

6. What is Good Design?
…works with natural human cognition and
anticipates actual human scenarios and
stories…

7. What is Good Design?
…doesn’t overcomplicate things…

8. “A picture is worth a thousand words. An interface is
worth a thousand pictures.”
Ben Shneiderman
What is Good Design?

9. “Homepages are the most valuable real estate in the
world…Complexity or confusion make people go
away”.
Jakob Neilsen (www.useit.com)
What is Good Design?

10. “Usability:
denotes the ease with
which people can employ a
particular tool or other
human-made object in
order to achieve a
particular goal.”
(http://en.wikipedia.org/wiki/Usability)

11. User Experience…
Is about how it makes you feel…

12. User Experience…
is more than ‘ease of use’…
Usability
Functionality
Content
Branding

13. How do you get from here…

14. To here…

15. You are not the user and neither is your boss…
1. The User is always Right

16. WTH???!!!!
2. Understand the User

17. Target Audience Definition
2. Understand the User

18. •18
User and Task Analysis
2. Understand the User

19. People
Objectives
Strategies
Technology
Janice
CHU
28 years old, married, expecting her first child,
HR manager, Calgary, Alberta
First – Timer
My name is Janice Chu and my husband’s name is Tom. We both grew
up in Calgary and went to university here. We’ve been married for two
years. I’m an HR manager for an Oil & Gas company and Tom is a
pharmaceutical sales representative.
We feel that Calgary is a great place to live and raise children, but we are
having trouble finding a home in Calgary’s marketplace. Since we are
expecting our first child, we are now looking at the world through the eyes
of our children. This includes where and how we live.
After renting an apartment downtown, we are looking to buy our first
home. Since we are first – time buyers, we are a little nervous about
purchasing. We also don’t know a lot about maintaining a house, so we
are looking for something brand new with few hassles.
We began our search for a new home on the web, and we look for
trustworthy sources, such as www.mls.ca. We have been in touch with a
real estate agent who is a friend of Tom’s dad, but we are also doing our
own research. We find the whole process overwhelming, so we are
looking for information that is easy to understand.
We both grew up in the suburbs, so we are comfortable living outside the
city center. We’ve heard some good things about McKenzie Towne, so
we’re looking to buy there.
“I want to feel confident
knowing that we’re making the
right decision”
Attributes:
– Currently living downtown in a rented condo
– Intermediate Internet user
– Interests: friends, travelling, yoga, cooking
Goals:
– Starting a family
– Owning a home without a lot of hassles
– Get the best value for money
– Get recommendations from trusted sources
– Living in a safe and fun environment
Insights:
– Look for value in their purchase
– Joint decision – making process
– Need to know how their new home’s features will
simplify and benefit their lives – location, safety,
layout, household appointments, local amenities
Other brands in Janice’s life: Everyday brands: ‘Aspirational’ brands:
Persona Creation
2. Understand the User

20. FAIL!
3. Plan Before you Design

21. 3. Plan Before you Design
People
Objectives
Strategies
Technology
Competitive Analysis

22. Information Architecture
3. Plan Before you Design

23. Wireframes
3. Plan Before you Design

24. What are you trying to measure?
4. Understand your Goal

25. Corporate vs. User Goals
Key Performance Indicators
4. Understand your Goal
Targeted Core
Users
Business
Strategy
Enabling
Technology
Key Performance
Indicators

26. Corporate vs. User Goals
− Organizational
Effectiveness
− Convert sales and
transactions to lower cost
channels (cost per
interaction)
− Lead Generation and
Qualification
− Deeper Customer Insight
− One-to-one Marketing
Organization Users
− Ease of Use
− Clarity around how I can
accomplish my goals.
− “I just want to the buy the
darn thing”
− Don’t make me use more
than one channel (or
experience) to accomplish
my goals.
− Customer Delight
User Goals
4. Understand your Goal

27. Corporate vs. User Goals
Identify and fully understand problems before
finding solutions
5. Avoid Solutioneering

28. •28
“Form follows function - that has been misunderstood.
Form and function should be one, joined in a spiritual
union.”
Frank Lloyd Wright
6. Form Follows Function

29. What is the best way for the user to interact?
6. Form Follows Function

30. 95% of users don’t read 80% of your content
7. Content is King

31. •31
Content auditing and mapping
7. Content is King

32. •32
Once they’ve got you, they’ve got you…
8. Persuasive Design

33. •33
Designing Seductive Interactions
8. Persuasive Design

34. •34
Guide the user to the ‘desired outcome’ using
scarcity and visual cues
8. Persuasive Design

35. Don’t forget mobile…
9. Access is for Everyone

36. •36
10. Learn From Failure

37. •37
Split Testing
10. Learn From Failure

38. •38
Usability Testing
10. Learn From Failure

39. 10 Steps to User Experience
User is always
Right
Understand
the User
Plan Before
you Design
Understand
Your Goal
Avoid
Solutioneering
Form Follows
Function
Content is
King
Persuasive
Design
Access is for
Everyone
Learn From
Failure

40. •40
Know the Lingo…

41. Why do you make us wait?
The Importance of Form Design

42. •42
The Importance of Form Design
Forms make or break the most crucial online interactions:
checkout (commerce), registration (community), data input
(participation and sharing), and any task requiring information
entry.

43. •43
Gradual Engagement
Make the process transparent and not
overwhelming…

44. Required Information Fields
Beware Bad Buttons

45. Beware Bad Buttons

46. Get your chicken s**t together
Form FAIL!

47. Phone number. Seems reasonable.
Form FAIL!

48. Personal Information…
WTF?
Form FAIL!

49. Error handling.
So, I screwed up.
Quelle surprise.
Form FAIL!

50. Postal Code?!! Really?
When do I get my chicken?
Form FAIL!

51. AAARGHHHHH!
Form FAIL!

52. Field Length
• Use field length as a visual guide
(affordance)
• Otherwise, consider consistent length
that provides enough room for all
inputs
Content Grouping
• Use relevant content groupings to
organize forms
Actions
• Avoid secondary actions (expand
options, go back)
• Align primary actions with input fields
for clear path to completion
Label position
• Top Aligned labels for reduced
competition times
• Right aligned when vertical screen is
limited
• Left alignment for complex data entry
Required Form Fields
• Avoid Optional fields
• If MOST fields are required: Indicate
optional fields
• If MOST fields are optional: Indicate
require fields
• Associate indicators with labels
Form Checklist

53. Progressive Disclosure
• Not all users require all available
options all the time
• Progressive disclosure provides
additional options when appropriate
Feedback
• Inline validation to provide assistance
• Errors should indicate and provide
clear resolution
• Provide feedback when action is in
progress
• Verification of success
Path to Completion
• Remove all unnecessary data requests
• Illuminate a clear path to completion
• Employ flexible data entry
• Enable smart defaults
• Show progress & save on long forms
Help & Tips
• Monitor usage of help and tips (user
activated exposure)
• Recommend ways of providing data
Tabbing
• Remember to account for tabbing
behaviors
• Ensure tabbing works as expected
Form Checklist

54. • Focus on the end of the conversion funnel
• Optimize site copy, titles and labels to improve SEO
• Add Location Cues > the user knows where they are
on the site
• Eliminate unused content
• Prevent ‘No results’ site keyword searches
• Prioritize home page content to align with user goals
and increase cross-sell opportunities
• Put key functionality on the home page
• Tweak the location and appearance of key buttons
Optimization

55. Questions…
Credits: Nick Finck & Raina Van Cleave: http://www.slideshare.net/nickf/the-ten-commandments-of-user-
experience
Organizing for Site Optimization, Joe Stanhope, August 2010, Forrester Research
Small Web Site Investments That Pay Off by Adele Sage,with Harley Manning and Andrew McInnes,
August 2008 Forrester Research

56. Contact Me: john@consultconiferous.ca
twitter: @john_hutchings
linkedin.com/in/johnhutchings
consultconiferous.ca
Credits & Suggested Readings
User Experience Design Form Design
Books:
• Steve Krug, “Don’t Make Me Think”
• Jesse James Garrett, “The Elements of User
Experience”
• UX books:
smashingmagazine.com/2008/01/24/usability-and-
interface-design-books/
Sites:
• Boxesandarrows.com
• Adaptivepath.com
• Jjg.net
• Xplane.com
• Lukew.com
• Ewardtufte.com
• Backofthenapkin.com
Twitter:
• @davegray
• @sunnibrown
• @@brandonschauer
Books:
Luke Wrobleski, “Web Form Design, Filling in the
Blanks”
Sites:
About the Challenge Disaster: Edward Tufte:
edwardtufte.com/bboard/q-and-a-fetch-
msg?msg_id=0001yB
Twitter:
• @lukew
• @use_this
• @smashingmag
• @mikaellindh