[ixda] horizontal log in fields on web apps

2 Jun 2008 - 11:31pm
6 years ago
7 replies
944 reads
Soo Basu
2005

HiI've been noticing that a lot of web applications like Virb, Vimeo,
Pageonce, etc have a horizontal form for the log in. How usable is this?
Is it better / worse than the standard practice of displaying the username &
password fields vertically?
Best,
Soo
--

****************************************************************************
Sunandini Basu
"The details are not the details. They make the design' - Charles Eames
****************************************************************************

Comments

3 Jun 2008 - 2:34am
Anonymous

Sunandini,

It has a usability of 3.7 Megasnafus. :p

How do you find it compared to other login experiences? Do you think
it better or worse than these? Do yo think that having the password
field beside or underneath the username field makes a significant
difference? Will one option negatively affect the composition of the
rest of your design?

Alex.

3 Jun 2008 - 4:46am
Chauncey Wilson
2007

Vertical stacking is useful for easy comparisons between two items.
The horizontal approach makes that a bit harder since you have:

Label: [XXXXXXXXXXXXXXXX] Label: [XXXXXXXXXXXXXXXXXXXXX]

Versus

Label: [XXXXXXXXXXXXXXXX]
Label: [XXXXXXXXXXXXXXXXXXXX]

or
Label:
[XXXXXXXXXXXXXXXX]
Label:
[XXXXXXXXXXXXXXXXXXXX]

I have multiple passwords and usernames since systems have different
requirements and security is important so I do think for a second
about this to verify that the combination is correct.

A factor that might complicate this would be the inclusion of
instructions and the length of the field. With usernames and
passwords, you often have restrictions on formatting or a note about
case sensitivity that is important.

Email is often used as the "username" and email fields should be 40-50
characters wide so the entire name if visible. The Web is filled with
tiny email fields don't accommodate long emails and this might lead to
a typing error that isn't discovered and errors of various magnitudes
depending on the purpose. Of the email field is of a reasonable
length so you won't have to scroll say 95% of the time, then the
horizontal approach becomes VERY wide. If the field is small, you
increase the chance for errors.

Chauncey

On Tue, Jun 3, 2008 at 1:31 AM, Sunandini Basu <sunandinibasu at gmail.com> wrote:
> HiI've been noticing that a lot of web applications like Virb, Vimeo,
> Pageonce, etc have a horizontal form for the log in. How usable is this?
> Is it better / worse than the standard practice of displaying the username &
> password fields vertically?
> Best,
> Soo
> --
>
> ****************************************************************************
> Sunandini Basu
> "The details are not the details. They make the design' - Charles Eames
> ****************************************************************************
> ________________________________________________________________
> Welcome to the Interaction Design Association (IxDA)!
> To post to this list ....... discuss at ixda.org
> Unsubscribe ................ http://www.ixda.org/unsubscribe
> List Guidelines ............ http://www.ixda.org/guidelines
> List Help .................. http://www.ixda.org/help
>

3 Jun 2008 - 8:13am
Bob Sampson
2008

I think a major contributor to usability in fields like that are
watermarks in the textboxes to make them stand out more. Kind of like
the "Search Archives..." searchbox on this ixda site in the
rightnav. I think nowadays you can even dump the labels and put them
right in the textboxes.

[Email ] [Password ]

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

3 Jun 2008 - 9:30am
vlad
2008

This is a very good question, and a very good point from Chauncey, thanks!

I actually am working on a redesign right now... The old site featured a
horizontal login form.
One of my latest modifications was to switch to vertical, because ... well,
horizontal forms
look weird. But Chauncey, your point is valid: only now I realize that I
really want to see
the username I entered when I type in the password. It helps me be
consistent.

As for the field length, you forgot to add a quintessential "Log in" button,
which makes
the form even longer.
http://www.kongregate.com/ has a nice horizontal form for login: they place
labels
inside the inputs, which I think is advisable to do.

--------
http://nomorestories.com

3 Jun 2008 - 6:52pm
Nathanael Boehm
2008

Just keep in mind accessibility too if you're going to be putting the visual
label inside the form field as a value attribute instead of a label before
the field, as well as issues when no JS enabled/supported. Not a major
problem, but just make you consider those two requirements ... it can be
annoying have to manually strip out the contents of a field when there's no
JS to do it for you - especially if you're using a screen-reader and don't
notice that you're submitting a search query for "Search archives ...design"

--
Nathanael Boehm
:: http://www.purecaffeine.com
:: nboehm at purecaffeine.com
:: Canberra, Australia
:: 0409 288 464

On Wed, Jun 4, 2008 at 12:13 AM, Bob Sampson <bobsampson at hotmail.com> wrote:

> I think a major contributor to usability in fields like that are
> watermarks in the textboxes to make them stand out more. Kind of like
> the "Search Archives..." searchbox on this ixda site in the
> rightnav. I think nowadays you can even dump the labels and put them
> right in the textboxes.
>
> [Email ] [Password ]
>
>
> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
> Posted from the new ixda.org
> http://www.ixda.org/discuss?post=29751
>
>
> ________________________________________________________________
> Welcome to the Interaction Design Association (IxDA)!
> To post to this list ....... discuss at ixda.org
> Unsubscribe ................ http://www.ixda.org/unsubscribe
> List Guidelines ............ http://www.ixda.org/guidelines
> List Help .................. http://www.ixda.org/help
>

--
Nathanael Boehm
:: http://www.purecaffeine.com
:: nboehm at purecaffeine.com
:: Canberra, Australia
:: 0409 288 464

3 Jun 2008 - 4:53pm
Caroline Jarrett
2007

From: "Bob Sampson" <bobsampson at hotmail.com>

:I think a major contributor to usability in fields like that are
: watermarks in the textboxes to make them stand out more. Kind of like
: the "Search Archives..." searchbox on this ixda site in the
: rightnav. I think nowadays you can even dump the labels and put them
: right in the textboxes.
:
: [Email ] [Password ]
:

Not necessarily. I have seen users make repeated mistakes with watermarked fields. The 'empty box' is a very powerful thing on a web
page and it says 'type into me'. A box with a hint text or label already in it is a box that already has input. I've often seen
users fail to recognise that these boxes require input, and skip right over them to the next empty box.

They aren't _quite_ as dangerous on pages where there are no empty boxes. But nearly - because users may then not recognise that
there is anywhere to type on the page.

Best,

Caroline Jarrett
caroline.jarrett at effortmark.co.uk
07990 570647

Effortmark Ltd
Usability - Forms - Content

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

11 Jun 2008 - 5:56am
Soo Basu
2005

here's a good article that explains a lot of things:
http://www.uie.com/articles/user_expectations
HTH, Soo

Syndicate content Get the feed