So the news came out just last night that Google is revamping their iconic logo and I just had to share my thoughts on it in terms of how this new brand identity impacts the way we approach UI/UX in general.
I am not going to go into details on why the company decided to change their logo or what every subtle difference means. That is best explained by the Google designers themselves over at their design blog. What I do want to talk about is those beautiful animations that they have created for the logo and why they are useful.
The case for the new Google logo
We all have heard about the Material Design Guidelines (if you haven’t, shame on you) published by Google and how every piece of the user interface must lie on a “physical” plane rather than materializing out of thin air. This is important because it gives the user a direct visual output for the interactions that they have with the interface. For example, clicking a dropdown menu on the top navigation bar shouldn’t expand the menu from anywhere else but where your finger or pointer clicked. It just makes sense and gives the user an idea what’s going on in every step of the way.
By providing small subtle visual cues, the user understands that what they are doing has an opposite reaction (some Newtonian stuff right here). And this is where the new Google logo comes into play. For Google, it wasn’t just about updating their logo design for a more modern era, it was also seeing how the logo can act as its own visual indicator for actions that users may take.
In the use case shown on their design blog, when you fire up Google Search on your phone, the Google logo changes to 4 little colorful dots that give the user an indication that something is happening and the application is waiting for their feedback.
When you start talking, the dots transform into audio waves to simulate that Google is listening to what you are saying. And when you are finally done, the waves transform back into dots and begin to spin around telling you that Google is doing some magic and asks you to wait for the results.
All of these animations spawn from one singular point, from the logo to the dots to the audio waves and finally back to the spinning dots. Fluidity of the animations makes sense because it helps the user understand that all of this is happening in one instance of the application; that these aren’t 4 separate actions. At the same time, the animations serve as a necessary indicator of input/output rather than just being there to look pretty.
How animations can make or break your interface
Now how does that help us as UI/UX designers? Well, one of the things I have seen so many aspiring UI/UX designers get wrong is the overuse of animations and the lack of meaning to those animations. Whether it is of making pages fade in and fade out, or making things pop in and bounce, most of the animations serve no real purpose apart from vanity. When we talk about animations in UI/UX design, there is a term some of us have heard of called functional animations; that is animations that serve a logical purpose.
When we talk about functional animations, we look at how those animations help the user achieve the goals they have in mind easier and with better understanding. So when the user sees an animation when the click a button, it should help them understand what the action does or requires them to do next.
For example, when you minimize a window in OSX, it doesn’t disappear into oblivion, because if it did, it would tell the user that they closed the application completely. Instead, it does a genie-life effect of going back to where it started on the dock thus telling the user that if they so desire, they can start back from where they left off by clicking on the icon in the dock the window got swallowed into. These animations thus make the user interface better for the user of the application as it guides them through each step of the process.
However, when I interface with an application and suddenly I am bombarded with an array of animations that make no sense, this can disorient or confuse me as I don’t have any indication what is going on. Another example from OSX is the full screen animation that takes place when the user decides to make something go fullscreen. It is slow and serves no real purpose apart from beautification. I mean, come on, wouldn’t this annoy you?
There is a case to be made for any use of animations and I for one welcome more motion in our interface designs. But when you become engrossed with making things look prettier, you lose sight of why you are designing the interface in the first place. Users want to get where they want to go in your application faster and easier. Don’t make it harder for them to do so. If an animation serves as a way to help them understand something or to conceal something ugly (in the case of loading an element) then fine. But if it makes want to search the settings to find a way to turn them off, or worse, go into the code to hack it away, then you are completely doing something wrong.
The new Google logo animation serves as a reminder to all of us that we should definitely try and keep in mind how one fluid animation can make or break our interface designs.