12 ms·
New UI Pattern: Website Loading Bars
- JacksonGariety 13y agoIt seems to me that HTML5 needs an endpoint to handle AJAX and COMET-style loading. Fewer and fewer web pages actually use reloads all the time, content is just retrieved and switched out with JavaScript. Loading bars are necessary, and they certainly aren't new. The browsers just need to be updated.
- markbao 13y agoSince we're seeing a lot more of these kind of single-page apps, it might be wise for the browser vendors to implement a JS API to trigger the loading indicator on-demand, so it would show the loading UI that users are already familiar with. Has there been any movement on this? For browsers that also show a loading progress bar (like Safari), it could also allow the page to set a precent loaded value. XMLHttpRequest2 supports progress monitoring.
- minor_nitwit 13y agoThat's a great idea.
- pornel 13y agoCOMET is in HTML5 already: http://www.w3.org/TR/eventsource/ http://www.w3.org/TR/eventsource/
- ronaldx 13y agoAn earlier version of Safari mobile showed a loading wheel whenever it was loading AJAX/COMET. I found it infuriatingly annoying: it displayed at inappropriate times, when something was happening in the background but the user was not waiting. Unfortunately this is not something that can be handled well by the browser.
- manojlds 13y agoIt is very nicely done at the ST Package Control website - https://sublime.wbond.net/ https://sublime.wbond.net/
- mholt 13y agoI noticed that yesterday. Cool effect, and seems simple enough: just using CSS transitions to change the width across a certain interval.
- mholt 13y agoExcellent. I was actually looking for an article about Medium- and YouTube-style loading bars this morning. YouTube seems to actually track loading progress with their bar. Medium's uses CSS animations to create a sort of "ticker" effect that doesn't actually convey progress, but rather activity. Still, this is pretty cool.
- UnfalseDesign 13y ago"Does a web page really need a loading bar, especially that the browser already has a loading indicator of its own" Neither Chrome nor Firefox (at least on Windows or Linux) have an implemented loading bar for showing a web site's progress. I cannot speak to Internet Explorer 8 or greater because I tend to avoid them at all costs (and my company's system only has 7).
- hadem 13y agoWhen a page is loading under Chrome on Linux, a spinner is show in the tab where the favicon is normally displayed. It isn't a "progress bar" but it is an indication that the page has not fully loaded yet.
- UnfalseDesign 13y agoChrome does that spinner on Windows, too, as does Firefox. I'm glad for it but I like the progress bar idea, personally. It gives me a sense of progress. It is kind of like being on hold. It is the difference between "Please hold" and "You are number 4 in line. Please hold." Sidenote: The Amazon App Store app on Android does something similar. I've seen other apps do this as well but I can't think of them at the moment. Is this a design pattern we will see more of like the Ajax spinners of the Web 2.0 craze?
- plorkyeran 13y agoThis seems like the very definition of solving the wrong problem, especially for something like Medium.
- jfb 13y agoIt's like there's a Law of Conservation of Bloat: browsers are hugely fast; computers are hugely fast; even broadband is getting to the point of usability (in North America) -- how can software tumors metastasize? Where is there an opportunity to slow things down and make them shittier? It sort of puts paid to the idea of progress.
- nawitus 13y ago>Wirth's law is a computing adage made popular by Niklaus Wirth in 1995.[1][2] It states that "software is getting slower more rapidly than hardware becomes faster." - Wikipedia There's also a related "law": “What Andy giveth, Bill taketh away.”
- scott_karana 13y agoBill clearly seems to be Bill Gates, but who is Andy? I would have expected "Gordon Moore", or... :-)
- jaredsohn 13y agoAndy Grove was CEO of Intel
- burke 13y ago> "software is getting slower more rapidly than hardware becomes faster." I used to think this was true. For me, the perceived inflection point where perceived speed of software started improving was somewhere around 2008. This may be because I switched to a mac in 2006 and the releases around that era had a big performance focus.
- UnfalseDesign 13y ago
- JeremyMorgan 13y agoI like it. Progress bars aren't immediately obvious, especially in a browser like Chrome. I have watched people when doing our usability tests and they click several times or try to reload on certain slower pages because they can't tell anything has happened.
- sdfjkl 13y agoIf your browser has a non-obvious loading indicator, I'd say that's a problem with the browser UI and should be solved there, not on websites.
- rhizome 13y agoIt has appeared to me that there are pageloading techniques that interfere with browser spinners. Many times a page is loading and there is a plain arrow where on other sites it shows a spinner.
- JeremyMorgan 13y agoabsolutely, but we don't have a lot of control over that.
- zipppy 13y agoHowever, websites can't control what browsers their users use, nor can they control how those browsers give feedback regarding load times. They can control their own code. Not saying that websites should implement this, but companies aren't going to want to point to browsers being the problem. Every company wants to (try to) control their users' experiences, for better or worse.
- cliveowen 13y agoCoincidentally I noticed this pattern just yesterday here: http://paulstamatiou.com/android-is-better http://paulstamatiou.com/android-is-better and I really like it. The scroll bar isn't enough to tell how much reading is left.
- mholt 13y agoThat's brilliant! I always find myself looking at the scroll bar to see how far I've gone, but this is much more convenient.
- afandian 13y agoAre you serious?
- akanster 13y agoI think that's more of a reading progress bar than a website loading bar. Still pretty slick though.
- kamjam 13y agoThe scroll bar isn't enough to tell how much reading is left. I hope you're missing a </sarc> tag there...
- theandym 13y agoScrollbars are virtually non-existent on Macs these days. Plus this works well on touch-based devices too. Overall, I like the concept and find it useful as well. Edit: I'm referring to the reading progress bar concept, not to the loading status referenced in the original post.
- kamjam 13y agoFair enough, and good point on the touch-based devices, I can see how it would be useful for those. I don't use a Mac, so can't comment but same applies.
- 13y ago
- pubby 13y agoSeeing this on Youtube made me realize how slow the page loading really was. Medium's is even worse: my mind processes the bar as taking a good 5 seconds, primarily because there seems to be 3 phases of the bar moving. I don't like it at all.
- bdegman 13y agoThe New Republic uses something like this in a cool way. As you scroll down the article, a progress bar on top shows how far you are through the article. Try it: http://www.newrepublic.com/article/114362/odds-clinton-dies-2016 http://www.newrepublic.com/article/114362/odds-clinton-dies-...
- zalew 13y agobecause the browser scrollbar doesn't work well enough?
- jonahx 13y agowhile i mostly agree, it does make it clearer that it's your progress across an entire article: with just the scrollbar you never know if you'll be facing "page 2, 3" links at the bottom.
- bluthru 13y agoIf the article was on one page this wouldn't be an issue.
- tjoff 13y agoIt's still an issue... I often wonder how far an article really goes. A lot of the times there are tons of content below the article, or perhaps just a long commenting thread twice as long as the article itself (or, as stated, a multiple page article (which you don't know about in advance)). I often scroll down for the sole purpose of finding out how long the article is. I really like the information the New Republic conveys (but I dislike having a bar on top like that).
- kamjam 13y agoWhat is it with these sites that break down articles into several pages? NYTimes is a particular culprit that annoys me. Does anyone find an article easier to read in this format? I presume it is to force more Ad views on people?
- nagisa 13y agoThat's a built-in feature(?) of GNOME Epiphany (as visible in http://www.youtube.com/watch?v=cFoEYkztAfY http://www.youtube.com/watch?v=cFoEYkztAfY for example).
- baby 13y agoI don't see the ones on Medium or Youtube. I'm using Firefox on Win7.
- sp0rk 13y agoThey don't appear on the initial load, only when you switch between pages on the site.
- bborud 13y agoThis belong in a reddit post with the title "if you think your website needs this: fuck you and the horse you rode in on". I've seen blog sites whee an idiotic spinner comes up for a few seconds while something or other is "loading". Something or other that is ultimately going to show me some text.
- spupy 13y agoI wish people would leave page loading to the browser, instead of using half-assed JS that breaks every so often.
- alphakappa 13y ago> I've seen blog sites whee an idiotic spinner comes up for a few seconds while something or other is "loading". Something or other that is ultimately going to show me some text. You must be talking about every single blogspot.com site.
- prehkugler 13y agoThis is going to get pretty darn confusing for people running iOS7 Safari. http://imgur.com/Mv8lu1J http://imgur.com/Mv8lu1J
- blauwbilgorgel 13y agoI tried to recreate this effect in raw JavaScript. http://fiddle.jshell.net/zuBDW/2/show/ http://fiddle.jshell.net/zuBDW/2/show/ It doesn't load new content with ajax, nor does it pre-fetch. It just shows a website loading bar. I think this UI element is very nice. Especially for heavier pages, showing a website loading bar might combat users leaving, as something is happening. For Ajax-loading I think it is a nice alternative for a center-center spinner.
- lelandbatey 13y agoThe importance of something happening is actually quite important for many users (I've found). An absurd example of this can be found in one of my one-off projects: http://gifmachine.xwl.me http://gifmachine.xwl.me The first version of this didn't have any kind of gloss, just 2 text inputs and a "go" button. I showed it to some people I know and their immediate recommendation was to have some feedback to see how long things where taking. However, I didn't have any kind of a way to actually tell the user how things where going, so I took the next best approach: I fake it. If you look at the source code, you'll see that when you press the "make a gif" button it starts loading the loading bar. That loading bar is totally useless, as it is entirely client side and shows no progress at all. But people love it! Everyone I showed it to said it was a big improvement, making it nicer to use. Even though it's a fake loading bar.
- asperous 13y agoIt is an improvement: 1. It lets you know that you clicked the go button correctly and that the computer isn't waiting for more input (perhaps you could disable the inputs as well). 2. It gives a user a reasonable expectation of how long the process should take i.e. it's not instant and they have to wait a bit.
- dbaupp 13y ago(Clicking on "Make a gif" without putting in any input at all takes me to a non-existent gif: http://i.xwl.me/9539b2.gif http://i.xwl.me/9539b2.gif)
- ilyanep 13y ago
- benologist 13y agoI've seen this on YouTube, I actually like it but it should be in the browser not the page.
- namenotrequired 13y agoI'm surprised outlook.com hasn't been mentioned yet, which does a similar thing, but with flying dots.
- PStamatiou 13y agoI use this on my site.. but for a different reason. Showing scroll location on very long articles. Like this one http://paulstamatiou.com/android-is-better http://paulstamatiou.com/android-is-better I was actually going to also have it display a toast-like "7 minutes [of reading] left" on the top left when you scroll a good amount.
- warfangle 13y agoHey, just a heads up -- it looks like your SSL certificate is mismatched to your domain, and chrome throws up red flags over it.
- PStamatiou 13y agooops, that's because I don't use ssl and typed it in incorrectly :) I should redirect it though
- afandian 13y agoWhy? There's a scroll bar in the OS that does exactly the same thing. At the same time. But accurately.
- PStamatiou 13y agowhich automatically hides
- afandian 13y agoIf you want to see it you can quickly get it (at least with the latest Mac OS, I don't know about Windows). Having a thing across the top is perpendicular and doesn't relate to the vertical structure of a scrolling page. You have change the vertical position of your eyes to see it in a context where vertical position is significant.
- alphakappa 13y agoUsing a horizontal bar to denote vertical position is a tad unintuitive. I feel like this doesn't really solve the problem you are talking about, and instead adds to the confusion of readers who notice the bar. Edit: Keep in mind that as I'm reading the story, my eyes are nowhere near the top of the browser. If you want to give me context, the top of the page is not the best place to provide it. It does make for a cool demo though.
- wbond 13y agoI implemented this on the Package Control (https://sublime.wbond.net https://sublime.wbond.net) site over the past few months while developing it. To get a smooth transition from page to page I use Backbone.js with pushState and Handlebars to do client-side rendering of various pages. This allows for nice subtle touches like the logo fading out when navigating to a package detail screen and the search bar animating position when switching from the homepage to the search page. The thing that was missing was any sort of indicator that the page was loading. A progress spinner at least indicates some sort of activity, but can be relatively useless is knowing when something will complete. To provide a better progress indicator, I used a combination of the XHR readyState value, plus the number of total bytes downloaded when in readyState 3 to set the width of a bar. I then used a CSS transition property on the width property to have the bar smoothly grow from one width to another. Originally I had tried using JS to animate the width, but CSS transitions seem to do a much better job of creating a nice smooth animation. The downside is that IE8 and 9 aren't supported, but I just do full page refreshes with them anyway since they do not support pushState.
- catilac 13y agoMy old company SquidCube had this over a year ago.
- Bjoern 13y agoHere is a nice implementation example. http://www.ynh.io/2013/05/24/rebuild-youtubes-progress-bar.html http://www.ynh.io/2013/05/24/rebuild-youtubes-progress-bar.h... Previously on HN https://news.ycombinator.com/item?id=5761898 https://news.ycombinator.com/item?id=5761898
- mistercow 13y agoGiven how much of the web is dynamically loaded now, it seems like there really out to be a built-in API for displaying load progress to the user.
- testbro 13y agoIsn't the point of dynamically loading content to reduce the perceived waiting time though? I wonder if focus on cleanly showing the user the page is rendering might be better placed on getting content to load faster instead.
- mistercow 13y agoAt the UI level, perceived time is usually more important than real time. Half a second with nothing happening feels long. A whole second with feedback in some form (a loading bar, a spinner, etc.) feels fast. For longer wait times, this becomes critical. 5 seconds with no feedback feels incredibly, ridiculously long. 5 seconds with feedback feels like completely reasonable. I sometimes use almost entirely fake progress bars which asymptotically approach full when I have no way to measure how long something will take. It's bizarre, but even knowing that the progress bar is fake, watching it fill up makes the time seem shorter than staring at a spinner. Actually improving loading time is important, of course, but the ROI is tiny compared to basic user feedback.
- geuis 13y agoJust to mention where this comes from: iOS 7. I don't like it on the phone, and it's a bad experience on the web. I'm a firm believer in subtlety in user interfaces, but this is so subtle that it's nearly invisible.
- jeremiep 13y agoThis is also in Chrome for mobile. I wouldn't call it a bad experience nor subtle however - at least not on mobile devices; I noticed the progress bar the first time I used the app and it never gets in the way.
- simcop2387 13y agoNot necessarily IOS 7 [though maybe it popularized it]. There's a number of android apps (firefox, reddit is fun) that do the same thing and I don't like it there either. I'd prefer some kind of larger more noticeable way for me to see that it's loading, and that it's actually doing something. Sometimes if loading is slow it's easy to not notice these 1 pixel bars changing.
- Axsuul 13y agoThere's another loading bar example on http://www.jellibug.com http://www.jellibug.com
- adrianmacneil 13y agoFacebook seems to have a much better solution to the AJAX-loading progress problem. It looks like they use an iframe as transport, which causes the native browser spinner to appear. Much better than a custom design. Of course, it would be even better if websites could programmatically enable/disable the browser progress spinner, in much the same way we are now trusted to mess with the history API.
- sgustard 13y agoThe problem with loading bars is that they lie. They promise a linear view of a 0-100% process that does not proceed linearly. Instead, they sputter and freeze, and most frustratingly often seem to get stuck at around 95%. Believe me, telling your user that the page is 95% loaded and then freezing for several more seconds is much more infuriating than a simple spinner. This behavior goes way back to software like Real Player (buffering...), Windows Installer (which would actually hit 100% and then reset to zero for another round), and is seen today on YouTube, Netflix, and the browser's own feedback bar. Can you predict the next few seconds of network bandwidth? Do you know the relative times of content downloading versus parsing json and browser rendering for various clients? All these play into the feedback you're promising, and you don't really know.
- ams6110 13y agoSlowly but surely HTML5 and JavaScript are turning into Flash.
- hatu 13y agoBlog post from 2014: How to create beautiful HTML5 intros to your web page.
- etler 13y agoI think it's more important to try and emulate the native browser loading behavior first. I threw together an example with an iframe and a resource that never completes: http://loadlet.herokuapp.com/ http://loadlet.herokuapp.com/ Extra loading indicators may be nice, but I think that a native feel should come first.
- anigbrowl 13y agoSaw this on Youtube last week. It's good, I guess, in that it's easy to understand straight away. At the same time, I find it kind of useless eye candy, and I can't interact with it. Usually when I experience a slow load I find a ridiculously high number next the Ghostery icon.
- shameless_1 13y ago1st Ave Machine used to have that feature, their site was (and is) rather heavy. They changed the website look and feel, had to look up the release date of the video for which I first saw this UI pattern (Sixes last by Alias): 2005 Edit: site now: http://1stavemachine.com/ http://1stavemachine.com/
- deanclatworthy 13y agoA colleague of mine did this for a large project we worked on which needed to load a lot of video assets: http://download.kone.com/ultrarope/index.htm http://download.kone.com/ultrarope/index.htm
- telepoiss 13y agoI can't recall right away what website had it but if I read a really long article on my mobile phone, it showed a similar bar on the top but that was showing me progress on how far I had read. As iOS hides the scroll-bar once I stop to read, I found it a nice touch.
- cleblanc 13y agoMy team just released our version with turbolinks/ajax support. https://news.ycombinator.com/item?id=6245244 https://news.ycombinator.com/item?id=6245244 http://jqueryajaxloadingbar.herokuapp.com http://jqueryajaxloadingbar.herokuapp.com
- wosc 13y agoHere's a general-purpose JS implementation of a progress bar that achieves a similar visual effect: http://ricostacruz.com/nprogress/ http://ricostacruz.com/nprogress/