Post on 13-Aug-2015
transcript
WEB-FORM USABILITY AND VALIDATION
Getting practical
• Learnability: How easy is it for users to accomplish basic tasks the first time they encounter the design?
• Efficiency: Once users have learned the design, how quickly can they perform tasks?
• Memorability: When users return to the design after a period of not using it, how easily can they reestablish proficiency?
• Errors: How many errors do users make, how severe are these errors, and how easily can they recover from the errors?
• Satisfaction: How pleasant is it to use the design?
Usability - 5 quality components:
2
What’s the difference
3
Why web-forms matter?
4
HISTORY OF FRUSTRATION?
5
MAIN USES AND OBJECTIVES
6
Luke Wroblewski, Web Form Design: Filling in the Blanks
Web-forms matter!Forms need to be usablein order to help the user achieve that goal.
7
• Minimize the pain• Illuminate a path to completion• Consider the context• Ensure consistency of communication• Use patterns and web-practices
MAKE WEB-FORMS USABLE
8
Luke Wroblewski, Web Form Design: Filling in the Blanks
MINIMIZE THE PAIN - CONVERSATION
• Do you really need to ask this question?
• Is it information that you can get automatically?
• Is there a better time or place to get an answer?
MINIMIZE THE PAIN - CONVERSATION
MINIMIZE THE PAIN - ORGANIZE
• Use gradual engagement if context allows
• Organize content– Align – Create hierarchy– Avoid unnecessary
elements
MINIMIZE THE PAIN - ORGANIZE
MINIMIZE THE PAIN - ORGANIZE
MINIMIZE THE PAIN - ORGANIZE
• Use gradual engagement if context allows
• Organize content– Align – Create hierarchy– Avoid unnecessary
elements
MINIMIZE THE PAIN - ORGANIZE
MINIMIZE THE PAIN - ORGANIZE
MINIMIZE THE PAIN – NO DISTRACT
PATH TO COMPLETION
Web-forms components
19
USABILITY REVIEW
20
USABILITY REVIEW
21
Label alignment
22
Field Types
23
Required and Optional
24
Form Validation
25
Live Inline Validation
26
• By providing red inline messages or markers next to every invalid field
• By changing the background color or border color of invalid fields (to red)
• By changing the color of field labels• By providing error tips (balloons) next to each
field
Validation messages
27
Luke Wroblewski, Web Form Design: Filling in the Blanks
• Never omit server-side validation.• Clearly communicate the errors and ways to fix them.• Always clearly mark required fields.• Never provide validation feedback on a single page or in
a popup alert.• Don’t use dynamic effects as compensation for a badly
designed form. Fancy effects won’t hide a poorly designed web form.
• If you use Captcha, don’t forget to provide audio support and enable users to “reload” the Captcha.
• Don’t forget to inform users when the form was completed successfully.
Rules of Thumb in Validation Design
28
RESOURCES• General
– Luke Wroblewski, Web Form Design: Filling in the Blanks– http://www.slideshare.net/AaronGustafson/falling-in-love-wit
h-forms-blendconf-2014– http://www.smashingmagazine.com/web-form-design-showc
ases-and-solutions/
• Validation– http://www.smashingmagazine.com/2009/07/07/web-form-v
alidation-best-practices-and-tutorials/– http://www.smashingmagazine.com/2012/06/27/form-field-v
alidation-errors-only-approach/
RESOURCES
• Signup\Login– http://www.smashingmagazine.com/2011/05/05/i
nnovative-techniques-to-simplify-signups-and-logins/
– http://www.smashingmagazine.com/2008/07/08/web-form-design-patterns-sign-up-forms-part-2/
– http://www.smashingmagazine.com/2008/07/04/web-form-design-patterns-sign-up-forms/
Sigma Ukraine
Знания о юзабилитиЧто почитать? Где поискать?
31
Sigma Ukraine
• Ознакомиться с рекомендованными книгами и ресурсами
• Ориентироваться в основных промышленных стандартах по юзабилити (знать что и где искать в справочнике)
• Пользоваться библиотеками паттернов для поиска решений или изучения опыта аналогичных продуктов – но осмотрительно («не все паттерны одинаково полезны»)
База знаний и стандартов
32
Sigma Ukraine
• Inspirational – Alan Cooper The Inmates Are Running the Asylum: Why
High Tech Products Drive Us Crazy and How to Restore the Sanity
– Steve Krug Don’t Make Me Think. A Common Sense. Approach to Web Usability
• Fundamental– Alan Cooper About Face 3: The Essentials of Interaction
Design• UX patterns
– Jenifer Tidwell Designing Interfaces: Patterns for Effective Interaction Design
книги
33
• Articles – nngroup.com– uxmatters.com– smashingmagazine.com
• UX patterns– ui-patterns.com– smileycat.com/design_elements/– patterntap.com– patternry.com– quince.infragistics.com
Веб-ресурсы
34
• Check box when text is not clickable vs usual check box where both text and check can be clicked
• Drop down box with 100 items with no search function vs drop down where item can be found as you type
• Messages about wrong input in field A displayed far from the field or with no field highlighted
• No tab order – low accessibility• No home navigation when click on site logo• Sample Maxim mentioned, with list of 2000 items that works slow• Inconsistency case: Save and Cancel located differently on form A and on
form B, even though both forms are for same purpose• Wide grids with even row coloring and without
Примеры юзабилити-проблем
35
Спасибо за внимание!Вопросы приветствуются
36