In the past 30 years, our society has been shaped by moving through the cyber roadways that are text based menus. Navigating through digital space has become a staple of people’s day to day activities, and an important part of getting us to this point has been the consistent presentation of information allowing for the proliferation of digital literacy.

But now as basic digital literacy becomes well established, and people expect more from digital experiences, designers are experimenting with digital proficiency, asking “What is universally understood? And how can we use this to improve people’s experiences? While things like underlined links are slowly being phased out, designers are pushing what can be communicated with small interactions and animations.

Pulling from other industries

Like websites, video games are required to facilitate users interaction and navigation through digital space. In both cases, when executed well the medium shines, and when it’s bad it’s infuriating.

A great example of modern, well-executed navigation, is UI of Persona 5. The long story short is Persona 5 is a turn based role playing game. And while it does a lot to improve on the genre, what really stood out to me is the user experience.

A lot has been written about the strong artistic direction of P5. The visual style is pervasive, there isn’t a single piece of the GUI (Graphical User Interface) that hasn’t been slammed with colour, animation flourishes and bold stylised fonts.

During battle segments, there are six possible actions, and so each action is given it’s own button, which saves a lot of time over the course of 80 hours. As shown below the animation between menus communicates the target of the action, what that action involves, and the change of stance of the player communicates the character’s confidence in the action.

In situations, where more information needs to be managed, (and it would be difficult to streamline searching through more content), the tone is maintained through small interactions, which helps to maintain immersion in the experience.

Of course, we are a design agency and seeing this may be hard to contextualise in terms of broader design trends, so I’ve found four examples of interesting navigation and interactions from around the web.

Lack of Focus

Web development user experience

This is more of an art exploration. The menu only offers you hints at where you will be going, encouraging a self-directed exploration of the work. When Flash was emerging tech, experimental navigation was popular as designers explored possibilities and challenged convention. However, at the time this required building the whole site in Flash, which was dense and slow to load. These days animation technology is far more accessible meaning it can add to the experience, without breaking immersion with long load times.

truff.co

Hard Focus

Web development example

This portfolio communicates focus. Each click initiates a measured transition, setting a pace for how the designer intends you to read about their work. The slow reveals make it hard to scroll at top speeds through their work. Controlled pace and tempo has been used most commonly by film and tv, but is fast becoming a familiar facet in digital UX design. When handled incorrectly, removing control from the user can be disempowering, and annoying.

A more immersive experience and relaxed pace are good for exploration, but this wouldn’t be useful when people need to make time-pressured purchases or quick evaluations.

cedricpereira.com

Application of Focus

User Experience Examples

 

The  links below are two are less extreme examples of how establishing a relationship between action, transition and outcome can make for a more immersive experience on more websites. A lot of websites have login forms, and there’s a slight disconnect when a modal slides up from the bottom of the screen as the user has to register what this new element is. This alternative bridges that gap, so the user understands exactly what the modal is relating to. What I like about the search examples, is that it’s focused, and offers contextual suggestions to the user.

These days,  new animation tech is far more accessible allowing and encouraging designers to create engaging experiences by integrating meaningful movement in website design. As people become increasingly digitally literate, perhaps navigation can be less conventional and more integrated into the surrounding design context.

Moving forward I think we will see these design trends taking a larger role across all sites, including larger more corporate enterprises. On a broad project level that means animated motifs, while on an interaction level that means communicating not just what happened but what that means. The more proficient users and designers get in the digital space, the more they will expect from each other. We will continue to look for opportunities to incorporate this in our work.

Button Component Morph

Search UI Effects

By Joel Stewart

Web Developer

 

Get in touch with me here to discuss projects.