usability and form design - university of calgary
DESCRIPTION
Presentation to UofC Internet Marketing.TRANSCRIPT
![Page 1: Usability and Form Design - University of Calgary](https://reader033.vdocuments.us/reader033/viewer/2022061213/54973effb47959c22e8b457d/html5/thumbnails/1.jpg)
Internet Marketing and Social Media – Course # BMC - 291- 001
Usability and Form Design
![Page 2: Usability and Form Design - University of Calgary](https://reader033.vdocuments.us/reader033/viewer/2022061213/54973effb47959c22e8b457d/html5/thumbnails/2.jpg)
What is Bad Design?
Tries to talk itself out of the problem…
![Page 3: Usability and Form Design - University of Calgary](https://reader033.vdocuments.us/reader033/viewer/2022061213/54973effb47959c22e8b457d/html5/thumbnails/3.jpg)
What is Bad Design?
WARNING…could cause seizures.
![Page 4: Usability and Form Design - University of Calgary](https://reader033.vdocuments.us/reader033/viewer/2022061213/54973effb47959c22e8b457d/html5/thumbnails/4.jpg)
What is Bad Design?
WARNING…could cause seizures.
![Page 5: Usability and Form Design - University of Calgary](https://reader033.vdocuments.us/reader033/viewer/2022061213/54973effb47959c22e8b457d/html5/thumbnails/5.jpg)
What is Good Design?
…effectively anticipates and works with behaviours as they emerge and evolve…
![Page 6: Usability and Form Design - University of Calgary](https://reader033.vdocuments.us/reader033/viewer/2022061213/54973effb47959c22e8b457d/html5/thumbnails/6.jpg)
What is Good Design?
…works with natural human cognition and anticipates actual human scenarios and
stories…
![Page 7: Usability and Form Design - University of Calgary](https://reader033.vdocuments.us/reader033/viewer/2022061213/54973effb47959c22e8b457d/html5/thumbnails/7.jpg)
What is Good Design?
…doesn’t overcomplicate things…
![Page 8: Usability and Form Design - University of Calgary](https://reader033.vdocuments.us/reader033/viewer/2022061213/54973effb47959c22e8b457d/html5/thumbnails/8.jpg)
“A picture is worth a thousand words. An interface is worth a thousand pictures.”
Ben Shneiderman
What is Good Design?
![Page 9: Usability and Form Design - University of Calgary](https://reader033.vdocuments.us/reader033/viewer/2022061213/54973effb47959c22e8b457d/html5/thumbnails/9.jpg)
“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?
![Page 10: Usability and Form Design - University of Calgary](https://reader033.vdocuments.us/reader033/viewer/2022061213/54973effb47959c22e8b457d/html5/thumbnails/10.jpg)
“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)
![Page 11: Usability and Form Design - University of Calgary](https://reader033.vdocuments.us/reader033/viewer/2022061213/54973effb47959c22e8b457d/html5/thumbnails/11.jpg)
User Experience…
Is about how it makes you feel…
![Page 12: Usability and Form Design - University of Calgary](https://reader033.vdocuments.us/reader033/viewer/2022061213/54973effb47959c22e8b457d/html5/thumbnails/12.jpg)
User Experience…
is more than ‘ease of use’…
• Usability
• Functionality
• Content
• Branding
![Page 13: Usability and Form Design - University of Calgary](https://reader033.vdocuments.us/reader033/viewer/2022061213/54973effb47959c22e8b457d/html5/thumbnails/13.jpg)
How do you get from here…
![Page 14: Usability and Form Design - University of Calgary](https://reader033.vdocuments.us/reader033/viewer/2022061213/54973effb47959c22e8b457d/html5/thumbnails/14.jpg)
To here…
![Page 15: Usability and Form Design - University of Calgary](https://reader033.vdocuments.us/reader033/viewer/2022061213/54973effb47959c22e8b457d/html5/thumbnails/15.jpg)
You are not the user and neither is your boss…
1. The User is always Right
![Page 16: Usability and Form Design - University of Calgary](https://reader033.vdocuments.us/reader033/viewer/2022061213/54973effb47959c22e8b457d/html5/thumbnails/16.jpg)
WTH???!!!!
2. Understand the User
![Page 17: Usability and Form Design - University of Calgary](https://reader033.vdocuments.us/reader033/viewer/2022061213/54973effb47959c22e8b457d/html5/thumbnails/17.jpg)
Target Audience Definition
2. Understand the User
![Page 18: Usability and Form Design - University of Calgary](https://reader033.vdocuments.us/reader033/viewer/2022061213/54973effb47959c22e8b457d/html5/thumbnails/18.jpg)
18User and Task Analysis
2. Understand the User
![Page 19: Usability and Form Design - University of Calgary](https://reader033.vdocuments.us/reader033/viewer/2022061213/54973effb47959c22e8b457d/html5/thumbnails/19.jpg)
People
Objectives
Strategies
Technology
Janice CHU
28 years old, married, expecting her first child,
HR manager, Calgary, AlbertaFirst – 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
![Page 20: Usability and Form Design - University of Calgary](https://reader033.vdocuments.us/reader033/viewer/2022061213/54973effb47959c22e8b457d/html5/thumbnails/20.jpg)
FAIL!
3. Plan Before you Design
![Page 21: Usability and Form Design - University of Calgary](https://reader033.vdocuments.us/reader033/viewer/2022061213/54973effb47959c22e8b457d/html5/thumbnails/21.jpg)
3. Plan Before you Design
People
Objectives
Strategies
Technology
Competitive Analysis
![Page 22: Usability and Form Design - University of Calgary](https://reader033.vdocuments.us/reader033/viewer/2022061213/54973effb47959c22e8b457d/html5/thumbnails/22.jpg)
Information Architecture
3. Plan Before you Design
![Page 23: Usability and Form Design - University of Calgary](https://reader033.vdocuments.us/reader033/viewer/2022061213/54973effb47959c22e8b457d/html5/thumbnails/23.jpg)
Wireframes
3. Plan Before you Design
![Page 24: Usability and Form Design - University of Calgary](https://reader033.vdocuments.us/reader033/viewer/2022061213/54973effb47959c22e8b457d/html5/thumbnails/24.jpg)
What are you trying to measure?
4. Understand your Goal
![Page 25: Usability and Form Design - University of Calgary](https://reader033.vdocuments.us/reader033/viewer/2022061213/54973effb47959c22e8b457d/html5/thumbnails/25.jpg)
Corporate vs. User Goals
Key Performance Indicators
4. Understand your Goal
• Targeted Core Users
• Business Strategy
• Enabling Technolo
gy
Key Performance
Indicators
![Page 26: Usability and Form Design - University of Calgary](https://reader033.vdocuments.us/reader033/viewer/2022061213/54973effb47959c22e8b457d/html5/thumbnails/26.jpg)
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
![Page 27: Usability and Form Design - University of Calgary](https://reader033.vdocuments.us/reader033/viewer/2022061213/54973effb47959c22e8b457d/html5/thumbnails/27.jpg)
Corporate vs. User Goals
Identify and fully understand problems before finding solutions
5. Avoid Solutioneering
![Page 28: Usability and Form Design - University of Calgary](https://reader033.vdocuments.us/reader033/viewer/2022061213/54973effb47959c22e8b457d/html5/thumbnails/28.jpg)
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
![Page 29: Usability and Form Design - University of Calgary](https://reader033.vdocuments.us/reader033/viewer/2022061213/54973effb47959c22e8b457d/html5/thumbnails/29.jpg)
What is the best way for the user to interact?
6. Form Follows Function
![Page 30: Usability and Form Design - University of Calgary](https://reader033.vdocuments.us/reader033/viewer/2022061213/54973effb47959c22e8b457d/html5/thumbnails/30.jpg)
95% of users don’t read 80% of your content
7. Content is King
![Page 31: Usability and Form Design - University of Calgary](https://reader033.vdocuments.us/reader033/viewer/2022061213/54973effb47959c22e8b457d/html5/thumbnails/31.jpg)
31Content auditing and mapping
7. Content is King
![Page 32: Usability and Form Design - University of Calgary](https://reader033.vdocuments.us/reader033/viewer/2022061213/54973effb47959c22e8b457d/html5/thumbnails/32.jpg)
32Once they’ve got you, they’ve got you…
8. Persuasive Design
![Page 33: Usability and Form Design - University of Calgary](https://reader033.vdocuments.us/reader033/viewer/2022061213/54973effb47959c22e8b457d/html5/thumbnails/33.jpg)
33Designing Seductive Interactions
8. Persuasive Design
![Page 34: Usability and Form Design - University of Calgary](https://reader033.vdocuments.us/reader033/viewer/2022061213/54973effb47959c22e8b457d/html5/thumbnails/34.jpg)
34
Guide the user to the ‘desired outcome’ using scarcity and visual cues
8. Persuasive Design
![Page 35: Usability and Form Design - University of Calgary](https://reader033.vdocuments.us/reader033/viewer/2022061213/54973effb47959c22e8b457d/html5/thumbnails/35.jpg)
Don’t forget mobile…
9. Access is for Everyone
![Page 36: Usability and Form Design - University of Calgary](https://reader033.vdocuments.us/reader033/viewer/2022061213/54973effb47959c22e8b457d/html5/thumbnails/36.jpg)
36
10. Learn From Failure
![Page 37: Usability and Form Design - University of Calgary](https://reader033.vdocuments.us/reader033/viewer/2022061213/54973effb47959c22e8b457d/html5/thumbnails/37.jpg)
37Split Testing
10. Learn From Failure
![Page 38: Usability and Form Design - University of Calgary](https://reader033.vdocuments.us/reader033/viewer/2022061213/54973effb47959c22e8b457d/html5/thumbnails/38.jpg)
38
Usability Testing
10. Learn From Failure
![Page 39: Usability and Form Design - University of Calgary](https://reader033.vdocuments.us/reader033/viewer/2022061213/54973effb47959c22e8b457d/html5/thumbnails/39.jpg)
10 Steps to User Experience
• User is always Right
• Understand the User
• Plan Before you Design
• Understand Your Goal
• Avoid Solutioneeri
ng
• Form Follows Function
• Content is King
• Persuasive Design
• Access is for
Everyone
• Learn From Failure
![Page 40: Usability and Form Design - University of Calgary](https://reader033.vdocuments.us/reader033/viewer/2022061213/54973effb47959c22e8b457d/html5/thumbnails/40.jpg)
40
Know the Lingo…
![Page 41: Usability and Form Design - University of Calgary](https://reader033.vdocuments.us/reader033/viewer/2022061213/54973effb47959c22e8b457d/html5/thumbnails/41.jpg)
Why do you make us wait?
The Importance of Form Design
![Page 42: Usability and Form Design - University of Calgary](https://reader033.vdocuments.us/reader033/viewer/2022061213/54973effb47959c22e8b457d/html5/thumbnails/42.jpg)
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.
![Page 43: Usability and Form Design - University of Calgary](https://reader033.vdocuments.us/reader033/viewer/2022061213/54973effb47959c22e8b457d/html5/thumbnails/43.jpg)
43
Gradual Engagement
Make the process transparent and not overwhelming…
![Page 44: Usability and Form Design - University of Calgary](https://reader033.vdocuments.us/reader033/viewer/2022061213/54973effb47959c22e8b457d/html5/thumbnails/44.jpg)
Required Information FieldsBeware Bad Buttons
![Page 45: Usability and Form Design - University of Calgary](https://reader033.vdocuments.us/reader033/viewer/2022061213/54973effb47959c22e8b457d/html5/thumbnails/45.jpg)
Beware Bad Buttons
![Page 46: Usability and Form Design - University of Calgary](https://reader033.vdocuments.us/reader033/viewer/2022061213/54973effb47959c22e8b457d/html5/thumbnails/46.jpg)
Get your chicken s**t together
Form FAIL!
![Page 47: Usability and Form Design - University of Calgary](https://reader033.vdocuments.us/reader033/viewer/2022061213/54973effb47959c22e8b457d/html5/thumbnails/47.jpg)
Phone number. Seems reasonable.
Form FAIL!
![Page 48: Usability and Form Design - University of Calgary](https://reader033.vdocuments.us/reader033/viewer/2022061213/54973effb47959c22e8b457d/html5/thumbnails/48.jpg)
Personal Information…
WTF?
Form FAIL!
![Page 49: Usability and Form Design - University of Calgary](https://reader033.vdocuments.us/reader033/viewer/2022061213/54973effb47959c22e8b457d/html5/thumbnails/49.jpg)
Error handling.
So, I screwed up.
Quelle surprise.
Form FAIL!
![Page 50: Usability and Form Design - University of Calgary](https://reader033.vdocuments.us/reader033/viewer/2022061213/54973effb47959c22e8b457d/html5/thumbnails/50.jpg)
Postal Code?!! Really?
When do I get my chicken?
Form FAIL!
![Page 51: Usability and Form Design - University of Calgary](https://reader033.vdocuments.us/reader033/viewer/2022061213/54973effb47959c22e8b457d/html5/thumbnails/51.jpg)
AAARGHHHHH!
Form FAIL!
![Page 52: Usability and Form Design - University of Calgary](https://reader033.vdocuments.us/reader033/viewer/2022061213/54973effb47959c22e8b457d/html5/thumbnails/52.jpg)
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
![Page 53: Usability and Form Design - University of Calgary](https://reader033.vdocuments.us/reader033/viewer/2022061213/54973effb47959c22e8b457d/html5/thumbnails/53.jpg)
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
![Page 54: Usability and Form Design - University of Calgary](https://reader033.vdocuments.us/reader033/viewer/2022061213/54973effb47959c22e8b457d/html5/thumbnails/54.jpg)
• 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
![Page 55: Usability and Form Design - University of Calgary](https://reader033.vdocuments.us/reader033/viewer/2022061213/54973effb47959c22e8b457d/html5/thumbnails/55.jpg)
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
![Page 56: Usability and Form Design - University of Calgary](https://reader033.vdocuments.us/reader033/viewer/2022061213/54973effb47959c22e8b457d/html5/thumbnails/56.jpg)
Contact Me: [email protected]: @john_hutchingslinkedin.com/in/johnhutchingsconsultconiferous.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.comTwitter:• @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