Why do Progress Bars Move Left to Right?

25 May

Recently a email floated through one of the Localization discussion groups regarding Progress Bars and other components and their behavior in an LTR / RTL design change.  The question being that since we know in cultures where the linguistic elements flip – should we flip the controls?  Should a progress bar, in a non-LTR culture – move ‘backwards’?

After all – in some cultures "Back" does not mean regression and "Forward" does not mean progression- – and to make matters worse… why does a "Forward" arrow on a browser point to the right?  There is a grouping of thought that this is a cultural aspect.  It’s not – at least not exactly.  It’s an engineering or technological cultural terminology question really.

If you have ever worked in basic mechanical design you may have heard "… things like computer buttons, etc., are semiologically speaking null culturally."  Are they? It’s very easy to argue that in our current world – technology itself has become a culture.  It has it’s own grammar and syntax and even it’s own semiological constructs and internal linguistic references.  So in a sense … the culture that you apply to buttons, progress bars and the like – is a tech culture, regardless of the culture (language) orientation.  This stems from engineering principals that have special rules and requirements that apply to these items.

 That’s a long and fuzzy answer when it comes to progress bars, etc.,  here’s the real reason for why a "Forward" button points to the right.  The "dirty little secret" of UI engineering.  It’s based on what old time engineers call "chronometer logic".  Forward, Ascending, etc., are generally speaking aspects of a chronometer, a clock, so they operate in a clockwise direction.


As with most engineering terminology – there’s a valid reason for "forward" being clockwise, which also usually has a cultural anecdote.  Clocks, were first built in the Northern Hemisphere, and based their design on a Sundial which faced Southward.  This design caught on.  Because of this a clock follows the direction of a northern sundial – it’s predecessor.  Noon, being at the center – of a sundial – with everything to the left being the beginning or the start of the day.   

Everything to the right – leading to the end of the day, or the end.  Having a beginning a middle and an end – we have a direction of movement.  Left to Right.  If I face my sundial and extend my hand to the right – that’s the part of the day that lies ahead.  If I point to the left – that’s where I’ve been temporally speaking.  Were we to use a Cartesian coordinate system as we do now, perhaps all our browser forward buttons would resemble an arrow accelerating up and away from us.  But – at this time, the words "Cartesian coordinate" were something of a mystery for a few more centuries.

About this time – we humans got into the whole "writing" thing culturally.  Okay let’s be honest, we started drawing pictures to represent things, writing was a LONG way off for about 90% of the population.  You wanted to tell someone something – you drew them a picture.  So we had the basic idea – and if you draw a clockwise motion 2 Dimensionally … it moves around the globe or object left to right.  Over and over this repetition of perceived environmental nature being mimicked lead to "Forward = Go To The Right" on horizontal designs from an early engineering perspective.  

So, from clocks, and other motions forward became Left-to-Right.  Centuries of chronometer logic beating this principal into our heads causes us as designers and inventors – to repeat this perception as it’s comfortable and perceived to be "natural".  The ‘culture’ of technology has given us this rule to follow, and we’ve followed it with our linguistic and symbolic representations.  When we want to show something progressing (like a progress bar) we start on the left and move forward – to the right.

Cultural Trivia bit:  Are there any clocks out there that do NOT move clockwise – aka – right to left?

Yes. There are.  There are a few famous clocks in the Synagogues of Europe which due to their ancestry and of respect for the language preferences of the Hebrew language – do in fact, move counter-clockwise.  These are the best known clocks which provide a culturally localized design to their behavior.  However – culturally speaking… is this really the correct behavior to assign to things we invent? 

If, we are discussing cultural semiological texts – "words" if you will – then yes, we would need to respect the cultural restraints of the language.  If we, on the other hand, are talking about buttons, objects, and other invented materials the answer is no.  So – the text on a button … yes, we flip the text. The button itself?  No.   Progress Bars.. no.  The only reason for flipping these is for ergonomic or engineering reasons, i.e.., is it easier for the user if we do it this way?  Is this the behavior our user expects from this symbolic representation of an action? 

Icons… on the other hand… become a tricky an sticky wicket to play in.  You see an Icon – should never be considered just a "graphical representation".  It’s – from a semiotics perspective – a word.  And words and text… yeah – we flip those up, down, left, right .. however the culture expects them.  So – make sure you’re creating an object – or a button … and not an Icon, which is a graphical representation of a concept.  Remember that last part – because it’ll help you determine if something is an Icon or an Object.   An Icon represents a concept.  An Object, like a button or progress bar,  displays or represents an action.

Inventions vs Icons … you invent an object – create it, to perform an action, and this should have an appropriate symbolic representation.  This may be in the form of a glyph or graphic, or text.  In any case, most of the time, a symbolic representation of an invention has no predecessor symbolically to draw on.  So in order for people to catch on – we frequently have to find a similar or mimicked action from life (or the users experiential data)  to give people the idea of what it does.

An Icon, on the other hand is representative of a concept – which generally has a culturally accepted symbol for it already and has therefore a derivative, a root for the symbol based in the concept it represents.  So we may put an Icon on our desktop – which represents a concept or conceived process.  I click on this to open my MS Word – that’s an Icon.  I click on the Scissors to "Cut" out something.. I click on the magnifying glass to look and find things… those are "objects". 

But even here – there are exceptions.  In cultures where a word is introduced, and not a part of that culture – it may not have a translatable term.  For example, "Kodak", is an invented word. No… there never was a "Mr. Kodak" – in 1885 Kodak was probably the first ‘company’ and product truly named to work globally. – it’s a word that has no meaning in any language.  It’s ONLY meaning is "Kodak" as in Kodak corporation.image

It has no derivatives.   It has no root.  It’s an invention – and so therefore, is it’s own symbol regardless of the culture. From a semiotics view – It’s a word, and it’s a symbol – which is kinda cool.  It’s meaning is universally recognized.  You when you say it – in another language, it jumps out – when you see it written in another language – it’s written out as "Kodak", and you can identify it easily.   If someone wants to understand what you’re talking about – and you’re talking about a Kodak camera, then you use the word Kodak.  That’s what buttons and objects are – inventions, and why they follow their own rules.  

So … the short answer to why Progress Bars show movement from Left to Right is … buttons and objects that represent forward motion in almost all cases, and unless specifically requested by the culture you’re building for – should follow an expected and experienced behavior that is pre-established if possible, or display an obvious reference with which to grasp the assumed action.  "Forward" – "progression" moves "clockwise" – Left to Right, Back (regression) should be anti-clockwise, or RTL based on their invention – and be localized to the culture of technology/engineering within the localized culture they are being placed.  (As with words like "Kodak" – as there is no way to correctly localize them within the culture – so we display them as they are. Words that are placed on top of them – or within them – should be localized to the culture obviously, and may be resized to reflect those needs.)

In the early days of programming and localization – entire applications were literally flipped, just to allow for RTL conversions.  But these are not the early days.  We’re now able to drill down to very finite levels in our coding – and localize words that exist within objects.  So flipping over an entire web browser so that your buttons for File, Edit, View are localized and so on is generally not necessary. 

So – the progress bar you’re building should to start motion from the left and move to the right, displaying progress in this manner is what is expected by people.  A progress bar – has no cultural predecessor.   Users also have, through experiential data of their own – learned this behavior from other technology and it’s now if not expected, at least recognized easily.  It is reinforced by other technology – Clocks, in physics it is taught the Right-Hand-Rule, which is why nuts, bolts, and other objects have threads which work in a clock-wise motion.  

It is this repeated recognizable or assumed directional enforcement of a behavior that will assist the user in the understanding of the action that button or object performs.  All too often we assume that because the linguistic elements of a culture perform in a manner – the visual elements must also.  But since we’re using an "invention" – the user will accept our invented symbol directive, and will accept it more readily if it’s based on a behavior they know.  Rotating, flipping or changing an object or button unnecessarily does nothing to assist in the understanding of it’s function.

Repetitive and expected behavior/symbols that are drawn from verified (or perceived to be verified) common environmental experiences are what allow users to intuitively navigate an unknown interface.  If we, in our designs, understand this about our users – and we give our invented symbols this understanding of a users behavior – then we are catering to the User first and most often respecting their culture as well.

Leave a comment

Posted by on May 25, 2007 in Computers and Internet


Leave a Reply

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

You are commenting using your 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

%d bloggers like this: