>User Interfaces Are Complicated

>I’ve been doing some work on a food diary site of mine. One of the items I capture is the time food was eaten. I never thought capturing time in a user interface was so difficult until I started to work it.

My first step was to figure out what I needed to capture. I decided I didn’t need an exact time; rather, an approximate time would be good enough (within a 15 or 30 minute window). I looked for a jQuery plug-in to do this. I found some that used drop downs to capture hours, minutes and seconds. I found some that used spinners. I didn’t like any of those.

I found a couple that provide a type of drop-down (more like an auto-complete than a true drop-down) and I liked that approach. But none of them were quite what I was looking for so I spun my own. So far, it’s okay but I still need to do some tweaking on it.

I decided to make a mobile web version of the site. After doing some research, I decided to create the mobile version using jQuery mobile. It’s feature set is pretty cool and it seems rather stable even though it is only an alpha release.

Then I got to time entry. For my control, I display a scrollable Div below a textbox so that time can be typed in or selected. When my scrollable Div displays in phone browsers, it displays but it doesn’t scroll. Plus, given the assumptions I made about data entry, the approach really doesn’t work for phone/touch based browsers. For example, when you hit tab or click on the next field, the scrollable Div autohides. But, who clicks tab on a phone? And because of the window size, it’s hard to click on the next textbox. So the approach that works decently on a computer browser, really doesn’t fit the mobile browser.

For now, I pulled back on the mobile version of my site. While jQuery Mobile is really slick, there are a few too many things missing. Though I did decide that, when I’m ready, I’ll do the date and time with spinners like Android does it natively (separate text boxes for each entry item with the up and down arrows above and below the text box respectively.

It’s amazing how complicated a single user interface element can become. 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s