• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Design tips for complex forms Malta 2012
 

Design tips for complex forms Malta 2012

on

  • 8,410 views

New design tips for complex forms, presented at Malta's first usability and user ex

New design tips for complex forms, presented at Malta's first usability and user ex

Statistics

Views

Total Views
8,410
Views on SlideShare
7,502
Embed Views
908

Actions

Likes
6
Downloads
69
Comments
0

9 Embeds 908

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

Accessibility

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Design tips for complex forms Malta 2012 Design tips for complex forms Malta 2012 Presentation Transcript

    • 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
    • 25
    • 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)
    • 31
    • 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