Designing forms for technical specialists by @cjforms

26
1 Forms Caroline Jarrett signing forms for chnical specialists and their users

description

Technical specialists and scientists want forms that are easy to use, just like everyone else - even for their technical work. These slides come from a talk I did at EMBL-EBI in 2010. This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.

Transcript of Designing forms for technical specialists by @cjforms

Page 1: Designing forms for technical specialists by @cjforms

1

Forms

Caroline Jarrett

Designing forms for technical specialists

and their users

Page 2: Designing forms for technical specialists by @cjforms

Background: the European Bioinformatics Institute

In 2010, I had the opportunity to give a talk on forms at the EBI,

part of the European Molecular Biology Laboratory (EMBL).“ EBI provides freely available data from life science experiments, performs basic research in computational biology and offers an extensive user training programme, supporting researchers in academia and industry”.

A typical EBI form allows highly-trained scientists to perform difficult

tasks on complex data.

These slides present some before-and-after suggestions that provoked

lively discussion. We sometimes agreed that the original was better.

Thanks again to EBI for a great experience.

2

Page 3: Designing forms for technical specialists by @cjforms

3

Agenda Label placement on forms

What really matters in forms design

Are all the users equally specialist?

Page 4: Designing forms for technical specialists by @cjforms

4

Reading forms is different from using them

Page 5: Designing forms for technical specialists by @cjforms

Orderinga prospectus

• User has

chosen a

prospectus

• Postcode

lookup for

the address

5

Page 6: Designing forms for technical specialists by @cjforms

6

One person’s heat map

• Small green

dots show

narrow focus

on labels and

left end of fields

• Red crosses

show clicks

Page 7: Designing forms for technical specialists by @cjforms

7

Back to labels. The ‘narrow focus’ means big jumps for the users’ eyes.

Page 8: Designing forms for technical specialists by @cjforms

8

Mario Penzo’s recommendation:“Place labels above or right-align them”

Penzo, M (2006) Label Placement in Formshttp://www.uxmatters.com/MT/archives/000107.php

Page 9: Designing forms for technical specialists by @cjforms

9

Are all these questions equivalent?Where do the answers come from?

• Your address

• Your city

• Company you work for

• Number of colleagues

• Your address

• Your city

• Company you work for

• no of colleagues

• Name

• Surname

• Age

• City

Page 10: Designing forms for technical specialists by @cjforms

10

Easy questions and hard questions prompt different patterns of reading

• Users glance at populated answers

• Users look mostly at the left end of the answer space for easy questions

• Users read complex instructions quite carefully...

• ... provided they are on the way to their goal

Page 11: Designing forms for technical specialists by @cjforms

A design tip: make sure that the label is unambiguously associated with the field

11

Before

Page 12: Designing forms for technical specialists by @cjforms

A design tip: make sure that the label is unambiguously associated with the field

12

After?

Page 13: Designing forms for technical specialists by @cjforms

Easy questions or hard questions? For whom?

13

Page 14: Designing forms for technical specialists by @cjforms

14

Agenda Label placement on forms

What really matters in forms design

Are all the users equally specialist?

Page 15: Designing forms for technical specialists by @cjforms

Users care about what they want to achieve with the form; design can be overcome

• Most users don’t care about:– Where the labels are positioned

– The design and placement of the required field indicator

– Whether the label has a colon on the end of it

• Most users do care about:– Whether they understand the questions

– Whether they can answer the questions

– Whether the form will accept their answers

– What the organisation will do with their answers

15

Page 16: Designing forms for technical specialists by @cjforms

The definition of usability: who is using the product for what purpose

16

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

(ISO 9241:11 1998)

Page 17: Designing forms for technical specialists by @cjforms

17

Understand your users’ goals

• What does the user get out of it?– What does the user achieve by filling in this form?

• How does the user feel about it? – Does the user have a choice?

– Does the user trust your organisation?

• What is the user expecting?– What does the user expect to tell you?

– What do other organisations ask the user in similar circumstances?

Page 18: Designing forms for technical specialists by @cjforms

18

Think about effectiveness, efficiency, context

• Effectiveness– What is the user’s definition of ‘success’ with this form?

• Efficiency– Will it be difficult to find the answers?

– How long can the user spare?

– How long will this take?

• Context– What else is happening?

– What will happen next?

– What happened before?

Page 19: Designing forms for technical specialists by @cjforms

What are the tasks for this form?

19

Page 20: Designing forms for technical specialists by @cjforms

20

Agenda Label placement on forms

What really matters in forms design

Are all the users equally specialist?

Page 21: Designing forms for technical specialists by @cjforms

This form has new users as well as experienced users

21

Page 22: Designing forms for technical specialists by @cjforms

A glimpse into the FAQ

22

Page 23: Designing forms for technical specialists by @cjforms

23

Page 24: Designing forms for technical specialists by @cjforms

A suggested approach to the preamble:before

24

Page 25: Designing forms for technical specialists by @cjforms

A suggested approach to the preamble:after

25

Page 26: Designing forms for technical specialists by @cjforms

A bit about me:Caroline Jarrett

www.effortmark.co.uk

Twitter @cjforms

Jarrett and Gaffney (2008)

Forms that work: Designing web forms for usability

Morgan Kaufmann /

Elsevier

Stone, Jarrett, Woodroffe

and Minocha (2005)

User interfacedesign and evaluation

Morgan Kaufmann /

Elsevier

26