Your SlideShare is downloading. ×
0
Web and mobile forms design (Chui Chui Tan) - UserFriendly 2010 workshop
Web and mobile forms design (Chui Chui Tan) - UserFriendly 2010 workshop
Web and mobile forms design (Chui Chui Tan) - UserFriendly 2010 workshop
Web and mobile forms design (Chui Chui Tan) - UserFriendly 2010 workshop
Web and mobile forms design (Chui Chui Tan) - UserFriendly 2010 workshop
Web and mobile forms design (Chui Chui Tan) - UserFriendly 2010 workshop
Web and mobile forms design (Chui Chui Tan) - UserFriendly 2010 workshop
Web and mobile forms design (Chui Chui Tan) - UserFriendly 2010 workshop
Web and mobile forms design (Chui Chui Tan) - UserFriendly 2010 workshop
Web and mobile forms design (Chui Chui Tan) - UserFriendly 2010 workshop
Web and mobile forms design (Chui Chui Tan) - UserFriendly 2010 workshop
Web and mobile forms design (Chui Chui Tan) - UserFriendly 2010 workshop
Web and mobile forms design (Chui Chui Tan) - UserFriendly 2010 workshop
Web and mobile forms design (Chui Chui Tan) - UserFriendly 2010 workshop
Web and mobile forms design (Chui Chui Tan) - UserFriendly 2010 workshop
Web and mobile forms design (Chui Chui Tan) - UserFriendly 2010 workshop
Web and mobile forms design (Chui Chui Tan) - UserFriendly 2010 workshop
Web and mobile forms design (Chui Chui Tan) - UserFriendly 2010 workshop
Web and mobile forms design (Chui Chui Tan) - UserFriendly 2010 workshop
Web and mobile forms design (Chui Chui Tan) - UserFriendly 2010 workshop
Web and mobile forms design (Chui Chui Tan) - UserFriendly 2010 workshop
Web and mobile forms design (Chui Chui Tan) - UserFriendly 2010 workshop
Web and mobile forms design (Chui Chui Tan) - UserFriendly 2010 workshop
Web and mobile forms design (Chui Chui Tan) - UserFriendly 2010 workshop
Web and mobile forms design (Chui Chui Tan) - UserFriendly 2010 workshop
Web and mobile forms design (Chui Chui Tan) - UserFriendly 2010 workshop
Web and mobile forms design (Chui Chui Tan) - UserFriendly 2010 workshop
Web and mobile forms design (Chui Chui Tan) - UserFriendly 2010 workshop
Web and mobile forms design (Chui Chui Tan) - UserFriendly 2010 workshop
Web and mobile forms design (Chui Chui Tan) - UserFriendly 2010 workshop
Web and mobile forms design (Chui Chui Tan) - UserFriendly 2010 workshop
Web and mobile forms design (Chui Chui Tan) - UserFriendly 2010 workshop
Web and mobile forms design (Chui Chui Tan) - UserFriendly 2010 workshop
Web and mobile forms design (Chui Chui Tan) - UserFriendly 2010 workshop
Web and mobile forms design (Chui Chui Tan) - UserFriendly 2010 workshop
Web and mobile forms design (Chui Chui Tan) - UserFriendly 2010 workshop
Web and mobile forms design (Chui Chui Tan) - UserFriendly 2010 workshop
Web and mobile forms design (Chui Chui Tan) - UserFriendly 2010 workshop
Web and mobile forms design (Chui Chui Tan) - UserFriendly 2010 workshop
Web and mobile forms design (Chui Chui Tan) - UserFriendly 2010 workshop
Web and mobile forms design (Chui Chui Tan) - UserFriendly 2010 workshop
Web and mobile forms design (Chui Chui Tan) - UserFriendly 2010 workshop
Web and mobile forms design (Chui Chui Tan) - UserFriendly 2010 workshop
Web and mobile forms design (Chui Chui Tan) - UserFriendly 2010 workshop
Web and mobile forms design (Chui Chui Tan) - UserFriendly 2010 workshop
Web and mobile forms design (Chui Chui Tan) - UserFriendly 2010 workshop
Web and mobile forms design (Chui Chui Tan) - UserFriendly 2010 workshop
Web and mobile forms design (Chui Chui Tan) - UserFriendly 2010 workshop
Web and mobile forms design (Chui Chui Tan) - UserFriendly 2010 workshop
Web and mobile forms design (Chui Chui Tan) - UserFriendly 2010 workshop
Web and mobile forms design (Chui Chui Tan) - UserFriendly 2010 workshop
Web and mobile forms design (Chui Chui Tan) - UserFriendly 2010 workshop
Web and mobile forms design (Chui Chui Tan) - UserFriendly 2010 workshop
Web and mobile forms design (Chui Chui Tan) - UserFriendly 2010 workshop
Web and mobile forms design (Chui Chui Tan) - UserFriendly 2010 workshop
Web and mobile forms design (Chui Chui Tan) - UserFriendly 2010 workshop
Web and mobile forms design (Chui Chui Tan) - UserFriendly 2010 workshop
Web and mobile forms design (Chui Chui Tan) - UserFriendly 2010 workshop
Web and mobile forms design (Chui Chui Tan) - UserFriendly 2010 workshop
Web and mobile forms design (Chui Chui Tan) - UserFriendly 2010 workshop
Web and mobile forms design (Chui Chui Tan) - UserFriendly 2010 workshop
Web and mobile forms design (Chui Chui Tan) - UserFriendly 2010 workshop
Web and mobile forms design (Chui Chui Tan) - UserFriendly 2010 workshop
Web and mobile forms design (Chui Chui Tan) - UserFriendly 2010 workshop
Web and mobile forms design (Chui Chui Tan) - UserFriendly 2010 workshop
Web and mobile forms design (Chui Chui Tan) - UserFriendly 2010 workshop
Web and mobile forms design (Chui Chui Tan) - UserFriendly 2010 workshop
Web and mobile forms design (Chui Chui Tan) - UserFriendly 2010 workshop
Web and mobile forms design (Chui Chui Tan) - UserFriendly 2010 workshop
Web and mobile forms design (Chui Chui Tan) - UserFriendly 2010 workshop
Web and mobile forms design (Chui Chui Tan) - UserFriendly 2010 workshop
Web and mobile forms design (Chui Chui Tan) - UserFriendly 2010 workshop
Web and mobile forms design (Chui Chui Tan) - UserFriendly 2010 workshop
Web and mobile forms design (Chui Chui Tan) - UserFriendly 2010 workshop
Web and mobile forms design (Chui Chui Tan) - UserFriendly 2010 workshop
Web and mobile forms design (Chui Chui Tan) - UserFriendly 2010 workshop
Web and mobile forms design (Chui Chui Tan) - UserFriendly 2010 workshop
Web and mobile forms design (Chui Chui Tan) - UserFriendly 2010 workshop
Web and mobile forms design (Chui Chui Tan) - UserFriendly 2010 workshop
Web and mobile forms design (Chui Chui Tan) - UserFriendly 2010 workshop
Web and mobile forms design (Chui Chui Tan) - UserFriendly 2010 workshop
Web and mobile forms design (Chui Chui Tan) - UserFriendly 2010 workshop
Web and mobile forms design (Chui Chui Tan) - UserFriendly 2010 workshop
Web and mobile forms design (Chui Chui Tan) - UserFriendly 2010 workshop
Web and mobile forms design (Chui Chui Tan) - UserFriendly 2010 workshop
Web and mobile forms design (Chui Chui Tan) - UserFriendly 2010 workshop
Web and mobile forms design (Chui Chui Tan) - UserFriendly 2010 workshop
Web and mobile forms design (Chui Chui Tan) - UserFriendly 2010 workshop
Web and mobile forms design (Chui Chui Tan) - UserFriendly 2010 workshop
Web and mobile forms design (Chui Chui Tan) - UserFriendly 2010 workshop
Web and mobile forms design (Chui Chui Tan) - UserFriendly 2010 workshop
Web and mobile forms design (Chui Chui Tan) - UserFriendly 2010 workshop
Web and mobile forms design (Chui Chui Tan) - UserFriendly 2010 workshop
Web and mobile forms design (Chui Chui Tan) - UserFriendly 2010 workshop
Web and mobile forms design (Chui Chui Tan) - UserFriendly 2010 workshop
Web and mobile forms design (Chui Chui Tan) - UserFriendly 2010 workshop
Web and mobile forms design (Chui Chui Tan) - UserFriendly 2010 workshop
Web and mobile forms design (Chui Chui Tan) - UserFriendly 2010 workshop
Web and mobile forms design (Chui Chui Tan) - UserFriendly 2010 workshop
Web and mobile forms design (Chui Chui Tan) - UserFriendly 2010 workshop
Web and mobile forms design (Chui Chui Tan) - UserFriendly 2010 workshop
Web and mobile forms design (Chui Chui Tan) - UserFriendly 2010 workshop
Web and mobile forms design (Chui Chui Tan) - UserFriendly 2010 workshop
Web and mobile forms design (Chui Chui Tan) - UserFriendly 2010 workshop
Web and mobile forms design (Chui Chui Tan) - UserFriendly 2010 workshop
Web and mobile forms design (Chui Chui Tan) - UserFriendly 2010 workshop
Web and mobile forms design (Chui Chui Tan) - UserFriendly 2010 workshop
Web and mobile forms design (Chui Chui Tan) - UserFriendly 2010 workshop
Web and mobile forms design (Chui Chui Tan) - UserFriendly 2010 workshop
Web and mobile forms design (Chui Chui Tan) - UserFriendly 2010 workshop
Web and mobile forms design (Chui Chui Tan) - UserFriendly 2010 workshop
Web and mobile forms design (Chui Chui Tan) - UserFriendly 2010 workshop
Web and mobile forms design (Chui Chui Tan) - UserFriendly 2010 workshop
Web and mobile forms design (Chui Chui Tan) - UserFriendly 2010 workshop
Web and mobile forms design (Chui Chui Tan) - UserFriendly 2010 workshop
Web and mobile forms design (Chui Chui Tan) - UserFriendly 2010 workshop
Web and mobile forms design (Chui Chui Tan) - UserFriendly 2010 workshop
Web and mobile forms design (Chui Chui Tan) - UserFriendly 2010 workshop
Web and mobile forms design (Chui Chui Tan) - UserFriendly 2010 workshop
Web and mobile forms design (Chui Chui Tan) - UserFriendly 2010 workshop
Web and mobile forms design (Chui Chui Tan) - UserFriendly 2010 workshop
Web and mobile forms design (Chui Chui Tan) - UserFriendly 2010 workshop
Web and mobile forms design (Chui Chui Tan) - UserFriendly 2010 workshop
Web and mobile forms design (Chui Chui Tan) - UserFriendly 2010 workshop
Web and mobile forms design (Chui Chui Tan) - UserFriendly 2010 workshop
Web and mobile forms design (Chui Chui Tan) - UserFriendly 2010 workshop
Web and mobile forms design (Chui Chui Tan) - UserFriendly 2010 workshop
Web and mobile forms design (Chui Chui Tan) - UserFriendly 2010 workshop
Web and mobile forms design (Chui Chui Tan) - UserFriendly 2010 workshop
Web and mobile forms design (Chui Chui Tan) - UserFriendly 2010 workshop
Web and mobile forms design (Chui Chui Tan) - UserFriendly 2010 workshop
Web and mobile forms design (Chui Chui Tan) - UserFriendly 2010 workshop
Web and mobile forms design (Chui Chui Tan) - UserFriendly 2010 workshop
Web and mobile forms design (Chui Chui Tan) - UserFriendly 2010 workshop
Web and mobile forms design (Chui Chui Tan) - UserFriendly 2010 workshop
Web and mobile forms design (Chui Chui Tan) - UserFriendly 2010 workshop
Web and mobile forms design (Chui Chui Tan) - UserFriendly 2010 workshop
Web and mobile forms design (Chui Chui Tan) - UserFriendly 2010 workshop
Web and mobile forms design (Chui Chui Tan) - UserFriendly 2010 workshop
Web and mobile forms design (Chui Chui Tan) - UserFriendly 2010 workshop
Web and mobile forms design (Chui Chui Tan) - UserFriendly 2010 workshop
Web and mobile forms design (Chui Chui Tan) - UserFriendly 2010 workshop
Web and mobile forms design (Chui Chui Tan) - UserFriendly 2010 workshop
Web and mobile forms design (Chui Chui Tan) - UserFriendly 2010 workshop
Web and mobile forms design (Chui Chui Tan) - UserFriendly 2010 workshop
Web and mobile forms design (Chui Chui Tan) - UserFriendly 2010 workshop
Web and mobile forms design (Chui Chui Tan) - UserFriendly 2010 workshop
Web and mobile forms design (Chui Chui Tan) - UserFriendly 2010 workshop
Web and mobile forms design (Chui Chui Tan) - UserFriendly 2010 workshop
Web and mobile forms design (Chui Chui Tan) - UserFriendly 2010 workshop
Web and mobile forms design (Chui Chui Tan) - UserFriendly 2010 workshop
Web and mobile forms design (Chui Chui Tan) - UserFriendly 2010 workshop
Web and mobile forms design (Chui Chui Tan) - UserFriendly 2010 workshop
Web and mobile forms design (Chui Chui Tan) - UserFriendly 2010 workshop
Web and mobile forms design (Chui Chui Tan) - UserFriendly 2010 workshop
Web and mobile forms design (Chui Chui Tan) - UserFriendly 2010 workshop
Web and mobile forms design (Chui Chui Tan) - UserFriendly 2010 workshop
Web and mobile forms design (Chui Chui Tan) - UserFriendly 2010 workshop
Web and mobile forms design (Chui Chui Tan) - UserFriendly 2010 workshop
Web and mobile forms design (Chui Chui Tan) - UserFriendly 2010 workshop
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Web and mobile forms design (Chui Chui Tan) - UserFriendly 2010 workshop

29,270

Published on

Web and mobile forms design slides for UPAChina UserFriendly 2010 workshop

Web and mobile forms design slides for UPAChina UserFriendly 2010 workshop

Published in: Design
7 Comments
73 Likes
Statistics
Notes
No Downloads
Views
Total Views
29,270
On Slideshare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
Downloads
873
Comments
7
Likes
73
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. http://www.flickr.com/photos/anotogroup/4829620481/ Designing Web and Mobile Forms chuichui.tan@cxpartners.co.uk @ChuiSquared (SinaWeibo,Twitter) Chui ChuiTan 陈璀璀 Monday, 22 November 2010
  • 2. http://www.flickr.com/photos/aok/2317942287/ Why forms Forms are everywhere for different purposes Monday, 22 November 2010
  • 3. http://www.flickr.com/photos/mikeblogs/2849934090/ People hate filling in forms... http://www.flickr.com/photos/evilerin/3078856253/ Monday, 22 November 2010
  • 4. http://www.flickr.com/photos/evilerin/3078856253/ How users complained about filling in forms on Twitter Monday, 22 November 2010
  • 5. http://www.flickr.com/photos/mikeblogs/2849934090/ http://www.flickr.com/photos/evilerin/3078856253/ How users complained about filling in forms on Sina Weibo Monday, 22 November 2010
  • 6. http://www.flickr.com/photos/evilerin/3078856253/ It’s about the experience http://www.flickr.com/photos/furious-angel/297586977/ It’s the experience that counts. Not just the speed of completion. Monday, 22 November 2010
  • 7. http://www.flickr.com/photos/evilerin/3078856253/ Being in control http://www.flickr.com/photos/mcbeth/261263730/ Users want to feel in control Monday, 22 November 2010
  • 8. http://www.flickr.com/photos/mikeblogs/2849934090/ http://www.flickr.com/photos/evilerin/3078856253/ Why do I need to fill in this form? 为什么我需填写这表格? Monday, 22 November 2010
  • 9. http://www.flickr.com/photos/evilerin/3078856253/ Remind them.... Remind them about the benefits of filling in the form Monday, 22 November 2010
  • 10. http://www.flickr.com/photos/evilerin/3078856253/ ... why they are filling in this form Monday, 22 November 2010
  • 11. http://www.flickr.com/photos/evilerin/3078856253/ ... how long it takes Being up front about the time required to complete the form Monday, 22 November 2010
  • 12. Form layout 表格布局 Monday, 22 November 2010
  • 13. Avoid multicolumn layout especially when the flow of your form is particularly important. It’s impossible to guess which order your users are going to go for. Monday, 22 November 2010
  • 14. Longer gaze fixation Shorter gaze fixation Design to look like a single piece of information (e.g. sharing a single label, putting the fields close to each other. Exceptional cases where you can have >1 fields in a row, e.g. name, dates, time. Monday, 22 November 2010
  • 15. http://www.flickr.com/photos/mikeblogs/2849934090/ http://www.flickr.com/photos/evilerin/3078856253/ Labelling 标签 Each label alignment has pros and cons. Monday, 22 November 2010
  • 16. Left aligned Complete the form below: Your email address Your password Confirm password First name * Surname * Monday, 22 November 2010
  • 17. Left aligned Complete the form below: Your email address Your password Confirm password First name * Surname * Good points: ✓Tidier, clear layout ✓Easy to scan (labels) ✓High readability Weak points: ‣ Longer completion time (higher number of eye fixations, 2 visual directions) ‣ Doesn’t work when you have long labels ‣ Might not work for all languages (important if you are designing for international websites) 1 2 3 4 5 6 7 8 9 10 11 Monday, 22 November 2010
  • 18. Right aligned Monday, 22 November 2010
  • 19. Right aligned Good points: ✓ Label widths offer more flexibility ✓ Labels are closer to the input fields Weak points: ‣ Longer completion time (due to higher number of eye fixations) ‣ Doesn’t work when you have long labels ‣ Might not work for all languages (important if you are designing for international websites) 1 2 3 4 5 6 7 8 9 10 Monday, 22 November 2010
  • 20. Top aligned Monday, 22 November 2010
  • 21. 1 2 3 4 3 4 3 Top aligned Good points: ✓ Shorter completion time (less eye fixation, 1 visual direction) ✓ Works for long labels (useful for forms which require localisation) Weak points: ‣ Requires more vertical screen space ‣ Form might look longer ‣ Requires good design of labels and input fields (distance and spaces) Monday, 22 November 2010
  • 22. Below the fields Good points: ✓ Neat and tidy ✓ Easy to scan (labels) Weak points: ‣ Requires good design of labels and input fields (distance and spaces) Monday, 22 November 2010
  • 23. Inline labelling Monday, 22 November 2010
  • 24. Be wary when using inline labelling Nice and tidy, but... Make sure labels always appear in all situations when input is not entered. Differentiate labels from users’ input Monday, 22 November 2010
  • 25. How to do it Each label alignment has pros and cons. Choose one which suits to your form layout, design constraint, form objective, etc. Monday, 22 November 2010
  • 26. Mandatory or optional 必填或选填 Monday, 22 November 2010
  • 27. Asterisk * Not all users know what an asterisk means Asterisk indication is often placed at the inappropriate place, e.g. not following the right flow Monday, 22 November 2010
  • 28. Asterisk * Monday, 22 November 2010
  • 29. Asterisk * Monday, 22 November 2010
  • 30. No fixation at all Users often don’t pay attention to the indication. Monday, 22 November 2010
  • 31. Postcode (mandatory) Address line 1 * Address line 2 * Delivery instructions Town/city * Post code * Country United Kingdom Telephone number (day) ** Mobile number ** Click here if you can’t find your postcode or your address is outside of the UK * required ** We required at least one telephone number Double asterisks Sometimes asterisks are used not only to indicate mandatory fields.... Monday, 22 November 2010
  • 32. Sometimes an asterisk is used to call out a footnote Monday, 22 November 2010
  • 33. ‘Required’ the term ‘Required’ is often used to indicate mandatory fields -> increase visual clutter Monday, 22 November 2010
  • 34. (Optional) Monday, 22 November 2010
  • 35. All required When all fields are required.. Monday, 22 November 2010
  • 36. All fields are required Monday, 22 November 2010
  • 37. When all fields are required for a long form... Monday, 22 November 2010
  • 38. Ask yourself... “Is this piece of information so valuable that it’s worth risking the possibility that users might leave your site?” Monday, 22 November 2010
  • 39. Case Study: Imaginary Landscape Contact Us form Simplified their contact form from: 12 fields (4 required) to 4 fields Monday, 22 November 2010
  • 40. Results Number of forms submitted Conversion rate 140% 120% Monday, 22 November 2010
  • 41. Imaginary Landscape Case Study Making forms more efficient Number of fields available NOT number of required fields Monday, 22 November 2010
  • 42. Grouping & chunking 表格分割和分组 Monday, 22 November 2010
  • 43. Without grouping and chunking Monday, 22 November 2010
  • 44. With grouping and chunking: Break the form into manageable chunks, putting relevant fields together to make it ‘feel’ shorter Monday, 22 November 2010
  • 45. Chunking Separate them with simple horizontal lines... Monday, 22 November 2010
  • 46. Chunking ... or via shaded headings... Monday, 22 November 2010
  • 47. Chunking ... or coloured boxes Monday, 22 November 2010
  • 48. http://www.flickr.com/photos/evilerin/3078856253/ Grouping & chunking Users don’t normally pay attention to the headers... Monday, 22 November 2010
  • 49. Grouping & chunking .... unless they’re shaded or coloured. Emphasise the headers if you want your users to read them Monday, 22 November 2010
  • 50. Input format 输入格式 Monday, 22 November 2010
  • 51. Input Formatting E.g. Click to find out about the input formatting Various ways to explain about the input formatting Monday, 22 November 2010
  • 52. Input Formatting E.g. Long description about the input formatting Monday, 22 November 2010
  • 53. Input Formatting E.g. Short description beside the label Monday, 22 November 2010
  • 54. Input Formatting When there is no indication of how a mobile phone number should be entered, make sure your system can accept all kinds of formatting Monday, 22 November 2010
  • 55. 07712341234 UK phone number 07712 341234 00 44 7712 341234 (44) 7712 341234 +44 (0) 7712 341234 07712 341 234 077 1234 1234 (10) 69345464 China phone number 86 10-69345464 86-10-69345464 010-69345464 Phone numbers can be presented in various formats Monday, 22 November 2010
  • 56. Input Formatting Show input boxes which match with the acceptable format Monday, 22 November 2010
  • 57. Input Formatting Or show an example of the acceptable input format Monday, 22 November 2010
  • 58. Input Formatting Monday, 22 November 2010
  • 59. Tell them in advanced (clearly) the acceptable format 电话 示例:010-12345678-0000 Provide fields following the acceptable format Credit card number Let the system handle all the formatting, if possible If it looks flexible, make sure it is flexible Use a good system validation and provide clear error message Best option Monday, 22 November 2010
  • 60. Ultimate rule The system should handle the formatting NOT the users Monday, 22 November 2010
  • 61. Tips & descriptions 备注和提示 Monday, 22 November 2010
  • 62. Why (do we use tips and descriptions) To explain why you need this information Transparency encourages users to provide their details Monday, 22 November 2010
  • 63. Why (do we use tips and descriptions) To describe the acceptable input format Monday, 22 November 2010
  • 64. Where (do tips and descriptions appear) Monday, 22 November 2010
  • 65. Where (do tips and descriptions appear) Monday, 22 November 2010
  • 66. Where : Proximity Space Inappropriate use of space Monday, 22 November 2010
  • 67. Where : Proximity At the end At the bottom Inconsistent position Monday, 22 November 2010
  • 68. Where : Position Password: * Confirm Password: * *Your password must be between 7 and 20 characters in length *Your password must contain both letters and numbers Inappropriate position Monday, 22 November 2010
  • 69. “Looks like there’s a huge chunk of writing, very messy. I didn’t read them.” Descriptions underneath fields can easily clutter the page (especially if they are not differentiated visually from the labels) Monday, 22 November 2010
  • 70. What (should the descriptions show) Password: * Confirm Password: * 7 to 20 letters and numbers Short, succinct, straight to the point Password: * Confirm Password: * *Your password must be between 7 and 20 characters in length *Your password must contain both letters and numbers Avoid long winded, unnecessary wordings Monday, 22 November 2010
  • 71. How (descriptions are being presented) Placed around the labels or input fields (most common) Monday, 22 November 2010
  • 72. Placed around the labels or input fields (most common) How (descriptions are being presented) Monday, 22 November 2010
  • 73. How (descriptions are being presented) Appear when hover over (users could easily miss the descriptions. Suitable to be used when the descriptions are not too important or are not for everyone) Monday, 22 November 2010
  • 74. How (descriptions are being presented) Real time and inline descriptions Monday, 22 November 2010
  • 75. How (descriptions are being presented) Another example of real time descriptions Monday, 22 November 2010
  • 76. Consistent position Close to relevant fields Spaces and proximity Where Meaningful, useful Short, succinct, straight to the point What Depending on the type of tips (e.g. importance, urgency, who are they for) Depending on the content (e.g. length, purpose, importance) How Only when it’s necessaryWhen Be wary when using realtime description Monday, 22 November 2010
  • 77. Validations 效验 Monday, 22 November 2010
  • 78. Realtime validation Be wary when using real time feedback: Useful when needs to be conveyed urgently and requires instant attention Monday, 22 November 2010
  • 79. Realtime validationValidation upon submit Luke’s validation test Monday, 22 November 2010
  • 80. Results:Validation upon submitVs Realtime validation Realtime validation Success rates Errors made 22% 22% Satisfaction rating 31% Completion times 42% Number of eye fixations 47% Monday, 22 November 2010
  • 81. Be wary when using realtime validations +ve: “The tick is useful. It saves the hassle of having to recheck what I’ve put in.” -ve: “How could they know if I enter my name wrongly? The tick is quite distracting.” Monday, 22 November 2010
  • 82. Be wary when using realtime validations Only when answers are not obvious/not straightforward When At the end of the input fieldsWhere Prominently (avoid fading away)How long What Clear about what the feedback means (e.g. correct input, correct format, availability) (for information that needs to be conveyed urgently and requires users’ instant attention) Monday, 22 November 2010
  • 83. Error handling 当表单出现错误,该如何处理 Monday, 22 November 2010
  • 84. Where: On top of the form Error messages often appear on top of the form Monday, 22 November 2010
  • 85. Where: Highlight the error Indicate where the errors are: highlight the relevant fields Monday, 22 November 2010
  • 86. Where: Highlight the error Monday, 22 November 2010
  • 87. Where: Highlight and anchor to the section If it’s a long form, anchor to the first field with error Monday, 22 November 2010
  • 88. Where: Close to the relevant fields Show errors close to the relevant fields Monday, 22 November 2010
  • 89. What: Meaningful error message Provide meaningful error message Monday, 22 November 2010
  • 90. What: Direct to the point First version: too many unnecessary wordings. New version: straight to the point Monday, 22 November 2010
  • 91. Meaningful error messages Meaningful & contextual messageWhat’s wrong Where: which field(s) What has/hasn’t happened How to resolve “There was an error in our credit card processing system. Your card has not been charged.....” Highlight the relevant fields “.... please try again in 5 minutes or call us at xxxxxxxxxx.” (with quick call to action, what’s next, what should I do now) Monday, 22 November 2010
  • 92. Design: size, colours 设计:输入框尺寸,颜色 Monday, 22 November 2010
  • 93. Colours Be wary when using red colour in a form as it often used to indicate errors Monday, 22 November 2010
  • 94. Colours Monday, 22 November 2010
  • 95. Colours Monday, 22 November 2010
  • 96. Fields size Label Give sufficient roo m to enter and read their input Cardholder name Card number Security code Sufficient space to type and read Use appropriate field width (give context/hints on what input is required) 16 digits 3 digits Monday, 22 November 2010
  • 97. Size Monday, 22 November 2010
  • 98. Primary & secondary buttons ContinueCancel Primary buttonSecondary button Continue< Back Address Town / City County Postcode Optional Continue Cancel Address Town / City County Postcode Optional Differentiate primary and secondary call to actions. The latter should be visually less distinctive, smaller size) Monday, 22 November 2010
  • 99. Flow 表格流程 Monday, 22 November 2010
  • 100. Flow Get the flow of the form right in terms of what and where each field or description should be placed. Monday, 22 November 2010
  • 101. House number 22 Street Queen Square Town or City Bristol Postcode BS1 4ND Country UK Western address: from house number to country Monday, 22 November 2010
  • 102. 国家 省 市 区 街道地址 China address: from country to house number Monday, 22 November 2010
  • 103. What else.... 其它 Monday, 22 November 2010
  • 104. What else Avoid requiring users to reenter their details (e.g. after errors occur) No complex or legalistic statement Monday, 22 November 2010
  • 105. What we can learn No tricks or confusions Being in control Clear and simple Appropriate feedback Monday, 22 November 2010
  • 106. http://www.flickr.com/photos/mikeblogs/2849934090/ http://www.flickr.com/photos/bigd2112/3649132473/ Designing Mobile Forms Monday, 22 November 2010
  • 107. http://www.flickr.com/photos/ari/4727219010/ Small screen Sun/light reflection Multitasking Busy & crowded Under pressure (time restriction) Slow connection Monday, 22 November 2010
  • 108. Quick . Easy . Error prone . Infallible Monday, 22 November 2010
  • 109. Mobile versionWeb version Mobile version: Can be a simplified version of your Web version (without distractions, ads, promotions, images). Monday, 22 November 2010
  • 110. Mobile versionWeb version Mobile version: Can be completely different (simpler and cleaner) Monday, 22 November 2010
  • 111. Mobile version Mobile version: Can be the same with slight changes of the layout, such as label alignment Monday, 22 November 2010
  • 112. Mobile version Mobile version: Can be the same with slight changes of the layout, such as label alignment Monday, 22 November 2010
  • 113. General guidelines for mobile forms (apply across all operating systems and platforms) Use iOS as examples http://www.flickr.com/photos/27048731@N03/3506681531/ The guidelines presented in this workshop can be applied across various operating systems and Monday, 22 November 2010
  • 114. Labelling 标签 Monday, 22 November 2010
  • 115. Left aligned label is not suitable for mobile form. When users zoom in, they are not able to see the entire label. Monday, 22 November 2010
  • 116. Monday, 22 November 2010
  • 117. Monday, 22 November 2010
  • 118. Top aligned label is more suitable for mobile forms. Monday, 22 November 2010
  • 119. Left- and right-aligned labelling are also not suitable for long labels Monday, 22 November 2010
  • 120. Simplified :: Remove 简单化 :: 删除 Monday, 22 November 2010
  • 121. Remove tips & help Simplified - by removing tips and help Monday, 22 November 2010
  • 122. Remove tips & help Simplified - by removing tips and help Monday, 22 November 2010
  • 123. Remove ‘not so important’ fields Simplified - by removing ‘not so important’ fields Monday, 22 November 2010
  • 124. Simplified :: Combining 简单化 :: 结合 Monday, 22 November 2010
  • 125. Combine three search features into one input field 1 2 3 Simplified - by combining various input options into a single input field (Note: be wary when using this approach. Ensure it is clear or obvious) Monday, 22 November 2010
  • 126. Simplified :: Improvise 简单化 :: 即 更改 Monday, 22 November 2010
  • 127. 139 countries Monday, 22 November 2010
  • 128. Australia Austria Belgium Bulgaria Canada Croatia Cyprus Czech Republic Denmark Dubai Finland France Germany Great Britain Greece Guadeloupe Hungary Ireland Italy Luxembourg Malta Martinique Mexico Morocco Netherlands New Zealand Norway Poland Portugal Reunion Island Romania Slovak Republic South Africa Spain Sweden Switzerland Syria Tunisia Turkey USA 40 countries Make good use of the functionalities which come with mobile phones , such as ‘locate’. Monday, 22 November 2010
  • 129. Multiple stages 多步骤表格 Monday, 22 November 2010
  • 130. Long drop downs for both ‘From ‘ and ‘To’ Monday, 22 November 2010
  • 131. Step 1 Step 2 Step 3 Simplified - Divide into a few little steps Monday, 22 November 2010
  • 132. Changing input elements & menu controls 更改输入方法 Monday, 22 November 2010
  • 133. Enter e-ticket number or booking code E-ticket number or Booking code Use different menu and input fields to simplify the form (mobile version) Monday, 22 November 2010
  • 134. Monday, 22 November 2010
  • 135. Monday, 22 November 2010
  • 136. Web version Web version requires more click for date input Monday, 22 November 2010
  • 137. Mobile version Mobile version: Simplified from drop down menu to calendar input (only a single click is required) Monday, 22 November 2010
  • 138. Mobile version Mobile version: Simplified from drop down menu to calendar input (only a single click is required) Monday, 22 November 2010
  • 139. Mobile version Mobile version: Simplified from drop down menu to calendar input (only a single click is required) Monday, 22 November 2010
  • 140. Using tabs on the mobile version instead of radio buttons Monday, 22 November 2010
  • 141. 151 countries Changing from a long drop down menu to free text predictive search Monday, 22 November 2010
  • 142. Using links (similar function as tabs) on the mobile version instead of drop downs Monday, 22 November 2010
  • 143. Using links (similar function as tabs) on the mobile version instead of drop downs Monday, 22 November 2010
  • 144. Using links (similar function as tabs) on the mobile version instead of drop downs Monday, 22 November 2010
  • 145. List selection 列表选择 Monday, 22 November 2010
  • 146. Predictive free input search is useful when: 1. It has a long list where a long drop down might not be appropriate 2. Users roughly know what they are looking for Monday, 22 November 2010
  • 147. The list shouldn’t be too long and users have to have a rough idea of what they are looking for Can’t find what they want Monday, 22 November 2010
  • 148. Drop downs Monday, 22 November 2010
  • 149. Drop downs: Length Drop downs: not suitable when it has lengthy options Monday, 22 November 2010
  • 150. Drop downs: List order Not suitable when: 1. It’s in a random order 2. When users are unlikely to know what they are looking for Monday, 22 November 2010
  • 151. Drop downs: List order Not suitable when: 1. It’s in a random order 2. When users are unlikely to know what they are looking for Monday, 22 November 2010
  • 152. Drop downs: List order Not suitable when: 1. It’s in a random order 2. When users are unlikely to know what they are looking for Monday, 22 November 2010
  • 153. Drop downs: List order Not suitable when: 1. It’s in a random order 2. When users are unlikely to know what they are looking for Monday, 22 November 2010
  • 154. Target size & spacing 尺寸和空间/距离 Monday, 22 November 2010
  • 155. Touch target : > 9mm (34 pixels ) Exceptional case: > 7mm (26 pixels) Space between controls: > 2mm (8 pixels) Target minimum sizes: • 7 x 7 mm with 1 mm gaps for index finger usage • 8 x 8 mm with 2 mm gaps for thumb usage • List type of components (e.g. radio buttons): minimum 5 mm line space Tap targets: 44 pixels (approx. 7mm / over 1/4 inch with iPhone’s 163 ppi screen resolution) Windows Phone 7 (UI Design and Interaction Guide) Nokia (Touch UI Guide) Apple (Human Interface Guidelines) Monday, 22 November 2010
  • 156. Monday, 22 November 2010
  • 157. ~ Dan Saffer ~ Designing Gestural Interfaces Target size (in inches): Target = (target size in inches) x (screen width in pixels) / (screen width in inches) Monday, 22 November 2010
  • 158. Simple and easy to use Minimise required input Minimise options Simple and usable interaction Remove distraction and clutter Monday, 22 November 2010
  • 159. What else.... http://www.cxpartners.co.uk/thoughts/ web_forms_design_guidelines_an_eyetracking_study.htm Monday, 22 November 2010
  • 160. chuichui.tan@cxpartners.co.uk @ChuiSquared (SinaWeibo,Twitter) Chui Chui Tan 陈璀璀 I’m writing whitepapers for Web form design and Mobile form design which will be available for free download. Follow me @ChuiSquared on Twitter or Sina Weibo to receive alerts when they are available. Monday, 22 November 2010

×