Skip navigation

Category Archives: Interaction Design

The behaviour of a system with regards to a User.

A date picker based on one real-world interaction

Lovemore recently posted on his blog about calendar-based date-picker solutions within the jQuery UI framework.
Upon seeing his ‘sliders’ design, shown below…

Sliders for setting hours and minutes

…for setting the Hour and Minutes, it got me thinking: Have you ever tried to set the time on one of those old time-tumbling alarm clocks?

The hour and minute ‘plates’ each had a tactile cog on the right of the number that you could rotate, tumbling the hour or minute depending on how much you wanted to change the current time.

Tumbling alarm clock

What about using something similar for our online interactions?


Affordance at play again

Now, couple the retro-inspired-idea above with the principle of affordance.  Instead of giving the user one massive field to enter a fully-qualified date, provide them with fields for each data type within the date. e.g.



Progressive Enhancement as the cherry on top

Then get the JS to attach a CSS-based image of a cog to each field.  When you mouseover each ‘cog’, the cursor changes to a horizontal dividing line.  If you click and drag down, the date starts to tumble down.  The further you move the cursor from the start point (while still holding down the mousebutton) the faster the date or time will tumble.


Microsoft Windows uses something similar with their Date/Time settings, only you have to set focus to the hour if you want to change the hour using the up and down arrows:
Windows Time


Here’s a crude example of my previous date fields with tumblers attached:

Tumbling date pickers


Now imagine you need to set your birthdate using the above control.

We could initialise the date with an arbitrary date such as: 1980.06.15.  The User would tab or click through each field and correct it as necessary. [Aside: Isn’t it worse to correct predefined dates than enter new ones from blank – has anyone tested this?]  The user could manually type each field, or use the tumblers with the mouse.  One could also capture the Arrow keys.  If the down arrow was used, the date could increment up by each keystroke.

If they reached the logical end of say, the day field (31), it would loop around to the first day (01).


Pros and Cons

So, what do you think so far?  Is it feasible?

The biggest drawback I can think of, is having to deal with multiple fields for the date.  You’d have to do lots of stringing and unstringing to get a fully-qualified date field.

Second drawback would be the difficulty in making the graphics intuitive enough that the user knows they can pull down the tumbler ‘cog’ to change the date.

The biggest benefit, is allowing the user two options for entering dates.  Either manually by typing in each field and tabbing to the next, or using the tumblers.

The second benefit is no fly-outs for full calendar date pickers.  I hate these with a passion, but I end up having to use them anyway, because it’s easier than guessing the full date format for a single date textfield.


Thanks to Lovemore for the idea-inspiring framework of his blog entry.

Internationally, User Experience is a hot topic in terms of web development. Sleepy South Africa is only just awakening to the UX day.  (Maybe that’s just my perspective, since I started learning about User Experience Design within the last 3 years after picking up a copy of Don’t Make Me Think.  I’m more aware of it now.)

My perspective is also that SA is ripe for UX pickings.  Only a few South Africans have the capability and experience to promote UX services in our Software Development Industry.  I wonder why that is?

It could be a facet of ignorance – Not many companies know about the benefits of User Experience Design.
It could also be about arrogance –  Many companies think that Usability doesn’t need to be tested.  That their design work is perfect.
It could also be about perceived costs – It’s seen as an unnecessary cost on an already expensive software project.

User testing is a humbling process and needn’t be expensive.  The initial cost is an investment. The outcomes of a User Test promote better software, acceptable software.  All that’s left is our ignorance.


How can I educate myself in UX matters?

University-related Training opportunities in Usability and HCI are quite limited locally.  UNISAs B.Sc curriculum in Information Technology only offers 2 modules over the course of 3 years.  UCT are doing HCI research in their Faculty of Science, but I don’t see any mention of courses tailored to User Experience.

Human Factors International (with a branch in Pretoria) offer a set of very short certificate courses, they’re niche but decidedly expensive.

If your time and budget are restrictive, you could always resort to reading the relevant books. I recommend:


Is there a local community?

It took a Bright Boy from Johannesburg to start the SA UX Forum which is open to anyone with an interest in UX.  Since its inception in April 2007 its member base has expanded to 95 souls.

More recently, we’ve had GeekDinner-style Meet-ups to create awareness and network.  (The next Cape Town meetup is scheduled for the 20th of August, why not pop by?)  The meet-ups have proved a great opportunity for learning and meeting those with similar experiences.


Who can guide us?

Well, Phil Barrett is one. Director of Flow Interactive and general User Experience Guru who emigrated to South Africa last year or so.  Phil has been the proverbial awareness gypsy, presenting numerous talks at StarCamp, 27 Dinners and Heavy Chef cookups.  Now Phil is central to the Cape Town happenings of the SA UX forum.

He’s the sorta guy that would gladly visit your office and give a presentation on User Experience Design and explain why it’s so important for any software development project.


Where to now?

Beyond the likes of Phil and Jason Hobbs in Johannesburg, it’s up to us.

Talk about it, ask questions.  Mingle with the right folks. Promote UXD within your company.