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