Time-axis Orientation (Part 3)

Regarding my previous posts about time-axisTadashi Kobayashi has pointed out that the design of temporal orientation, i.e. time-axis, is in fact specified in an ISO standard. The standard orientation should be left-to-right to indicate time progress.

ISO 1503:2008
Spatial orientation and direction of movement — Ergonomic requirements

Abstract

ISO 1503:2008 sets out design principles, procedures, requirements and recommendations for the spatial orientation and direction of movement of controls and displays used in tool machines, industrial robots, office machines, earth‑moving machinery, transportation (automobiles, railway electric cars/rolling stock, aircraft, ships, etc.), information, daily commodities, public utilities and the operational components of building facilities.

It lays down basic requirements for determining the operating direction of controls and the moving directions or changing states of the target object, as well as other relations.

Thanks to Mr. Kobayashi for the information. Unfortunately, since I do not have access to this ISO paper, there is no way I could verify and find out further information about the standard of spatial orientation. Hopefully the Flickr crew, as well as other UI developers will find this information useful.

Post to Twitter Post to Facebook

Time-axis Orientation (Part 2)

More observations on time-axis orientation in different desktop and web applications:

  • [1][2] Browser has a long tradition of associating left to back and right to next. Since the first graphical UI browser Mosaic, this convention has been one of the golden standards of all browser implementations.
  • [3] financial charts, business reports, scientific research results and many time-based charts use left-to-right to show time progress. The latest data is always appended to the right.
  • [4][5] Music player, video player, media player…etc also associate right-pointing triangle to play, as well as doubling the triangle to indicate fast-forward.
  • [6] Time Machine in Macintosh OS X. This one is a little interesting as they use a 3D model or Z-axis to show the dimension of time. I think this design is just to take advantage of the powerful 3D rendering engine in OSX rather than necessity.

This post is related to my original observation to Flickr’s new UI change, which flipped the Older/Newer orientation of the thumbnail row from their previous design. See the post Flickr New Interface, Time-axis Orientation.

Post to Twitter Post to Facebook

Flickr New Interface, Time-axis Orientation

Flickr has recently updated the interface of the photo browsing page, try to make navigation easier by reorganizing control elements and adding keyboard shortcuts. First please take a look at the new and old interface:

The new Flickr interface on beta has a few new features:

  • Reorganized control elements – actions like Starring (marking a photo as favorite), Blog This has been regrouped into drop-down buttons Actions and Share This.
  • Use of Lightbox a.k.a. Fullscreen – when activated, the whole page will dim down and the picture will be shown in bigger size.
  • More visible geo-tagging – a map is displayed above the fold to show the pictures geo-location.
  • Keyboard shortcuts – left/right arrow keys for next and previous picture, the “F” to toggle fullscreen, and the “<” and “>” keys to scroll the thumbnail roll on right sidebar.
  • Thumbnail bar – new thumbnails are smaller to show 5 thumbnails in a roll instead of two.
  • Time/horizontal orientation – opposite to the old version, the new interface unify the meaning of left and right. Left means newer, right means older.

In my opinion, the time/horizontal orientation is the biggest change among all other changes. Flickr has been using “right means new” since the beginning, so changing this orientation is a huge disruption of a long-adopted habit by all Flickr users. The UI design team must be well aware of this issue, as well as having research data to prove that the orientation switch is going to bring positive effect to the overall user experience.

Just a minor confusion in vocabulary: the page uses Newer/Older as the unified terms, but in the keyboard shortcut hint at the bottom of page, it says Previous/Next instead. From user’s point of view, I prefer Newer/Older over Previous/Next, since the former couple makes it very clear what is, indeed, older or newer over the time axis.

The keyboard shortcuy hint says "Previous/Next" instead of "Newer/Older" like the rest of the page

I compare this will the time axis orientation of some other sites:

For pagination, left is newer, right is older. Then inside the page, the newer messages are on the top.

Top is newer, bottom is older. There's no horizontal navigation

Post to Twitter Post to Facebook

About Calvin

Hello there, I’m Calvin Chun-yu Chan. Grew up in Hong Kong, studied and worked in Canada as web engineer+designer, now designing mobile apps in Tokyo. On my blog I would like to share my opinions on design, usability, culture and creativity.

Follow me on:
Twitter @calvincchan