Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
T E S T D E S I G N
.form usability
T E S T D E S I G N
.have a conversation
When a stranger who asks us: “What’s your
name?” “What’s your address?” “What’s y...
T E S T D E S I G N
Part of providing a clear path to
completion is telling people
what form they are on and what
they can...
T E S T D E S I G N
.clear scan lines
Eye-tracking data for a simple form that highlights the
importance of a clear scan l...
T E S T D E S I G N
.minimal distractions
To keep people focused on completing a form,
you also should consider which web ...
T E S T D E S I G N
.progress indicator
While it’s certainly a good idea to let
people know how far along in a process
the...
T E S T D E S I G N
.labels
Top aligned labels
T E S T D E S I G N
.labelsRight aligned labels
T E S T D E S I G N
.labels
Left aligned labels
T E S T D E S I G N
.labels
.left aligned.right aligned.top aligned
T E S T D E S I G N
.labels
labels within inputs
Labels within fields need to go away when people
are entering their answer...
T E S T D E S I G N
.actions in progress
Let's assume that you've answered all the questions
on a form correctly and selec...
T E S T D E S I G N
There is an opportunities to
provide a cleaner path to
completion. Instead of a
separate question to a...
T E S T D E S I G N
.help text
Help text can also be problematic because people
tend not to read instructions presented on...
T E S T D E S I G N
.help text
- When forms ask for unfamiliar data: What's a PAC code?!
- When people question why they a...
T E S T D E S I G N
.automatic inline help
Automatic inline help systems reveal themselves when and where the information ...
T E S T D E S I G N
.user activated inline help
User-activated inline help lets people explicitly
access help text when th...
T E S T D E S I G N
.error messages
Of course, we want to minimize the potential for these
types of errors as much as we c...
T E S T D E S I G N
.success message
Although not as important as an error
message, a success message should be
noticeable...
T E S T D E S I G N
.inline validation
Consider using inline validation to confirm or suggest valid answers and to
help peo...
T E S T D E S I G N
.build trustBe clear with what your terms mean.
One research study found that most
terms of service ag...
T E S T D E S I G N
.mobile forms
T E S T D E S I G N
.Global sales
Source: http://j.mp/Ibq3zt
T E S T D E S I G N
.Global sales
Source: http://j.mp/Ibq3zt
T E S T D E S I G N
Source: http://www.lukew.com/ff/entry.asp?1837
.Mobile revenue (2014)
It was % 0 at 2012
T E S T D E S I G N
Source: http://j.mp/1gCCZM2
Hamburger Menu
240.000UNIQUE MOBILE VISITORS
IT WAS TESTED ON
T E S T D E S I G N
Source: http://j.mp/1gCCZM2
Hamburger Menu
+7.2 % +22.4 %
IMPROVEMENT IMPROVEMENT
240.000UNIQUE MOBILE...
T E S T D E S I G N
Source: http://j.mp/1gCCZM2
Hamburger Menu
240.000UNIQUE MOBILE VISITORS
IT WAS TESTED ON
T E S T D E S I G N
Source: http://j.mp/1gCCZM2
Hamburger Menu
+12.9 %
IMPROVEMENT
+5.7 %
IMPROVEMENT
-22.2 %
IMPROVEMENT
...
T E S T D E S I G N
Source: http://j.mp/1gCCZM2
Hamburger Menu
+12.9 %
IMPROVEMENT
+5.7 %
IMPROVEMENT
-22.2 %
IMPROVEMENT
...
T E S T D E S I G N
.do not repeat e-mail
15 %
EMAIL HARD BOUNCES
T E S T D E S I G N
50 %
DECREASE IN HARD BOUNCES
.inline validation
REALTIME FEEDBACK
T E S T D E S I G N
mobile screen
Help,
error and
success
messages
.inline validation
REALTIME FEEDBACK
T E S T D E S I G N
desktop screen
Help,
error and
success
messages
Use inline
text more
effectively
.inline validation
RE...
T E S T D E S I G N
.single coherent entity
People perceive name as
a ‘single coherent entity’
T E S T D E S I G N
http://zdfs.github.io/toscani/paymentInfo/index.html
.payment info
T E S T D E S I G N
.payment info
T E S T D E S I G N
.3 field checkout form
DIGITAL CONTENT
TYPE E-MAIL
PAYMENT INFO
STAY ON KEYS
REDUCED CONTROLS
T E S T D E S I G N
.drop-down menu
4 TAB OPERATION
T E S T D E S I G N
.stepper
Instead of drop-down menu use
stepper if possible
- Increase or decrease value by a constant ...
T E S T D E S I G N
.stepper
- Increase or decrease value by a constant amount.
- To make small adjustments to a value.
St...
T E S T D E S I G N
.action sheet
- use it for dialog or pop up instead of drop-down menu
Instead of drop-down menu use
ac...
T E S T D E S I G N
.canvas menu
- it works on web and mobile screens.
Instead of drop-down menu use
canvas menu if possib...
T E S T D E S I G N
44
.right keyboard
Give Users the Right Keyboard on Mobile Forms
T E S T D E S I G N
1 2 3
.jump right into input
T E S T D E S I G N
1 2
.jump right into input
T E S T D E S I G N
.thank you
Upcoming SlideShare
Loading in …5
×

Form Usability

936 views

Published on

Web & Mobile Form Usability

Published in: Design
  • Be the first to comment

  • Be the first to like this

Form Usability

  1. 1. T E S T D E S I G N .form usability
  2. 2. T E S T D E S I G N .have a conversation When a stranger who asks us: “What’s your name?” “What’s your address?” “What’s your email address?” “What’s your birth date?” we find ourselves asking: “Who is this person?” “Why does he (or she) need all this information?” “Why am I telling him (or her) all this?” ! Quite quickly, we become uneasy and wish the stranger would tell us something about himself or herself instead of barraging us with questions. Luke Wroblewski. “Web Form Design: Filling in the Blanks.”
  3. 3. T E S T D E S I G N Part of providing a clear path to completion is telling people what form they are on and what they can accomplish by filling it out. As people are unlikely to read a detailed description of what each form they encounter does, this burden mostly falls on the form’s title. .name the formProvide a clear path to completion
  4. 4. T E S T D E S I G N .clear scan lines Eye-tracking data for a simple form that highlights the importance of a clear scan line. In this example, the strong vertical axis of labels, input fields, and a primary action button provides a single path through the form. This allows people to respond quickly to questions and complete their task with a minimum number of diversions. Allow people to respond quickly to questions
  5. 5. T E S T D E S I G N .minimal distractions To keep people focused on completing a form, you also should consider which web site elements help illuminate a clear path to completion and which elements distract from it. ! Even though the consistent navigation, header or promotions that make your web site great are appropriate on most of your site’s pages, they may not be appropriate on your forms. These additional elements can be a distraction at best and a detour at worst, particularly for critical forms like checkout in ecommerce sites or registration in social applications. Keep people focused on completing a form
  6. 6. T E S T D E S I G N .progress indicator While it’s certainly a good idea to let people know how far along in a process they are, you need to be wary of progress indicators that incorrectly represent the number of Web pages or steps required to complete a form. An all too common practice for forms spanning multiple Web pages is the inclusion of a progress indicator that does not accurately mirror the number of pages a form requires. Let people know how far along in a process they are.
  7. 7. T E S T D E S I G N .labels Top aligned labels
  8. 8. T E S T D E S I G N .labelsRight aligned labels
  9. 9. T E S T D E S I G N .labels Left aligned labels
  10. 10. T E S T D E S I G N .labels .left aligned.right aligned.top aligned
  11. 11. T E S T D E S I G N .labels labels within inputs Labels within fields need to go away when people are entering their answer into an input field, the context for the answer is gone. ! So if you suddenly forget what question you're answering, tough luck—the label is nowhere to be found. ! ! When you're done filling in the form, all the labels are gone! That makes it a bit hard to go back and check your answers. ! Single-question forms (like a search box), forms with just a couple inputs, or forms asking for very familiar data (like an address book) are much better candidates.
  12. 12. T E S T D E S I G N .actions in progress Let's assume that you've answered all the questions on a form correctly and selected the primary action to signify you're done. Then what? If nothing changes, perhaps the site didn't register your click. Is your information being processed? When in doubt, most people will try again. ! Depending on how a form is developed, this may lead to a duplicate submission. Now you've done what you were trying to accomplish twice! Is your information being processed?
  13. 13. T E S T D E S I G N There is an opportunities to provide a cleaner path to completion. Instead of a separate question to address the terms of service, the primary action can cover both the terms of service agreement and form completion. .agree and submit Provide a cleaner path to completion.
  14. 14. T E S T D E S I G N .help text Help text can also be problematic because people tend not to read instructions presented onscreen. Relying on a set of instructions to explain your form will lead to trouble when those instructions are bypassed by most people. ! In fact, eye-tracking research shows that many people jump directly to the first input field when presented with a form. It seems to be a natural tendency to want to start filling things in. We just want to get this form done and move on! Many people jump directly to the first input field.
  15. 15. T E S T D E S I G N .help text - When forms ask for unfamiliar data: What's a PAC code?! - When people question why they are being asked for specific data: Why do you need to know my date of birth?! - When people may be concerned about the security or privacy of their data: Is my credit card number safe here?! - When there are recommended ways of providing data: Separate your tags with commas, please. - When asking for sensitive information, consider including actionable help text that allows people to confirm that their information is safe. The cases when instructional text is appropriate.
  16. 16. T E S T D E S I G N .automatic inline help Automatic inline help systems reveal themselves when and where the information they contain is most applicable. For example, when a person clicks or tabs to an input field, the relevant help text appears beside or below the input. On Wufoo, help text is automatically shown as people engage with input fields.
  17. 17. T E S T D E S I G N .user activated inline help User-activated inline help lets people explicitly access help text when they need it. This method usually makes consistent use of an icon, button, image, or text link to let people know help is available. A person can either click or point to these triggers to reveal relevant help text as needed. Triggers for user-activated help text, such as icons, links, or buttons, should be placed next to labels and not input fields.
  18. 18. T E S T D E S I G N .error messages Of course, we want to minimize the potential for these types of errors as much as we can but when mistakes do happen, we should be prepared to deal with them quickly and gracefully. Step one for dealing with errors is letting people know they happened. When present, an error message is arguably the most important element on the page. Before After Be prepared to deal with the errors quickly and gracefully.
  19. 19. T E S T D E S I G N .success message Although not as important as an error message, a success message should be noticeable enough to give people the quick praise they deserve. ! The key difference between error and success messages, however, is that error messages cannot be ignored or dismissed —they must be addressed. ! Success messages, on the other hand, should never block people’s progress— they should encourage more of it. It may be appropriate to automatically remove success messages, preferably with animation. Give people the quick praise they deserve.
  20. 20. T E S T D E S I G N .inline validation Consider using inline validation to confirm or suggest valid answers and to help people stay within limits. When input limits exist, communicate their boundaries using real-time, dynamic updates.
  21. 21. T E S T D E S I G N .build trustBe clear with what your terms mean. One research study found that most terms of service agreements have between 1000-8000 words. http://www.cc.gatech.edu/~gte115v/ wip0483-fieslerSC.pdf http://lorrie.cranor.org/pubs/ readingPolicyCost-authorDraft.pdf A related research study estimates that the average user sees about 1462 privacy policies a year. If users read every privacy policy for each new site they visited, they would each spend about 244 hours per year to read them. A survey shows only 7% of users read the full terms when signing up for online products and services. http://www.theguardian.com/money/2011/may/11/ terms-conditions-small-print-big-problems
  22. 22. T E S T D E S I G N .mobile forms
  23. 23. T E S T D E S I G N .Global sales Source: http://j.mp/Ibq3zt
  24. 24. T E S T D E S I G N .Global sales Source: http://j.mp/Ibq3zt
  25. 25. T E S T D E S I G N Source: http://www.lukew.com/ff/entry.asp?1837 .Mobile revenue (2014) It was % 0 at 2012
  26. 26. T E S T D E S I G N Source: http://j.mp/1gCCZM2 Hamburger Menu 240.000UNIQUE MOBILE VISITORS IT WAS TESTED ON
  27. 27. T E S T D E S I G N Source: http://j.mp/1gCCZM2 Hamburger Menu +7.2 % +22.4 % IMPROVEMENT IMPROVEMENT 240.000UNIQUE MOBILE VISITORS IT WAS TESTED ON
  28. 28. T E S T D E S I G N Source: http://j.mp/1gCCZM2 Hamburger Menu 240.000UNIQUE MOBILE VISITORS IT WAS TESTED ON
  29. 29. T E S T D E S I G N Source: http://j.mp/1gCCZM2 Hamburger Menu +12.9 % IMPROVEMENT +5.7 % IMPROVEMENT -22.2 % IMPROVEMENT 240.000UNIQUE MOBILE VISITORS IT WAS TESTED ON
  30. 30. T E S T D E S I G N Source: http://j.mp/1gCCZM2 Hamburger Menu +12.9 % IMPROVEMENT +5.7 % IMPROVEMENT -22.2 % IMPROVEMENT 240.000UNIQUE MOBILE VISITORS IT WAS TESTED ON
  31. 31. T E S T D E S I G N .do not repeat e-mail 15 % EMAIL HARD BOUNCES
  32. 32. T E S T D E S I G N 50 % DECREASE IN HARD BOUNCES .inline validation REALTIME FEEDBACK
  33. 33. T E S T D E S I G N mobile screen Help, error and success messages .inline validation REALTIME FEEDBACK
  34. 34. T E S T D E S I G N desktop screen Help, error and success messages Use inline text more effectively .inline validation REALTIME FEEDBACK
  35. 35. T E S T D E S I G N .single coherent entity People perceive name as a ‘single coherent entity’
  36. 36. T E S T D E S I G N http://zdfs.github.io/toscani/paymentInfo/index.html .payment info
  37. 37. T E S T D E S I G N .payment info
  38. 38. T E S T D E S I G N .3 field checkout form DIGITAL CONTENT TYPE E-MAIL PAYMENT INFO STAY ON KEYS REDUCED CONTROLS
  39. 39. T E S T D E S I G N .drop-down menu 4 TAB OPERATION
  40. 40. T E S T D E S I G N .stepper Instead of drop-down menu use stepper if possible - Increase or decrease value by a constant amount. - To make small adjustments to a value.
  41. 41. T E S T D E S I G N .stepper - Increase or decrease value by a constant amount. - To make small adjustments to a value. Stepper: Only up to 8 guests Drop-down menu
  42. 42. T E S T D E S I G N .action sheet - use it for dialog or pop up instead of drop-down menu Instead of drop-down menu use action sheet if possible
  43. 43. T E S T D E S I G N .canvas menu - it works on web and mobile screens. Instead of drop-down menu use canvas menu if possible 1 2
  44. 44. T E S T D E S I G N 44 .right keyboard Give Users the Right Keyboard on Mobile Forms
  45. 45. T E S T D E S I G N 1 2 3 .jump right into input
  46. 46. T E S T D E S I G N 1 2 .jump right into input
  47. 47. T E S T D E S I G N .thank you

×