This document outlines best practices for form design. It discusses why form design matters for enabling commerce, access, and engagement online. It then covers design principles like minimizing pain points for users and ensuring a clear path to completion. Specific design patterns are examined, including layout, required fields, and help text. The document recommends top-aligned labels for familiar data, right-aligned labels when space is limited, and left-aligned labels for unfamiliar data. It also suggests using the minimum necessary visual elements and dynamic help systems for unfamiliar forms.
In my Web Form Design Best Practices talk at the Technical Communication Summit in Minneapolis, MN I walked thorugh the importance of Web forms and a series of design best practices culled from live to site analytics, usability testing, eye-tracking studies, and best practice surveys.
Some of the topics I discuss and provide patterns for are: label alignment, required form filed, input field sizes, content grouping, primary & secondary actions, help text & tips, dyanmic help systems, inline validation, error messages, progress indicators, success messaging, progressive disclosure, gradual engagement, tabbing, flexible data inputs, smart defaults, paths to completion, selection dependent inputs, and more...
This is a Heuristic evaluation of an Indian online radio site called as BC radio. BC Radio's vision is to promote emerging artists which are not part of mainstream music industry. They support new talent while always preserving their rights as musicians and attempting to curb piracy of their content.
About the test:
A heuristic evaluation is a usability inspection method for computer software that helps to identify usability problems in the user interface (UI) design. It specifically involves evaluators examining the interface and judging its compliance with recognized usability principles.
We mainly used Think aloud method to come up with the insights.
What is Heuristic evaluation
Background
Benefits
Main advantages and drawbacks of the method
Scenario and methods of evaluation
10 usability Heuristics in usability engineering
How to conduct heuristic Evaluation
Phases of the Evaluation Method
Problems and Evaluators
Seamlessness thought the whole user experience
Good designing is also an act of communication between the user and designer and the user. Gets here all the important tips and techniques of user experience design by our expert.
In my Web Form Design Best Practices talk at the Technical Communication Summit in Minneapolis, MN I walked thorugh the importance of Web forms and a series of design best practices culled from live to site analytics, usability testing, eye-tracking studies, and best practice surveys.
Some of the topics I discuss and provide patterns for are: label alignment, required form filed, input field sizes, content grouping, primary & secondary actions, help text & tips, dyanmic help systems, inline validation, error messages, progress indicators, success messaging, progressive disclosure, gradual engagement, tabbing, flexible data inputs, smart defaults, paths to completion, selection dependent inputs, and more...
This is a Heuristic evaluation of an Indian online radio site called as BC radio. BC Radio's vision is to promote emerging artists which are not part of mainstream music industry. They support new talent while always preserving their rights as musicians and attempting to curb piracy of their content.
About the test:
A heuristic evaluation is a usability inspection method for computer software that helps to identify usability problems in the user interface (UI) design. It specifically involves evaluators examining the interface and judging its compliance with recognized usability principles.
We mainly used Think aloud method to come up with the insights.
What is Heuristic evaluation
Background
Benefits
Main advantages and drawbacks of the method
Scenario and methods of evaluation
10 usability Heuristics in usability engineering
How to conduct heuristic Evaluation
Phases of the Evaluation Method
Problems and Evaluators
Seamlessness thought the whole user experience
Good designing is also an act of communication between the user and designer and the user. Gets here all the important tips and techniques of user experience design by our expert.
Introduction to Information ArchitectureAbby Covert
The first class of a 15 week course taught at Parsons, the New School for Design. Covers Information Architecture intents and beliefs as well as a comparison to the related studies of interaction design, content strategy and user research. Lastly, speaking to the role of User Experience in all of these roles.
Web Accessibility: A Shared ResponsibilityJoseph Dolson
This a presentation prepared for a Montana Web Developer's Meetup in December, 2011. The focus is on collaborating with content providers and employers to share the responsibility for web accessibility.
Wireframing Basics - UX and the Design Process by Amber VasquezMightybytes
Join Mightybytes Experience Director Amber Vasquez for a workshop explaining the basics of wireframing. You'll gain a basic understanding of the tools and techniques you'll need to incorporate wireframing into your everyday design work. And you'll get a complimentary UX sketchbook to work with!
This workshop is recommended for design professionals looking to integrate wireframing into their process, or anyone strengthening their full-stack design skills.
The SlideShare presentation consists of the summary of the Design System 101 Workshop, as presented by UX Gorilla with Mayank Dhawan.
Link of the event: https://bit.ly/2RwN4RF
The workshop took place on December 01, 2018 at 91springboard, Jhandewalan Extension, New Delhi.
This event was for designers, developers or members of the product team to help them with a clear understanding and give them useful ideas to make better decisions, help their teams to save time so that they can do things they would enjoy.
UX Design refers to the term User Experience Design, while UI Design stands for User Interface Design. Both elements are crucial to a product and work closely together. But despite their professional relationship, the roles themselves are quite different, referring to very different parts of the process and the design discipline. Where UX Design is a more analytical and technical field, UI Design is closer to what we refer to as graphic design, though the responsibilities are somewhat more complex.
A Web for Everyone: Accessibility as a design challengeWhitney Quesenbery
Let's get past the idea that checklists and compliance all there is to accessibility. Designing for accessibility is a user experience design problem, starting with understanding how people with disabilities use your products. If we aim to design for all senses we can focus on easy interaction, helpful wayfinding, clean presentation, plain language and media instead of "rules." Doing so, we can create a web for everyone and a delightful user experience where accessibility and usability work together.
Updated January 21
Replay of the O'Reilly webcast: http://www.oreillynet.com/pub/e/2992
Transcript of the O'Reilly webcast: http://www.wqusability.com/handouts/AWFE-Challenge-OReilly-Transcript.pdf
The fifth class of a 15 week course in Information Architecture taught at Parsons, the New School for Design. Topics include: Putting the Why before the what and the what before the how. The relationship of goals, requirements and features. How to deal with needed research and data as a requirement.
Including Everyone: Web Accessibility 101Helena Zubkow
Shouldn’t the web be awesome for everyone? That's not always the case, but it could be.
Designed for developers, project managers, and directors alike, the goal of this session is to introduce everyone to the wonderful world of web accessibility. We'll cover the basic standards and regional expectations for accessibility, as well as the principles and concepts that make up the accessibility field. This session will touch on Section 508, WCAG 2.0 standards, and the financial viability of a web accessibility initiative in an industry where time is money.
This session is proposed as a conceptual prelude to our more developer-oriented accessibility session that is taking place at the Higher Ed Summit. Based on my experience as a web accessibility specialist from both the perspective of a project manager and a front-end developer, I'll share the knowledge I've gained with you to address the following important questions:
- What is web accessibility?
- Why does web accessibility matter to my users?
- Why does web accessibility matter for my company and clients?
- How will a web accessibility initiative affect my bottom line?
- How can I include web accessibility in my company's culture and work plans?
- What tools can I use to assess and improve accessibility in my projects?
- How can I help the web accessibility community?
Introduction to Information ArchitectureAbby Covert
The first class of a 15 week course taught at Parsons, the New School for Design. Covers Information Architecture intents and beliefs as well as a comparison to the related studies of interaction design, content strategy and user research. Lastly, speaking to the role of User Experience in all of these roles.
Web Accessibility: A Shared ResponsibilityJoseph Dolson
This a presentation prepared for a Montana Web Developer's Meetup in December, 2011. The focus is on collaborating with content providers and employers to share the responsibility for web accessibility.
Wireframing Basics - UX and the Design Process by Amber VasquezMightybytes
Join Mightybytes Experience Director Amber Vasquez for a workshop explaining the basics of wireframing. You'll gain a basic understanding of the tools and techniques you'll need to incorporate wireframing into your everyday design work. And you'll get a complimentary UX sketchbook to work with!
This workshop is recommended for design professionals looking to integrate wireframing into their process, or anyone strengthening their full-stack design skills.
The SlideShare presentation consists of the summary of the Design System 101 Workshop, as presented by UX Gorilla with Mayank Dhawan.
Link of the event: https://bit.ly/2RwN4RF
The workshop took place on December 01, 2018 at 91springboard, Jhandewalan Extension, New Delhi.
This event was for designers, developers or members of the product team to help them with a clear understanding and give them useful ideas to make better decisions, help their teams to save time so that they can do things they would enjoy.
UX Design refers to the term User Experience Design, while UI Design stands for User Interface Design. Both elements are crucial to a product and work closely together. But despite their professional relationship, the roles themselves are quite different, referring to very different parts of the process and the design discipline. Where UX Design is a more analytical and technical field, UI Design is closer to what we refer to as graphic design, though the responsibilities are somewhat more complex.
A Web for Everyone: Accessibility as a design challengeWhitney Quesenbery
Let's get past the idea that checklists and compliance all there is to accessibility. Designing for accessibility is a user experience design problem, starting with understanding how people with disabilities use your products. If we aim to design for all senses we can focus on easy interaction, helpful wayfinding, clean presentation, plain language and media instead of "rules." Doing so, we can create a web for everyone and a delightful user experience where accessibility and usability work together.
Updated January 21
Replay of the O'Reilly webcast: http://www.oreillynet.com/pub/e/2992
Transcript of the O'Reilly webcast: http://www.wqusability.com/handouts/AWFE-Challenge-OReilly-Transcript.pdf
The fifth class of a 15 week course in Information Architecture taught at Parsons, the New School for Design. Topics include: Putting the Why before the what and the what before the how. The relationship of goals, requirements and features. How to deal with needed research and data as a requirement.
Including Everyone: Web Accessibility 101Helena Zubkow
Shouldn’t the web be awesome for everyone? That's not always the case, but it could be.
Designed for developers, project managers, and directors alike, the goal of this session is to introduce everyone to the wonderful world of web accessibility. We'll cover the basic standards and regional expectations for accessibility, as well as the principles and concepts that make up the accessibility field. This session will touch on Section 508, WCAG 2.0 standards, and the financial viability of a web accessibility initiative in an industry where time is money.
This session is proposed as a conceptual prelude to our more developer-oriented accessibility session that is taking place at the Higher Ed Summit. Based on my experience as a web accessibility specialist from both the perspective of a project manager and a front-end developer, I'll share the knowledge I've gained with you to address the following important questions:
- What is web accessibility?
- Why does web accessibility matter to my users?
- Why does web accessibility matter for my company and clients?
- How will a web accessibility initiative affect my bottom line?
- How can I include web accessibility in my company's culture and work plans?
- What tools can I use to assess and improve accessibility in my projects?
- How can I help the web accessibility community?
Design Patterns: Defining and Sharing Web Design Languages Luke Wroblewski
In my Design Patterns: Defining and Sharing Web Design Languages talk at South by Southwest 2007 I discussed how to put design patterns to use within Web applications with an overview of the what, why, and how of shared online design pattern libraries.
Utilizing SharePoint to improve your businessRobert Crane
You can't expect to sell Windows SharePoint services unless you are actually using it within your own business. This presentation will take you through how an IT business like yours can implement SharePoint to improve your own productivity. You will also discover how to take this knowledge out to customers to create more revenue for your business. Learn how to work smarter with SharePoint. If you are planning on selling SharePoint services, and you should be, then you must attend this session to discover what works and what doesn't with SharePoint inside a business and how to leverage that knowledge to produce better business for yourself and your customers.
In the presentation I point out how the ability of visual communication to express core customer and brand messages across multiple forms of media has not changed much. However, shifts from locomotion to services, from pages to rich interactions, from sites to content experiences, and from content creation by webmasters to everyone online have introduced unique opportunities and constraints that the presentation layer of Web applications needs to account for.
In this talk, I outline the way people naturally scan Web pages and explain how you can guide users through key content and actions using visual hierarchy to construct meaningful, prioritized page layouts. You'll be taken through several before and after examples with explanations of how a page's content was prioritized, why, and how that priority is being communicated to users so they don't need to rely on chance to use your Web application.
Collaboration Tools to Create Better ProductsEnthiosys Inc
Luke Hohmann presentation at Insight Forum. Provided concrete tools and concepts for collaborating with internal and external stakeholders to create better products
Presentazione durante il workshop "Il lavoro di domani" organizzato dai Giovani Imprenditori di Confindustria (Capri, 16 Ottobre 2015)
http://www.giovanimprenditori.org/public/userfiles/file/Il%20lavoro%20di%20domani.pdf
Gli standard per l’interoperabilità dei sistemi studenti in ambito EuropeoSimone Ravaioli
Presentazion di Simone Ravaioli durante l'incontro
"Mobilità e accordi internazionali Sistemi informativi a supporto della mobilità internazionale"
Bologna, 21 Giugno 2011
Campagna di informazione sul Processo di Bologna
Seminario su:
"Mobilità e accordi internazionali
Sistemi informativi a supporto della mobilità internazionale"
Università di Bologna
21 giugno 2011
Epistemic Interaction - tuning interfaces to provide information for AI supportAlan Dix
Paper presented at SYNERGY workshop at AVI 2024, Genoa, Italy. 3rd June 2024
https://alandix.com/academic/papers/synergy2024-epistemic/
As machine learning integrates deeper into human-computer interactions, the concept of epistemic interaction emerges, aiming to refine these interactions to enhance system adaptability. This approach encourages minor, intentional adjustments in user behaviour to enrich the data available for system learning. This paper introduces epistemic interaction within the context of human-system communication, illustrating how deliberate interaction design can improve system understanding and adaptation. Through concrete examples, we demonstrate the potential of epistemic interaction to significantly advance human-computer interaction by leveraging intuitive human communication strategies to inform system design and functionality, offering a novel pathway for enriching user-system engagements.
Essentials of Automations: Optimizing FME Workflows with ParametersSafe Software
Are you looking to streamline your workflows and boost your projects’ efficiency? Do you find yourself searching for ways to add flexibility and control over your FME workflows? If so, you’re in the right place.
Join us for an insightful dive into the world of FME parameters, a critical element in optimizing workflow efficiency. This webinar marks the beginning of our three-part “Essentials of Automation” series. This first webinar is designed to equip you with the knowledge and skills to utilize parameters effectively: enhancing the flexibility, maintainability, and user control of your FME projects.
Here’s what you’ll gain:
- Essentials of FME Parameters: Understand the pivotal role of parameters, including Reader/Writer, Transformer, User, and FME Flow categories. Discover how they are the key to unlocking automation and optimization within your workflows.
- Practical Applications in FME Form: Delve into key user parameter types including choice, connections, and file URLs. Allow users to control how a workflow runs, making your workflows more reusable. Learn to import values and deliver the best user experience for your workflows while enhancing accuracy.
- Optimization Strategies in FME Flow: Explore the creation and strategic deployment of parameters in FME Flow, including the use of deployment and geometry parameters, to maximize workflow efficiency.
- Pro Tips for Success: Gain insights on parameterizing connections and leveraging new features like Conditional Visibility for clarity and simplicity.
We’ll wrap up with a glimpse into future webinars, followed by a Q&A session to address your specific questions surrounding this topic.
Don’t miss this opportunity to elevate your FME expertise and drive your projects to new heights of efficiency.
Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...Jeffrey Haguewood
Sidekick Solutions uses Bonterra Impact Management (fka Social Solutions Apricot) and automation solutions to integrate data for business workflows.
We believe integration and automation are essential to user experience and the promise of efficient work through technology. Automation is the critical ingredient to realizing that full vision. We develop integration products and services for Bonterra Case Management software to support the deployment of automations for a variety of use cases.
This video focuses on the notifications, alerts, and approval requests using Slack for Bonterra Impact Management. The solutions covered in this webinar can also be deployed for Microsoft Teams.
Interested in deploying notification automations for Bonterra Impact Management? Contact us at sales@sidekicksolutionsllc.com to discuss next steps.
UiPath Test Automation using UiPath Test Suite series, part 3DianaGray10
Welcome to UiPath Test Automation using UiPath Test Suite series part 3. In this session, we will cover desktop automation along with UI automation.
Topics covered:
UI automation Introduction,
UI automation Sample
Desktop automation flow
Pradeep Chinnala, Senior Consultant Automation Developer @WonderBotz and UiPath MVP
Deepak Rai, Automation Practice Lead, Boundaryless Group and UiPath MVP
Transcript: Selling digital books in 2024: Insights from industry leaders - T...BookNet Canada
The publishing industry has been selling digital audiobooks and ebooks for over a decade and has found its groove. What’s changed? What has stayed the same? Where do we go from here? Join a group of leading sales peers from across the industry for a conversation about the lessons learned since the popularization of digital books, best practices, digital book supply chain management, and more.
Link to video recording: https://bnctechforum.ca/sessions/selling-digital-books-in-2024-insights-from-industry-leaders/
Presented by BookNet Canada on May 28, 2024, with support from the Department of Canadian Heritage.
State of ICS and IoT Cyber Threat Landscape Report 2024 previewPrayukth K V
The IoT and OT threat landscape report has been prepared by the Threat Research Team at Sectrio using data from Sectrio, cyber threat intelligence farming facilities spread across over 85 cities around the world. In addition, Sectrio also runs AI-based advanced threat and payload engagement facilities that serve as sinks to attract and engage sophisticated threat actors, and newer malware including new variants and latent threats that are at an earlier stage of development.
The latest edition of the OT/ICS and IoT security Threat Landscape Report 2024 also covers:
State of global ICS asset and network exposure
Sectoral targets and attacks as well as the cost of ransom
Global APT activity, AI usage, actor and tactic profiles, and implications
Rise in volumes of AI-powered cyberattacks
Major cyber events in 2024
Malware and malicious payload trends
Cyberattack types and targets
Vulnerability exploit attempts on CVEs
Attacks on counties – USA
Expansion of bot farms – how, where, and why
In-depth analysis of the cyber threat landscape across North America, South America, Europe, APAC, and the Middle East
Why are attacks on smart factories rising?
Cyber risk predictions
Axis of attacks – Europe
Systemic attacks in the Middle East
Download the full report from here:
https://sectrio.com/resources/ot-threat-landscape-reports/sectrio-releases-ot-ics-and-iot-security-threat-landscape-report-2024/
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...DanBrown980551
Do you want to learn how to model and simulate an electrical network from scratch in under an hour?
Then welcome to this PowSyBl workshop, hosted by Rte, the French Transmission System Operator (TSO)!
During the webinar, you will discover the PowSyBl ecosystem as well as handle and study an electrical network through an interactive Python notebook.
PowSyBl is an open source project hosted by LF Energy, which offers a comprehensive set of features for electrical grid modelling and simulation. Among other advanced features, PowSyBl provides:
- A fully editable and extendable library for grid component modelling;
- Visualization tools to display your network;
- Grid simulation tools, such as power flows, security analyses (with or without remedial actions) and sensitivity analyses;
The framework is mostly written in Java, with a Python binding so that Python developers can access PowSyBl functionalities as well.
What you will learn during the webinar:
- For beginners: discover PowSyBl's functionalities through a quick general presentation and the notebook, without needing any expert coding skills;
- For advanced developers: master the skills to efficiently apply PowSyBl functionalities to your real-world scenarios.
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...UiPathCommunity
💥 Speed, accuracy, and scaling – discover the superpowers of GenAI in action with UiPath Document Understanding and Communications Mining™:
See how to accelerate model training and optimize model performance with active learning
Learn about the latest enhancements to out-of-the-box document processing – with little to no training required
Get an exclusive demo of the new family of UiPath LLMs – GenAI models specialized for processing different types of documents and messages
This is a hands-on session specifically designed for automation developers and AI enthusiasts seeking to enhance their knowledge in leveraging the latest intelligent document processing capabilities offered by UiPath.
Speakers:
👨🏫 Andras Palfi, Senior Product Manager, UiPath
👩🏫 Lenka Dulovicova, Product Program Manager, UiPath
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024Tobias Schneck
As AI technology is pushing into IT I was wondering myself, as an “infrastructure container kubernetes guy”, how get this fancy AI technology get managed from an infrastructure operational view? Is it possible to apply our lovely cloud native principals as well? What benefit’s both technologies could bring to each other?
Let me take this questions and provide you a short journey through existing deployment models and use cases for AI software. On practical examples, we discuss what cloud/on-premise strategy we may need for applying it to our own infrastructure to get it to work from an enterprise perspective. I want to give an overview about infrastructure requirements and technologies, what could be beneficial or limiting your AI use cases in an enterprise environment. An interactive Demo will give you some insides, what approaches I got already working for real.
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdf91mobiles
91mobiles recently conducted a Smart TV Buyer Insights Survey in which we asked over 3,000 respondents about the TV they own, aspects they look at on a new TV, and their TV buying preferences.
Connector Corner: Automate dynamic content and events by pushing a buttonDianaGray10
Here is something new! In our next Connector Corner webinar, we will demonstrate how you can use a single workflow to:
Create a campaign using Mailchimp with merge tags/fields
Send an interactive Slack channel message (using buttons)
Have the message received by managers and peers along with a test email for review
But there’s more:
In a second workflow supporting the same use case, you’ll see:
Your campaign sent to target colleagues for approval
If the “Approve” button is clicked, a Jira/Zendesk ticket is created for the marketing design team
But—if the “Reject” button is pushed, colleagues will be alerted via Slack message
Join us to learn more about this new, human-in-the-loop capability, brought to you by Integration Service connectors.
And...
Speakers:
Akshay Agnihotri, Product Manager
Charlie Greenberg, Host
Software Delivery At the Speed of AI: Inflectra Invests In AI-Powered QualityInflectra
In this insightful webinar, Inflectra explores how artificial intelligence (AI) is transforming software development and testing. Discover how AI-powered tools are revolutionizing every stage of the software development lifecycle (SDLC), from design and prototyping to testing, deployment, and monitoring.
Learn about:
• The Future of Testing: How AI is shifting testing towards verification, analysis, and higher-level skills, while reducing repetitive tasks.
• Test Automation: How AI-powered test case generation, optimization, and self-healing tests are making testing more efficient and effective.
• Visual Testing: Explore the emerging capabilities of AI in visual testing and how it's set to revolutionize UI verification.
• Inflectra's AI Solutions: See demonstrations of Inflectra's cutting-edge AI tools like the ChatGPT plugin and Azure Open AI platform, designed to streamline your testing process.
Whether you're a developer, tester, or QA professional, this webinar will give you valuable insights into how AI is shaping the future of software delivery.
11. 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
12. 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
13. Design Patterns
Visual Communication
Information Affordances
+
Engagement
Interaction Disclosure
+
Response
Feedback Verification
13
16. 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
18. 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
20. 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
22. 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
23. • 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
24. 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
31. • 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
32. 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
36. • When possible, use
field length as an
affordance
BEST PRACTICE
• Otherwise consider a
consistent length that
provides enough room
for inputs
36
37. 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
44. • Use relevant content
groupings to organize
forms
BEST PRACTICE
• Use the minimum
amount of visual
elements necessary to
communicate useful
relationships
44
45. 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
48. • Avoid secondary
actions if possible
BEST PRACTICE • Otherwise, ensure a
clear visual distinction
between primary &
secondary actions
48
49. 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
58. • Minimize the amount of
help & tips required to
fill out a form
• Help visible and
adjacent to a data
BEST PRACTICE request is most useful
• When lots of unfamiliar
data is being
requested, consider
using a dynamic help
system
58
61. 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
68. • 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
69. 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
71. • Remember to account
for tabbing behavior
• Use the tabindex
BEST PRACTICE attribute to control
tabbing order
• Consider tabbing
expectations when
laying out forms
71
72. Progressive Disclosure
• Not all users require all available
options all the time
• Progressive disclosure provides
additional options when appropriate
• Advanced options
• Gradual engagement
72
79. • Map progressive
disclosure to
prioritized user needs
BEST PRACTICE
• Most effective when
user-initiated
• Maintain a consistent
approach
79
80. 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
84. 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
85. • Maintain clear
relationship between
initial selection options
BEST PRACTICE
• Clearly associate
additional inputs with
their trigger
• Avoid “jumping” that
disassociates initial
selection options
85
93. • Use inline validation for
inputs that have
potentially high error
BEST PRACTICE rates
• Use suggested inputs
to disambiguate
• Communicate limits
93
94. 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
100. • 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
101. Progress
• Sometimes actions require some time to
process
• Form submission
• Data calculations
• Uploads
• Provide feedback when an action is in
progress
101
103. • Provide indication of
tasks in progress
BEST PRACTICE • Disable “submit”
button after user clicks
it to avoid duplicate
submissions
103
104. Success
• After successful form completion
confirm data input in context
• On updated page
• On revised form
• Provide feedback via
• Message (removable)
• Animated Indicator
104
108. • Clearly communicate a
data submission has
been successful
BEST PRACTICE
• Provide feedback in
context of data
submitted
108
109. 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
110. 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
111. Web Form Creation Tools
• Wufoo
• http://www.wufoo.com
• Form Assembly
• http://www.formassembly.com
• icebrrg
• http://www.icebrrg.com
111
112. 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