V!nc3r

Suggestions about default loading logo

Recommended Posts

I always found a little too cheap the rotating effect of the logo in the default loading screen (asymmetry and logo upside-down). Since the 4.0 coming, that could be a detail to enhance.

So I've started to do few tests, that you will find here: https://www.nothing-is-3d.com/tmp/bjs-logo-ideas/

But before going further, 'cause these kind of things takes a lot of time to test, I wants to know:

  • what do you think about updating this loading logo?
  • what do you think about my tests linked above?
  • have you other ideas to suggest?
  • what are the technical limitations of this loading? (cause I supposed it's write in the core of babylon.js, that's whyI made few tests using embed svg)

Share this post


Link to post
Share on other sites

And the logo itself is a base64 image right now I suppose? (in which src file can I check it by the way?)

Can it be an svg animated through javascript (like I tried here) ? (this probably leads to browser incompatibility I suppose)

[edit] by the way, don't know about that but maybe svg elements can be animated through css? that's could be awesome

Share this post


Link to post
Share on other sites

Here a little progress, for now which one you guys prefer?

https://raw.githubusercontent.com/Vinc3r/graphic-assets/master/BJS-loading-screen/_ideas_/logo-BJS-render/multiple-views0000-0100.mp4

Do not hesitate to suggest me ideas. Currently these anims are made using Blender, allowing quick-and-dirty tests, but I try to only use CSSable animations.

Share this post


Link to post
Share on other sites

@V!nc3r I totally agree with you that the spin on the Babylon.js logo as it stand could be better. In that vein, we are in the middle of a complete rebranding effort for Babylon.js as a whole and the loading animation is obviously part of that work. We expect to launch it with the 4.0 release. That said, I did want to take a chance to lay out what we are using as guidelines for motion and the UX design principles behind them. 

  • We need to have an indeterminate spinner for loading assets as we won't be able to know how long the assets will take to load. The challenge with indeterminate spinners is that whenever you have a noticeable loop in the animation (as in the animation has a pause before starting over or the logo builds up to completion and then disappears to build again) the user will subconsciously notice the loop and count it. If they notice the number of loops taking longer than normal, they will start building anxiety and likely click away. For an indeterminate spinner, you want pleasing motion that is almost hypnotic so that the user gets lost in appreciation of the motion and does not notice the time passed as easily. This may seem strange and manipulative, but most of UX design is about easing tensions and anxiety for the user to keep them engaged.
  • We would like to use the spinner as a branding moment, but I am not convinced that means it needs to be the logo being manipulated. If you've noticed what Google has been doing with their branding moments in their various properties, their spinners are all about the google branded colors as dots. You get the tie back to the brand because of the colors, but they aren't in the position to need to manipulate their logo to do it.
  • Most brands do not allow additional elements being added to their logo. There are clear guidelines for standoff of additional elements and for the most part changing the treatment of the logo is regulated by the standards guidelines. This is to maintain recognition of the identity with consumers and build trust. It has been shown in many cases where simply changing the packaging of a product can cause a drop in sales as the consumer distrusts that this is the same product they've always purchased. In some ways, brands have been beaten back into submission by consumers when they change their brand too much. A good example of this is when Coca-Cola tried to use New Coke as it's new brand to compete with Pepsi in the 1980s. Now what you see is a unification of branding, even within subsets of offerings. Even with Diet Coke having a different name, the logo is styled to feel like Coca-Cola to reinforce the overall brand.
  • We have to design our motion around the limitations of CSS so that will be a forcing function for what the loading screen looks like. We want to reinforce the brand, but at the same time adhere to good design principles and be easily recognizable. This is most important when people who may not be familiar with Babylon.js run across a site that uses us as a viewer. We want them to become aware of the engine even if they aren't going to be building with it. It's the same idea as the launch of a video game where you see all the logos of the middleware or engines on screen or the start of a movie where you see all of the logos of the production houses that worked on it.

Hopefully this gives you some insight into what we are planning. We agree with you that the current motion isn't a representation that we want to stick with and violates several of the points above. Let me know if you have more questions or want to discuss the design principles more.

Share this post


Link to post
Share on other sites

That's nice explanations!

I'm probably not the best person to be in charge of that, especially 'cause I don't have much experience in UX things. When you say

Quote

we are in the middle of a complete rebranding effort

does that mean you already have a guy on this task?

Share this post


Link to post
Share on other sites
14 minutes ago, V!nc3r said:

That's nice explanations!

I'm probably not the best person to be in charge of that, especially 'cause I don't have much experience in UX things. When you say

does that mean you already have a guy on this task?

Yes, we had a designer initially working on some new directions for the branding with me art directing the effort. Unfortunately he was pulled to another team before he could complete the work so I will be taking over the design myself going forward to help speed the process along. 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.