Why is this any different than Flash preloaders just a moment ago? And even worse - it doesn't show any progress so there isn't any user feedback. Every (bad) pattern seems to repeat itself. Just using current-cool-tech.
I would much more appreciate that dev time would be put into a framework that allows graceful enchancement by deferring loading more heavy components and to allow user to interact with the site ASAP.
Having a skeleton project for gulp (or any other system) that shows how to properly split big, non essential, components and lazy load them would go much further to ease developing big applications and smoothen UX.
Like what Facebook's web app does? They load the page first leaving the comments and photos "spinning" (it's more of a gradient fluctuation, but indicated loading). This free's you up to interact with the rest of the site.
Using PleaseWait to actually show progress can be achieved by simply updating the loading HTML to show a number percentage, but we may update the API to make this easier in the future.
And I agree that a skeleton project to show proper modularization of different components would be great! Our blog just started an Angular series, so we'll try to write one on how we split up our large Angular enterprise app in this regard :)
But it's missing the point - just like other comments said - if you need this you're doing it wrong.
I sure was guilty of big sites just as much as the next guy. It just saddens me that insted of promoting what we've learned it the past years and applying to current projects we're doomed to repeat bad UX from before.
Maybe you're right, but I certainly think there are some valid cases where this could be useful. I'm not saying use it in every project, or use it as a workaround to a larger architectural issue, but if you have a single page app that does not render templates on the server, showing something like this while you make a few AJAX calls and compile the data returned into your client-side templates isn't the worse thing in the world. Slack and Asana do similar things, and I would hardly say that their engineering teams did a ton wrong. We actually built this because we're customers of both and enjoyed the screens they showed, so we wanted to see if we could make a generic library that others could use to do the same.
I for one think this is exactly the right attitude.
Sure. Maybe it's literally always a Bad Thing to show a loading screen. But plenty of apps have made that choice, for some reason or other. Maybe the developers are incompetent, or maybe they have a combination of technical and resource constraints that make this the best choice for them. It doesn't matter. At least this loading page can improve users' experiences with apps that have, for whatever reason, made the choice to go this route.
I agree with you on this. There's a large subset of the web development community who are shifting towards building desktop applications with web technology (atom-shell, node-webkit, brackets-shell, etc.). In a lot of these cases, the app bootstrap process is actually loading data/content that is required for proper app functionality. Desktop apps commonly use loading screens on boot to indicate this process (Photoshop is the example that comes to mind). I think this is a great tool, and will fit well with that subset of the web-dev community particularly well.
The point is: most of these applications (say, Photoshop, Gimp, Eclipse, OpenOffice, probably others) are things that you load once to work with them for a couple hours, and don't mind when they consume a lot of your system resources.
If you look at web applications, Google's music app ("My Music" in Google Play) uses a load screen (complete with progress bar) because it's seriously bloated, while Amazon's Cloudplayer just loads and does its thing (which is, playing music).
Needing a load screen is a sign that your app is not, or aims at not being, a Web app anymore - in the sense that you'd also want to loosen the other restrictions - give it its own window, possibly have local file storage or FS caching, etc.; In that case, something like TideSDK ( http://www.tidesdk.org/ ) may come in handy to deliver a desktop app to power users that is based on the same codebase. And, maybe you'd still want a web app that is functional and lean. (As an example for two apps with non-identical possibilities, Google's My Music allows you to change song metadata on desktop browsers but not in the Android app - yet another sign that My Music is meant as a desktop-y app).
In many cases it can be a sign of hubris or lazyness that you cannot get rid of the bloat. Be real and think whether your users actually enjoy waiting that time, since they'll be doing it more often, on machines with less resources and/or slower connection, than yours.
Asana's absurdly long load time was one of the main reasons I was glad to stop using it. It's definitely not something I would considered well implemented.
> by simply updating the loading HTML to show a number percentage
Note, this isn't always easy to do. If you use on-the-fly gzip compression (which is how most people set their nginx or whatever up), you won't get a Content-Length, so you can't show progress.
Ofc a blog describing your experience would be just that knowledge promoting that i have in mind so kudos for that (and i'll be keeping an eye for it because it is a hard problem to get right).
What are your thoughts then about putting only that region of the page behind some kind of loading/awaiting indication?
My issue with whole-page takeover loaders is that they lose your control and spatial sense of the app. You can't, for example, page away if you decide the report is taking too long to load, or you went to the wrong section of the site when hunting around for a piece of information.
It all depends on the implementation. What you're describing is pretty common, particularly on blogs comment systems and YouTube.
This can likely be extended to only be utilized on part of a widget. If it's something like an ajax call you can easily add an option to cancel the request e.g. underneath a spinner.
For your report example in particular the service could be developed in such a way that the processing occurs independently of the user session. You can mix this in with an additional request which returns the actual progress of what has been calculated in the report such that whenever a user browses to that page, they can see just how much time there is to go before their report is generated.
Ah, good old down votes rather than explaining why you think I'm wrong.
HTML 5 is an attempt to turn the web browser into a replacement for the Flash Player. Punch the Monkey Flash ads are replaced with Punch the Monkey HTML 5 ads.
Javascript framework after framework comes and implements the Flash way of doing things in the browser.
And the irony is that Flex is still the best way of producing RIAs years after Adobe killed it.
I used to be a Flash developer, now a Javascript developer. Everything that was raised as an issue with flash (except web's open nature) is now an issue with Javascript development today. Preloaders, skip intros, single page apps, browser back button issues, SEO incompatibility. all of it. loving this.
The point is not (merely) the technology behind it, it's the agencies' model of selling the customers "rich internet sites" whose main point is to show off to other people that you have pockets full of money.
A good intro can help to sell your site project to a customer (and help them selling it to their superiors), but no longtime user would protest if you took it away.
Single page apps are a way to fit in an interaction model that doesn't fit the idea of "one address, one page, one text" that was the idea behind the Web in the first place. So, yes, you give up some of the benefits of the Web (navigation with bookmarks, back button) or have to fight hard to get them back, while keeping others (mostly, platform independence and a built-in client-server architecture)
Is it just me, or does anybody else think that it's a problem that the world even needs this in the first place?
I expect splash screens and slightly longer load times from desktop apps... if I click on a link to something in my browser, not so much. TBH, if a page/app takes more than a second or two to load, I assume there's something wrong with it (or my net connection).
For SPAs, something like this can be quite useful for a few reasons: branding (see Slack's and Asana's cool examples), having in-app authentication on any page (see the login form example on the demo page), and yes, showing some sort of notification while a good bit of data loads in the background.
For the majority of sites, I agree this may be overkill, but if you have a SPA that needs to load a good bit of data on the user's first use of your app (and verify authentication), this can (hopefully) be useful.
You missed the point. If you "need to load a good bit of data on the user's first use" you've already failed. I've been coding professionally for about 20 years now and the only reason i've ever seen for loading a bit of data on the initial hit, is that the developer didn't spend the time to think about how to load the necessary pieces incrementally, as they were needed by the user. Instead they designed a system that needed a whole pile of crap on startup even if the user didn't.
I tend to disagree with the statement that you've already failed if you decide to eagerly load resources before they are used or needed. Take queue from Google or others who pre-fetch resources based on anticipated usage. In the world of SPAs and client-side heavy apps, combining resources into a single or logically grouped set of resources is common practice to cut down on the amount of overhead that many http(s) calls impose.
Also, the intended use of PleaseWait.js doesn't have to be used to stall while client side resources are brought down. This concept could easily be used for long running, server side processing.
I certainly agree. There are almost always ways to avoid "loading a good bit of data on the user's first use". But for your traditional SPA, it's quite common that you need to make a few AJAX calls to your backend API in order to fetch some data to show to the user. This was built for mostly that case, not for the "let's block the user's screen for 5+ seconds while we do unnecessary data fetches" case.
Edit: I misspoke when I said "a good bit of data" in my original response. I simply meant any API calls to your backend.
There's so many tools right now to find out exactly what your page or app is using and how to minimize what you're serving. Sure, it takes some effort, but your users will thank you in the end.
It's very common for certain features in enterprise apps to take 5-30seconds to load. Most enterprise report generation features require a few seconds for a lot of the queries, for example.
Shouldn't these then show loading indicators for the data areas, and not the entire page? (covering up menus etc., where the user might abort the process or change parameters)
Some (legacy?) web applications written in flash (using Flex SDK for example) still require some time to download, considering that the binary of 2mb takes at least a few seconds to download, showing a splash screen to a user instead of the blank page would be much better than having user to wonder if the page/app is going to load at all, like in [1].
Certainly, with web applications you would want the least amount of latency possible. This is a normal UX scenario -- as you indicated, there are factors which can simply be out of the hands of the application such as network connectivity.
In cases like that, indicating to the user that something is happening makes for a better experience than not doing anything, or in the worst case (which certainly shouldn't happen these days) blocking the user's browser.
Not realy. A user with a slow connection will know that and wait (because the problem will be global). Adding a preloader is just bloat that will make the site load even longer (and just piss off the user as he'll know that some of his scare bandwith was lost on the shiny spinning wheel).
Aside from the reality that a user won't always know their connection is slow / has slowed (particularly when it comes to bad routing between server and client), this is also typically used in cases where you are utilizing XHR.
Given that they're done in the background, the browser won't indicate them being made outside of dev tools. If they're asynchronous, again ideally they will take place as quickly as possible. This is unfortunately not something that can be relied upon.
Is it just me, or does anybody else think that it's a problem that the world even needs this in the first place?
I agree. If you need this, go back and look at what you're loading. Do you really need all that CSS? Does that Javascript really need to be executed? Do you need it just to get started? Do you really need 15 tracking cookies and a Flash bug?
No. It's not beautiful. Stop saying that! That word is so overused in software that it is no devoid of all meaning.
It's a loading screen. It's perhaps even a nice looking loading screen. Well, it's not ugly. It is missing a lot of functionality though. But it's less rage inducing than the spinning pin wheel so that's good I guess.
2015 would be a better year if we all agreed to stop using the word beautiful with respect to any and all things digital.
I can't find a citation for it right now, but I seem to remember reading that Steve Jobs would never say something was beautiful when giving a keynote. He would always say "we think it's really beautiful" or something similar.
My understanding is that he believed that no one could tell another person that something is beautiful. A person could only decide that for themselves.
So you don't think UI/UX design can be beautiful? I Agree that it takes alot for me to use the word "Beautiful" in the context of software aka Code. But design isn't code.
And although I do think this library is supporting the case of being lazy and not optimizing your code and load times. I do think its beautiful.
Agreed. Beauty is in the eye of the beholder of course, but the word (along with "passion") is almost always gratuitous when used in the context of software or software development.
Do we have "How to be passionate about beautiful UI in 7 days, for dummies" yet?
Calling everything beautiful diminishes the value of the word. And most apps posted to HN are described as beautiful. It's mostly just become filler text now. Worse, this judgment isn't coming from an impartial critic, but usually the author himself/herself. Maybe it's a cultural thing, but not telling others how to judge your product was drilled into me.
Also, being beautiful isn't an inherently valuable attribute. If your product is utterly useless, but good looking, then it's still utterly useless. Some form of user study about the utility of the aesthetic design would be a nice addition in these sorts of declarations.
I don't think the issue is with this project per se, but the trend in the presentation of these sorts of "show HN" posts.
I suspect the parent is disappointed by the lack of ambition, or maybe thinks that the PleaseWait authors are just trying to get eyeballs on their site.
The animations are pretty bog-standard, let's be honest. I'd stretch to calling them aesthetically pleasing, but there's no way I'd describe them as beautiful.
Wow, I never looked at that page before. It's creepy from the top:
you look lovely today, btw.
to the bottom:
you need help
Well, which is it? Do I look lovely, or do I need help? What possible business is it of yours, dear npm? And what about the person who just suffered a facial injury and is very aware of how unlovely they look at the moment?
At least Slack rotates through a few different sayings that tend to be goofy instead of creepy - and you can change them.
This stuff has been around for a long time, it's just cheekier now. Ever install a Windows app and the last setup page says, "Congratulations! You have successfully installed $APP." Congratulations? For what? You congratulate people for an achievement. Are you saying that it was an achievement on my part to successfully install your app? Was the more likely outcome that I would fail to install it? :-0
> Was the more likely outcome that I would fail to install it?
Hilarious.
Well, I think all these things are suspicious and maybe (I don't know) even bad in nature, but they have levels of badness, "you look lovely today, btw" is considerably worse than any form of birthday congratulations -- although I'm also suspicious of the second, which, here in Brazil, is a little more common thing to say than "happy birthday" (people just say "congratulations!").
Like the AMC theatres pre-show messages where it says something along the lines of "Thank you for being _absolutely amazing!_"
Makes me cringe SO HARD every time. Why are we telling people they're amazing for existing? Haven't we identified the issue with much of today's youth is that their egos were often overinflated by their parents, teachers, etc, leading to problems of entitlement and whatever else that entails?
I suspect it's because people feel better about themselves and have a happier outlook when they receive compliments. These warm fuzzies are associated with the product / setting, positively affecting people's opinion of the service.
I'm not sure why you're confused -- is it because things aren't the way that you think they should be? To me, the explanation above is pretty concise and fits the situation neatly.
I guess I wasn't seriously questioning the reasons why they would do it. It does make sense but isn't there some point where complimenting your customers to make them feel all warm could go "too far"? I'm pretty laid back with not very high expectations of customer service (not a pessimistic person, just easy to please) and it just comes off as rather excessive, at least with the way it's presented.
This probably comes off as looking the gift horse in the mouth but at some point it does come off as excessive, like when I get bum rushed to be helped the second I look at a product in a department store.
I've participated in internet communities where people say these things to each other, and while it seemed insincere to me, I didn't worry about it much. It wasn't until I saw little fights and disagreements erupt that I really solidified my distaste for it; these people were just as nasty as anyone else on the internet, they just happened to cover themselves with a paper-thin veneer of sweetness.
I think it's nauseating when websites have non-ironic conversational copy ("Hey there! How are you feeling today?" as a prompt to write a status update on Facebook).
But on the NPM site I think it's different, it's a joke. It says "you look lovely today, btw". That's clearly mockery/irony. The help section is headed "you need help", for example.
I'll be the odd one out and say that the presentation is actually gorgeous. It's really not a whole lot of extra resources that need to be pulled in to do it, either. You could do it in a few lines of HTML/CSS if you were so inclined.
That said, I will agree that the use case is very small (page opening) and for most these days even showing this for more than 2 or 3 seconds might lead to some wrong assumptions and showing it for only a split second would be odd/no good/etc.
Ah, funny, I came up with a similar name for a little script I published last week named PleaseRotate.js [1]. It displays a message to mobile users if they are viewing the site in the wrong orientation. I wouldn't recommend it for most sites, but it has its uses (I use it on tech demos that I build).
This is very beautiful, and it's great -- no, essential -- to think of your users!
But speaking of that, please THINK of your users and despise loading times. Hate them with a passion. As they say, kill them with fire!
Do NOT make them prettier, it only makes it easy to think it's OK. It is not OK! Your app can load faster. Way faster. It's easier than you think. And even if it's not, it's worth it.
When you have done everything you can do to speed up the loading time, NOW you can think about loading screens.
Except, don't make it a loading screen. Fake it. Make it look like you loaded faster than you did:
- Let the fastest content load asynchronously with the slower content.
- Is caching for your entire app too hard? Start by caching the entry points from previous visits and show that (although beware of unsettling flashes/jumps in data!)
- If that's too hard, fake it with a screenshot from the last view the user saw (it's been done -- iOS apps).
Once you've done all the above, and exhausted every other idea that you can think of because you know your users better then I do...
... then, only then, you can think -- for maybe an hour or two -- about making the gap a nicer experience. But remember, it must be a NICE experience. BEAUTIFUL does not always equal NICE.
And until that gap is gone, never cross this item off your list!
[Disclaimer: To the creators of this module, I'm not saying your time has been wasted. I'm only talking to app owners, not to you! Thanks for thinking of how to make bad things better! ]
Of course it all depends how keen your users are to wait for the thing. If it is an online game and they clicked a link to play it then they may be happy to wait.
For most sites this would make me hit the back button if it didn't load in 5 seconds.
This pattern really ruins the experience for me. I know of a few apps that while loading will show an inspirational quote or some other distraction. For me it cheapens the experience. I understand scaling is #hard but there are better experiences than a loading screen that can make the end user experience much better.
I can't believe that this post got upvoted 140 times on HN. Only one day left to 2015 and we have distribution networks, abroad datacenters. Are we still not able to build a system which doesn't require a loading screen? What a shame...
It's hard to fix slow clients that require tons of data and resources, but feed a desire for apps to do crazy things, and limited dev time. Trade offs have to be made somewhere, a loading screen at the beginning of an application is one of them.
You know what's even better? Having server-side rendering that delegates to the client on load so you can avoid this kind of thing all-together. Looking at you react, stay awesome!
If your page takes that long to load to the point where you want to use PleaseWait.js, that's an indication that you need to optimize your page so that it loads faster.
I would much more appreciate that dev time would be put into a framework that allows graceful enchancement by deferring loading more heavy components and to allow user to interact with the site ASAP.
Having a skeleton project for gulp (or any other system) that shows how to properly split big, non essential, components and lazy load them would go much further to ease developing big applications and smoothen UX.
EDIT: typos.