SlideShare a Scribd company logo
1 of 21
Download to read offline
@dgcooley
<FORM> </FORM>
BETWEEN TWO
FORM TAGS
@dgcooley
What forms questions do you get?
1.  Size and shape of the form dialog/page.
2.  Size of multi-line text fields
3.  Conditionally required fields (a tough issue)
4.  Required field indicator
5.  Size of field
6.  Error correction (sometimes as you exit a field, sometimes not until you finish a form if you are doing high-frequency forminput)
7.  Workflow in the form
8.  Use of acronyms and abbreviations.
9.  Location of labels
10.  Spacing between labels and controls
11.  Spacing between different items.
12.  Translation/text expansion (no, the rule is not to allow for 100% more space)
13.  Allowed formats in field
14.  Hints and where to put them
15. Dealing with accented characters
16. Keyboard shortcuts inside a form
17. Tab order
18.  Accessibility of forms
19. Density of the form (you might or might not want a lot of white space)
20. Designing for the one-shot form versus designing for a form where someone is entering data many times a day.
21. Should every text field be a different size?  (No).
22.  Should every text form be the same size (No).
23.  What are some "rules of thumb" for sizing text fields
24.  Do you use a colon after a label?
25.  What buttons do you use?
26.  Where do you put the buttons (depends on de facto standards AND workflow).
27.  How do you decide the order of fields?
28.  How do you choose the right control for choosing a value (e.g., radio button versus drop-down list)?
29.  What rules do you follow in ordering menus in dorms?
30.  When do you use tabs in forms?
31.  How do you display long lists in forms?
32. How do you provide user assistance at the control and form level?
33. What does it mean to design your form for evolvability
34.  When do you choose dynamic versus static controls (list box versus radio buttons)
35.  What are the common errors associated with fields in a form or dialog.
36.  What does consistency mean when applied to forms (layout, control consistency, etc.)?
37. What are the guidelines for spacing between buttons (e.g., if you have  a DELETE FOREVER button, you may not want to have it 10 pixels
from the SAVE button).
38.  How will you deal with Hebrew , Chinese, and Arabic forms?
39.  How can you apply Gestalt principles (proximity, closure, figure-ground) to form design?
40.  What capitalization style do you use for labels and text?
41.  How do you indicate that a button is immediate action versus one that generates a sub-form of sub-dialog.
42.  When do you use an Apply button?
43.  When do you save data in a form (as you go or when you click OK, Submit, Apply....)?
44.  What techniques can you use to indicate whether you have a workflow that aids the user?
45.  How do scanning order and hierarchy act in your form?
46.  How do eye scanning patterns (e.g., Gutenberg diagram/F-Pattern ) affect the design of your form?
47.  What kind of grid layout would be must useful for your form?
48.  Why is microlayout important for form design?
49.  Can you input and navigate with voice input systems (e.g., Dragon NS)
50. What kind of feedback do you provide to let the user know that he/she is successful at the item and the form level?
51. How do you expose dependency in a form?
52. What color principles should you consider when designing a form?
53. How do you assess the relative complexity of a form?
54. How do "balance" and "symmetry" play together in form design?
55.  In designing a form, what constitutes "noise" and what constitutes "signal" (e.g., avoid extraneous lines, multiple fonts, etc.).
56. What are the general rules of "grouping"?
57. How can you use the principles of "abstraction" in form/dialog design?
58.  Should you concatenate fields so entry fields/control items read like sentences (could be bad for translation).
59.  How flexible should input fields be?
60. How wide should common fields like Email be?
61. What is the best way to align radio buttons?
62. Do you provide a progress indicator for long forms?
63.  Language consistency (e.g.,  don't say "Fill Pattern" in once place and "Pattern" in another when those refer to the same thing.
64. Remove words that don't add any value in labels and text).
 
@dgcooley
WHAT IF MY FORM IS
REALLY LONG?
@dgcooley
2-columns aren’t usually the way to go.
h"p://baymard.com/blog/avoid-­‐mul5-­‐column-­‐forms	
  
	
  
@dgcooley
Paging vs. Scrolling – it depends.
•  How often do users fill out
this form?
•  Do they need to save for
later?
•  Information chunking is
important regardless.
•  Progressive disclosure is also
an option.
@dgcooley
Progress indicators are
critical when paging.
@dgcooley
SHOULD I AUTO-ADVANCE
BETWEEN FIELDS?
@dgcooley
Never!
(Well,	
  almost	
  never.)	
  
@dgcooley
Not even for phone numbers.
@dgcooley
WHAT ABOUT
SUBMISSION BUTTONS?
@dgcooley
What about submission buttons?
•  There is no data on button
-order-.
•  Primary actions should be
more prominent than
secondary actions.
•  Labels should be SPECIFIC.
Go to
Step 3 Cancel	
  
Submit Cancel
@dgcooley
WHERE SHOULD MY
ACTION BUTTONS BE?
@dgcooley
Align your buttons to where your
user’s visual path ends.
@dgcooley
WHERE SHOULD I PUT
FIELD LABELS?
@dgcooley
•  DO NOT put them inside the fields
•  DO make sure the label is next to
the thing it is labeling.
•  Above fields is typically best.
h"p://www.uxma"ers.com/mt/archives/2006/07/label-­‐placement-­‐in-­‐forms.php	
  
Image	
  from	
  Luke	
  Wroblewski’s	
  Web	
  Form	
  Design.	
  
@dgcooley
WHAT ABOUT REQUIRED
FIELDS?
@dgcooley
Why are you asking a question
if you don’t need the answer?
@dgcooley
No really.
Why?
@dgcooley
AND NOW:
YOUR QUESTIONS
@dgcooley
The Most Important Questions
For EACH form question:
•  Who in the org uses this
answer?
•  What do they use it for?
•  Is the answer required or
optional?
– If required, what happens to
bogus answers?
h"p://www.uxma"ers.com/mt/archives/2010/06/the-­‐ques5on-­‐protocol-­‐how-­‐to-­‐make-­‐sure-­‐every-­‐form-­‐field-­‐is-­‐necessary.php	
  
@dgcooley
Books!

More Related Content

Similar to Between Two Form Tags

Labels on forms for STC Dallas, 2010
Labels on forms  for STC Dallas, 2010Labels on forms  for STC Dallas, 2010
Labels on forms for STC Dallas, 2010Caroline Jarrett
 
Axapta interview questions
Axapta interview questionsAxapta interview questions
Axapta interview questionsKD420
 
How to do code review and use analysis tool in software development
How to do code review and use analysis tool in software developmentHow to do code review and use analysis tool in software development
How to do code review and use analysis tool in software developmentMitosis Technology
 
How to design forms that deliver a great user experience
How to design forms that deliver a great user experienceHow to design forms that deliver a great user experience
How to design forms that deliver a great user experienceIdean France
 
Interface usability-adding-schweppervescence-ver3-8
Interface usability-adding-schweppervescence-ver3-8Interface usability-adding-schweppervescence-ver3-8
Interface usability-adding-schweppervescence-ver3-8SSW
 
Poster: Digital Templating
Poster:  Digital TemplatingPoster:  Digital Templating
Poster: Digital TemplatingShalin Hai-Jew
 
Design.doc
Design.docDesign.doc
Design.docbutest
 
Application Design - Part 1
Application Design - Part 1Application Design - Part 1
Application Design - Part 1Kelley Howell
 
Interface Usability - Adding Schweppervescence
Interface Usability - Adding SchweppervescenceInterface Usability - Adding Schweppervescence
Interface Usability - Adding SchweppervescenceSSW
 
Ni week 2018_ux_lab_viewcandothat
Ni week 2018_ux_lab_viewcandothatNi week 2018_ux_lab_viewcandothat
Ni week 2018_ux_lab_viewcandothatDMC, Inc.
 
Web Analytics Wednesday - Session Replay Tools are Vital
Web Analytics Wednesday - Session Replay Tools are VitalWeb Analytics Wednesday - Session Replay Tools are Vital
Web Analytics Wednesday - Session Replay Tools are VitalCraig Sullivan
 
Tableau Online Training in canada
Tableau Online Training in canadaTableau Online Training in canada
Tableau Online Training in canadaBoundTechS
 
Microsoft Word Power Shortcuts & Tips (Part-2)
Microsoft Word Power Shortcuts & Tips (Part-2)Microsoft Word Power Shortcuts & Tips (Part-2)
Microsoft Word Power Shortcuts & Tips (Part-2)Tuan Yang
 
First users: Heuristics for designer/developer collaboration
First users: Heuristics for designer/developer collaborationFirst users: Heuristics for designer/developer collaboration
First users: Heuristics for designer/developer collaborationJonathan Abbett
 
Working with shape
Working with shapeWorking with shape
Working with shapeJason Ruelo
 

Similar to Between Two Form Tags (20)

Labels on forms for STC Dallas, 2010
Labels on forms  for STC Dallas, 2010Labels on forms  for STC Dallas, 2010
Labels on forms for STC Dallas, 2010
 
Axapta interview questions
Axapta interview questionsAxapta interview questions
Axapta interview questions
 
How to do code review and use analysis tool in software development
How to do code review and use analysis tool in software developmentHow to do code review and use analysis tool in software development
How to do code review and use analysis tool in software development
 
How to design forms that deliver a great user experience
How to design forms that deliver a great user experienceHow to design forms that deliver a great user experience
How to design forms that deliver a great user experience
 
Interface usability-adding-schweppervescence-ver3-8
Interface usability-adding-schweppervescence-ver3-8Interface usability-adding-schweppervescence-ver3-8
Interface usability-adding-schweppervescence-ver3-8
 
Frontend++
Frontend++Frontend++
Frontend++
 
Poster: Digital Templating
Poster:  Digital TemplatingPoster:  Digital Templating
Poster: Digital Templating
 
Design.doc
Design.docDesign.doc
Design.doc
 
Tableau ppt
Tableau pptTableau ppt
Tableau ppt
 
Tableau PPT
Tableau PPTTableau PPT
Tableau PPT
 
Application Design - Part 1
Application Design - Part 1Application Design - Part 1
Application Design - Part 1
 
Interface Usability - Adding Schweppervescence
Interface Usability - Adding SchweppervescenceInterface Usability - Adding Schweppervescence
Interface Usability - Adding Schweppervescence
 
Styling with word
Styling with wordStyling with word
Styling with word
 
Ni week 2018_ux_lab_viewcandothat
Ni week 2018_ux_lab_viewcandothatNi week 2018_ux_lab_viewcandothat
Ni week 2018_ux_lab_viewcandothat
 
Web Analytics Wednesday - Session Replay Tools are Vital
Web Analytics Wednesday - Session Replay Tools are VitalWeb Analytics Wednesday - Session Replay Tools are Vital
Web Analytics Wednesday - Session Replay Tools are Vital
 
Tableau Online Training in canada
Tableau Online Training in canadaTableau Online Training in canada
Tableau Online Training in canada
 
Microsoft Word Power Shortcuts & Tips (Part-2)
Microsoft Word Power Shortcuts & Tips (Part-2)Microsoft Word Power Shortcuts & Tips (Part-2)
Microsoft Word Power Shortcuts & Tips (Part-2)
 
The Role of the Architect
The Role of the ArchitectThe Role of the Architect
The Role of the Architect
 
First users: Heuristics for designer/developer collaboration
First users: Heuristics for designer/developer collaborationFirst users: Heuristics for designer/developer collaboration
First users: Heuristics for designer/developer collaboration
 
Working with shape
Working with shapeWorking with shape
Working with shape
 

More from Danielle Cooley

Usability Testing: Backbone of UX Research - DevUp2018
Usability Testing: Backbone of UX Research - DevUp2018Usability Testing: Backbone of UX Research - DevUp2018
Usability Testing: Backbone of UX Research - DevUp2018Danielle Cooley
 
On the Dangers of Shadow UX
On the Dangers of Shadow UXOn the Dangers of Shadow UX
On the Dangers of Shadow UXDanielle Cooley
 
UX Research (Yes, it's still a thing.)
UX Research (Yes, it's still a thing.)UX Research (Yes, it's still a thing.)
UX Research (Yes, it's still a thing.)Danielle Cooley
 
Pathways to a Positive Learner Experience
Pathways to a Positive Learner ExperiencePathways to a Positive Learner Experience
Pathways to a Positive Learner ExperienceDanielle Cooley
 
Cognitive Ergonomics for Developers - St. Louis Days of .NET 2014
Cognitive Ergonomics for Developers - St. Louis Days of .NET 2014Cognitive Ergonomics for Developers - St. Louis Days of .NET 2014
Cognitive Ergonomics for Developers - St. Louis Days of .NET 2014Danielle Cooley
 
Business Case for UX - KCDC 2014
Business Case for UX - KCDC 2014Business Case for UX - KCDC 2014
Business Case for UX - KCDC 2014Danielle Cooley
 
Design Studio: Peregrine Edition - STL UX 2014
Design Studio: Peregrine Edition - STL UX 2014Design Studio: Peregrine Edition - STL UX 2014
Design Studio: Peregrine Edition - STL UX 2014Danielle Cooley
 
The Business Case for UX - Code PaLOUsa 2014
The Business Case for UX - Code PaLOUsa 2014The Business Case for UX - Code PaLOUsa 2014
The Business Case for UX - Code PaLOUsa 2014Danielle Cooley
 
Avoiding UI MIstakes - Code PaLOUsa 2014
Avoiding UI MIstakes - Code PaLOUsa 2014Avoiding UI MIstakes - Code PaLOUsa 2014
Avoiding UI MIstakes - Code PaLOUsa 2014Danielle Cooley
 
The Business Case for UX
The Business Case for UXThe Business Case for UX
The Business Case for UXDanielle Cooley
 
Avoiding UI Mistakes - D2WC
Avoiding UI Mistakes - D2WCAvoiding UI Mistakes - D2WC
Avoiding UI Mistakes - D2WCDanielle Cooley
 
Less Content. More Strategy. (D2WC)
Less Content. More Strategy. (D2WC)Less Content. More Strategy. (D2WC)
Less Content. More Strategy. (D2WC)Danielle Cooley
 
Less Content. More Strategy. (IUE 2013)
Less Content. More Strategy. (IUE 2013)Less Content. More Strategy. (IUE 2013)
Less Content. More Strategy. (IUE 2013)Danielle Cooley
 
Personas in the Age of Social Media
Personas in the Age of Social MediaPersonas in the Age of Social Media
Personas in the Age of Social MediaDanielle Cooley
 
Field Research for User Experience
Field Research for User ExperienceField Research for User Experience
Field Research for User ExperienceDanielle Cooley
 
5 Whole Minutes about Sort and Filter
5 Whole Minutes about Sort and Filter5 Whole Minutes about Sort and Filter
5 Whole Minutes about Sort and FilterDanielle Cooley
 
(Less) Content. (More) Strategy
(Less) Content. (More) Strategy(Less) Content. (More) Strategy
(Less) Content. (More) StrategyDanielle Cooley
 
Usability is Important (Even for Flash Designers)
Usability is Important (Even for Flash Designers)Usability is Important (Even for Flash Designers)
Usability is Important (Even for Flash Designers)Danielle Cooley
 

More from Danielle Cooley (20)

Usability Testing: Backbone of UX Research - DevUp2018
Usability Testing: Backbone of UX Research - DevUp2018Usability Testing: Backbone of UX Research - DevUp2018
Usability Testing: Backbone of UX Research - DevUp2018
 
On the Dangers of Shadow UX
On the Dangers of Shadow UXOn the Dangers of Shadow UX
On the Dangers of Shadow UX
 
UX Research (Yes, it's still a thing.)
UX Research (Yes, it's still a thing.)UX Research (Yes, it's still a thing.)
UX Research (Yes, it's still a thing.)
 
Pathways to a Positive Learner Experience
Pathways to a Positive Learner ExperiencePathways to a Positive Learner Experience
Pathways to a Positive Learner Experience
 
Cognitive Ergonomics for Developers - St. Louis Days of .NET 2014
Cognitive Ergonomics for Developers - St. Louis Days of .NET 2014Cognitive Ergonomics for Developers - St. Louis Days of .NET 2014
Cognitive Ergonomics for Developers - St. Louis Days of .NET 2014
 
Business Case for UX - KCDC 2014
Business Case for UX - KCDC 2014Business Case for UX - KCDC 2014
Business Case for UX - KCDC 2014
 
Design Studio: Peregrine Edition - STL UX 2014
Design Studio: Peregrine Edition - STL UX 2014Design Studio: Peregrine Edition - STL UX 2014
Design Studio: Peregrine Edition - STL UX 2014
 
The Business Case for UX - Code PaLOUsa 2014
The Business Case for UX - Code PaLOUsa 2014The Business Case for UX - Code PaLOUsa 2014
The Business Case for UX - Code PaLOUsa 2014
 
Avoiding UI MIstakes - Code PaLOUsa 2014
Avoiding UI MIstakes - Code PaLOUsa 2014Avoiding UI MIstakes - Code PaLOUsa 2014
Avoiding UI MIstakes - Code PaLOUsa 2014
 
The Business Case for UX
The Business Case for UXThe Business Case for UX
The Business Case for UX
 
Avoiding UI Mistakes - D2WC
Avoiding UI Mistakes - D2WCAvoiding UI Mistakes - D2WC
Avoiding UI Mistakes - D2WC
 
Less Content. More Strategy. (D2WC)
Less Content. More Strategy. (D2WC)Less Content. More Strategy. (D2WC)
Less Content. More Strategy. (D2WC)
 
Avoiding UI Mistakes
Avoiding UI MistakesAvoiding UI Mistakes
Avoiding UI Mistakes
 
Less Content. More Strategy. (IUE 2013)
Less Content. More Strategy. (IUE 2013)Less Content. More Strategy. (IUE 2013)
Less Content. More Strategy. (IUE 2013)
 
Personas in the Age of Social Media
Personas in the Age of Social MediaPersonas in the Age of Social Media
Personas in the Age of Social Media
 
Field Research for User Experience
Field Research for User ExperienceField Research for User Experience
Field Research for User Experience
 
5 Whole Minutes about Sort and Filter
5 Whole Minutes about Sort and Filter5 Whole Minutes about Sort and Filter
5 Whole Minutes about Sort and Filter
 
Fun With Error Messages
Fun With Error MessagesFun With Error Messages
Fun With Error Messages
 
(Less) Content. (More) Strategy
(Less) Content. (More) Strategy(Less) Content. (More) Strategy
(Less) Content. (More) Strategy
 
Usability is Important (Even for Flash Designers)
Usability is Important (Even for Flash Designers)Usability is Important (Even for Flash Designers)
Usability is Important (Even for Flash Designers)
 

Recently uploaded

LESSON 10/ GROUP 10/ ST. THOMAS AQUINASS
LESSON 10/ GROUP 10/ ST. THOMAS AQUINASSLESSON 10/ GROUP 10/ ST. THOMAS AQUINASS
LESSON 10/ GROUP 10/ ST. THOMAS AQUINASSlesteraporado16
 
Internet 2.0 Conference (Event Information Deck | Dec'24 - Mar'25)
Internet 2.0 Conference (Event Information Deck | Dec'24 - Mar'25)Internet 2.0 Conference (Event Information Deck | Dec'24 - Mar'25)
Internet 2.0 Conference (Event Information Deck | Dec'24 - Mar'25)Internet 2.0 Conference
 
Discussing Potential of Submarine Cables Causing Internet Blackout in Ghana
Discussing Potential of Submarine Cables Causing Internet Blackout in GhanaDiscussing Potential of Submarine Cables Causing Internet Blackout in Ghana
Discussing Potential of Submarine Cables Causing Internet Blackout in GhanaDesmond Israel
 
Bio Medical Waste Management Guideliness 2023 ppt.pptx
Bio Medical Waste Management Guideliness 2023 ppt.pptxBio Medical Waste Management Guideliness 2023 ppt.pptx
Bio Medical Waste Management Guideliness 2023 ppt.pptxnaveenithkrishnan
 
Check out the Free Landing Page Hosting in 2024
Check out the Free Landing Page Hosting in 2024Check out the Free Landing Page Hosting in 2024
Check out the Free Landing Page Hosting in 2024Shubham Pant
 
Computer 10 Lesson 8: Building a Website
Computer 10 Lesson 8: Building a WebsiteComputer 10 Lesson 8: Building a Website
Computer 10 Lesson 8: Building a WebsiteMavein
 
LESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdf
LESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdfLESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdf
LESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdfmchristianalwyn
 
Aligning Testing Objectives with Overall Project Goals for Successful Outcome...
Aligning Testing Objectives with Overall Project Goals for Successful Outcome...Aligning Testing Objectives with Overall Project Goals for Successful Outcome...
Aligning Testing Objectives with Overall Project Goals for Successful Outcome...Anju21552
 
WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024
WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024
WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024Jan Löffler
 
Test Automation with Gen AI_Final_Presentation
Test Automation with Gen AI_Final_PresentationTest Automation with Gen AI_Final_Presentation
Test Automation with Gen AI_Final_PresentationUiPathCommunity
 
Vision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced Horizons
Vision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced HorizonsVision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced Horizons
Vision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced HorizonsRoxana Stingu
 
Benefits of doing Internet peering and running an Internet Exchange (IX) pres...
Benefits of doing Internet peering and running an Internet Exchange (IX) pres...Benefits of doing Internet peering and running an Internet Exchange (IX) pres...
Benefits of doing Internet peering and running an Internet Exchange (IX) pres...APNIC
 
TYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDS
TYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDSTYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDS
TYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDSedrianrheine
 

Recently uploaded (13)

LESSON 10/ GROUP 10/ ST. THOMAS AQUINASS
LESSON 10/ GROUP 10/ ST. THOMAS AQUINASSLESSON 10/ GROUP 10/ ST. THOMAS AQUINASS
LESSON 10/ GROUP 10/ ST. THOMAS AQUINASS
 
Internet 2.0 Conference (Event Information Deck | Dec'24 - Mar'25)
Internet 2.0 Conference (Event Information Deck | Dec'24 - Mar'25)Internet 2.0 Conference (Event Information Deck | Dec'24 - Mar'25)
Internet 2.0 Conference (Event Information Deck | Dec'24 - Mar'25)
 
Discussing Potential of Submarine Cables Causing Internet Blackout in Ghana
Discussing Potential of Submarine Cables Causing Internet Blackout in GhanaDiscussing Potential of Submarine Cables Causing Internet Blackout in Ghana
Discussing Potential of Submarine Cables Causing Internet Blackout in Ghana
 
Bio Medical Waste Management Guideliness 2023 ppt.pptx
Bio Medical Waste Management Guideliness 2023 ppt.pptxBio Medical Waste Management Guideliness 2023 ppt.pptx
Bio Medical Waste Management Guideliness 2023 ppt.pptx
 
Check out the Free Landing Page Hosting in 2024
Check out the Free Landing Page Hosting in 2024Check out the Free Landing Page Hosting in 2024
Check out the Free Landing Page Hosting in 2024
 
Computer 10 Lesson 8: Building a Website
Computer 10 Lesson 8: Building a WebsiteComputer 10 Lesson 8: Building a Website
Computer 10 Lesson 8: Building a Website
 
LESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdf
LESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdfLESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdf
LESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdf
 
Aligning Testing Objectives with Overall Project Goals for Successful Outcome...
Aligning Testing Objectives with Overall Project Goals for Successful Outcome...Aligning Testing Objectives with Overall Project Goals for Successful Outcome...
Aligning Testing Objectives with Overall Project Goals for Successful Outcome...
 
WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024
WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024
WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024
 
Test Automation with Gen AI_Final_Presentation
Test Automation with Gen AI_Final_PresentationTest Automation with Gen AI_Final_Presentation
Test Automation with Gen AI_Final_Presentation
 
Vision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced Horizons
Vision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced HorizonsVision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced Horizons
Vision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced Horizons
 
Benefits of doing Internet peering and running an Internet Exchange (IX) pres...
Benefits of doing Internet peering and running an Internet Exchange (IX) pres...Benefits of doing Internet peering and running an Internet Exchange (IX) pres...
Benefits of doing Internet peering and running an Internet Exchange (IX) pres...
 
TYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDS
TYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDSTYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDS
TYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDS
 

Between Two Form Tags

  • 2. @dgcooley What forms questions do you get? 1.  Size and shape of the form dialog/page. 2.  Size of multi-line text fields 3.  Conditionally required fields (a tough issue) 4.  Required field indicator 5.  Size of field 6.  Error correction (sometimes as you exit a field, sometimes not until you finish a form if you are doing high-frequency forminput) 7.  Workflow in the form 8.  Use of acronyms and abbreviations. 9.  Location of labels 10.  Spacing between labels and controls 11.  Spacing between different items. 12.  Translation/text expansion (no, the rule is not to allow for 100% more space) 13.  Allowed formats in field 14.  Hints and where to put them 15. Dealing with accented characters 16. Keyboard shortcuts inside a form 17. Tab order 18.  Accessibility of forms 19. Density of the form (you might or might not want a lot of white space) 20. Designing for the one-shot form versus designing for a form where someone is entering data many times a day. 21. Should every text field be a different size?  (No). 22.  Should every text form be the same size (No). 23.  What are some "rules of thumb" for sizing text fields 24.  Do you use a colon after a label? 25.  What buttons do you use? 26.  Where do you put the buttons (depends on de facto standards AND workflow). 27.  How do you decide the order of fields? 28.  How do you choose the right control for choosing a value (e.g., radio button versus drop-down list)? 29.  What rules do you follow in ordering menus in dorms? 30.  When do you use tabs in forms? 31.  How do you display long lists in forms? 32. How do you provide user assistance at the control and form level? 33. What does it mean to design your form for evolvability 34.  When do you choose dynamic versus static controls (list box versus radio buttons) 35.  What are the common errors associated with fields in a form or dialog. 36.  What does consistency mean when applied to forms (layout, control consistency, etc.)? 37. What are the guidelines for spacing between buttons (e.g., if you have  a DELETE FOREVER button, you may not want to have it 10 pixels from the SAVE button). 38.  How will you deal with Hebrew , Chinese, and Arabic forms? 39.  How can you apply Gestalt principles (proximity, closure, figure-ground) to form design? 40.  What capitalization style do you use for labels and text? 41.  How do you indicate that a button is immediate action versus one that generates a sub-form of sub-dialog. 42.  When do you use an Apply button? 43.  When do you save data in a form (as you go or when you click OK, Submit, Apply....)? 44.  What techniques can you use to indicate whether you have a workflow that aids the user? 45.  How do scanning order and hierarchy act in your form? 46.  How do eye scanning patterns (e.g., Gutenberg diagram/F-Pattern ) affect the design of your form? 47.  What kind of grid layout would be must useful for your form? 48.  Why is microlayout important for form design? 49.  Can you input and navigate with voice input systems (e.g., Dragon NS) 50. What kind of feedback do you provide to let the user know that he/she is successful at the item and the form level? 51. How do you expose dependency in a form? 52. What color principles should you consider when designing a form? 53. How do you assess the relative complexity of a form? 54. How do "balance" and "symmetry" play together in form design? 55.  In designing a form, what constitutes "noise" and what constitutes "signal" (e.g., avoid extraneous lines, multiple fonts, etc.). 56. What are the general rules of "grouping"? 57. How can you use the principles of "abstraction" in form/dialog design? 58.  Should you concatenate fields so entry fields/control items read like sentences (could be bad for translation). 59.  How flexible should input fields be? 60. How wide should common fields like Email be? 61. What is the best way to align radio buttons? 62. Do you provide a progress indicator for long forms? 63.  Language consistency (e.g.,  don't say "Fill Pattern" in once place and "Pattern" in another when those refer to the same thing. 64. Remove words that don't add any value in labels and text).  
  • 3. @dgcooley WHAT IF MY FORM IS REALLY LONG?
  • 4. @dgcooley 2-columns aren’t usually the way to go. h"p://baymard.com/blog/avoid-­‐mul5-­‐column-­‐forms    
  • 5. @dgcooley Paging vs. Scrolling – it depends. •  How often do users fill out this form? •  Do they need to save for later? •  Information chunking is important regardless. •  Progressive disclosure is also an option.
  • 9. @dgcooley Not even for phone numbers.
  • 11. @dgcooley What about submission buttons? •  There is no data on button -order-. •  Primary actions should be more prominent than secondary actions. •  Labels should be SPECIFIC. Go to Step 3 Cancel   Submit Cancel
  • 13. @dgcooley Align your buttons to where your user’s visual path ends.
  • 14. @dgcooley WHERE SHOULD I PUT FIELD LABELS?
  • 15. @dgcooley •  DO NOT put them inside the fields •  DO make sure the label is next to the thing it is labeling. •  Above fields is typically best. h"p://www.uxma"ers.com/mt/archives/2006/07/label-­‐placement-­‐in-­‐forms.php   Image  from  Luke  Wroblewski’s  Web  Form  Design.  
  • 17. @dgcooley Why are you asking a question if you don’t need the answer?
  • 20. @dgcooley The Most Important Questions For EACH form question: •  Who in the org uses this answer? •  What do they use it for? •  Is the answer required or optional? – If required, what happens to bogus answers? h"p://www.uxma"ers.com/mt/archives/2010/06/the-­‐ques5on-­‐protocol-­‐how-­‐to-­‐make-­‐sure-­‐every-­‐form-­‐field-­‐is-­‐necessary.php  

Editor's Notes

  1. When you use a two-column layout for form fields, you introduce the possibility of different interpretations. Are they related? Should I only fill out one column? Or both? Is there a certain sequence to the fields? You also introduce complexity in the realms of accessibility, keyboard support, and responsive design. Better to just avoid it, except in the VERY rare circumstance in which you are designing for a very specific subset of fully abled users for whom you have 100% control over their technical environment (screen size, screen resolution, operating system, browser version, etc.).
  2. Depending on what form is being designed for what people and for what purpose, paging or scrolling (or progressive disclosure) may be more appropriate. If users fill out a form frequently, they probably prefer a single, longer form. If they rarely fill out the form, breaking it up into pages is probably more appropriate. Also, if the requirements of the form change dramatically based on what the user enters in the beginning (e.g., someone setting up a trust account at a brokerage firm), pagination will likely be beneficial. (Yes, you can do this with progressive disclosure and conditional fields, but in the example above, you’d have a full page worth of fields – or more - that would need to be displayed or not.) Regardless of whether you choose paging or scrolling, if you have a long form, it’s beneficial to chunk the form into meaningful sections, either just visually or in an accordion-like setup.
  3. If you do choose paging, it’s critical to let your users know WHERE they are in the process. (We call this “grounding,” and it’s true for any kind of navigation.) You must also let them know how much they have left to do. This is particularly important if they are required to complete the form in a single sitting.
  4. Generally speaking, auto-advancing is not expected and makes both data entry and error recovery more difficult. An exception would be for expert users who access a specific system with incredible frequency (e.g., tax preparers, call center representatives), in which case auto-advancing can increase efficiency.
  5. The best approach for user experience is to let the user type in the phone number using the format they are most comfortable with. Don't break it into separate fields, don't force a mask, let it be typed freeform. Then, after the user has finished entering the field (by leaving the field for submitting the data), format the number into a standard format for your purposes. (http://ux.stackexchange.com/questions/5675/friendly-format-for-phone-numbers)