The fuss about loading bars
The past two weeks there has been a lot of fuss about Website Loading Bars as a new UI pattern. In this post I am discussing if it’s a good or a bad thing.
Going through your DesignerNews or HackerNews feed you might have noticed the new subtle loading bars. But let’s be honest: Progress bars are old. These bars first were shown in the 19th century on a graph.
After being used on computing interfaces the progress bar was being adopted into the browser. Having this in mind, the progress bar is not new to the web.
Mobile Interfaces
Android and iOS7 users might have noticed a progress bar in the browser — the one that everybody uses now (Yep, with outer glow).
Apple adopted these progress bar you find over the web on ajax-request-driven pages into the whole iOS7 system. You can see it in action in Safari for iOS7.
Thierry Rietsch wrote an article here on Medium, because he thinks, that the progress bar shouldn’t be part on a web page, because non-techie’s would be confused if they see something like that. But why are Android and iOS, the most used mobile operating systems in the world are implementing those bars on the web? Because it just works! Apple nor Google wouldn’t implement something that doesn’t work.
On the web
Before continuing, let me clarify, that the loading bars are just alive where ajax-requests can be made (On a web page, yet).
Sure, the old safari loading bar was also nice (As a reminder, see image on the left), but I think, because we are moving forward in web and ui design, we need to think flat.
Don’t think of me as a supporter of flat design nor skeuomorphistic design. (I think you must find the right style for a product yourself).
User distraction
Because these loading bars will actually just be shown when you really need them there are no real cons.
The user loses the context by being forced to pay attention to a different area of the page (…) For example, the text of the search button could change to ‘Loading…’ and a progress bar gets shown just below, i.e. in between the search field / button and the results area. — Thierry Rietsch
E.g. if a user is clicking on another YouTube video, he would expect the site to reload. Since it doesn’t reload, the user gets subtle visual feedback that is something is happening. Or let’s say you are clicking on a link on Safari on iOS7. If you are clicking on a link on a web page, you should be ready to leave the current page.
If you are thinking (like Thierry does) that it is a distraction for the user, be sure to check out Loadie.js and give it a try. It is possible to put it anywhere on your page. Just change the stylesheet.
Disclaimer: Thanks to Eray Basar for some proof-reading. Please be gentle that my english is not the best and Eray couldn’t offer to much time as he is busy at the time.
