Loading animations and placeholders

[khawkins98]

Many teams across the campus have various dynamic lazy-loading content -- it can be found in search boxes (the EBI homepage) and dynamically loading pages (Angular and Handlebars).

So how can we best:

1. indicate to users that stuff is coming,
2. not annoy users with terrible aggressive animations, and
3. hint at the content that is coming and make the pages feel a bit faster by teasing the content

And then once we identify a couple of major patterns, let's try and template out some reusable code for use upstream in the EBI Visual Framework.

[khawkins98]

I'll kick things off.

In my view we need two "indicator" patterns:

1. Activity indicator: A small pulse widget for search boxes, such as we have now (we could maybe polish this a bit, but in principle I think this is fine) for background tasks; and
2. Content area indicator: When you're waiting on meaty content to load. We should give the user an idea of what content is coming and prep the layout (so that way things don't move too much after boxes populate), you'll see this on Facebook. Source

If those two approaches sound reasonable, we can start looking at ways to document and template.

[khawkins98]

I could also see a case for a progress bar ("Please wait while we process your request.") -- but I've yet to see this in use at EBI.

[nbuso]

we are implementing an AJAX interface and we 3 questions:

• the browser is loading the whole application, this can take few seconds! is it recommended to set an animation while this is happening?
• we have pages with multiple components that load asynchronously. Is it recommended to have all the components starting an animation?
• while the components are loading the browser page load indicator is not working because it already loaded the page an the components are all javascript code that update part the page. While the components are loading the user can lose the feeling the page is loading especially if the loading component is hidden because out of the scrolling view. Is it recommended to have overall page loading indicator?

[AntonPetrov]

Showing a loading bar at the top of the page (as seen on GitHub/YouTube/Reddit) is another technique that might be useful to indicate that a request is taking a while.

For example, I use Angular Loading Bar on the RNAcentral website to show the progress of Ajax requests in keyword search.

[khawkins98]

Thanks for pointing those out @AntonPetrov

This angular loading animation could be a third loading pattern for us to add to the Pattern Library. (And it should also be familiar to many users, as it's the same pattern used on YouTube — and there are plenty of implementations: https://www.google.co.uk/search?q=youtube+page+loader )

Also saw the below use of spinners on RNAcentral:

@nbuso: I think both of those patterns could well fit the EBI Search, along with a content placeholder animation for the main search results — we can obviously look a bit deeper on Thursday. If I have time, I'll mock something up as well.

[khawkins98]

One other comment, mainly in @nbuso 's direction: I would say that you won't want to use more than one spinner/content placeholder animation on the page at a time.

What might work well: 1) Use the Angular progress bar OR a spinner like RNAcentral has done; and pair that with 2) Non-animated content placeholder images that tease what is coming (like the below one from Facebook)

[tschaka1904]

Is there any progress on that? I think I came across a spinner, whilst clicking through one of the updated EBI pages.

I like the idea of the:

Non-animated content placeholder images that tease what is coming

LinkedIn is doing something similar.

[nbuso]

I ended up with progress bars from material design: https://material.io/guidelines/components/progress-activity.html

I'm using one for the global loading and one for inner components loading. But can be too messy. I like also the idea of an placeholder image, but I did not had the time of doing it and I was wondering if it can be something more dynamic than a static image (svg? text same color of the background forming the highlighting effect?). Does anyone have any reference on how to create such placeholder?

Nicola

On Tue, Mar 14, 2017 at 4:11 PM, Maximilian Koch notifications@github.com wrote:

Is there any progress on that? I think I came across a spinner, whilst clicking through one of the updated EBI pages.

I like the idea of the:

Non-animated content placeholder images that tease what is coming

LinkedIn is doing something similar.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/ebiwd/EBI-Pattern-library/issues/14#issuecomment-286471996, or mute the thread https://github.com/notifications/unsubscribe-auth/AHL5aHs811giGr3agZqKjYS9-WaRn4Ucks5rlrwYgaJpZM4KZy_f .

[tschaka1904]

For now I'll go with the most simple one:

Or something like that. But I think a common load in a common colour would be good. Alternative this one ;-) :

But if anyone has experience with the placeholder image, that would be awesome.

[AntonPetrov]

For what it's worth, Font Awesome can animate any icon using CSS3: http://fontawesome.io/examples/

This is what I use in RNAcentral.