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

32,464 views
31,903 views

Published on

Web and mobile forms design slides for UPAChina UserFriendly 2010 workshop

Published in: Design
8 Comments
74 Likes
Statistics
Notes
  • Hi All, We are planning to start Hadoop online training batch on this week... If any one interested to attend the demo please register in our website... For this batch we are also provide everyday recorded sessions with Materials. For more information feel free to contact us : siva@keylabstraining.com. For Course Content and Recorded Demo Click Here : http://www.keylabstraining.com/hadoop-online-training-hyderabad-bangalore
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • cant download the video
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • WOW.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Great review.
    Thanks a lot!!! It's very useful!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Very good analysis, thanks a lot!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
32,464
On SlideShare
0
From Embeds
0
Number of Embeds
9,683
Actions
Shares
0
Downloads
924
Comments
8
Likes
74
Embeds 0
No embeds

No notes for slide

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

  1. 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. 2. http://www.flickr.com/photos/aok/2317942287/ Why forms Forms are everywhere for different purposes Monday, 22 November 2010
  3. 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. 4. http://www.flickr.com/photos/evilerin/3078856253/ How users complained about filling in forms on Twitter Monday, 22 November 2010
  5. 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. 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. 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. 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. 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. 10. http://www.flickr.com/photos/evilerin/3078856253/ ... why they are filling in this form Monday, 22 November 2010
  11. 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. 12. Form layout 表格布局 Monday, 22 November 2010
  13. 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. 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. 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. 16. Left aligned Complete the form below: Your email address Your password Confirm password First name * Surname * Monday, 22 November 2010
  17. 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. 18. Right aligned Monday, 22 November 2010
  19. 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. 20. Top aligned Monday, 22 November 2010
  21. 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. 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. 23. Inline labelling Monday, 22 November 2010
  24. 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. 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. 26. Mandatory or optional 必填或选填 Monday, 22 November 2010
  27. 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. 28. Asterisk * Monday, 22 November 2010
  29. 29. Asterisk * Monday, 22 November 2010
  30. 30. No fixation at all Users often don’t pay attention to the indication. Monday, 22 November 2010
  31. 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. 32. Sometimes an asterisk is used to call out a footnote Monday, 22 November 2010
  33. 33. ‘Required’ the term ‘Required’ is often used to indicate mandatory fields -> increase visual clutter Monday, 22 November 2010
  34. 34. (Optional) Monday, 22 November 2010
  35. 35. All required When all fields are required.. Monday, 22 November 2010
  36. 36. All fields are required Monday, 22 November 2010
  37. 37. When all fields are required for a long form... Monday, 22 November 2010
  38. 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. 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. 40. Results Number of forms submitted Conversion rate 140% 120% Monday, 22 November 2010
  41. 41. Imaginary Landscape Case Study Making forms more efficient Number of fields available NOT number of required fields Monday, 22 November 2010
  42. 42. Grouping & chunking 表格分割和分组 Monday, 22 November 2010
  43. 43. Without grouping and chunking Monday, 22 November 2010
  44. 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. 45. Chunking Separate them with simple horizontal lines... Monday, 22 November 2010
  46. 46. Chunking ... or via shaded headings... Monday, 22 November 2010
  47. 47. Chunking ... or coloured boxes Monday, 22 November 2010
  48. 48. http://www.flickr.com/photos/evilerin/3078856253/ Grouping & chunking Users don’t normally pay attention to the headers... Monday, 22 November 2010
  49. 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. 50. Input format 输入格式 Monday, 22 November 2010
  51. 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. 52. Input Formatting E.g. Long description about the input formatting Monday, 22 November 2010
  53. 53. Input Formatting E.g. Short description beside the label Monday, 22 November 2010
  54. 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. 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. 56. Input Formatting Show input boxes which match with the acceptable format Monday, 22 November 2010
  57. 57. Input Formatting Or show an example of the acceptable input format Monday, 22 November 2010
  58. 58. Input Formatting Monday, 22 November 2010
  59. 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. 60. Ultimate rule The system should handle the formatting NOT the users Monday, 22 November 2010
  61. 61. Tips & descriptions 备注和提示 Monday, 22 November 2010
  62. 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. 63. Why (do we use tips and descriptions) To describe the acceptable input format Monday, 22 November 2010
  64. 64. Where (do tips and descriptions appear) Monday, 22 November 2010
  65. 65. Where (do tips and descriptions appear) Monday, 22 November 2010
  66. 66. Where : Proximity Space Inappropriate use of space Monday, 22 November 2010
  67. 67. Where : Proximity At the end At the bottom Inconsistent position Monday, 22 November 2010
  68. 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. 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. 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. 71. How (descriptions are being presented) Placed around the labels or input fields (most common) Monday, 22 November 2010
  72. 72. Placed around the labels or input fields (most common) How (descriptions are being presented) Monday, 22 November 2010
  73. 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. 74. How (descriptions are being presented) Real time and inline descriptions Monday, 22 November 2010
  75. 75. How (descriptions are being presented) Another example of real time descriptions Monday, 22 November 2010
  76. 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. 77. Validations 效验 Monday, 22 November 2010
  78. 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. 79. Realtime validationValidation upon submit Luke’s validation test Monday, 22 November 2010
  80. 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. 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. 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. 83. Error handling 当表单出现错误,该如何处理 Monday, 22 November 2010
  84. 84. Where: On top of the form Error messages often appear on top of the form Monday, 22 November 2010
  85. 85. Where: Highlight the error Indicate where the errors are: highlight the relevant fields Monday, 22 November 2010
  86. 86. Where: Highlight the error Monday, 22 November 2010
  87. 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. 88. Where: Close to the relevant fields Show errors close to the relevant fields Monday, 22 November 2010
  89. 89. What: Meaningful error message Provide meaningful error message Monday, 22 November 2010
  90. 90. What: Direct to the point First version: too many unnecessary wordings. New version: straight to the point Monday, 22 November 2010
  91. 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. 92. Design: size, colours 设计:输入框尺寸,颜色 Monday, 22 November 2010
  93. 93. Colours Be wary when using red colour in a form as it often used to indicate errors Monday, 22 November 2010
  94. 94. Colours Monday, 22 November 2010
  95. 95. Colours Monday, 22 November 2010
  96. 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. 97. Size Monday, 22 November 2010
  98. 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. 99. Flow 表格流程 Monday, 22 November 2010
  100. 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. 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. 102. 国家 省 市 区 街道地址 China address: from country to house number Monday, 22 November 2010
  103. 103. What else.... 其它 Monday, 22 November 2010
  104. 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. 105. What we can learn No tricks or confusions Being in control Clear and simple Appropriate feedback Monday, 22 November 2010
  106. 106. http://www.flickr.com/photos/mikeblogs/2849934090/ http://www.flickr.com/photos/bigd2112/3649132473/ Designing Mobile Forms Monday, 22 November 2010
  107. 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. 108. Quick . Easy . Error prone . Infallible Monday, 22 November 2010
  109. 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. 110. Mobile versionWeb version Mobile version: Can be completely different (simpler and cleaner) Monday, 22 November 2010
  111. 111. Mobile version Mobile version: Can be the same with slight changes of the layout, such as label alignment Monday, 22 November 2010
  112. 112. Mobile version Mobile version: Can be the same with slight changes of the layout, such as label alignment Monday, 22 November 2010
  113. 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. 114. Labelling 标签 Monday, 22 November 2010
  115. 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. 116. Monday, 22 November 2010
  117. 117. Monday, 22 November 2010
  118. 118. Top aligned label is more suitable for mobile forms. Monday, 22 November 2010
  119. 119. Left- and right-aligned labelling are also not suitable for long labels Monday, 22 November 2010
  120. 120. Simplified :: Remove 简单化 :: 删除 Monday, 22 November 2010
  121. 121. Remove tips & help Simplified - by removing tips and help Monday, 22 November 2010
  122. 122. Remove tips & help Simplified - by removing tips and help Monday, 22 November 2010
  123. 123. Remove ‘not so important’ fields Simplified - by removing ‘not so important’ fields Monday, 22 November 2010
  124. 124. Simplified :: Combining 简单化 :: 结合 Monday, 22 November 2010
  125. 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. 126. Simplified :: Improvise 简单化 :: 即 更改 Monday, 22 November 2010
  127. 127. 139 countries Monday, 22 November 2010
  128. 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. 129. Multiple stages 多步骤表格 Monday, 22 November 2010
  130. 130. Long drop downs for both ‘From ‘ and ‘To’ Monday, 22 November 2010
  131. 131. Step 1 Step 2 Step 3 Simplified - Divide into a few little steps Monday, 22 November 2010
  132. 132. Changing input elements & menu controls 更改输入方法 Monday, 22 November 2010
  133. 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. 134. Monday, 22 November 2010
  135. 135. Monday, 22 November 2010
  136. 136. Web version Web version requires more click for date input Monday, 22 November 2010
  137. 137. Mobile version Mobile version: Simplified from drop down menu to calendar input (only a single click is required) Monday, 22 November 2010
  138. 138. Mobile version Mobile version: Simplified from drop down menu to calendar input (only a single click is required) Monday, 22 November 2010
  139. 139. Mobile version Mobile version: Simplified from drop down menu to calendar input (only a single click is required) Monday, 22 November 2010
  140. 140. Using tabs on the mobile version instead of radio buttons Monday, 22 November 2010
  141. 141. 151 countries Changing from a long drop down menu to free text predictive search Monday, 22 November 2010
  142. 142. Using links (similar function as tabs) on the mobile version instead of drop downs Monday, 22 November 2010
  143. 143. Using links (similar function as tabs) on the mobile version instead of drop downs Monday, 22 November 2010
  144. 144. Using links (similar function as tabs) on the mobile version instead of drop downs Monday, 22 November 2010
  145. 145. List selection 列表选择 Monday, 22 November 2010
  146. 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. 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. 148. Drop downs Monday, 22 November 2010
  149. 149. Drop downs: Length Drop downs: not suitable when it has lengthy options Monday, 22 November 2010
  150. 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. 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. 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. 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. 154. Target size & spacing 尺寸和空间/距离 Monday, 22 November 2010
  155. 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. 156. Monday, 22 November 2010
  157. 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. 158. Simple and easy to use Minimise required input Minimise options Simple and usable interaction Remove distraction and clutter Monday, 22 November 2010
  159. 159. What else.... http://www.cxpartners.co.uk/thoughts/ web_forms_design_guidelines_an_eyetracking_study.htm Monday, 22 November 2010
  160. 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

×