Placement of Calendar Widget

28 Jun 2007 - 1:07pm
7 years ago
18 replies
828 reads
Cecily Walker
2006

I'm sure most of us have seen these: the little buttons or icons that
when clicked, pop up a calendar to assist people with entering dates
in a text field. In most instances, the widget is placed to the right
of the text field. During a usability testing session I conducted
last week, a participant noted that he always thought it was odd that
the calendar was placed at the end of the line. He said he'd be
inclined to begin entering the date manually, but then as he
discovered the calendar widget, he'd be annoyed because "if it was at
the beginning of the line it would save me from having to type the
date."

I'm curious to know if anyone else has run into this issue. If you use
these calendar widgets in your design, where do you place them and
why? Is there any specific benefit to placing them at the end of a
text field instead of at the beginning?

Comments

28 Jun 2007 - 1:16pm
tdellaringa
2006

On 6/28/07, Cecily Walker <cecily.walker at gmail.com> wrote:
>
> ...he'd be annoyed because "if it was at
> the beginning of the line it would save me from having to type the
> date."

At my last job we had a system that used calendar widgets, and they were
indeed on the right side of the input. I can tell you that through one paper
prototyping test, and at least 3 rounds of usability testing that never once
did anyone mention moving it to the beginning. I believe this is because it
has become something of a convention to have it there.

So I'd want to be careful about giving too much weight to one guy's comment,
as I am sure you are aware. That is what he said, but were you able to watch
what he did? Did he really begin entering a date and then use the widget?
Was this a pattern among any other test subjects?

I suppose you could do an A/B test on that particular widget. It would be
interesting to see the results, but I think as there is already an
established convention - maybe not fully adopted but out there - of having
it on the right, I'd want some real good data behind making a change like
that, I'd want the research to back up that change.

If you do conduct such research, let us know!

Tom

28 Jun 2007 - 1:17pm
Jack L. Moffett
2005

Typically, fields will be left-aligned with each other. Not every
field will have an icon. Putting the icons on the left will throw off
the alignment of the fields. Or, if the layout is designed such that
there is an extra column in the grid for icons, it will require more
space between the label and its associated field. Placing the icons
to the right of the fields has the least impact on the layout.

Jack

On Jun 28, 2007, at 2:07 PM, Cecily Walker wrote:

> I'm curious to know if anyone else has run into this issue. If you use
> these calendar widgets in your design, where do you place them and
> why? Is there any specific benefit to placing them at the end of a
> text field instead of at the beginning?
>

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

Form follows function -
that has been misunderstood.
Form and function should be one,
joined in a spiritual union.

- Frank Lloyd Wright

28 Jun 2007 - 1:15pm
jstrande
2007

Cecily,

Another option would be to have the calendar widget appear when the person
tabs into the entry field - so there is no chance of missing it.

Jon

On 6/28/07, Cecily Walker <cecily.walker at gmail.com> wrote:
>
> I'm sure most of us have seen these: the little buttons or icons that
> when clicked, pop up a calendar to assist people with entering dates
> in a text field. In most instances, the widget is placed to the right
> of the text field. During a usability testing session I conducted
> last week, a participant noted that he always thought it was odd that
> the calendar was placed at the end of the line. He said he'd be
> inclined to begin entering the date manually, but then as he
> discovered the calendar widget, he'd be annoyed because "if it was at
> the beginning of the line it would save me from having to type the
> date."
>
> I'm curious to know if anyone else has run into this issue. If you use
> these calendar widgets in your design, where do you place them and
> why? Is there any specific benefit to placing them at the end of a
> text field instead of at the beginning?
> ________________________________________________________________
> Welcome to the Interaction Design Association (IxDA)!
> To post to this list ....... discuss at ixda.org
> List Guidelines ............ http://beta.ixda.org/guidelines
> List Help .................. http://beta.ixda.org/help
> Unsubscribe ................ http://beta.ixda.org/unsubscribe
> Questions .................. list at ixda.org
> Home ....................... http://beta.ixda.org
>

28 Jun 2007 - 1:22pm
visual hokie
2007

What about displaying the calendar, when the user clicks in the entry
field rather than as a widget at the end of the field. I know Expedia
does this and I like the interaction because I can quickly type the
date while calendar overlay confirms that I have keyed the correct
date. Of course, I could also just point and click in the calendar.

bv

On 6/28/07, Tom Dell'Aringa <pixelmech at gmail.com> wrote:
> On 6/28/07, Cecily Walker <cecily.walker at gmail.com> wrote:
> >
> > ...he'd be annoyed because "if it was at
> > the beginning of the line it would save me from having to type the
> > date."
>
>
> At my last job we had a system that used calendar widgets, and they were
> indeed on the right side of the input. I can tell you that through one paper
> prototyping test, and at least 3 rounds of usability testing that never once
> did anyone mention moving it to the beginning. I believe this is because it
> has become something of a convention to have it there.
>
> So I'd want to be careful about giving too much weight to one guy's comment,
> as I am sure you are aware. That is what he said, but were you able to watch
> what he did? Did he really begin entering a date and then use the widget?
> Was this a pattern among any other test subjects?
>
> I suppose you could do an A/B test on that particular widget. It would be
> interesting to see the results, but I think as there is already an
> established convention - maybe not fully adopted but out there - of having
> it on the right, I'd want some real good data behind making a change like
> that, I'd want the research to back up that change.
>
> If you do conduct such research, let us know!
>
> Tom
> ________________________________________________________________
> Welcome to the Interaction Design Association (IxDA)!
> To post to this list ....... discuss at ixda.org
> List Guidelines ............ http://beta.ixda.org/guidelines
> List Help .................. http://beta.ixda.org/help
> Unsubscribe ................ http://beta.ixda.org/unsubscribe
> Questions .................. list at ixda.org
> Home ....................... http://beta.ixda.org
>

28 Jun 2007 - 1:45pm
.pauric
2006

Jon "Another option would be to have the calendar widget appear when
the person tabs into the entry field - so there is no chance of
missing it.

Travelocity do this when you click in to the field (but not tab) and
you can continue typing or select from the pop-up. I cant fault it.
http://www.travelocity.com/

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://beta.ixda.org/discuss?post=17693

28 Jun 2007 - 1:57pm
Cecily Walker
2006

On 6/28/07, Tom Dell'Aringa <pixelmech at gmail.com> wrote:

> So I'd want to be careful about giving too much weight to one guy's comment,
> as I am sure you are aware. That is what he said, but were you able to watch
> what he did? Did he really begin entering a date and then use the widget?
> Was this a pattern among any other test subjects?

He was the only one who had this feedback during the session. I've
used these widgets in other designs (web/desktop) and he's the only
one who expressed a desire to see it placed at the beginning of the
line. I noticed that he placed his cursor in the text box as if he
was going to start entering text, but then he discovered the widget.
It was at this point that he asked the (rhetorical) question about why
it was done this way.

Since he was the only one who made this comment, I'm viewing it as an
anecdotal curiosity instead of an indication of some sort of emerging
pattern. But now I'm curious to see what would happen if we did move
the widget to a different place and how disruptive that might be.

28 Jun 2007 - 2:00pm
jstrande
2007

Pauric,

Very interesting! I should have written "when the entry field receives
focus" - either from a person clicking into it or tabbing.

I'm wondering if they choose not to reveal the calendar widget on a tab
event since that event doesn't necessarily mean that someone is going to
enter information into the field, they could just be passing through (so to
speak) as part of the tab order. Displaying the drop down on a tab could
disrupt someones flow... anyone on the list have any insight?

Jon

On 6/28/07, pauric <radiorental at gmail.com> wrote:
>
> Jon "Another option would be to have the calendar widget appear when
> the person tabs into the entry field - so there is no chance of
> missing it.
>
> Travelocity do this when you click in to the field (but not tab) and
> you can continue typing or select from the pop-up. I cant fault it.
> http://www.travelocity.com/
>
>
> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
> Posted from the new ixda.org
> http://beta.ixda.org/discuss?post=17693
>
>
> ________________________________________________________________
> Welcome to the Interaction Design Association (IxDA)!
> To post to this list ....... discuss at ixda.org
> List Guidelines ............ http://beta.ixda.org/guidelines
> List Help .................. http://beta.ixda.org/help
> Unsubscribe ................ http://beta.ixda.org/unsubscribe
> Questions .................. list at ixda.org
> Home ....................... http://beta.ixda.org
>

28 Jun 2007 - 2:01pm
Morten Hjerde
2007

Hi
In my experience the calendar is not the important issue in a date entry
field. (But its a nice addition.) What is important is that the input is
bound; the entry field validates the input. There are several ways to do
this. We do this with multi-field input, the entry field is actually 3
combined fields, one for day, one for month and one for year - with a slash
delimiter between each. The format is obvious and the user can't enter an
invalid date. (Its a "custom widget" - you dont have to tab from field to
field or anything ugly.) I don't have an illustration at hand unfortunately.

--
Morten Hjerde
http://sender11.typepad.com

28 Jun 2007 - 2:04pm
Cecily Walker
2006

I've used this in the past with varied results. I'm using a unified
text box for this design because that is the way the DB table that
houses this data is structured (one single field for date).

On 6/28/07, Morten Hjerde <mhjerde at gmail.com> wrote:
> Hi
> In my experience the calendar is not the important issue in a date entry
> field. (But its a nice addition.) What is important is that the input is
> bound; the entry field validates the input. There are several ways to do
> this. We do this with multi-field input, the entry field is actually 3
> combined fields, one for day, one for month and one for year - with a slash
> delimiter between each. The format is obvious and the user can't enter an
> invalid date. (Its a "custom widget" - you dont have to tab from field to
> field or anything ugly.) I don't have an illustration at hand unfortunately.
>

28 Jun 2007 - 7:21pm
bminihan
2007

I noticed the two examples given where the calendar control appears on the
field's focus are travel booking web sites. Booking a trip typically
requires entering 2 dates, and improving the efficiency of both is
definitely worth building sophisticated calendar controls. Especially
considering the product...

I agree with others and would avoid putting the calendar icon first. From
your description, it had the exact right effect for this end user, without
disrupting the tab flow for everyone else who would wonder why you put your
icon first when everyone else puts it last. Your subject clicked or tabbed
into the field, then saw the control, and used it, rather than filling in
the date. Voila!

I see various date controls on a regular basis. They range the spectrum of
the examples here (I've even seen a few that require dates in Oracle/Unicode
date format: 20070707!).

One issue we often face is making sure people not only enter the date
correctly, but can clearly understand the month. My company is about 2/5
UK, 2/5 US and 1/5 international, and we get in a lot of trouble requiring
date fields in 05/05/07 format.

Bryan

-----Original Message-----
From: discuss-bounces at lists.interactiondesigners.com
[mailto:discuss-bounces at lists.interactiondesigners.com] On Behalf Of Jon
Strande
Sent: Thursday, June 28, 2007 3:01 PM
To: pauric
Cc: discuss at lists.interactiondesigners.com
Subject: Re: [IxDA Discuss] Placement of Calendar Widget

Pauric,

Very interesting! I should have written "when the entry field receives
focus" - either from a person clicking into it or tabbing.

I'm wondering if they choose not to reveal the calendar widget on a tab
event since that event doesn't necessarily mean that someone is going to
enter information into the field, they could just be passing through (so to
speak) as part of the tab order. Displaying the drop down on a tab could
disrupt someones flow... anyone on the list have any insight?

Jon

On 6/28/07, pauric <radiorental at gmail.com> wrote:
>
> Jon "Another option would be to have the calendar widget appear when
> the person tabs into the entry field - so there is no chance of
> missing it.
>
> Travelocity do this when you click in to the field (but not tab) and
> you can continue typing or select from the pop-up. I cant fault it.
> http://www.travelocity.com/
>
>
> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
> Posted from the new ixda.org
> http://beta.ixda.org/discuss?post=17693
>
>
> ________________________________________________________________
> Welcome to the Interaction Design Association (IxDA)!
> To post to this list ....... discuss at ixda.org
> List Guidelines ............ http://beta.ixda.org/guidelines
> List Help .................. http://beta.ixda.org/help
> Unsubscribe ................ http://beta.ixda.org/unsubscribe
> Questions .................. list at ixda.org
> Home ....................... http://beta.ixda.org
>
________________________________________________________________
Welcome to the Interaction Design Association (IxDA)!
To post to this list ....... discuss at ixda.org
List Guidelines ............ http://beta.ixda.org/guidelines
List Help .................. http://beta.ixda.org/help
Unsubscribe ................ http://beta.ixda.org/unsubscribe
Questions .................. list at ixda.org
Home ....................... http://beta.ixda.org

28 Jun 2007 - 8:21pm
.pauric
2006

Bryan: "I noticed the two examples given where the calendar control
appears on the field's focus are travel booking web sites."

One additional requirement I'd add for travel sites based around
weekends and to avoid making user reference a seperate view its nice
to have one presented within the booking process.

Bryan: "My company is about 2/5 UK, 2/5 US and 1/5 international,
and we get in a lot of trouble requiring date fields in 05/05/07
format."

For what its worth the US Dept for making it difficult as possible to
enter the country actually conforms to the day/month/year format.
They clearly label stuff dd/mm/yyyy though.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://beta.ixda.org/discuss?post=17693

28 Jun 2007 - 8:24pm
dmitryn
2004

In addition to all the good reasons everyone else has mentioned for
putting the widget to the right of the field, it also makes sense from
an accessibility standpoint. Users navigating the form using the
keyboard should encounter the (presumably accessible) field before the
(less likely to be accessible) widget.

Dmitry

On 6/28/07, Cecily Walker <cecily.walker at gmail.com> wrote:
> I'm sure most of us have seen these: the little buttons or icons that
> when clicked, pop up a calendar to assist people with entering dates
> in a text field. In most instances, the widget is placed to the right
> of the text field. During a usability testing session I conducted
> last week, a participant noted that he always thought it was odd that
> the calendar was placed at the end of the line. He said he'd be
> inclined to begin entering the date manually, but then as he
> discovered the calendar widget, he'd be annoyed because "if it was at
> the beginning of the line it would save me from having to type the
> date."
>
> I'm curious to know if anyone else has run into this issue. If you use
> these calendar widgets in your design, where do you place them and
> why? Is there any specific benefit to placing them at the end of a
> text field instead of at the beginning?
> ________________________________________________________________
> Welcome to the Interaction Design Association (IxDA)!
> To post to this list ....... discuss at ixda.org
> List Guidelines ............ http://beta.ixda.org/guidelines
> List Help .................. http://beta.ixda.org/help
> Unsubscribe ................ http://beta.ixda.org/unsubscribe
> Questions .................. list at ixda.org
> Home ....................... http://beta.ixda.org
>

28 Jun 2007 - 9:56pm
.pauric
2006

Sorry, what I meant to say was 'One additional requirement I'd add
for travel sites is based around viewing weekends. When
depart/return dates are flexible, providing a visual respentation
within the booking process avoids making the user reference a
seperate view.'

sorry - pauric

'Give a dyslexic a beer and he'll royally screw things up for the
day, provide him with a preview mode and he'll start to make sense'

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://beta.ixda.org/discuss?post=17693

29 Jun 2007 - 1:17am
cfmdesigns
2004

On Jun 28, 2007, at 5:21 PM, Bryan wrote:

> I noticed the two examples given where the calendar control appears
> on the
> field's focus are travel booking web sites. Booking a trip typically
> requires entering 2 dates, and improving the efficiency of both is
> definitely worth building sophisticated calendar controls. Especially
> considering the product...
>
> I agree with others and would avoid putting the calendar icon
> first. From
> your description, it had the exact right effect for this end user,
> without
> disrupting the tab flow for everyone else who would wonder why you
> put your
> icon first when everyone else puts it last. Your subject clicked
> or tabbed
> into the field, then saw the control, and used it, rather than
> filling in
> the date. Voila!
>
> I see various date controls on a regular basis. They range the
> spectrum of
> the examples here (I've even seen a few that require dates in
> Oracle/Unicode
> date format: 20070707!).

Oh yeah, dates are one of my pet peeves. There is good reason for
putting a sample date format in the field, but none for forcing the
user to adhere to a particular format except laziness on the part of
the programmer. (Same for phone number formats.) There are a half
dozen distinct and common formats; accept them all!

There actually is a lot of variation between the major travel sites.
I took a peek at Kayak, Orbitz, Travelocity, Expedia, CheapTickets,
and Alaska Airlines (since I'm from Seattle). Using Safari on Mac.

* All except Alaska pop a calendar widget on entering the date
field. Travelocity's is sometimes flaky for coming up.

* Expedia and Alaska stuff today's date in the date field. Kayak
stuffs the date of the last search you did.

* Travelocity and Cheap Tickets apparently allow a 2 digit year.
(Like you need a 4-digit one for a travel date. Even back at Y2K?)

* Kayak puts both month and year in a popup, and only allows you to
use dates for the next year. (As a result, their date field is day
number only.) That only seems like a limit until you think about it:
have you *ever* booked airfare more than a year out?

* Expedia has no calendar button. Travelocity's is not accessible in
the tab order.

* Alaska and CheapTickets only put up a one month calendar. Today
being the 28th, that means you can't see the most likely days you
will travel. Travelocity puts up a vertical calendar, which is
harder to read. (Also harder to read due to size and busyness with
the underlines.)

* Kayak identifies the day of the week that you choose. That's a
*major* aid in being sure you got the right day. (I boofed a flight
out of DC on MLK weekend a few years ago, scheduling for the wrong
day and had to pay the change fee or miss a day of work.)

* Kayak also puts a highlight box around the date if you type while
the widget is up. (There's at least one site I've been to that
doesn't allow typing when the widget is open.)

In all, Kayak is as good or better than the rest on every front with
this widget.

(Oh, also poked at Priceline and HotWire. Priceline uses popups for
all the dates; no calendar widget at all.)

-- Jim

29 Jun 2007 - 8:00am
Tracy Boyington
2007

I wonder why? Surely there aren't that many travellers who wait until
the day of their trip to search for tickets.

~~~~~
Tracy Boyington tracy_boyington at okcareertech.org
Oklahoma Department of Career & Technology Education
Stillwater, OK http://www.okcareertech.org/cimc

>>> Jim Drew <cfmdesigns at earthlink.net> 06/29/07 1:17 AM >>>

* Expedia and Alaska stuff today's date in the date field.

29 Jun 2007 - 8:06am
.pauric
2006

Jim: "Travelocity's is not accessible in the tab order."

In general terms there's an argument for not enabling 'gui'
features for pure keyboard users. Not saying its the case here, but
if someone is tabbing around a page a designer should consider if its
necessary to pop-up any mouse only widgets in their way.

fwiw, I understood that you cant book flights more than 300 days out.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://beta.ixda.org/discuss?post=17693

29 Jun 2007 - 3:33pm
cfmdesigns
2004

>From: Tracy Boyington <tracy_boyington at okcareertech.org>
>
>>* Expedia and Alaska stuff today's date in the date field.
>
>I wonder why? Surely there aren't that many travellers who wait until
>the day of their trip to search for tickets.

Business travellers, perhaps, who are the big bucks, last minute purchasers. We who plan a few weeks ahead and price compare, we're somewhere between gravy and an annoyance.

On some level, any date is better than no date -- like a stopped clock, it's accurate at least some of the time -- and I'm not sure today is worse than tomorrow or next Monday. It hits a use case -- someone who wants to travel today -- as does Kayak's solution -- someone who wants to look for more options on a past search which may not have resulted in a ticket.

I didn't check to see if either site is clever enough to say "Oh, look it's past 6:00 pm, so use tomorrow's date instead of today's."

-- Jim

29 Jun 2007 - 6:20pm
cfmdesigns
2004

>From: pauric <radiorental at gmail.com>
>
>Jim: "Travelocity's is not accessible in the tab order."
>
>In general terms there's an argument for not enabling 'gui'
>features for pure keyboard users. Not saying its the case here, but
>if someone is tabbing around a page a designer should consider if its
>necessary to pop-up any mouse only widgets in their way.

Very good point. Since none of the calendar widgets seem to be keyboardable, there's no value in bringing them up from the keyboard. (Which is a condemning note on the widgets themselves, perhaps!)

-- Jim

Syndicate content Get the feed