Time Entry

19 Apr 2007 - 3:01pm
7 years ago
6 replies
526 reads
Jack L. Moffett
2005

I've scoured the pattern libraries for various methods of entering
time of day into a form and have come up empty. I need to determine
the most efficient way for a user to enter a specific time. Options
include a single field, multiple fields (hours, minutes), single or
multiple spinners, or multiple menus. If anyone has other
suggestions, has seen examples, or would just like to offer an
opinion, I'm all ears.

Thanks,
Jack

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

I am in search of the
simple elegant seductive
maybe even obvious IDEA.
With this in my pocket
I cannot fail.

- Tibor Kalman

Comments

20 Apr 2007 - 12:53am
Richard Czerwonka
2005

This is from a desktop application point of view. It may be harder to do on a web page.

I just let the user type in a time like "10:30 am". Then I validate it using the short time
settings of Windows. The great thing about that is that the end user can specify any
time format they like in the Windows control panel, and my application doesn't need to
be changed at all. With a web page, you may need to use Javascript or PHP to
implement the same thing.

I also have an optional time entry window, which is displayed by clicking a button next
to the time entry field. This window has buttons labled 1 to 12 for the hours, buttons
labled 00 to 55 in increments of 5 for the minutes, and a button for PM and a button for
AM. I also have plus and minus buttons for fine tuning the minutes for more precise
times. To enter a time of 12:30 PM, you clicked on the 12 button, the 30 button and the
PM button, followed by the OK button, and the result is placed into the time entry field.
Not sure if that can be implemented using a web page.

On 19 Apr 2007 at 16:01, Jack Moffett wrote:

> I've scoured the pattern libraries for various methods of entering
> time of day into a form and have come up empty. I need to determine
> the most efficient way for a user to enter a specific time. Options
> include a single field, multiple fields (hours, minutes), single or
> multiple spinners, or multiple menus. If anyone has other
> suggestions, has seen examples, or would just like to offer an
> opinion, I'm all ears.
>
> Thanks,
> Jack
>
>
>
> Jack L. Moffett
> Interaction Designer
> inmedius
> 412.459.0310 x219
> http://www.inmedius.com
>
> I am in search of the
> simple elegant seductive
> maybe even obvious IDEA.
> With this in my pocket
> I cannot fail.
>
> - Tibor Kalman
>
>
> ________________________________________________________________
> 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
>

=================
Richard Czerwonka,
Delphi Programmer
ENT Technologies
Mob: 0412 104 042
=================

20 Apr 2007 - 12:54am
Anne Hjortshoj
2007

Check out 14dayz.com (set up a free account to see what I'm citing).
They have a timesheet setting where you can specify time format. It's
fairly simple.

-Anne

On 4/20/07, Richard (ENT Technologies) <richard at enttech.com.au> wrote:
>
> This is from a desktop application point of view. It may be harder to do on a web page.
>
> I just let the user type in a time like "10:30 am". Then I validate it using the short time
> settings of Windows. The great thing about that is that the end user can specify any
> time format they like in the Windows control panel, and my application doesn't need to
> be changed at all. With a web page, you may need to use Javascript or PHP to
> implement the same thing.
>
> I also have an optional time entry window, which is displayed by clicking a button next
> to the time entry field. This window has buttons labled 1 to 12 for the hours, buttons
> labled 00 to 55 in increments of 5 for the minutes, and a button for PM and a button for
> AM. I also have plus and minus buttons for fine tuning the minutes for more precise
> times. To enter a time of 12:30 PM, you clicked on the 12 button, the 30 button and the
> PM button, followed by the OK button, and the result is placed into the time entry field.
> Not sure if that can be implemented using a web page.
>
>
> On 19 Apr 2007 at 16:01, Jack Moffett wrote:
>
> > I've scoured the pattern libraries for various methods of entering
> > time of day into a form and have come up empty. I need to determine
> > the most efficient way for a user to enter a specific time. Options
> > include a single field, multiple fields (hours, minutes), single or
> > multiple spinners, or multiple menus. If anyone has other
> > suggestions, has seen examples, or would just like to offer an
> > opinion, I'm all ears.
> >
> > Thanks,
> > Jack
> >
> >
> >
> > Jack L. Moffett
> > Interaction Designer
> > inmedius
> > 412.459.0310 x219
> > http://www.inmedius.com
> >
> > I am in search of the
> > simple elegant seductive
> > maybe even obvious IDEA.
> > With this in my pocket
> > I cannot fail.
> >
> > - Tibor Kalman
> >
> >
> > ________________________________________________________________
> > 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
> >
>
>
> =================
> Richard Czerwonka,
> Delphi Programmer
> ENT Technologies
> Mob: 0412 104 042
> =================
>
> ________________________________________________________________
> 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
>

--
Anne Hjortshoj | anne.hj at gmail.com

20 Apr 2007 - 9:48am
Jack L. Moffett
2005

Richard,

I really like the design of your time entry window. At first, I
thought it sounded like too many buttons, but after sketching it out,
it's really not bad at all. The application I'm working on is a
desktop app, and I was planning on having a pop-up that could be used
with a stylus or finger.

Thanks for your (and everyone else's) input.
Jack

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

20 Apr 2007 - 10:39am
Håkan Reis
2006

I don't know about the user localization but if needed dont forget to check
valid data. In scandianvia we use 18:00 instead of 6:00 pm... no am/pm.
--
Håkan Reis
Dotway AB

http://blog.reis.se

23 Apr 2007 - 12:14am
Anonymous

Jack Moffett wrote:

> I've scoured the pattern libraries for various methods of entering
> time of day into a form and have come up empty. I need to determine
> the most efficient way for a user to enter a specific time. Options
> include a single field, multiple fields (hours, minutes), single or
> multiple spinners, or multiple menus. If anyone has other
> suggestions, has seen examples, or would just like to offer an
> opinion, I'm all ears.

37signals posted a thorough discussion of how they came up with the
date and time entry field for Backpack:
<http://www.37signals.com/svn/archives2/
the_long_road_to_simple_creating_debating_and_iterating_add_an_event.php
>

John Gruber ranted about iCal UI vs Backpack UI here:
<http://daringfireball.net/2007/03/deal_with_it>

Paul

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

we used to have hope / now we've got soap on a rope /
we used to have dreams / now we've got overpaid ... baseball teams /
we've got grocery baggers / graffiti taggers / golf ball shaggers /
--Steve Poltz and Jewel Kilcher, "Silver Lining"

23 Apr 2007 - 8:39am
DrWex
2006

This comment below reminds me of my personal maxim on date/time entry (*)

"Be generous in what you accept and strict in what you emit."

That is, it doesn't take much work to find or write a data class that
will take in and validate dates and times in many formats. Once the
data are validated it's pretty trivial to output in some ISO standard
format - I personally prefer text forms such as "Apr 23 2007 09:36
EDT".

If you're working in a Windows environment (and probably others) there
are environmental variables your code can query to find the local
date-time format.

Sadly, this maxim doesn't map well to a set of widgets. If I want to
be free about allowed input formats I often have no recourse other
than a text box backed by strong parsing code. If I'm forced to use
individual widgets I usually make an array of dropdowns and numeric
spinners that make input in my preferred format easy.

I make no claim that this is a best-practice or a pattern anyone else
should copy. It's just my personal solution.

--Alan

(*) shamelessly stolen from the early days of HTML parsers

On 4/20/07, Håkan Reis <hakan.reis at dotway.se> wrote:
> I don't know about the user localization but if needed dont forget to check
> valid data. In scandianvia we use 18:00 instead of 6:00 pm... no am/pm.

Syndicate content Get the feed