SlideShare a Scribd company logo
1 of 31
Download to read offline
@dgcooley #devup2017
<FORM> </FORM>
BETWEEN TWO
FORM TAGSBetween Two Form Tags
<Form> 	 </Form>
@dgcooley #devup2017
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 #devup2017
WHAT IF MY FORM
IS REALLY LONG?
@dgcooley #devup2017
Generally, stick with 1 column.
@dgcooley #devup2017
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 #devup2017
Progress indicators are critical.
@dgcooley #devup2017
SHOULD I AUTO-
ADVANCE BETWEEN
FIELDS?
@dgcooley #devup2017
NEVER!
(Well, almost never.)
@dgcooley #devup2017
NOT EVEN FOR
PHONE NUMBERS.
@dgcooley #devup2017
WHAT ABOUT
SUBMISSION
BUTTONS?
@dgcooley #devup2017
What about submission buttons?
•  There is no data on button
*order*.
•  Primary vs. secondary is more
important.
•  Labels should be SPECIFIC.
Go to
Step 3 Cancel	
Submit Cancel
@dgcooley #devup2017
WHERE SHOULD MY
ACTION BUTTONS
BE?
@dgcooley #devup2017
Align your buttons where your user’s
visual path ends.
@dgcooley #devup2017
WHERE SHOULD I
PUT FIELD
LABELS?
@dgcooley #devup2017
Field Labels: Not inside fields
No
Marginal
Good
@dgcooley #devup2017
Field Labels: close to fields
No
h#ps://zohosites.wiki.zoho.com/zoho-crm-web-forms.html
@dgcooley #devup2017
Field Labels: close to fields
Yes
h#ps://zohosites.wiki.zoho.com/zoho-crm-web-forms.html
@dgcooley #devup2017
Field Labels: Above is often better
Image	from	Luke	Wroblewski’s	Web	Form	Design.
@dgcooley #devup2017
WHAT ABOUT
REQUIRED FIELDS?
@dgcooley #devup2017
Why are you asking a
question if you don’t need
the answer?
@dgcooley #devup2017
No, really.
Why?
@dgcooley #devup2017
HOW ABOUT ERROR
HANDLING?
@dgcooley #devup2017
Error Handling: Bucket O’Problems
Image	via	h#ps://designmodo.com/15-6ps-for-crea6ng-awesome-web-forms-in-flash/
@dgcooley #devup2017
Error Handling: Show at the field
Twi#er.com	signup	as	captured	in	October	2017.
@dgcooley #devup2017
Error Handling: Dual-code Color
Twi#er.com	signup	as	captured	in	October	2017.
@dgcooley #devup2017
Error Handling: Plain Language
h#p://dgcooley.com/home/2011/12/9/user-friendly-friday-safeco-insurance-web-site.html
@dgcooley #devup2017
OOH! CAPTCHA?
@dgcooley #devup2017
NO.
@dgcooley #devup2017
Step away from the Captcha.
h#ps://www.quora.com/Is-there-any-way-to-hack-CAPTCHA	
h#ps://www.theinquirer.net/inquirer/news/3005704/security-researcher-breaks-google-recaptcha-with-google-tools	
h#ps://designmodo.com/15-6ps-for-crea6ng-awesome-web-forms-in-flash/	
March	
2017
@dgcooley #devup2017
The Big Questions
For EACH form question:
•  Who in the org uses this
information?
•  For what?
•  Is the answer required or
optional?
–  If required, what happens to
bogus answers?
h#p://bit.ly/2ym9X3Z
@dgcooley #devup2017
Books!

More Related Content

Similar to Between Two Form Tags

The ‘Why’ and ‘How’ of the Top 5 Web Form Practices
The ‘Why’ and ‘How’ of the Top 5 Web Form PracticesThe ‘Why’ and ‘How’ of the Top 5 Web Form Practices
The ‘Why’ and ‘How’ of the Top 5 Web Form PracticesTargetX
 
Implementing a Design System in a Small Team by SnapTravel
Implementing a Design System in a Small Team by SnapTravelImplementing a Design System in a Small Team by SnapTravel
Implementing a Design System in a Small Team by SnapTravelProduct School
 
UX Designer Interview Questions
UX Designer Interview QuestionsUX Designer Interview Questions
UX Designer Interview QuestionsAnjuan Simmons
 
Tableau Online Training in canada
Tableau Online Training in canadaTableau Online Training in canada
Tableau Online Training in canadaBoundTechS
 
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
 
Label placement on forms, STC Seattle 2010
Label placement on forms, STC Seattle 2010Label placement on forms, STC Seattle 2010
Label placement on forms, STC Seattle 2010Caroline Jarrett
 
MICROSOFT WORD 2007.pptx
MICROSOFT WORD 2007.pptxMICROSOFT WORD 2007.pptx
MICROSOFT WORD 2007.pptxGauravPlays
 
XPDS16: Patch review for non-maintainers - George Dunlap, Citrix Systems R&D...
 XPDS16: Patch review for non-maintainers - George Dunlap, Citrix Systems R&D... XPDS16: Patch review for non-maintainers - George Dunlap, Citrix Systems R&D...
XPDS16: Patch review for non-maintainers - George Dunlap, Citrix Systems R&D...The Linux Foundation
 
Formatting Features of Writer
Formatting Features of WriterFormatting Features of Writer
Formatting Features of Writertclanton4
 
Faking a Grid - Franco Alvarado (Macmillan Learning), Betsy Granger (Macmilla...
Faking a Grid - Franco Alvarado (Macmillan Learning), Betsy Granger (Macmilla...Faking a Grid - Franco Alvarado (Macmillan Learning), Betsy Granger (Macmilla...
Faking a Grid - Franco Alvarado (Macmillan Learning), Betsy Granger (Macmilla...BookNet Canada
 
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
 
Ni week 2018_ux_lab_viewcandothat
Ni week 2018_ux_lab_viewcandothatNi week 2018_ux_lab_viewcandothat
Ni week 2018_ux_lab_viewcandothatDMC, Inc.
 
Stage 3 - Creating your project
Stage 3 - Creating your projectStage 3 - Creating your project
Stage 3 - Creating your projectc.west
 
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
 
How to Create Infographic Masterclass by Venngage
How to Create Infographic Masterclass by VenngageHow to Create Infographic Masterclass by Venngage
How to Create Infographic Masterclass by VenngageVenngage
 
Timeless TechComm Tips - STC New England Interchange Keynote 2020
Timeless TechComm Tips - STC New England Interchange Keynote 2020Timeless TechComm Tips - STC New England Interchange Keynote 2020
Timeless TechComm Tips - STC New England Interchange Keynote 2020Ed Marsh
 

Similar to Between Two Form Tags (20)

The ‘Why’ and ‘How’ of the Top 5 Web Form Practices
The ‘Why’ and ‘How’ of the Top 5 Web Form PracticesThe ‘Why’ and ‘How’ of the Top 5 Web Form Practices
The ‘Why’ and ‘How’ of the Top 5 Web Form Practices
 
Implementing a Design System in a Small Team by SnapTravel
Implementing a Design System in a Small Team by SnapTravelImplementing a Design System in a Small Team by SnapTravel
Implementing a Design System in a Small Team by SnapTravel
 
Frontend++
Frontend++Frontend++
Frontend++
 
UX Designer Interview Questions
UX Designer Interview QuestionsUX Designer Interview Questions
UX Designer Interview Questions
 
Tableau Online Training in canada
Tableau Online Training in canadaTableau Online Training in canada
Tableau Online Training in canada
 
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
 
Label placement on forms, STC Seattle 2010
Label placement on forms, STC Seattle 2010Label placement on forms, STC Seattle 2010
Label placement on forms, STC Seattle 2010
 
MICROSOFT WORD 2007.pptx
MICROSOFT WORD 2007.pptxMICROSOFT WORD 2007.pptx
MICROSOFT WORD 2007.pptx
 
XPDS16: Patch review for non-maintainers - George Dunlap, Citrix Systems R&D...
 XPDS16: Patch review for non-maintainers - George Dunlap, Citrix Systems R&D... XPDS16: Patch review for non-maintainers - George Dunlap, Citrix Systems R&D...
XPDS16: Patch review for non-maintainers - George Dunlap, Citrix Systems R&D...
 
Formatting Features of Writer
Formatting Features of WriterFormatting Features of Writer
Formatting Features of Writer
 
Faking a Grid - Franco Alvarado (Macmillan Learning), Betsy Granger (Macmilla...
Faking a Grid - Franco Alvarado (Macmillan Learning), Betsy Granger (Macmilla...Faking a Grid - Franco Alvarado (Macmillan Learning), Betsy Granger (Macmilla...
Faking a Grid - Franco Alvarado (Macmillan Learning), Betsy Granger (Macmilla...
 
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
 
Ni week 2018_ux_lab_viewcandothat
Ni week 2018_ux_lab_viewcandothatNi week 2018_ux_lab_viewcandothat
Ni week 2018_ux_lab_viewcandothat
 
Ux6
Ux6Ux6
Ux6
 
UX6
UX6UX6
UX6
 
Stage 3 - Creating your project
Stage 3 - Creating your projectStage 3 - Creating your project
Stage 3 - Creating your project
 
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
 
How to Create Infographic Masterclass by Venngage
How to Create Infographic Masterclass by VenngageHow to Create Infographic Masterclass by Venngage
How to Create Infographic Masterclass by Venngage
 
Timeless TechComm Tips - STC New England Interchange Keynote 2020
Timeless TechComm Tips - STC New England Interchange Keynote 2020Timeless TechComm Tips - STC New England Interchange Keynote 2020
Timeless TechComm Tips - STC New England Interchange Keynote 2020
 

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
 
Getting to know your real users - Mastering practical ethnographic research
Getting to know your real users - Mastering practical ethnographic researchGetting to know your real users - Mastering practical ethnographic research
Getting to know your real users - Mastering practical ethnographic researchDanielle 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
 
Less Content. More Strategy. (KCDC 2014)
Less Content. More Strategy. (KCDC 2014)Less Content. More Strategy. (KCDC 2014)
Less Content. More Strategy. (KCDC 2014)Danielle 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
 

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
 
Getting to know your real users - Mastering practical ethnographic research
Getting to know your real users - Mastering practical ethnographic researchGetting to know your real users - Mastering practical ethnographic research
Getting to know your real users - Mastering practical ethnographic research
 
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
 
Less Content. More Strategy. (KCDC 2014)
Less Content. More Strategy. (KCDC 2014)Less Content. More Strategy. (KCDC 2014)
Less Content. More Strategy. (KCDC 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
 

Recently uploaded

Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxUdaiappa Ramachandran
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureEric D. Schabell
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaborationbruanjhuli
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesDavid Newbury
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostMatt Ray
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1DianaGray10
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Adtran
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfinfogdgmi
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopBachir Benyammi
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfDaniel Santiago Silva Capera
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintMahmoud Rabie
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7DianaGray10
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemAsko Soukka
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Will Schroeder
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024D Cloud Solutions
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URLRuncy Oommen
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPathCommunity
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationIES VE
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-pyJamie (Taka) Wang
 

Recently uploaded (20)

Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptx
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability Adventure
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond Ontologies
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™
 
20230104 - machine vision
20230104 - machine vision20230104 - machine vision
20230104 - machine vision
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdf
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 Workshop
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership Blueprint
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystem
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URL
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation Developers
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-py
 

Between Two Form Tags

  • 1. @dgcooley #devup2017 <FORM> </FORM> BETWEEN TWO FORM TAGSBetween Two Form Tags <Form> </Form>
  • 2. @dgcooley #devup2017 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 #devup2017 WHAT IF MY FORM IS REALLY LONG?
  • 5. @dgcooley #devup2017 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.
  • 7. @dgcooley #devup2017 SHOULD I AUTO- ADVANCE BETWEEN FIELDS?
  • 9. @dgcooley #devup2017 NOT EVEN FOR PHONE NUMBERS.
  • 11. @dgcooley #devup2017 What about submission buttons? •  There is no data on button *order*. •  Primary vs. secondary is more important. •  Labels should be SPECIFIC. Go to Step 3 Cancel Submit Cancel
  • 12. @dgcooley #devup2017 WHERE SHOULD MY ACTION BUTTONS BE?
  • 13. @dgcooley #devup2017 Align your buttons where your user’s visual path ends.
  • 14. @dgcooley #devup2017 WHERE SHOULD I PUT FIELD LABELS?
  • 15. @dgcooley #devup2017 Field Labels: Not inside fields No Marginal Good
  • 16. @dgcooley #devup2017 Field Labels: close to fields No h#ps://zohosites.wiki.zoho.com/zoho-crm-web-forms.html
  • 17. @dgcooley #devup2017 Field Labels: close to fields Yes h#ps://zohosites.wiki.zoho.com/zoho-crm-web-forms.html
  • 18. @dgcooley #devup2017 Field Labels: Above is often better Image from Luke Wroblewski’s Web Form Design.
  • 20. @dgcooley #devup2017 Why are you asking a question if you don’t need the answer?
  • 23. @dgcooley #devup2017 Error Handling: Bucket O’Problems Image via h#ps://designmodo.com/15-6ps-for-crea6ng-awesome-web-forms-in-flash/
  • 24. @dgcooley #devup2017 Error Handling: Show at the field Twi#er.com signup as captured in October 2017.
  • 25. @dgcooley #devup2017 Error Handling: Dual-code Color Twi#er.com signup as captured in October 2017.
  • 26. @dgcooley #devup2017 Error Handling: Plain Language h#p://dgcooley.com/home/2011/12/9/user-friendly-friday-safeco-insurance-web-site.html
  • 29. @dgcooley #devup2017 Step away from the Captcha. h#ps://www.quora.com/Is-there-any-way-to-hack-CAPTCHA h#ps://www.theinquirer.net/inquirer/news/3005704/security-researcher-breaks-google-recaptcha-with-google-tools h#ps://designmodo.com/15-6ps-for-crea6ng-awesome-web-forms-in-flash/ March 2017
  • 30. @dgcooley #devup2017 The Big Questions For EACH form question: •  Who in the org uses this information? •  For what? •  Is the answer required or optional? –  If required, what happens to bogus answers? h#p://bit.ly/2ym9X3Z