Input Field Lengths

23 Oct 2006 - 7:04pm
7 years ago
12 replies
783 reads
valerie at vale...
2006

I'm currently working on revising some web design standards at work, and
am trying to sort out a minor debate over sizing input field lengths
within forms.

In my experience, the guideline for determining the size of input fields
is to use a size similar to the information that the user will be
entering. So, a field for a 16-digit credit card number should be about
16 characters long; a field for a 3-digit CVV code should be about 3
digits long. For data that is not so determined (email address, proper
names), an average or estimate length should be used. The intention is to
provide subtle hint to the user that helps them understand what they are
supposed to enter.

However, the standards I'm reviewing suggest that all input fields should
have the same width, so as to provide visual consistency within the page.
The size is determined by an average length across all fields. The
argument for this is to make the page easier on the eyes, so that the
field labels and input fields aren't creating a jagged effect. It seems
to me that this approach is more geared towards the visual or graphic
design side of thigns though, rather than focusing on usability.

I've tried to do some research on this topic and have found a few sources
with limited information. Most of the sources imply that the first
approach (sizing based on specific content) is the better approach, but
don't give an explanation as to why. I'd really appreciate it if anyone
could direct me to any sources that might provide some hard data on this
subject, whether in software or web design.

Thanks in advance!

-Valerie Franek

Comments

24 Oct 2006 - 7:34am
maglez@btintern...
2006

Hi Valerie.

Both points of view are valid, this is one of those cases where two disciplines can conflict, so
which criteria to apply?

To solve the problem, we have to go to the base of those two points of view and understand what
the intention is for each one.

>From the Graphics Design point of view, we could say that all input boxes should be the same
length to have a more harmonic effect, that way the final user subconscient will be pleasured and
so feel more comfortable with the page and so stay on our web site. This is truth and should be
done in this way as long as it doesn't jeopardize the final user experience.

Graphics Design guidelines, as any other guidelines, are for general purposes, if in this case we
are more specifically talking of a web page where the final user has to input credit card details,
we have to focus on that task and see if the general guideline still apply.

Having this said, we should prefer to risk that harmonic view in favour of a more easy to use
design, by having all input text boxes the same length, the user will have to apply more mental
process to identify the different boxes, remember that most users do not read the page, they
visually scan the page and so, having all boxes the same length, will make this process more
mental intensive.

A credit card page is a very delicate page, we don’t want the final user failing at this stage,
otherwise there is a big chance of that user abandoning the site most companies exist to make
money, so we have to treat a final payment page mainly with that idea on mind, to make money. A
web page that is very nice to the eye and makes the user to fail on payments is not good

Now, this is the question, while in the credit card page, would you prefer your users to be
visually pleased or make it easy for them to success on their task?

On this very specific case my vote goes for usability on giving more visual clues by having boxes
of different lengths. I also always say that design and usability can always go together, and the
design doesn’t need to suffer; you can have eye catching designs with different length boxes. A
way to do this could be by fooling the user’s eye by having different length boxes over the same
size background boxes as the attached design suggests. This is only an example that may not apply
to your design but I hope you and your colleagues get my point.

Good luck.

Maglez.

--- valerie at valeriefranek.com wrote:

> [Please voluntarily trim replies to include only relevant quoted material.]
>
> I'm currently working on revising some web design standards at work, and
> am trying to sort out a minor debate over sizing input field lengths
> within forms.
>
> In my experience, the guideline for determining the size of input fields
> is to use a size similar to the information that the user will be
> entering. So, a field for a 16-digit credit card number should be about
> 16 characters long; a field for a 3-digit CVV code should be about 3
> digits long. For data that is not so determined (email address, proper
> names), an average or estimate length should be used. The intention is to
> provide subtle hint to the user that helps them understand what they are
> supposed to enter.
>
> However, the standards I'm reviewing suggest that all input fields should
> have the same width, so as to provide visual consistency within the page.
> The size is determined by an average length across all fields. The
> argument for this is to make the page easier on the eyes, so that the
> field labels and input fields aren't creating a jagged effect. It seems
> to me that this approach is more geared towards the visual or graphic
> design side of thigns though, rather than focusing on usability.
>
> I've tried to do some research on this topic and have found a few sources
> with limited information. Most of the sources imply that the first
> approach (sizing based on specific content) is the better approach, but
> don't give an explanation as to why. I'd really appreciate it if anyone
> could direct me to any sources that might provide some hard data on this
> subject, whether in software or web design.
>
> Thanks in advance!
>
> -Valerie Franek
>
> ________________________________________________________________
> Welcome to the Interaction Design Association (IxDA)!
> To post to this list ....... discuss at ixda.org
> List Guidelines ............ http://listguide.ixda.org/
> List Help .................. http://listhelp.ixda.org/
> (Un)Subscription Options ... http://subscription-options.ixda.org/
> Announcements List ......... http://subscribe-announce.ixda.org/
> Questions .................. lists at ixda.org
> Home ....................... http://ixda.org/
> Resource Library ........... http://resources.ixda.org
>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: InputTextBoxes_DifferentLength_01.gif
Type: image/gif
Size: 4195 bytes
Desc: 680895551-InputTextBoxes_DifferentLength_01.gif
Url : http://lists.interactiondesigners.com/pipermail/discuss-interactiondesigners.com/attachments/20061024/80ff6301/InputTextBoxes_DifferentLength_01.gif

24 Oct 2006 - 7:38am
Henrik Olsen
2006

The reason for sizing input fields based on content is, as you said
yourself, "to provide subtle hint to the user that helps them
understand what they are supposed to enter." Don't know any hard data
on it though. I usually seek a compromise. If it's possible to make it
look pretty without offending the rule of sizing based on content, I
do that. If not, I don't.

So my rule is: If possible, avoid the jagged effect. If not, stick to
the rule of sizing based on content. The outcome is semi-pretty forms.

--
Henrik Olsen
www.guuui.com - The interaction designer's coffee break

24 Oct 2006 - 8:26am
Ripul Kumar
2005

Hello Valerie,

I usually read out a variation of this notice whenever we encounter this particular rule -- and it works! Try it out.

Notice
------
To keep our graveyard beautiful, we will ensure a consistent size of graves. This size has been evolved after averaging the length and width of all existing graves.

With effect from 24 Oct 2006, we will only consider grave sizes of 4'3" by 1'8".

-- Cemetery Keeper

Regards,

Ripul Kumar
Director, Usability Outsourcing & Consulting
Kern Communications Pvt. Ltd.
http://www.kern-comm.com
+1.201.793.7154 (USA)
+91.98.663.42166 (India)

24 Oct 2006 - 8:29am
Jack L. Moffett
2005

Valerie & Miguel,

It bothers me that both of you are thinking of usability and graphic
design as two separate approaches with differing goals. The visual
design of the page is actually one component (readability) of the
total usability of the page. It is therefore not an either/or
decision, but a balance.

You will notice that in the example Miguel supplied, three of the
fields are of the same length, while the other two (one being a
combination of many smaller fields) fit within the "bounding box"
defined by the other fields. Even without the gray boxes, this
creates an easily read column. If the "Card number" row had extended
past the name fields, rather than being shorter, it would have caused
a more "jagged" effect. Other possibilities that would decrease
readability would be if all of the fields were of different sizes, or
the longer fields and shorter fields were interspersed more than they
are currently.

If everything is considered holistically, the result will be a page
that is easily read, and easily understood.

Jack

On Oct 23, 2006, at 8:04 PM, valerie at valeriefranek.com wrote:

> It seems
> to me that this approach is more geared towards the visual or graphic
> design side of thigns though, rather than focusing on usability.

Jack L. Moffett
Interaction Designer
inmedius
412.459.0310 x219
http://www.inmedius.com

First, recognize that the ‘right’ requirements
are in principle unknowable by users, customers
and designers at the start.

Devise the design process, and the formal
agreement between designers and customers and users,
to be sensitive to what is learnt by any of the
parties as the design evolves.

- J.C. Jones

24 Oct 2006 - 8:51am
SusieComet
2006

I feel that ease of use should always take precedence over design
aesthetics. I always ask myself "What makes sense to the user?"
In this case I would definitely go with the field widths that match
real-life data sizes.

Just my .02
Susan Patrick
User Interface Designer
The Midland Company
(513) 947-6072

"Design is a process - an intimate collaboration between engineers,
designers, and clients." - Henry Dreyfuss, Industrial Designer

Miguel Gonzalez
<maglez at btinterne
t.com> To
Sent by: valerie at valeriefranek.com,
discuss-bounces at l discuss at ixda.org
ists.interactiond cc
esigners.com
Subject
Re: [IxDA Discuss] Input Field
10/24/2006 08:34 Lengths
AM

[Please voluntarily trim replies to include only relevant quoted material.]

Hi Valerie.

Both points of view are valid, this is one of those cases where two
disciplines can conflict, so
which criteria to apply?

To solve the problem, we have to go to the base of those two points of view
and understand what
the intention is for each one.

>From the Graphics Design point of view, we could say that all input boxes
should be the same
length to have a more harmonic effect, that way the final user subconscient
will be pleasured and
so feel more comfortable with the page and so stay on our web site. This is
truth and should be
done in this way as long as it doesn't jeopardize the final user
experience.

Graphics Design guidelines, as any other guidelines, are for general
purposes, if in this case we
are more specifically talking of a web page where the final user has to
input credit card details,
we have to focus on that task and see if the general guideline still apply.

Having this said, we should prefer to risk that harmonic view in favour of
a more easy to use
design, by having all input text boxes the same length, the user will have
to apply more mental
process to identify the different boxes, remember that most users do not
read the page, they
visually scan the page and so, having all boxes the same length, will make
this process more
mental intensive.

A credit card page is a very delicate page, we don’t want the final user
failing at this stage,
otherwise there is a big chance of that user abandoning the site most
companies exist to make
money, so we have to treat a final payment page mainly with that idea on
mind, to make money. A
web page that is very nice to the eye and makes the user to fail on
payments is not good

Now, this is the question, while in the credit card page, would you prefer
your users to be
visually pleased or make it easy for them to success on their task?

On this very specific case my vote goes for usability on giving more visual
clues by having boxes
of different lengths. I also always say that design and usability can
always go together, and the
design doesn’t need to suffer; you can have eye catching designs with
different length boxes. A
way to do this could be by fooling the user’s eye by having different
length boxes over the same
size background boxes as the attached design suggests. This is only an
example that may not apply
to your design but I hope you and your colleagues get my point.

Good luck.

Maglez.

--- valerie at valeriefranek.com wrote:

> [Please voluntarily trim replies to include only relevant quoted
material.]
>
> I'm currently working on revising some web design standards at work, and
> am trying to sort out a minor debate over sizing input field lengths
> within forms.
>
> In my experience, the guideline for determining the size of input fields
> is to use a size similar to the information that the user will be
> entering. So, a field for a 16-digit credit card number should be about
> 16 characters long; a field for a 3-digit CVV code should be about 3
> digits long. For data that is not so determined (email address, proper
> names), an average or estimate length should be used. The intention is
to
> provide subtle hint to the user that helps them understand what they are
> supposed to enter.
>
> However, the standards I'm reviewing suggest that all input fields should
> have the same width, so as to provide visual consistency within the page.
> The size is determined by an average length across all fields. The
> argument for this is to make the page easier on the eyes, so that the
> field labels and input fields aren't creating a jagged effect. It seems
> to me that this approach is more geared towards the visual or graphic
> design side of thigns though, rather than focusing on usability.
>
> I've tried to do some research on this topic and have found a few sources
> with limited information. Most of the sources imply that the first
> approach (sizing based on specific content) is the better approach, but
> don't give an explanation as to why. I'd really appreciate it if anyone
> could direct me to any sources that might provide some hard data on this
> subject, whether in software or web design.
>
> Thanks in advance!
>
> -Valerie Franek
>
> ________________________________________________________________
> Welcome to the Interaction Design Association (IxDA)!
> To post to this list ....... discuss at ixda.org
> List Guidelines ............ http://listguide.ixda.org/
> List Help .................. http://listhelp.ixda.org/
> (Un)Subscription Options ... http://subscription-options.ixda.org/
> Announcements List ......... http://subscribe-announce.ixda.org/
> Questions .................. lists at ixda.org
> Home ....................... http://ixda.org/
> Resource Library ........... http://resources.ixda.org
> (Embedded image moved to file: pic00041.gif)
________________________________________________________________
Welcome to the Interaction Design Association (IxDA)!
To post to this list ....... discuss at ixda.org
List Guidelines ............ http://listguide.ixda.org/
List Help .................. http://listhelp.ixda.org/
(Un)Subscription Options ... http://subscription-options.ixda.org/
Announcements List ......... http://subscribe-announce.ixda.org/
Questions .................. lists at ixda.org
Home ....................... http://ixda.org/
Resource Library ........... http://resources.ixda.org

-----------------------------------------
CONFIDENTIALITY STATEMENT:
This e-mail transmission contains information that is intended to
be confidential. It is intended only for the addressee named
above. If you receive this e-mail in error, please do not read,
copy, or disseminate it. If you are not the intended recipient,
any disclosure, copying, distribution or use of the contents of
this information is prohibited. Please reply to the message
immediately by informing the sender that the message was
misdirected. After replying, please erase it from your computer
system. Your assistance in correcting this error is appreciated.
-------------- next part --------------
A non-text attachment was scrubbed...
Name: pic00041.gif
Type: image/gif
Size: 4195 bytes
Desc: not available
Url : http://lists.interactiondesigners.com/pipermail/discuss-interactiondesigners.com/attachments/20061024/147dc5ca/pic00041.gif

24 Oct 2006 - 9:09am
maglez@btintern...
2006

I am of the opinion, as Jack says that Graphics Design and Usability shouldn't be separated.

Many people discuss on what is better, to focus on Design or to focus on Usability, my answer is
always the same, "Focus on both".

Graphics design just for the sake of aesthetics is not design, at least it's not good design.
Design exists as an answer to a problem, design that is not functional is not good design.

Of course we could be talking a lot on what design is or isn't, on how design differ from art,
etc.

On Valerie's case, the design has to solve the problem of properly communicate the purpose of that
page to the final user, if the final user has problem on understanding the meaning of that page,
then the design is failing and so it's bad design.

Design is a creative discipline and so if you have a problem with an element, just try to find out
a solution to that problem, like those background boxes I suggested, perhaps.

Maglez.

--- SPatrick at amig.com wrote:

> [Please voluntarily trim replies to include only relevant quoted material.]
>
> > I feel that ease of use should always take precedence over design
> aesthetics. I always ask myself "What makes sense to the user?"
> In this case I would definitely go with the field widths that match
> real-life data sizes.
>
> Just my .02
> Susan Patrick
> User Interface Designer
> The Midland Company
> (513) 947-6072
>
> "Design is a process - an intimate collaboration between engineers,
> designers, and clients." - Henry Dreyfuss, Industrial Designer
>
>
>
> Miguel Gonzalez
> <maglez at btinterne
> t.com> To
> Sent by: valerie at valeriefranek.com,
> discuss-bounces at l discuss at ixda.org
> ists.interactiond cc
> esigners.com
> Subject
> Re: [IxDA Discuss] Input Field
> 10/24/2006 08:34 Lengths
> AM
>
>
>
>
>
>
>
>
>
> [Please voluntarily trim replies to include only relevant quoted material.]
>
> Hi Valerie.
>
> Both points of view are valid, this is one of those cases where two
> disciplines can conflict, so
> which criteria to apply?
>
> To solve the problem, we have to go to the base of those two points of view
> and understand what
> the intention is for each one.
>
> >From the Graphics Design point of view, we could say that all input boxes
> should be the same
> length to have a more harmonic effect, that way the final user subconscient
> will be pleasured and
> so feel more comfortable with the page and so stay on our web site. This is
> truth and should be
> done in this way as long as it doesn't jeopardize the final user
> experience.
>
> Graphics Design guidelines, as any other guidelines, are for general
> purposes, if in this case we
> are more specifically talking of a web page where the final user has to
> input credit card details,
> we have to focus on that task and see if the general guideline still apply.
>
> Having this said, we should prefer to risk that harmonic view in favour of
> a more easy to use
> design, by having all input text boxes the same length, the user will have
> to apply more mental
> process to identify the different boxes, remember that most users do not
> read the page, they
> visually scan the page and so, having all boxes the same length, will make
> this process more
> mental intensive.
>
> A credit card page is a very delicate page, we don’t want the final user
> failing at this stage,
> otherwise there is a big chance of that user abandoning the site most
> companies exist to make
> money, so we have to treat a final payment page mainly with that idea on
> mind, to make money. A
> web page that is very nice to the eye and makes the user to fail on
> payments is not good
>
> Now, this is the question, while in the credit card page, would you prefer
> your users to be
> visually pleased or make it easy for them to success on their task?
>
> On this very specific case my vote goes for usability on giving more visual
> clues by having boxes
> of different lengths. I also always say that design and usability can
> always go together, and the
> design doesn’t need to suffer; you can have eye catching designs with
> different length boxes. A
> way to do this could be by fooling the user’s eye by having different
> length boxes over the same
> size background boxes as the attached design suggests. This is only an
> example that may not apply
> to your design but I hope you and your colleagues get my point.
>
> Good luck.
>
> Maglez.
>
>
> --- valerie at valeriefranek.com wrote:
>
> > [Please voluntarily trim replies to include only relevant quoted
> material.]
> >
> > I'm currently working on revising some web design standards at work, and
> > am trying to sort out a minor debate over sizing input field lengths
> > within forms.
> >
> > In my experience, the guideline for determining the size of input fields
> > is to use a size similar to the information that the user will be
> > entering. So, a field for a 16-digit credit card number should be about
> > 16 characters long; a field for a 3-digit CVV code should be about 3
> > digits long. For data that is not so determined (email address, proper
> > names), an average or estimate length should be used. The intention is
> to
> > provide subtle hint to the user that helps them understand what they are
> > supposed to enter.
> >
> > However, the standards I'm reviewing suggest that all input fields should
> > have the same width, so as to provide visual consistency within the page.
> > The size is determined by an average length across all fields. The
> > argument for this is to make the page easier on the eyes, so that the
> > field labels and input fields aren't creating a jagged effect. It seems
> > to me that this approach is more geared towards the visual or graphic
> > design side of thigns though, rather than focusing on usability.
> >
> > I've tried to do some research on this topic and have found a few sources
> > with limited information. Most of the sources imply that the first
> > approach (sizing based on specific content) is the better approach, but
> > don't give an explanation as to why. I'd really appreciate it if anyone
> > could direct me to any sources that might provide some hard data on this
> > subject, whether in software or web design.
> >
> > Thanks in advance!
> >
> > -Valerie Franek
> >
> > ________________________________________________________________
> > Welcome to the Interaction Design Association (IxDA)!
> > To post to this list ....... discuss at ixda.org
> > List Guidelines ............ http://listguide.ixda.org/
> > List Help .................. http://listhelp.ixda.org/
> > (Un)Subscription Options ... http://subscription-options.ixda.org/
> > Announcements List ......... http://subscribe-announce.ixda.org/
> > Questions .................. lists at ixda.org
> > Home ....................... http://ixda.org/
> > Resource Library ........... http://resources.ixda.org
> > (Embedded image moved to file: pic00041.gif)
> ________________________________________________________________
> Welcome to the Interaction Design Association (IxDA)!
> To post to this list ....... discuss at ixda.org
> List Guidelines ............ http://listguide.ixda.org/
> List Help .................. http://listhelp.ixda.org/
> (Un)Subscription Options ... http://subscription-options.ixda.org/
> Announcements List ......... http://subscribe-announce.ixda.org/
> Questions .................. lists at ixda.org
> Home ....................... http://ixda.org/
> Resource Library ........... http://resources.ixda.org
>
> -----------------------------------------
> CONFIDENTIALITY STATEMENT:
> This e-mail transmission contains information that is intended to
> be confidential. It is intended only for the addressee named
> above. If you receive this e-mail in error, please do not read,
> copy, or disseminate it. If you are not the intended recipient,
> any disclosure, copying, distribution or use of the contents of
> this information is prohibited. Please reply to the message
> immediately by informing the sender that the message was
> misdirected. After replying, please erase it from your computer
> system. Your assistance in correcting this error is appreciated.
> > ________________________________________________________________
> Welcome to the Interaction Design Association (IxDA)!
> To post to this list ....... discuss at ixda.org
> List Guidelines ............ http://listguide.ixda.org/
> List Help .................. http://listhelp.ixda.org/
> (Un)Subscription Options ... http://subscription-options.ixda.org/
> Announcements List ......... http://subscribe-announce.ixda.org/
> Questions .................. lists at ixda.org
> Home ....................... http://ixda.org/
> Resource Library ........... http://resources.ixda.org

24 Oct 2006 - 9:10am
maglez@btintern...
2006

I am of the opinion, as Jack says that Graphics Design and Usability shouldn't be separated.

Many people discuss on what is better, to focus on Design or to focus on Usability, my answer is
always the same, "Focus on both".

Graphics design just for the sake of aesthetics is not design, at least it's not good design.
Design exists as an answer to a problem, design that is not functional is not good design.

Of course we could be talking a lot on what design is or isn't, on how design differ from art,
etc.

On Valerie's case, the design has to solve the problem of properly communicate the purpose of that
page to the final user, if the final user has problem on understanding the meaning of that page,
then the design is failing and so it's bad design.

Design is a creative discipline and so if you have a problem with an element, just try to find out
a solution to that problem, like those background boxes I suggested, perhaps.

Maglez.

--- SPatrick at amig.com wrote:

> [Please voluntarily trim replies to include only relevant quoted material.]
>
> > I feel that ease of use should always take precedence over design
> aesthetics. I always ask myself "What makes sense to the user?"
> In this case I would definitely go with the field widths that match
> real-life data sizes.
>
> Just my .02
> Susan Patrick
> User Interface Designer
> The Midland Company
> (513) 947-6072
>
> "Design is a process - an intimate collaboration between engineers,
> designers, and clients." - Henry Dreyfuss, Industrial Designer
>
>
>
> Miguel Gonzalez
> <maglez at btinterne
> t.com> To
> Sent by: valerie at valeriefranek.com,
> discuss-bounces at l discuss at ixda.org
> ists.interactiond cc
> esigners.com
> Subject
> Re: [IxDA Discuss] Input Field
> 10/24/2006 08:34 Lengths
> AM
>
>
>
>
>
>
>
>
>
> [Please voluntarily trim replies to include only relevant quoted material.]
>
> Hi Valerie.
>
> Both points of view are valid, this is one of those cases where two
> disciplines can conflict, so
> which criteria to apply?
>
> To solve the problem, we have to go to the base of those two points of view
> and understand what
> the intention is for each one.
>
> >From the Graphics Design point of view, we could say that all input boxes
> should be the same
> length to have a more harmonic effect, that way the final user subconscient
> will be pleasured and
> so feel more comfortable with the page and so stay on our web site. This is
> truth and should be
> done in this way as long as it doesn't jeopardize the final user
> experience.
>
> Graphics Design guidelines, as any other guidelines, are for general
> purposes, if in this case we
> are more specifically talking of a web page where the final user has to
> input credit card details,
> we have to focus on that task and see if the general guideline still apply.
>
> Having this said, we should prefer to risk that harmonic view in favour of
> a more easy to use
> design, by having all input text boxes the same length, the user will have
> to apply more mental
> process to identify the different boxes, remember that most users do not
> read the page, they
> visually scan the page and so, having all boxes the same length, will make
> this process more
> mental intensive.
>
> A credit card page is a very delicate page, we don’t want the final user
> failing at this stage,
> otherwise there is a big chance of that user abandoning the site most
> companies exist to make
> money, so we have to treat a final payment page mainly with that idea on
> mind, to make money. A
> web page that is very nice to the eye and makes the user to fail on
> payments is not good
>
> Now, this is the question, while in the credit card page, would you prefer
> your users to be
> visually pleased or make it easy for them to success on their task?
>
> On this very specific case my vote goes for usability on giving more visual
> clues by having boxes
> of different lengths. I also always say that design and usability can
> always go together, and the
> design doesn’t need to suffer; you can have eye catching designs with
> different length boxes. A
> way to do this could be by fooling the user’s eye by having different
> length boxes over the same
> size background boxes as the attached design suggests. This is only an
> example that may not apply
> to your design but I hope you and your colleagues get my point.
>
> Good luck.
>
> Maglez.
>
>
> --- valerie at valeriefranek.com wrote:
>
> > [Please voluntarily trim replies to include only relevant quoted
> material.]
> >
> > I'm currently working on revising some web design standards at work, and
> > am trying to sort out a minor debate over sizing input field lengths
> > within forms.
> >
> > In my experience, the guideline for determining the size of input fields
> > is to use a size similar to the information that the user will be
> > entering. So, a field for a 16-digit credit card number should be about
> > 16 characters long; a field for a 3-digit CVV code should be about 3
> > digits long. For data that is not so determined (email address, proper
> > names), an average or estimate length should be used. The intention is
> to
> > provide subtle hint to the user that helps them understand what they are
> > supposed to enter.
> >
> > However, the standards I'm reviewing suggest that all input fields should
> > have the same width, so as to provide visual consistency within the page.
> > The size is determined by an average length across all fields. The
> > argument for this is to make the page easier on the eyes, so that the
> > field labels and input fields aren't creating a jagged effect. It seems
> > to me that this approach is more geared towards the visual or graphic
> > design side of thigns though, rather than focusing on usability.
> >
> > I've tried to do some research on this topic and have found a few sources
> > with limited information. Most of the sources imply that the first
> > approach (sizing based on specific content) is the better approach, but
> > don't give an explanation as to why. I'd really appreciate it if anyone
> > could direct me to any sources that might provide some hard data on this
> > subject, whether in software or web design.
> >
> > Thanks in advance!
> >
> > -Valerie Franek
> >
> > ________________________________________________________________
> > Welcome to the Interaction Design Association (IxDA)!
> > To post to this list ....... discuss at ixda.org
> > List Guidelines ............ http://listguide.ixda.org/
> > List Help .................. http://listhelp.ixda.org/
> > (Un)Subscription Options ... http://subscription-options.ixda.org/
> > Announcements List ......... http://subscribe-announce.ixda.org/
> > Questions .................. lists at ixda.org
> > Home ....................... http://ixda.org/
> > Resource Library ........... http://resources.ixda.org
> > (Embedded image moved to file: pic00041.gif)
> ________________________________________________________________
> Welcome to the Interaction Design Association (IxDA)!
> To post to this list ....... discuss at ixda.org
> List Guidelines ............ http://listguide.ixda.org/
> List Help .................. http://listhelp.ixda.org/
> (Un)Subscription Options ... http://subscription-options.ixda.org/
> Announcements List ......... http://subscribe-announce.ixda.org/
> Questions .................. lists at ixda.org
> Home ....................... http://ixda.org/
> Resource Library ........... http://resources.ixda.org
>
> -----------------------------------------
> CONFIDENTIALITY STATEMENT:
> This e-mail transmission contains information that is intended to
> be confidential. It is intended only for the addressee named
> above. If you receive this e-mail in error, please do not read,
> copy, or disseminate it. If you are not the intended recipient,
> any disclosure, copying, distribution or use of the contents of
> this information is prohibited. Please reply to the message
> immediately by informing the sender that the message was
> misdirected. After replying, please erase it from your computer
> system. Your assistance in correcting this error is appreciated.
> > ________________________________________________________________
> Welcome to the Interaction Design Association (IxDA)!
> To post to this list ....... discuss at ixda.org
> List Guidelines ............ http://listguide.ixda.org/
> List Help .................. http://listhelp.ixda.org/
> (Un)Subscription Options ... http://subscription-options.ixda.org/
> Announcements List ......... http://subscribe-announce.ixda.org/
> Questions .................. lists at ixda.org
> Home ....................... http://ixda.org/
> Resource Library ........... http://resources.ixda.org

24 Oct 2006 - 9:33am
Juan Lanus
2005

I agree with Jack, Miguel, and specially Susan.

Also, about having all fields of the same size, IMO it produces sort
of a dull wiew where the regularity of shapes does not help the user
to identify a target and might help him to make an error.
Tray to explain better ... a scenario: a fiels asks for the wife's
SSN, the user takes his view off the screen for to look at a paper,
reads the number, then returns to the screen and has a hard work for
to find out which of tha many similar fields is his target.
As if, when hiking, the horizon (sky line?) was built of many very
similar, equal, medium-sized mountains. It would be easier to head for
the wrong one.
--
Juan Lanus
TECNOSOL
Argentina

24 Oct 2006 - 10:19am
Forrest Maready
2006

Two words- Center justify.

24 Oct 2006 - 6:24pm
cfmdesigns
2004

>From: valerie at valeriefranek.com
>
>In my experience, the guideline for determining the size of input fields
>is to use a size similar to the information that the user will be
>entering. So, a field for a 16-digit credit card number should be about
>16 characters long; a field for a 3-digit CVV code should be about 3
>digits long. For data that is not so determined (email address, proper
>names), an average or estimate length should be used.

I'm sure you would do so anyway, but just to note: you should use an above average length, not an average one. With an average one, half of all entries would exceed the limits, and you really want closer to only 15% (number pulled from my ear) to do that.

>However, the standards I'm reviewing suggest that all input fields should
>have the same width, so as to provide visual consistency within the page.
>The size is determined by an average length across all fields. The
>argument for this is to make the page easier on the eyes, so that the
>field labels and input fields aren't creating a jagged effect. It seems
>to me that this approach is more geared towards the visual or graphic
>design side of thigns though, rather than focusing on usability.

What I would say it is geared toward is "make it look like a paper form": everything fits on a rectangle, squeezed into a mass of both sameness and lack of readability. (How many times have you hit the reverse of the problem you're having, with a paper form: only 1/2 inch to put in a city name like Coeur d'Alene or San Bernardino, because something had to be squeezed down.)

You are not/may not need to be confined to a set page size with an app, so the needs of paper forms shouldn't constrain you. Users may actually be grateful to have "breathing room" in the form.

One answer may be to group things with borders or boxes. This allows you to have sectional uniformity with flexibility inside the sections, plus the section headers will give extra hints to the user.

-- Jim Drew
Seattle, WA

24 Oct 2006 - 7:16pm
Michael Quibuyen
2003

Context and user goals should drive design so If you're going to
write standards/guidelines, consider these before you go at it.

For example, Is the form for someone who repeatedly uses it
throughout the day for data entry? Or is it for a teenager to request
information from a skateboard company's web site?

If I'm punching in orders all day, hinting form field widths would be
helpful. Conversely, If I'm trying to find out where you're seling
the latest pro model skateboard, I don't give a crap about widths.
Just keep the form as cool as I perceive your company and products to
be.

Composing and balancing interaction/visual/information/etc. design
requires trade-offs depending on who you're designing for. Sometimes,
being cool is more important than being efficient, and vice versa.

Mike Quibuyen
mike at thinkcloud.com

1 Nov 2006 - 4:47am
Anonymous

[I sent this a week ago, but it never showed up. Trying again.]

Valerie Franek wrote:

> I'm currently working on revising some web design standards at work

...

> In my experience, the guideline for determining the size of input
> fields
> is to use a size similar to the information that the user will be
> entering. So, a field for a 16-digit credit card number should be
> about
> 16 characters long; a field for a 3-digit CVV code should be about 3
> digits long.

A field for a credit card should be 19 characters long, to allow for
three spaces in between the four groups of four digits. Allowing
users to add spaces improves readability and decreases the number of
transcription and other data entry errors.

> However, the standards I'm reviewing suggest that all input fields
> should
> have the same width, so as to provide visual consistency within the
> page.
> The size is determined by an average length across all fields.

This can be done separately; since this a web page, use CSS.

<input name="creditcard" type="text" maxlength="19" size="19"
style="width: 150px;" />

Paul

shad 96c / uw cs 2001
/ mac activist / fumbler / eda / headliner / navy-souper
fan of / sophie b. / steve poltz / habs / bills / 49ers /

"I may be wrong, but I'm never in doubt." -- Marshall McLuhan

Syndicate content Get the feed