Design tips for complex forms Malta 2012

Design tipsfor complex formsMalta 2012Caroline Jarrett

This form looks appealing,the questions are simple,the task is easy 2Image credit: www.swiths.com

But what happens if we have to workwith complex forms like this?© Effortmark Ltd, from “Forms that work: Designing web forms for usability" 3

Apply to beauthorised as afinancial adviser 4

Privacy onFacebook http://www.nytimes.com/interactive/2010/05/12/business/facebook-privacy.html 5

A form is complex if …• It has more than one page• Answers come from elsewhere: – Form – Document – Page – Person• The consequences are important: – Money – Stress – Prison? 6

Three women do their tax Anna Maria LisaImage credits: Shutterstock.com 7

Which of these statementsis most important for Maria? That form was easy because… 1. I liked the way it looked and it was easy to read 2. I understood the questions and could answer them 3. I knew exactly what I had to do and I got my tax done on time 8

Users experience a form in three layersAppearance Can‟t read itConversation Can‟t answer it Can‟t achieveRelationship my goal 9

A good form works well across all three layersAppearance Lovely and legibleConversation Easy questions, obvious answers Goals achievedRelationship (mine and yours) 10

Live siteBetasite 11

Task: find the right form 12

Let‟s see what‟s visible on a typical laptop

Next click? 14

That „Income Tax Return‟ link… isn‟t a link 15

Ah ha, there it is 16

A quick suggestion? 17

A quick suggestion? 18

Form tip 1 Focus on what your users need to do(aboutrelationship) 19 Image credit: Fraser Smith

Let‟s keep clicking 20

Task: find the right form 21

What do you need to do first? 22

Form tip 2 Put the first thing first(aboutrelationship) 23 Image credit: Per Ola Wiberg

Let‟s try that in the UK: „beta‟ version of gov.uk 24

Click or scroll? 26

I‟m a new user 27

Um, um, um… not so sure here 28

Um, um, um… where is „tax return‟? 29

Form tip 3 Use the same words all the way through(aboutconversation) 30 Image credit: Paul Luffel (PakaLoeff)

Suggestion:put the help on the same page 32

Form tip 4 Put just enough help where the user needs it(aboutconversation) 33 Image credit: Betsy Weber

A quick look at buttons. 34

Typical eye-movement when reading a form:Look for field, turn left for label, look for field A B C Where to put the button? 35

In eye-tracking studies, I observed this Looks Looks here Then looks here second here last first for button 3 1 2 36

A quick look at buttons. 37

A second suggstion 38

Appearance Best place for a button:Tip aligned with left-hand end of text entry boxes Next 39

Complexity affects all three layers of the form• Relationship – Focus on what your users need to do – Put the first thing first• Conversation – Use the same words all the way through – Put just enough help where the user needs it• Appearance – Put clearly labelled buttons in the right place 40 Schema from “Forms that work: Designing web forms for usability”

Recently I had to fill in this form And I succeeded, because the task was important 41

More resources onhttp://www.slideshare.net/cjforms 42

Thanks to Morgan Kaufmann for these books 43

Virtual seminar “Design tips for surveys”• 28th February 2012• 1:30pm Eastern time = 7:30pm Malta time• 2nd in „Next Steps‟ series from User Interface Engineering and Rosenfeld Media 44

Caroline Jarretttwitter @cjformscaroline.jarrett@effortmark.co.uk 45

http://usabilitygeek.com	524
http://lanyrd.com	131
http://feeds.feedburner.com	91
http://a0.twimg.com	23
http://xss.yandex.net	4
http://us-w1.rockmelt.com	2
http://www.newsblur.com	1
http://translate.googleusercontent.com	1
http://10.1.254.14	1

Design tips for complex forms Malta 2012

by Caroline Jarrett

Accessibility

Categories

Upload Details

Usage Rights

9 Embeds 778

Statistics

Design tips for complex forms Malta 2012 Presentation Transcript