Virgin Atlantic Log in

[AJK]

I thought it might be great winning a trip to London with Virgin, so I
entered the competition. The only quirk I have with their site, is
with their log in section.

http://za.virginatlantic.co.za/25years/login.q

You are drawn towards "Email address" which you click and it
disappears so that you can write your email address.
Then I am drawn towards the "Password" which I click, but it doesn't
disappear, because it is the heading!

It is a small inconsistency in an otherwise nice website.

Anyone else experienced this or is it just me?

[Shaun O'Connell]

Hmm, I didn't experience the same problem as you AJ, but I can understand what caused your troubles.  Clear delineation between labels and 'affordable' form fields should be the goal of any interaction / web designer.  By 'affordable' I mean the field should LOOK like an input field, not subdued or blended into the background. (Check out: Affordance).

Any web developer worth their salt would make the field label set focus on the password field when clicked.  This is easily accomplished using the <label> element with a for attribute, e.g.:

<label for="password_field">Password:</label>
<input type="password" id="password_field" />

...which co-incidentally is also great for accessibility, as screen readers will read out the associated label as the user has the field in focus.

Good luck with the competition :)

Ciao,

Shaun

[Patrick Homan (JH-01)]

Something else...

I just typed in www.virginatlantic.co.za and I got redirected to
http://www.virgin-atlantic.com, however when the page has loaded it seems
that I'm on the UK version of the site. I have to manually select my country
from the dropdown list before it loads the SA version.

So, the lesson here would be: If you redirect someone that types in a .co.za
web address to a .com domain, use your intelligence & automatically load the
SA version. Silly buggers ;)

Hehe :)

Patrick N Homan
UX Consultant
JH-01
www.jh-01.com

Checked by AVG - www.avg.com
Version: 8.5.386 / Virus Database: 270.13.15/2239 - Release Date: 07/15/09
06:07:00

[JeanDP]

Hi guys,

I was the developer (not designer) on this project and are aware of
the usability issues.
However I have to state this was a project that was rushed in at the
last moment and had an extremely tight deadline.

The client felt that the masked password field's function wasn't clear
enough without a label and thus the break in consistency with the
other fields.
However that said the fact that we didn't make the label focus on the
input field was just wrong and a slip up on our part.

We have discussed the implications in an internal meeting this week
and decided that going forward we would avoid using the inline label
effect on big forms and limit it to forms such as site search or
newsletter subscription rather.

We are constantly looking to improve our user experience and with each
mistake we make we adjust our processes going forward.

Cheers
Jean


On Jul 16, 1:38 pm, "Patrick Homan \(JH-01\)" <patr...@jh-01.com>
wrote:
> Something else...
>
> I just typed inwww.virginatlantic.co.zaand I got redirected tohttp://www.virgin-atlantic.com, however when the page has loaded it seems

[AJKock]

@JeanDP Thank you for taking the time to give feedback from the
"other" side. I know exactly how you feel. Designers and developers
always seem to be the people under pressure to do something in "24
hours", while the decision makers sometimes sit months on projects.

There are a few options your current site can utilise to improve its
current state, without losing inline label "effects" which can be
useful for users.

1. Increase contrast between text box and background
2. Give the email field a title e.g. Name (My guess is that the
designer didn't want to repeat the field as the title, so he/she left
it out) [If space was a problem, check out the article below on
alistapart]

Not wanting to be presumptuous of what you do know, I am just listing
the following resources for readers who need the info or maybe need a
refresh of their knowledge

Accessibility 2.0 and Forms: http://www.usability.com.au/resources/wcag2/
Forms: http://www.lukew.com/resources/articles/web_forms.html
Colour: http://www.boxesandarrows.com/view/natural_selections_colors_found_in_nature_and_interface_design
Labels inside forms: http://www.lukew.com/ff/entry.asp?687
Some Guidelines (bottom):
http://www.uxmatters.com/mt/archives/2006/01/evaluating-the-usability-of-search-forms-using-eyetracking-a-practical-approach.php
& http://www.lukew.com/ff/entry.asp?832
Making Compact Forms Accessible: http://www.alistapart.com/articles/makingcompactformsmoreaccessible/

@Patrick Nice one. That makes perfect sense. A lot of sites have this
problem, but funny enough I hate it when Google does it. :)