Lectures for the course "Ergonomics applied to the usability of web pages and apps" held at the School of design of Politecnico di milano in the first semester of 2021-2022 academic year
Lectures for the course "Ergonomics applied to the usability of web pages and apps" held at the School of design of Politecnico di milano in the first semester of 2021-2022 academic year
Lectures for the course "Ergonomics applied to the usability of web pages and apps" held at the School of design of Politecnico di milano in the first semester of 2021-2022 academic year
This document discusses user-centered design and methods for gathering user requirements, including personas, user stories, tasks, use cases, interviews and prototyping. It emphasizes the importance of understanding user needs and goals in order to design usable and effective websites, apps and digital products. Specific topics covered include defining personas, writing user stories, creating empathy maps, techniques for gathering requirements, and how to structure use cases. The overall message is that applying user-centered design principles leads to designs that optimize the user experience.
Lectures for the course "Ergonomics applied to the usability of web pages and apps" held at the School of design of Politecnico di milano in the first semester of 2021-2022 academic year
Lectures for the course "Ergonomics applied to the usability of web pages and apps" held at the School of design of Politecnico di milano in the first semester of 2021-2022 academic year
Lectures for the course "Ergonomics applied to the usability of web pages and apps" held at the School of design of Politecnico di milano in the first semester of 2021-2022 academic year
Lectures for the course "Ergonomics applied to the usability of web pages and apps" held at the School of design of Politecnico di milano in the first semester of 2021-2022 academic year
Lectures for the course "Ergonomics applied to the usability of web pages and apps" held at the School of design of Politecnico di milano in the first semester of 2021-2022 academic year
Lectures for the course "Ergonomics applied to the usability of web pages and apps" held at the School of design of Politecnico di milano in the first semester of 2021-2022 academic year
Lectures for the course "Ergonomics applied to the usability of web pages and apps" held at the School of design of Politecnico di milano in the first semester of 2021-2022 academic year
This document discusses user-centered design and methods for gathering user requirements, including personas, user stories, tasks, use cases, interviews and prototyping. It emphasizes the importance of understanding user needs and goals in order to design usable and effective websites, apps and digital products. Specific topics covered include defining personas, writing user stories, creating empathy maps, techniques for gathering requirements, and how to structure use cases. The overall message is that applying user-centered design principles leads to designs that optimize the user experience.
Lectures for the course "Ergonomics applied to the usability of web pages and apps" held at the School of design of Politecnico di milano in the first semester of 2021-2022 academic year
Lectures for the course "Ergonomics applied to the usability of web pages and apps" held at the School of design of Politecnico di milano in the first semester of 2021-2022 academic year
Lectures for the course "Ergonomics applied to the usability of web pages and apps" held at the School of design of Politecnico di milano in the first semester of 2021-2022 academic year
Lectures for the course "Ergonomics applied to the usability of web pages and apps" held at the School of design of Politecnico di milano in the first semester of 2021-2022 academic year
Lectures for the course "Ergonomics applied to the usability of web pages and apps" held at the School of design of Politecnico di milano in the first semester of 2021-2022 academic year
Lectures for the course "Ergonomics applied to the usability of web pages and apps" held at the School of design of Politecnico di milano in the first semester of 2021-2022 academic year
The document discusses various aspects of form design for web pages. It addresses topics like the relationship between the form and the user, designing an intuitive path for users to complete the form, providing feedback and validation, and ensuring the conversation and appearance of the form is optimized. Specific guidelines are provided around labeling fields, grouping related form elements, and visually distinguishing primary actions from secondary actions. The overall goal of the document is to provide guidance on creating forms that users can easily and successfully complete.
KidsPod is a mobile app launched in 2021 that provides podcast content for children ages 3-14. It aims to introduce kids to podcasts and connect them with educational content creators. The app's mission is to respect children and enhance their lives through screen time that inspires creativity, growth, and real-world connections. KidsPod believes kids should have freedom with podcasts and is building a platform designed specifically for children to discover and interact with age-appropriate audio content. The document provides brand guidelines for KidsPod, including their logo, colors, fonts, tone and various app design considerations.
The document discusses accessibility in web design. It defines accessibility as designing products, devices, and environments to be usable by people with disabilities through both direct and indirect access via assistive technologies. It notes that accessibility benefits all users by working for those with slow connections or small devices. The document outlines how up to 20% of people have disabilities that impact web use, such as visual, hearing, motor and cognitive impairments, and discusses common barriers to accessibility like lack of captioning for deaf users or exclusive keyboard navigation. It provides resources on web accessibility standards and initiatives.
This document summarizes a digital workshop about going digital for home exporters. The workshop discusses the need for businesses to have an online presence through websites and social media. It provides tips on developing a digital presence, designing effective digital presentations, and ways to engage buyers virtually through Zoom presentations, showroom tours, and creative fair setups. The workshop emphasizes keeping presentations simple, telling your story, and creating engagement through live Q&A.
This is a presentation that I did for the Fremont Public Library that covers the basics of LinkedIn. I discuss the elements that need to be a priority. The latter portion of the deck shows the LinkedIn mobile app and several unknown features.
NID Design Aptitude Test is a means through which aspirants are shortlisted for admission in UG and PG design courses offered at the prestigious National Institute Design (NID) campuses. Candidates need to clear two NID admission tests in order to be eligible for admission in Bachelor of Design (BDes), Graduate Diploma Programme in Design (GDPD) and Master of Design (MDes) courses offered at its campuses.
Earlier, NID offered admission in its five campuses through NID entrance exam. However, from 2019 onwards two more NID campuses, that is, NID Bhopal and NID Jorhat were added to the list wherein admission was offered in GDPD course on the basis of NID admission test.
NID DAT Prelims 2020 is over. The result for NID DAT Prelims for MDes admissions has been announced on February 21 whereas, for BDes/ GDPD, the result were postponed and then declared on May 3, 2020.
Web Sites that WOW - Which Printers Made It?Margie Dana
This document outlines tips for building an effective printer's website. It discusses putting the site in perspective for print buyers, primarily millennials and generation C who are digital natives. The document recommends including key sections like equipment lists, capabilities, team bios, news, blogs and social media links. It also provides examples of great printer websites and emphasizes making the site conversational, visual, current and reflecting the printer's personality to build relationships with prospects.
Lectures for the course "Ergonomics applied to the usability of web pages and apps" held at the School of design of Politecnico di milano in the first semester of 2021-2022 academic year
Lectures for the course "Ergonomics applied to the usability of web pages and apps" held at the School of design of Politecnico di milano in the first semester of 2021-2022 academic year
Lectures for the course "Ergonomics applied to the usability of web pages and apps" held at the School of design of Politecnico di milano in the first semester of 2021-2022 academic year
Lectures for the course "Ergonomics applied to the usability of web pages and apps" held at the School of design of Politecnico di milano in the first semester of 2021-2022 academic year
Lectures for the course "Ergonomics applied to the usability of web pages and apps" held at the School of design of Politecnico di milano in the first semester of 2021-2022 academic year
The document discusses various aspects of form design for web pages. It addresses topics like the relationship between the form and the user, designing an intuitive path for users to complete the form, providing feedback and validation, and ensuring the conversation and appearance of the form is optimized. Specific guidelines are provided around labeling fields, grouping related form elements, and visually distinguishing primary actions from secondary actions. The overall goal of the document is to provide guidance on creating forms that users can easily and successfully complete.
KidsPod is a mobile app launched in 2021 that provides podcast content for children ages 3-14. It aims to introduce kids to podcasts and connect them with educational content creators. The app's mission is to respect children and enhance their lives through screen time that inspires creativity, growth, and real-world connections. KidsPod believes kids should have freedom with podcasts and is building a platform designed specifically for children to discover and interact with age-appropriate audio content. The document provides brand guidelines for KidsPod, including their logo, colors, fonts, tone and various app design considerations.
The document discusses accessibility in web design. It defines accessibility as designing products, devices, and environments to be usable by people with disabilities through both direct and indirect access via assistive technologies. It notes that accessibility benefits all users by working for those with slow connections or small devices. The document outlines how up to 20% of people have disabilities that impact web use, such as visual, hearing, motor and cognitive impairments, and discusses common barriers to accessibility like lack of captioning for deaf users or exclusive keyboard navigation. It provides resources on web accessibility standards and initiatives.
This document summarizes a digital workshop about going digital for home exporters. The workshop discusses the need for businesses to have an online presence through websites and social media. It provides tips on developing a digital presence, designing effective digital presentations, and ways to engage buyers virtually through Zoom presentations, showroom tours, and creative fair setups. The workshop emphasizes keeping presentations simple, telling your story, and creating engagement through live Q&A.
This is a presentation that I did for the Fremont Public Library that covers the basics of LinkedIn. I discuss the elements that need to be a priority. The latter portion of the deck shows the LinkedIn mobile app and several unknown features.
NID Design Aptitude Test is a means through which aspirants are shortlisted for admission in UG and PG design courses offered at the prestigious National Institute Design (NID) campuses. Candidates need to clear two NID admission tests in order to be eligible for admission in Bachelor of Design (BDes), Graduate Diploma Programme in Design (GDPD) and Master of Design (MDes) courses offered at its campuses.
Earlier, NID offered admission in its five campuses through NID entrance exam. However, from 2019 onwards two more NID campuses, that is, NID Bhopal and NID Jorhat were added to the list wherein admission was offered in GDPD course on the basis of NID admission test.
NID DAT Prelims 2020 is over. The result for NID DAT Prelims for MDes admissions has been announced on February 21 whereas, for BDes/ GDPD, the result were postponed and then declared on May 3, 2020.
Web Sites that WOW - Which Printers Made It?Margie Dana
This document outlines tips for building an effective printer's website. It discusses putting the site in perspective for print buyers, primarily millennials and generation C who are digital natives. The document recommends including key sections like equipment lists, capabilities, team bios, news, blogs and social media links. It also provides examples of great printer websites and emphasizes making the site conversational, visual, current and reflecting the printer's personality to build relationships with prospects.
Lectures for the course "Ergonomics applied to the usability of web pages and apps" held at the School of design of Politecnico di milano in the first semester of 2021-2022 academic year
Lectures for the course "Ergonomics applied to the usability of web pages and apps" held at the School of design of Politecnico di milano in the first semester of 2021-2022 academic year
Lectures for the course "Ergonomics applied to the usability of web pages and apps" held at the School of design of Politecnico di milano in the first semester of 2021-2022 academic year
Lectures for the course "Ergonomics applied to the usability of web pages and apps" held at the School of design of Politecnico di milano in the first semester of 2021-2022 academic year
The document discusses why all uppercase text is less readable, especially for long passages. It notes that studies have shown all caps text is 40% less readable. It explains that when reading, we recognize whole words rather than individual letters, and uppercase/lowercase letters give words a distinctive shape that aids recognition. Breaking up the uppercase text disrupts this recognition process. The document recommends avoiding all caps for lengthy texts, while it can be used for titles, short phrases or emphasis. White space should also be used to avoid disturbing the flow of reading.
This document discusses interaction design and principles for user-centered design. It covers several topics: the seven stages of human action with goals, intentions, actions, feedback, and evaluation; crossing the gulfs of execution and evaluation in design; affordances and how objects provide clues about their use; the ISO principles of suitability, self-descriptiveness, controllability, conformity, error tolerance, individualization and learning; and tradeoffs in design decisions. The document emphasizes designing intuitive interfaces that guide users without the need for manuals.
This document discusses principles of web design including order, simplicity, and equilibrium. It emphasizes balancing order with complexity through techniques like grid usage, clean design, and usability testing. Specific design goals discussed include making content easy to read, helping users understand page structure and associate related elements, avoiding redundancy and ambiguity, and giving users a logical visual journey. Gestalt principles of contrast, similarity, and stratification are presented as ways to differentiate and group page elements. Consistency in design elements and adapting symbols to context are also covered. The document advocates for balancing design effort with rules to avoid chaos or an oversimplified approach.
This document discusses sound and touch as it relates to web design. It covers topics such as the human ability to hear different pitches, intensities and tone colors of sound. Human hearing ranges from 16-20 Hz to 16 KHz and is most sensitive in the center. Touch is discussed, including the different nerve endings and our ability to feel pressure, warmth and cold. The document presents information on haptics and how touch can be used for nonverbal communication. It concludes with information about the presenter, Roberto Dadda.
ARENA - Young adults in the workplace (Knight Moves).pdfKnight Moves
Presentations of Bavo Raeymaekers (Project lead youth unemployment at the City of Antwerp), Suzan Martens (Service designer at Knight Moves) and Adriaan De Keersmaeker (Community manager at Talk to C)
during the 'Arena • Young adults in the workplace' conference hosted by Knight Moves.
Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page pmgdscunsri
Figma is a cloud-based design tool widely used by designers for prototyping, UI/UX design, and real-time collaboration. With features such as precision pen tools, grid system, and reusable components, Figma makes it easy for teams to work together on design projects. Its flexibility and accessibility make Figma a top choice in the digital age.
Revolutionizing the Digital Landscape: Web Development Companies in Indiaamrsoftec1
Discover unparalleled creativity and technical prowess with India's leading web development companies. From custom solutions to e-commerce platforms, harness the expertise of skilled developers at competitive prices. Transform your digital presence, enhance the user experience, and propel your business to new heights with innovative solutions tailored to your needs, all from the heart of India's tech industry.
Fonts play a crucial role in both User Interface (UI) and User Experience (UX) design. They affect readability, accessibility, aesthetics, and overall user perception.
PDF SubmissionDigital Marketing Institute in NoidaPoojaSaini954651
https://www.safalta.com/online-digital-marketing/advance-digital-marketing-training-in-noidaTop Digital Marketing Institute in Noida: Boost Your Career Fast
[3:29 am, 30/05/2024] +91 83818 43552: Safalta Digital Marketing Institute in Noida also provides advanced classes for individuals seeking to develop their expertise and skills in this field. These classes, led by industry experts with vast experience, focus on specific aspects of digital marketing such as advanced SEO strategies, sophisticated content creation techniques, and data-driven analytics.
EASY TUTORIAL OF HOW TO USE CAPCUT BY: FEBLESS HERNANEFebless Hernane
CapCut is an easy-to-use video editing app perfect for beginners. To start, download and open CapCut on your phone. Tap "New Project" and select the videos or photos you want to edit. You can trim clips by dragging the edges, add text by tapping "Text," and include music by selecting "Audio." Enhance your video with filters and effects from the "Effects" menu. When you're happy with your video, tap the export button to save and share it. CapCut makes video editing simple and fun for everyone!
Storytelling For The Web: Integrate Storytelling in your Design ProcessChiara Aliotta
In this slides I explain how I have used storytelling techniques to elevate websites and brands and create memorable user experiences. You can discover practical tips as I showcase the elements of good storytelling and its applied to some examples of diverse brands/projects..
Architectural and constructions management experience since 2003 including 18 years located in UAE.
Coordinate and oversee all technical activities relating to architectural and construction projects,
including directing the design team, reviewing drafts and computer models, and approving design
changes.
Organize and typically develop, and review building plans, ensuring that a project meets all safety and
environmental standards.
Prepare feasibility studies, construction contracts, and tender documents with specifications and
tender analyses.
Consulting with clients, work on formulating equipment and labor cost estimates, ensuring a project
meets environmental, safety, structural, zoning, and aesthetic standards.
Monitoring the progress of a project to assess whether or not it is in compliance with building plans
and project deadlines.
Attention to detail, exceptional time management, and strong problem-solving and communication
skills are required for this role.
1. www.dadda.it roberto@dadda.it Excellence in usability 1nd semester 2020-2021 1
ERGONOMICS APPLIED TO THE DESIGN OF USABLE WEB PAGES AND
APPS
Roberto DADDA and Paolo NEGRI
7. 1st semester 2021-2022
www.dadda.it roberto@dadda.it
Definition of a form
The relationship of a form is the relationship between the organization that is asking
the questions and the person who is answering
The conversation of a form comes from the questions that it asks, any other
instructions, and the way the form is arranged into topics.
The appearance of a form is the way that it looks: the arrangement of text, input
areas such as fields and graphics, and the use of color.
YES they are in order of importance!
A form is a web page that has boxes
you can type into.
7
18. 1st semester 2021-2022
www.dadda.it roberto@dadda.it
Forms that Work: Designing Web Forms for Usability (Interactive Technologies)
by Caroline Jarrett, Gerry Gaffney
Dīvĭdĕ
et
īmpĕrā
Philip II of Macedon
382 – 336 BC
18
20. 1st semester 2021-2022
www.dadda.it roberto@dadda.it
Goods form design...
… increases
completion
success from 10
to 40% and
completion
success is
business!
20
23. 1st semester 2021-2022
www.dadda.it roberto@dadda.it
Our mantra
23
The official ISO 9241-11
definition of usability is: “the
extent to which a product can
be used by specified users to
achieve specified goals with
effectiveness, efficiency and
satisfaction in a specified
context of use.”
A mantra is usually any repeated word or phrase, but it can also refer more specifically to a word
repeated in meditation. Mantra comes from a Sanskrit word meaning a “sacred message or text, charm,
spell, counsel.”
24. 1st semester 2021-2022
www.dadda.it roberto@dadda.it
Form design goals
q Explain why
q Minimize the pain
q Illuminate a path to
competition, status bar
q Consider the context
q Ensure consistent
communication
q Short & visible
24
31. 1st semester 2021-2022
www.dadda.it roberto@dadda.it
Input elements should be organized in
logical groups so that brain can process
the form layout in chunks of related fields.
Not needed variations
are harmful
Use variations if there
are defined and easily
understandable reasons
Use meaningful
groups
http://www.lukew.com/ff/entry.asp?1502
Grouping basic...
31
32. 1st semester 2021-2022
www.dadda.it roberto@dadda.it
A fundamental question:
What user needs to see for
better usage of a form?
If needed repeat data
Eg Balance of bank account in the
page of payments
32
33. 1st semester 2021-2022
www.dadda.it roberto@dadda.it
Content grouping
Content relationships
provide a structured way to
organize forms
Grouping provides:
A way to scan required information at hight level
A sense of how informations in the form are related
33
37. 1st semester 2021-2022
www.dadda.it roberto@dadda.it
Clearly label section header
User never must loose orientation
Give information about what has been done and
how far we are form the completion of the form
37
39. 1st semester 2021-2022
www.dadda.it roberto@dadda.it
Do not exaggerate withgraphical
elements, 15 are too many!
Information consists only of difference that makes difference
39
40. 1st semester 2021-2022
www.dadda.it roberto@dadda.it
Grouping golden rules
Use relevant content to
organize forms
Use MINIMUM amount
of visual elements
necessary to
communicate useful
relationship
40
44. 1st semester 2021-2022
www.dadda.it roberto@dadda.it
Type of fields
Use the type that
better fits: the
simplest, the one that
shows more
informations in the
specific situation
44
45. 1st semester 2021-2022
www.dadda.it roberto@dadda.it
Field length
Make fields long enough
to get the information
needed.
Avoid horizontal
scrolling
Minimize vertical
scrolling in multiline
fields
45
48. 1st semester 2021-2022
www.dadda.it roberto@dadda.it
Choose conversational
labels
If instead of using:
“Issuing bank”
you use
“What bank issued you this credit card?”
You will have a quicker answer, always!
“Who gave you this credit card?”
May be is too much!
But do not exagerate!
48
49. 1st semester 2021-2022
www.dadda.it roberto@dadda.it
Use user familiar terms,
make a dictionary!
“USCIS Form I-140 (Petition for
Alien Worker).” This form has
nothing to do with
extraterrestrial life-forms: To
Homeland Security, the word
“alien” means anyone who is
not a U.S. citizen.
49
50. 1st semester 2021-2022
www.dadda.it roberto@dadda.it
Learn from users!
• Use familiar words in familiar
way
• Use short, affirmative, active
sentences.
• Demolish walls of words
• Put choices before actions
• Use helpful headings
50
52. 1st semester 2021-2022
www.dadda.it roberto@dadda.it
When the data being collected by a form is
unfamiliar or does not fall into easy to
process groups (such as the various parts of
an address), left-justifying input field labels
makes scanning the information required by the
form easier.
Users have to “jump” from column to
column in order to find the right
association of input field and label
before inputting data.
Westerns are used to left line
reference
Left
52
53. 1st semester 2021-2022
www.dadda.it roberto@dadda.it
An alternative layout, right aligns the input field
labels so the association between input field
and label is clear.
However, the resulting left rag of
the labels may reduce the effectives
of a quick scan to see what
information the form requires.
Right
53
54. 1st semester 2021-2022
www.dadda.it roberto@dadda.it
When the time to complete a form needs to be minimized and the data being collected
is mostly familiar to users (for instance, entering a name, address, and payment
information in a check-out flow), a vertical alignment of labels and input fields is likely to
work best.
Each label and input field is
grouped by vertical proximity
and the consistent alignment of
both input fields and labels
reduces eye movement and
processing time.
Vertical
54
55. 1st semester 2021-2022
www.dadda.it roberto@dadda.it
BOLD labels increase visual
weight and makes easy to
compete with field for user
attention
PATH
55
57. 1st semester 2021-2022
www.dadda.it roberto@dadda.it
Eye tracking
Saccade activities
fast movement of an eye, head or other part of
an animal's body or of a device
20° 900°/s 225 ms
http://www.uxmatters.com/mt/archives/2006/07/label-placement-in-forms.php
57
59. 1st semester 2021-2022
www.dadda.it roberto@dadda.it
Long saccade between label
and field (500 ms): hight
cognitive load
No fixation over white space,
but longer time
Good perception of field/field
pair
Drop down field is the first eye
catcher for ALL users
59
60. 1st semester 2021-2022
www.dadda.it roberto@dadda.it
Number of fixation: half!
Half completion time.
Reduce cognitive load.
Good lateral view of labels
from field with short
saccadic movements (170
ms for expert, 240 ms for
expert)
The non-predictable
starting position of labels is
NOT a problem!
Some recheck, but shorter
60
61. 1st semester 2021-2022
www.dadda.it roberto@dadda.it
The nearest the label, the better is
confirmed!
If the label has a familiar content
there is no fixation.
If label is fixed fixation is very fast:
50 ms.
Quick form completing and
reduced cognitive load.
Bold labels,
doubtful!
61
63. 1st semester 2021-2022
www.dadda.it roberto@dadda.it
Two type of extreme users,
real one are somewhere between and attitude changes with situation
Readers These users
carefully read the form.
Rushers These users rush
in and begin completing
fields, reading only when
they think it is necessary.
64
65. 1st semester 2021-2022
www.dadda.it roberto@dadda.it
3 engagement rules
Rule 1: Establish trust. People are more likely to respond to a
question if they trust the organization that asks it and agree
with the purpose for which the information will be used. If they
don’t trust you, they’ll either drop out of the form or lie to you.
Rule 2: Reduce social costs. Social costs are bad feelings, like
being made to feel inferior or being put at a disadvantage.
Rule 3: Increase rewards. People are more likely to respond if
they perceive that they will get some reward by doing so.
66
66. 1st semester 2021-2022
www.dadda.it roberto@dadda.it
Use gestalt principles!
Equilibrium
Good continuation, good figure
and common fate.
Closure Similarity
67
78. 1st semester 2021-2022
www.dadda.it roberto@dadda.it
Primary vs secondary actions
Primary actions are actions such as “Submit”, “Continue”,
“Finish”, and “Save”.
They enable form completion, the most important action on the
form.
Secondary actions are actions such as “Cancel”, “Go back”, or
“Reset”.
Active vs inactive
Active acions may be fired
Inactive actions may NOT be fired in that specific moment
79
79. 1st semester 2021-2022
www.dadda.it roberto@dadda.it
Stronger design for most important actions!
Reduce the visual weight of the secondary actions (go back,
cancel)
Not all actions are equal
Visual presentation of actions should match their
importance
80
88. 1st semester 2021-2022
www.dadda.it roberto@dadda.it
Tabbing
Consider that some
users will use tab
between fields
Use proper tabindex
markup
Multi-column maybe
dangerous and conflict
with tabbing behavior
89
90. www.dadda.it roberto@dadda.it Excellence in usability 1nd semester 2020-2021 91
“For what the king
fundamentally insisted upon
was that his authority should
be respected. He tolerated
no disobedience. He was an
absolute monarch. But,
because he was a very good
man, he made his orders
reasonable.” (10.15)
91. 1st semester 2021-2022
www.dadda.it roberto@dadda.it
Required or optional?
Indication of required is useful when:
There are a lot of fields, but very few
required
Design to make scanning for required
fields easier
Indication of optional is useful when:
Very few fields are optional
Neither indication is really useful when:
All fields are required
TRY to avoid optional fields!
Associate indicator with label, not with field!
92
95. 1st semester 2021-2022
www.dadda.it roberto@dadda.it
Alert signal...
If we too much help is needed most probably we do
need to go back to form design!
96
97. 1st semester 2021-2022
www.dadda.it roberto@dadda.it
Helps & Tips
Useful when:
• Asking unfamiliar data
• Tell why ask for data
• User may have doubts about data
• There are different possible
interpretations
• When user maybe concerned about
security and privacy
• When there is a specific way of
inputting, eg comma delimited.
• Optional/required
Too many may easily destroy form
usability
98
99. 1st semester 2021-2022
www.dadda.it roberto@dadda.it
If really we need a lot of help let us
consider dynamic solutions
• Automatic inline
exposure
• User activated
inline exposures
• User activated
section exposure
100
100. 1st semester 2021-2022
www.dadda.it roberto@dadda.it
Automatic inline
Make help
location
predictable!
Use STRONG
visual elements
to connect help
with field
101
102. 1st semester 2021-2022
www.dadda.it roberto@dadda.it
User activated section exposure
Nice to use
page areas.
Beware popup:
• Blockers
• Responsive
design
Give to customer the possibility of opening, closing and reducing to less verbose
103
108. 1st semester 2021-2022
www.dadda.it roberto@dadda.it
Put a page indication on all pages
For very
complex
forms
consider
numbering
all fields.
Facilitate
connection
with help
desk!
109
109. 1st semester 2021-2022
www.dadda.it roberto@dadda.it
Name that form
• Tell clearly people why they are filling that
form!
• Avoid uncertainties
110
110. 1st semester 2021-2022
www.dadda.it roberto@dadda.it
People may be scared...
… when they see
a complex form
without help.
If this is the
situation GIVE A
MESSAGE telling
that you will help
them
111
112. 1st semester 2021-2022
www.dadda.it roberto@dadda.it
Path to completion
• Completion: primary goal of form!!!
• Consider EVERY input carefully
• Remove all unnecessary
• Enable flexible data input when needed
• Provide a CLEAR path
• Enable smart default
• Show progress and save
• Enable partial save whenever possible
113
113. 1st semester 2021-2022
www.dadda.it roberto@dadda.it
How long will be?
So the form needs to be long enough to ask the
relevant questions, to be short enough to
minimize the user’s effort, and to ask questions
that are appropriate within the context of the
overall relationship
114
124. 1st semester 2021-2022
www.dadda.it roberto@dadda.it
Progressive disclosure
• Not all users require all options in
different situations
• Prioritize user's needs
• If possible user initiated
• Progressive disclosure provides an
option
• Advanced options
• Gradual engagement
• Strongly depending on
user/situation/action
• BE consistent
125
129. 1st semester 2021-2022
www.dadda.it roberto@dadda.it
Selection dependent inputs
• Show clear relation between
options
• Clearly associate trigger with
triggered fields
• Manage data loss if trigger is
changed after some data input
• Avoid big (out of visible page)
uncontrolled jumps
130
133. 1st semester 2021-2022
www.dadda.it roberto@dadda.it
Inline validation assistance
q Provide DIRECT and CONTESTUAL feedback
as data are entered
q Validate input and correlations between inputs
q Suggest valid input
q Suggest corrections
q Help users stay in limits and possible data sets
q Use where errors are more probable
q Disambiguate!
q Communicate limits if any
134
138. 1st semester 2021-2022
www.dadda.it roberto@dadda.it
Error handling
• Do whatever possible to avoid errors,
but "Shit happens“
• Provide clear indication and clear
resolutions in fewer possible steps
• Top placement - Visual contrast
• Provide remedies
• Associate field/fields with message
140
139. 1st semester 2021-2022
www.dadda.it roberto@dadda.it
• Clearly communicate when an error is blocking someone from completing a form.
• Error messages are arguably the most important element on a form when present.
Make sure they appear that way!
• Display error messages in context so they can be resolved quickly.
• Provide actionable remedies that enable people to resolve errors easily.
• Top-level error messages should indicate an error has occurred and how it can be
resolved. If multiple errors exist, they should be listed in the top-level message.
• If any input fields are responsible for an error, clearly mark them with a double visual
emphasis to ensure they are noticeable.
• Visually associate any responsible form elements with a top-level error message to
clearly communicate they need to be resolved in order to continue.
• Reserve red text and warning icons for error messages.
Some rules
141
141. 1st semester 2021-2022
www.dadda.it roberto@dadda.it
• The red area is NOT the error
one
• The thin red line over the gray
windows is not visible
• Poor connection between error
modal windows and error
• NO SOLUTION proposed
Use visuals in a consistent way
143
143. 1st semester 2021-2022
www.dadda.it roberto@dadda.it
Optimal error handling:
ALERT
IDENTIFY
DIRECT
Something wrong!
This is wrong.
Do this to recover.
145
152. 1st semester 2021-2022
www.dadda.it roberto@dadda.it
NEVER...
...cancel data submitted by the
customer if the form has to be
resubmitted!
154
153. 1st semester 2021-2022
www.dadda.it roberto@dadda.it
Progress indication
• If there is a possibility of long waiting with
“frozen systems” impression give indication of
progress
• Submission
• Calculations
• Upload / Download
• If possible quantitative, otherwise qualitative
• Disable actions to avoid double actions
155
156. 1st semester 2021-2022
www.dadda.it roberto@dadda.it
Adaptive forms
This version of
MS Office was
hiding menus
when not
frequently used Make it
REVERSIBLE!
158