INTO THE UNKNOWN
“Load New Commander (Y/N)?” the fuzzy white type read. This, the opening command from the fabulous ‘ELITE’ for the BBC Micro. Lightyears ahead of the competition this 3-dimensional sandbox game allowed me, and many other children, to independently explore eight giant galaxies. But beyond the game itself, something had changed. It was that basic prompt; a choice of Yes or No, an interaction with a machine. The choice would be the first of hundreds, millions, perhaps billions that I would go on to make.
We have ever more choices available to us, since the clunky keyboard commands of the BBC, technology has become infinitely more sophisticated and now requires users to interact in ever more elaborate ways. Keanu Reeves’ Neo succinctly puts it:
THE REALITY OF SYMBOLISM
Graphical User Interfaces (GUIs) have unequivocally revolutionised our daily lives. Images that closely attempt to reflect our reality have slowly given way to distilled versions; skeuomorphic design disposed in favour of the abstract. It’s interesting to see these symbols become detached from their parents. Take the example of Words ‘save’ icon, it would make perfect sense to the ten-year-old me, but how many children would now comprehend the symbolism of the humble 3.5” floppy disk? The icon has its own meaning, a language to itself.
Excited for the future of this fledging language we’re continually captivated by new advancements in interface design. Previous developments include Microsoft’s Metro interface; Its stark minimalism was surprisingly shocking, many feeling discomforted by the lack of gradients and drop shadows we’d come accustom to over the years. Now ‘flat design’ is common place and many have adapted its rules to build upon its success. Chiefly is Google’s Material Design. With an acute understanding of shadows Material allows users to clearly interpret an object (or piece of material) position within virtual space.
MATERIAL & MOVEMENT
A key feature of Material is that it makes allowances for movement within the interface, which until very recently has been seriously lacking from historic design languages. We’ve all had fun with CSS transformations, making shapes skew and flip, although impressive it was hard to deny it’s novelty. But Google have attempted to rationalise the the benefit of animation in order to produce graphical movement that’s quantifiably useful to users.
This is not a gimmick, in a world where interface design is no longer confined to the desktop computer design has to be adaptable enough to function on an array of devices whether they be tablets, smart phones or even watches.
Take a conventional navigation bar on an e-commerce site as an example: In a traditional desktop setting a user may choose to hover over each item, in response they will receive some signal to say that the link is active as well as a list of sub categories, all this before opting to commit to a route. This is the window shopping of the digital world. View the same site, this time on a mobile device, and if it has failed incorporate effective cross-platform design and the user have no choice than to click through links with no indication of the pages that lie beyond or even if the link is indeed active. In this case, much like the shop with the lights off, many will just walk away.
For this scenario motion could be useful in identifying what will happen if a user completes a gesture. There are many more reasons why a designer may use to integrate motion into their design, Google list a few reasons why motion could be useful to your web project:
- Guided focus between views
- Hierarchical and spatial relationships between elements
- Distraction from what’s happening behind the scenes (like fetching content or loading the next view)
- Character, polish, and delight
Google aren’t alone in pushing micro interaction within their design language, IBM are also at it! This is what IBM have to say about the use of animation: “Animation is the body language of a product. When static screens become kinetic, they create an active two-way conversation with the user.”
The word ‘conversation’ is particularly interesting here. The online world has become a lot more than just a repository for pages of dry information. Users expect the level of experience and service they would otherwise get in a physical environment. By developing a conversation your company’s digital persona can engage more successfully with its users. Because, as we know, higher engagement results in a higher number of conversions.
Remember, users appreciate animation when it is:
- Quick and efficient
- Helps them navigate your content with ease
- Indicates areas of interaction
- Provides visual interest when loading content
- Reinforces the user journey
Not when it:
- Takes significant time leading to delays
- Adds confusion and unnecessary complexity
- Tries to be flashy or cleaver for its own sake
In summary, it seems that micro animation is here to stay. We’re excited to be designing more advanced interactions that simultaneously delight users and yield greater conversions for our clients. User Journey is not just about the destination, but about maintaining a consistent, reassuring and beautiful experience along the way.