Design of forms on web vs paper

27 Jul 2008 - 12:34am
6 years ago
13 replies
5761 reads
Formulate
2007

I've been involved in a few debates about this question lately and
would like to write an article summarising the different positions.
It would be great if you could spend a few minutes emailing me or
posting your personal position on the following query:

"As a matter of best practice, should forms on the web be designed to
look like their paper equivalents? Why/why not?"

I recognise that this is a fairly "open" question but there are lots
of different ways that one could come at this issue and I'm keen to
hear about them all! Will send around a link to the article when
done, for future reference.

Thanks in anticipation,

Jessica Enders
Principal
Formulate Information Design
----------------------------------------
http://formulate.com.au
----------------------------------------
Phone: (02) 6116 8765
Fax: (02) 8456 5916
PO Box 5108
Braddon ACT 2612
----------------------------------------

[Apologies if you get this email more than once - I'm casting a wide
net]

Comments

27 Jul 2008 - 7:03am
SemanticWill
2007

"As a matter of best practice, should forms on the web be designed to look
like their paper equivalents? Why/why not?"

Do you know who designs the forms in the real world for most things?
Information Designers? Interaction Designers? IAs? *NO!*

Bureaucrats! These people have no idea how to actually design information
for consumption and interaction.
Go to this image: http://www.donateyourplane.com/IRS8283A.jpg

Now image following - exactly - the information design and layout of this
form. First - it would almost certainly have to be done in flash because of
the complexity, density, and format of the information; Second, image what
the eye-tracking tests for this might look like? Rorschach ink blots is the
most likely candidate for what eye-tracking would reveal. There are no
consistent scan lines. There is no clear path to completion. The eyes have
difficulty separating the content from the actionable fields.

The best place to start is read this book review on B&A I wrote about
LukeW's Web Form Design, here: *http://tinyurl.com/6ryep9

*Then think about buying the book - every chapter ends with a list of best
practices for web form design.

I very much doubt there is an equivalent book for paper form design.

The medium is the message :-)*

Those are my thoughts.

*--
~ will

"Where you innovate, how you innovate,
and what you innovate are design problems"

---------------------------------------------------------------------------------------------
Will Evans | User Experience Architect
tel +1.617.281.1281 | will at semanticfoundry.com
twitter: https://twitter.com/semanticwill
---------------------------------------------------------------------------------------------

On Sun, Jul 27, 2008 at 1:34 AM, Jessica Enders <jessica at formulate.com.au>wrote:

> I've been involved in a few debates about this question lately and would
> like to write an article summarizing the different positions. It would be
> great if you could spend a few minutes emailing me or posting your personal
> position on the following query:
>
> "As a matter of best practice, should forms on the web be designed to look
> like their paper equivalents? Why/why not?"
>
> I recognise that this is a fairly "open" question but there are lots of
> different ways that one could come at this issue and I'm keen to hear about
> them all! Will send around a link to the article when done, for future
> reference.
>
> Thanks in anticipation,
>
> Jessica Enders
> Principal
> Formulate Information Design
> ----------------------------------------
> http://formulate.com.au
> ----------------------------------------
> Phone: (02) 6116 8765
> Fax: (02) 8456 5916
> PO Box 5108
> Braddon ACT 2612
> ----------------------------------------
>
>

27 Jul 2008 - 7:55am
Caroline Jarrett
2007

Will,

: Bureaucrats! These people have no idea how to actually design
information for consumption and interaction. Go to this image:
http://www.donateyourplane.com/IRS8283A.jpg

The example you cite is, as you point out, a BAD paper form. Actually,
to be even more specific, this is a bad .jpg of a badly-scanned,
badly-designed paper form.

It seems to me a bad design is going to be a bad design and therefore
I agree that replicating as such on the web isn't going to do much
good.

I'm rushing off to a week away with no email access so I can't reply
fully, but perhaps it would be more helpful to think of a
well-designed paper form?

best,

Caroline Jarrett
caroline.jarrett at effortmark.co.uk
phone: 01525 370379
international: +44 152 537 0379
mobile: 07990 570647

Effortmark Ltd
Usability - Forms - Content

We have moved. New address:
16 Heath Road
Leighton Buzzard
LU7 3AB

27 Jul 2008 - 9:45am
bminihan
2007

In short, I'd say "No, they shouldn't". The biggest reason is
that paper and computer screens imply different restrictions and
affordances in the kinds of information you can enter, and how you
enter them. For example, if you design a paper form that's 1.2
pages long, you're going to try to reshuffle the layout to get it
down to 1 page, because a one page form (might) seem easier to fill
out, and would cost less to print (1-sided vs 2-sided or 2 pages).
You can also do things in a web form that you can't do on paper -
hide lengthy instructions, consolidate lists of items into dynamic
data rows that appear as you need them. Instead of providing 5 rows
of "dependents" on a tax form, for instance, a web form might
likely give me 3 rows and a button to "add another dependent".

Federal US tax forms seem to be somewhat of an exception to the above
rules, but only because people may need the visual reminder of what
they're filling out. Turbotax, I believe, fills out the same
information that the tax form does, but doesn't look like it.
However, they have always provided you a link to "view the actual
form" with your data on it, in case you want to make sure you're
filling it out right.

It's 10:30 on the beach, so the above probably rambles more than it
needs to, but hopefully it answers your question...

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=31603

27 Jul 2008 - 11:13am
Dave Malouf
2005

For me the question is just way too open. While I agree with Will in
spirit, I can see how bringing the visual look of things that we are
used to seeing in paper into the web medium, while also taking
advantage of the interactive medium. My brand might be one where
"paper" is a differentiators, and so I would want to bring that
through to my interactive versions. Or my customers are used to and
like the paper they have and in order to transition them from one
medium to the other, the comfort of seeing something familiar could
lead to better/quicker/happier cultural change.

That being said, if you do not have these issues, than I can't see
any reason why you would want to maintain a link to the paper world.
For the vast majority of people I would imagine that paper versions
of forms are not a positive experience and thus connecting yourself
to them even implicitly feels like a bad idea.

-- dave

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=31603

27 Jul 2008 - 4:02pm
Oleh Kovalchuke
2006

To answer the original question: if the web form is designed for processing
a paper form (data processing), it should follow the general information
flow of the paper form for easy reference. However, since web medium is more
dynamic than paper, form field dependencies can be implemented via various
progressive disclosure methods described in the [excellent] book by Luke.
Thus the form can be simplified.
Will Evans wrote:

> The best place to start is read this book review on B&A I wrote about
> LukeW's Web Form Design, here: *http://tinyurl.com/6ryep9
>
To answer a question by Praveen Kumar
Verma<http://www.boxesandarrows.com/person/1392-praveenkvma> to
Will's review:
"The client suggested using two columns of fields to utilize the space. As a
good designer I protested but wanted to look for research on two columns
approach. Sadly the book does not answer my question. May be, the question
is weird but I am in this situation."

The book does answer this question (if not explicitly the way Praveen
phrased it): group related fields horizontally to utilize the space
effectively.

For instance: [Prefix] [First Name] [MI] [Last Name] [Suffix].

See Figure 4.3 on page 58.

--
Oleh Kovalchuke
Interaction Design is design of time
http://www.tangospring.com/IxDtopicWhatIsInteractionDesign.htm

27 Jul 2008 - 4:04pm
Oleh Kovalchuke
2006

Incidentally horizontal grouping of related fields should further reduce
scanning time of input fields with top aligned labels (compare to left or
right aligned labels).

Oleh

On Sun, Jul 27, 2008 at 4:02 PM, Oleh Kovalchuke <tangospring at gmail.com>wrote:

> To answer the original question: if the web form is designed for
> processing a paper form (data processing), it should follow the general
> information flow of the paper form for easy reference. However, since web
> medium is more dynamic than paper, form field dependencies can be
> implemented via various progressive disclosure methods described in the
> [excellent] book by Luke. Thus the form can be simplified.
> Will Evans wrote:
>
>> The best place to start is read this book review on B&A I wrote about
>> LukeW's Web Form Design, here: *http://tinyurl.com/6ryep9
>>
> To answer a question by Praveen Kumar Verma<http://www.boxesandarrows.com/person/1392-praveenkvma> to
> Will's review:
> "The client suggested using two columns of fields to utilize the space. As
> a good designer I protested but wanted to look for research on two columns
> approach. Sadly the book does not answer my question. May be, the question
> is weird but I am in this situation."
>
> The book does answer this question (if not explicitly the way Praveen
> phrased it): group related fields horizontally to utilize the space
> effectively.
>
> For instance: [Prefix] [First Name] [MI] [Last Name] [Suffix].
>
> See Figure 4.3 on page 58.
>
> --
> Oleh Kovalchuke
> Interaction Design is design of time
> http://www.tangospring.com/IxDtopicWhatIsInteractionDesign.htm
>

27 Jul 2008 - 2:45pm
Anonymous

I agree with both Bryan on this. In this case, I think the media is
the constraint that identifies both function and form. The function
is collection of information, and the form is whatever is necessary
to allow that with as little pain as possible. Let's face it, people
don't like to fill in forms, so the process is always going to be
painful.

Utilizing the strengths of an electronic medium could make filling
forms easier. An existing paper form is a good place to start for
identifying information, but a good design of the electronic form
could make filling "seem" less painful through Jedi mind-tricks.

Some things that I think makes forms more usable are and are things
I've encountered in the past:
- JMI 1 - Status of where one's at in the process, especially long,
multi-page forms. Knowing where you're at in the process makes
things seem more tolerable. Visual or physical status (where on a
page, or how far into a big stack) allows the user to know where
they're at in the process... it's a JMI because it doesn't make
information collection any easier, it just provides peace of mind
that the end is in sight.
- JMI 2 - Break long forms into multiple pages and tie to JMT 1 --
its' the reason why TurboTax/Taxcut work so well. They're
collecting the same information, using simpler words/terms in a
succession of pages, making tax preparation less overwhelming. Tied
to status, you know when you're getting closer to the end.
- Address format, or availability of different address formats should
be considered if the form may be used by visitors from other
geographies
- Support for multi-language, if necessary -- paper doesn't restrict
how you write, just the information collected

Just some thoughts...

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=31603

28 Jul 2008 - 12:57am
Dustin Brewer
2008

The reasonable answer to the question, ""As a matter of best
practice, should forms on the web be designed to look like their
paper equivalents?" is simply *NO*.

Paper is an entirely different medium than the web; a familiar,
consistent, tangible, *static* medium. The web is an evolving,
intangible, and most importantly, *dynamic* medium.

People read text differently on the web. Recent studies show ~25%
slower than paper, and people scan versus reading the complete text.

Paper forms are completely controlled by the designer. Web forms are
only partially in control of the designer; users can control font
size, color, layout, and even the behavior if they so choose.

There are accessibility issues to consider when designing forms for
the web

Succinct, unfolding forms are the norm (for example: Turbo Tax) and a
complicated mess on paper.

Paper is a consistent medium, but web forms can be read aloud by
screen readers, viewed on different browsers and different devices.

Overall, designing a web form identical to the paper equivalent is
not going to produce the best interaction for the user.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=31603

28 Jul 2008 - 8:38pm
Paul Eisen
2007

I agree with the comments posted thus far about capitalizing on the interactive medium and not constraining oneself to the limitations of paper. That being said, there is one case where I think it makes sense to emulate a paper form, at least as far as field names and relative positions. An example of this case was mentioned in this thread, referring to government forms. The general case I propose is when the business process requires paper forms to be filled and then get manually transcribed. In this case, the paper-form emulation can help optimize transcription rates.

Paul Eisen
Principal User Experience Architect
tandemseven

30 Jul 2008 - 12:17pm
Jared M. Spool
2003

On Jul 27, 2008, at 1:34 AM, Jessica Enders wrote:

> "As a matter of best practice, should forms on the web be designed
> to look like their paper equivalents? Why/why not?"

My take is simple:

The question is irrelevant.

In fact, you could as a similar question that would be equally
irrelevant: "Should forms on the web be design to look like other
forms on the web?"

The real question is "Should each form on the web be design to best
support the user's experience?" The answer would, of course, be Yes.

And the next question is the one that's important in your case: "How
should you best support the user's experience?"

That's where I'd start.

Hope that helps,

Jared

Jared M. Spool
User Interface Engineering
510 Turnpike St., Suite 102, North Andover, MA 01845
e: jspool at uie.com p: +1 978 327 5561
http://uie.com Blog: http://uie.com/brainsparks

30 Jul 2008 - 9:34pm
Alex ONeal
2008

Jared, I can see your point and agree with your approach, but I've worked
with clients who seriously thought the web should copy the print
experience. I've also worked with people who thought the information
buckets behind the scenes needed to be identical to the interface; some
people just get stuck in one taxonomy and have trouble breaking out of it.
I suspect something of that nature is driving Jessica's question. In that
case, she needs an answer that addresses the issue more directly, so the
questioner feels respected.

The proper response to such people is that the web is a three-dimensional
space that only appears to be two-dimensional because it's on a flat screen;
print is by definition two-dimensional. Years of usability testing have
demonstrated that the same rules that apply to print do not apply across the
board to the web. Attention spans online and in print vary considerably,
and if you design for print (apart from the exceptions Paul mentioned
earlier), you are seriously handicapping your site. Considering your
audience and the best UX for their needs is definitely where you should
start.

bests,
Alex O'Neal

--
The best time to plant a tree is twenty years ago. The next best time is
now.

31 Jul 2008 - 12:19pm
Micah Freedman
2008

> the web is a three-dimensional space

Is it? I can think of two interpretations of that idea:

- The third dimension is time.
- The third dimension is folded up in hidden fields and information
widgets (like the extended dimensions of string theory :), in which
case there's still also time, so I'd call it multi-dimensional.

This has been your 1:18 moment of geekery.

2 Aug 2008 - 2:57am
Shali Nguyen
2008

A lot of thoughts above are valid, however, I have seen forms mimic
the exact same style as the original paper form. Where I've seen
this done well was through government websites where they took the
original paper form and created a PDF version that was dynamic. You
can just fill in the entries straight from the PDF and submit it.
I've seen this with court forms and DMV forms, and I think they work
out well. The good thing about the court form is that you can just
print it and the form would be viewed just as you would filling it
out by hand or type writer.

Again, you have to take into account what sort of form are we
transferring here. I never want to absolutely say "no" you
shouldn't do something, because each case is different and you want
to look at what would work best for your audience.

The web is definitely more dynamic, javascript is beautiful when it
comes to adding validation, tool tips, and just general hints on how
to fill out the form. The web also allows for great styling on forms
(see:
http://www.smashingmagazine.com/2008/04/17/web-form-design-modern-solutions-and-creative-ideas/).

Again, it all depends on what the form is, who your audience is,
where the results end up, and what you want to achieve. After those
questions are answered, then you decide on a strategy. :)

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=31603

Syndicate content Get the feed