The 4th Dimension of Information in User Interface; Time ⏳

What do users want? All Informations! When do they want it? Maybe not now.

Despite the jams on the toll road (for god’s sake), my biweekly driving experience from Jakarta–Bandung, then Bandung–Jakarta was quite pleasant.

🚗 🚕 🚙 <insert a**hole drivers here> 🚑 🚐 🚚 🚛 🚓 🚙

Why tho? You might ask. It’s simple. Along the way, it’s very easy to find the information that I need to aid me drive safely to my destination.


At the toll gate, 🔴 red light shine brightly. It means I have to stop for a while. When the signal turns green, I’m good to go. The visual cue effectively let me know what to do at the moment.


I usually drove early in the morning or late in the night. Often times, I need to boost my sanity with a cup of coffee ☕️.

Where to look for coffee? A big Starbucks logo on the road side. It’s in a way, a marketing medium. An ads that is contextually helpful, indicating that I can get the coffee in the rest-area.


Readable at high speed

Rest-area on KM 19 was crowded as always. I can choose to skip it and aim for next rest-area for coffee. Hey, I have options. Wow, really? This is amazing.

Where am I now? I know exactly where to find the information. It’s always there popping out every KM with big numbers on it. Pretty easy to look for and predictable where and when the next information will appear.


Concise copy, not distractingly trying hard to be friendly

⚠️ Heads up! There’s a hazard ahead. Flashy banner easily caught my eyes without distracting me from the most life-threatening activity: driving. It was written in a simple sentence so I can have all information I needed at a glance.


Icons increasing comprehension, not replacing information

↖️ Turn right, exit left, stay on the lane, the labels paired with intuitive icons (not visually sophisticated at all, but it helps me getting around). It’s not there to beautify, but to exponantially increase my comprehension. Fundamentally it is well designed.


After a long drive, when I need to exit at specific toll gate, it anticipates me with multiple layer of information. When I was on the right-most lane of the road, the sign on the right speak to me:

Move to left-most lane if you want to exit at Buahbatu toll-gate.

Then

Exit at Buahbatu toll-gate in 1 km.

Exit at Buahbatu toll-gate in 500 m.

Finally

Exit at Buahbatu toll-gate now.

They make sure I won’t miss this. And I always know where to find this information; On the left side of the road, contextually near with side where I have to take the exit.

So many information, so little space (and cognitive load) 😵

Imagine if all of those informations are popping-up at once in front of my car as soon as I am entering the toll gate.

I might be:

  1. Skip it all. Because curse it, I’m still trying to find my e-money to pass the toll gate at the moment.
  2. Wandering aimlessly later because I forgot already where should I take the exit (information already given to me at the beginning and I have to remember it.)
  3. Died because the critical informations are already given to me side-by-side with Starbucks ads. I don’t need two flashy banner at once, then dismiss it.

When designing how information would appear in user interface, we commonly consider three dimensions: the layout (two dimensions for x and y coordinate) and the hierarchy (dimension of importance).

We often forget the fourth dimension: when will this information needed.

First and second dimension is x and y (layout), third dimension is hierarchy, and the fourth dimension is time.

As the time progressing (driving for example), the task will be varied from very dangerous uphill to boringly fast straight lane.

The needs of information will be varied too. When the time shift, the priority of information that has to be shown might change. It makes sense to make the other dimensions (hierarchy and layout) dynamic as well.

“Progressive disclosure”, if you want to sound cool

Simplifying information display is hard. It needs courage and confidence to say “no, this is not important for now” and shove it to the drawer or hidden containers.

Confidence come from doing your homework to get to understand what will be needed by the users and when.

In user-centric design, half done homework never fail to makes us hesitated: “but some user might need this, it hurts the discoverability”. Ends up we put everything up front, organised neatly but looks overwhelming for most of the users.

Maybe we don’t know the users that well it makes us hesitated? Maybe we tried our best to anticipate most of the corner-cases? Our intention is not wrong. But maybe there is a better way to organize information on interface?

To help wrapping my head around things, I usually tried to organize information this way:

1) ‼️ Critical

the users can’t miss this, otherwise it might harm them physically or financially.

There is only one critical information at a time. Time matters. Top priority. Reversion is almost impossible, or very difficult.

To inform this, use multiple layer of information or break the flow intentionally (and wisely). Time: right now.

Example; Waze prompt a pop-up that said it’s dangerous to use waze while driving (confirm if passenger).

2) ❗Important

It has to be there and standout from the rest of the content/components. If there are more than three important information within one display at once I might fail to define the priority, or I haven’t consider the time dimension when it is contextually needed.

If the user miss this information, the process to fix it might be long and painful. Time sometimes matter. High priority.

To show this information, don’t break user flow and give user options whenever possible. Time: as soon as possible.

Example; error notification where we input wrong password. It craves for attention but not in annoying way (contextual).

3) ❓Descriptive

It has to be easy to find this because most of the users will look for it. Preferably on predictable places or contextually near associated items.

It’s ok to shove it somewhere if the space doesn’t permit, but make it super easy to discover this. Time: on demand.

Example; The KM marks in the middle of toll road on my story above.

4) ❤️ Nice to have

It’s good to have this information. The users will appreciate if we provide this. It’s ok to shove it somewhere and have some process to retrieve it as long it’s on an easy steps.

Some of the users will need it, but when? Time: find out when the information will be needed.

Example; customer service contact information (depend on the context).

5) ⭕️ Additional

It’s ok to shove it somewhere if the space doesn’t permit. some users will try to find it. Don’t worry if it’s hard to retrieve (jargon: low discoverability).

Consider average users that will be overwhelmed by this information if we show this right now. Time: find out when and how the information will be needed, and custom the visual hierarchy around this specific needs.

Example; bibliography.


Ask the users they might answer “I need to know all”, observe the users they will tell “Maybe I don’t need to know all right now.