Best practice for web design


Best practice for web design

 

Best practice for web design

BEST PRACTICES FOR FORM DESIGN LUKE WROBLEWSKI IA SUMMIT 2007 1 Luke Wroblewski Yahoo! Inc. ? Senior Principal Designer LukeW Interface Designs ? Principal & Founder ? Product design & strategy services Author ? Site-Seeing: A Visual Approach to Web Usability (Wiley & Sons) ? Functioning Form: Web applications, product strategy, & interface design articles Previously ? eBay Inc., Lead Designer ? University of Illinois, Instructor ? NCSA, Senior Designer http://www.lukew.com 2 WHY DOES FORM DESIGN MATTER? 3 SHOPPING http://www.flickr.com/photos/stitch/187139723/ 4 SHOPPING ONLINE 5 ACCESS Images from Flickr users katielips, pealco, and *nathan 6 ACCESS ONLINE 7 DATA INPUT 8 DATA INPUT ONLINE 9 Why Forms Matter ? How customers ?talk? to companies online ? Commerce ($) ? User: Enable purchasing ? Business: Maximize sales ? Access (membership) ? User: Enable participation ? Business: Increase customers & grow communities ? Engagement ? User: Enable information entry & manipulation ? Business: Accumulate content & data 10 Design Principles ? Minimize the pain ? No one likes filing in forms ? Smart defaults, inline validation, forgiving inputs ? Illuminate a path to completion ? Consider the context ? Familiar vs. foreign ? Frequently used vs. rarely used ? Ensure consistent communication ? Errors, Help, Success ? Single voice despite many stakeholders 11 Analyzing Performance ? Usability Testing ? Errors, issues, assists, completion rates, time spent per task, satisfaction scores ? Eye Tracking ? Completion times, fixations, saccades ? Customer Support ? Top problems, number of incidents ? Best Practices ? Common solutions, unique approaches ? Site Tracking ? Completion rates, entry points, exit points, elements utilized, data entered 12 Design Patterns Visual Communication Information Affordances + Engagement Interaction Disclosure + Response Feedback Verification 13 INFORMATION 14 Information ? Layout ? Label positioning ? Content groupings ? Input Affordances ? Formats, required fields ? Actions ? Primary & secondary ? Help & Tips ? Visual Hierarchy 15 Top Aligned Labels ? When data being collected is familiar ? Minimize time to completion ? Require more vertical space ? Spacing or contrast is vital to enable efficient scanning ? Flexibility for localization and complex inputs 16 Top-aligned Labels 17 Right Aligned Labels ? Clear association between label and field ? Requires less vertical space ? More difficult to just scan labels due to left rag ? Fast completion times 18 Right-aligned labels 19 Left Aligned Labels ? When data required is unfamiliar ? Enables label scanning ? Less clear association between label and field ? Requires less vertical space ? Changing label length may impair layout 20 Left-aligned labels 21 Eye-tracking Data ? July 2006 study by Matteo Penzo ? Left-aligned labels ? Easily associated labels with the proper input fields ? Excessive distances between labels inputs forced users to take more time ? Right-aligned labels ? Reduced overall number of fixations by nearly half ? Form completion times were cut nearly in half ? Top-aligned labels ? Permitted users to capture both labels & inputs with a single eye movement? ? Fastest completion times 22 ? For reduced completion times & familiar data input: top aligned BEST PRACTICE ? When vertical screen space is a constraint: right aligned ? For unfamiliar, or advanced data entry: left aligned 23 Required Form Fields ? Indication of required fields is most useful when ? There are lots of fields ? But very few are required ? Enables users to scan form to see what needs to be filled in ? Indication of optional fields is most useful when ? Very few fields are optional ? Neither is realy useful when ? All fields are required 24 All fields required 25 All fields required 26 Most fields required 27 Few fields optional 28 29 30 ? Try to avoid optional fields ? If most fields are required: indicate optional fields BEST PRACTICE ? If most fields are optional: indicate required fields ? Text is best, but * often works for required fields ? Associate indicators with labels 31 Field Lengths ? Field lengths can provide valuable affordances ? Appropriate field lengths provide enough space for inputs ? Random field lengths may add visual noise to a form 32 33 34 35 ? When possible, use field length as an affordance BEST PRACTICE ? Otherwise consider a consistent length that provides enough room for inputs 36 Content Grouping ? Content relationships provide a structured way to organize a form ? Groupings provide ? A way to scan information required at a high level ? A sense of how information within a form is related 37 Lots of content grouping 38 Excessive visual noise 39 Minimum amount necessary 40 41 Minimum amount necessary 42 43 ? Use relevant content groupings to organize forms BEST PRACTICE ? Use the minimum amount of visual elements necessary to communicate useful relationships 44 Actions ? Not all form actions are equal ? Reset, Cancel, & Go Back are secondary actions: rarely need to be used (if at all) ? Save, Continue, & Submit are primary actions: directly responsible for form completion ? The visual presentation of actions should match their importance 45 46 47 ? Avoid secondary actions if possible BEST PRACTICE ? Otherwise, ensure a clear visual distinction between primary & secondary actions 48 Help & Tips ? Help & Tips are useful when: ? Asking for unfamiliar data ? Users may question why data is being requested ? There are recommended ways of providing data ? Certain data requests are optional ? However, Help & Tips can quickly overwhelm a form if overused ? In these cases, you may want to consider a dynamic solution ? Automatic inline exposure ? User activated inline exposure ? User activated section exposure 49 Help Text 50 Lots of Help/Tips 51 52 Automatic inline exposure 53 Automatic inline exposure 54 User-activated inline exposure 55 User-activated inline exposure 56 User-activated section exposure 57 ? Minimize the amount of help & tips required to fill out a form ? Help visible and BEST PRACTICE adjacent to a data request is most useful ? When lots of unfamiliar data is being requested, consider using a dynamic help system 58 INTERACTION 59 Interaction ? Path to Completion ? ?Tabbing? ? Progressive Disclosure ? Exposing dependencies 60 Path to Completion ? Primary goal for every form is completion ? Every input requires consideration & action ? Remove all unnecessary data requests ? Enable flexible data input ? Provide a clear path ? Enable smart defaults 61 Remove Unnecessary Inputs 62 Flexible Data Input (555) 123-4444 555-123-4444 555 123 4444 555.123.4444 5551234444 63 Smart Defaults 64 Path to Completion 65 Clear Path to Completion 66 Path to completion 67 ? Remove all unnecessary data requests ? Enable smart defaults BEST PRACTICE ? Employ flexible data entry ? Illuminate a clear path to completion ? For long forms, show progress & save 68 Tabbing ? Many users interact with a form by ?tabbing? between fields ? Proper HTML markup can ensure tabbing works as expected ? Multi-column form layouts may conflict with expected tabbing behavior 69 70 ? Remember to account for tabbing behavior ? Use the tabindex BEST PRACTICE attribute to control tabbing order ? Consider tabbing expectations when laying out forms 71 Progressive Disclosure ? Not all users require all available options all the time ? Progressive disclosure provides additional options when appropriate ? Advanced options ? Gradual engagement 72 Exposing Options 73 Exposing Options 74 Dialog 75 Progressive Disclosure 76 Gradual Engagement 77 78 ? Map progressive disclosure to BEST PRACTICE prioritized user needs ? Most effective when user-initiated ? Maintain a consistent approach 79 Selection Dependent Inputs ? Sometimes an initial data input requires or enables additional inputs ? More options become available because of an initial input ? Further clarification required due to initial input 80 Selection Dependent Inputs 81 Page Level Section Selectors Section Tabs Expose Below Expose Within Section Finger Tabs 82 Inactive Until Selected Exposed & Grouped 83 Exposing Dependent Inputs ? Page Level ? Requires additional step ? Section Tabs ? Often go unnoticed ? Require smart defaults ? Finger Section Tabs ? Follow path to completion scan line ? Section Selectors ? Effectively Group information ? Hide some options ? Expose Below & Expose Within ? Potential for confusion ? Inactive Until Selected & Exposed within Groups ? Association between primary selection is impaired 84 ? Maintain clear relationship between initial selection options BEST PRACTICE ? Clearly associate additional inputs with their trigger ? Avoid ?jumping? that disassociates initial selection options 85 FEEDBACK 86 Feedback ? Inline validation ? Assistance ? Errors ? Indication & Resolution ? Progress ? Indication ? Success ? Verification 87 Inline Validation ? Provide direct feedback as data is entered ? Validate inputs ? Suggest valid inputs ? Help users stay within limits 88 Password Validation 89 Unique User Name Validation 90 Valid Input Suggestions 91 Maximum Character Count 92 ? Use inline validation for inputs that have potentially high error BEST PRACTICE rates ? Use suggested inputs to disambiguate ? Communicate limits 93 Errors ? Errors are used to ensure all required data is provided and valid ? Clear labels, affordances, help/tips & validation can help reduce errors ? But some errors may still occur ? Provide clear resolution in as few steps as possible 94 Error Messaging 95 Short Forms: too much? 96 Short Forms 97 Short Forms 98 99 ? Clearly communicate an error has occurred: top placement, visual contrast ? Provide actionable BEST PRACTICE remedies to correct errors ? Associate responsible fields with primary error message ? ?Double? the visual language where errors have occurred 100 Progress ? Sometimes actions require some time to process ? Form submission ? Data calculations ? Uploads ? Provide feedback when an action is in progress 101 Disable Submit Button 102 ? Provide indication of tasks in progress BEST PRACTICE ? Disable ?submit? button after user clicks it to avoid duplicate submissions 103 Success ? After successful form completion confirm data input in context ? On updated page ? On revised form ? Provide feedback via ? Message (removable) ? Animated Indicator 104 105 106 Animated Indication 107 ? Clearly communicate a data submission has been successful BEST PRACTICE ? Provide feedback in context of data submitted 108 Additional Tips ? Avoid changing inputs provided by users ? With later inputs ? After an error has occurred ? Let users know if difficult to obtain information is required prior to sending them to a form 109 Accessibility & Mark-up ? Use <label> tags to associate labels with inputs ? Properly read by screen readers ? Most browsers treat text with <label> tags as clickable: larger actions ? Use the tabindex attribute to provide a ?tabbing? path ? Provides control over tabbing order ? Enables forms to be navigated by keyboard ? Consider the accesskey attribute for additional keyboard support ? Direct access to associated input fields ? Consider <fieldset> to group related form fields 110 Web Form Creation Tools ? Wufoo ? http://www.wufoo.com ? Form Assembly ? http://www.formassembly.com ? icebrrg ? http://www.icebrrg.com 111 For more information? ? Functioning Form ? www.lukew.com/ff/ ? Site-Seeing: A Visual Approach to Web Usability ? Wiley & Sons ? Drop me a note ? luke@lukew.com 112

PARTAGER SUR

Envoyer le lien par email
2755
READS
6
DOWN
7
FOLLOW
7
EMBED
DOCUMENT # TAGS
#web design  #web 2.0 

licence non indique


DOCUMENT # INDEX
Web Design 
img

Partagé par  Cabrera

 Suivre

Auteur:Luke Wroblewski
Source:http://www.lukew.com

 

 

Cabrera a également publié

*   Radars mobiles

*   Best practice for web design