Designing an Engaging User Experience
--
Let’s be more creative! Let’s captivate users. Don’t generate a good experience but a very rich one. Let’s create an engaging design!
As a UX designer, I noticed over the past few years that our job has been evolving quickly tending more and more towards creativity.
The CSS3 gave us new animation possibilities, the hardware are more and more powerful, the bandwidth speed is continuously growing. We have now this wonderful opportunity to highly improve the user experience even more than in previous years.
A UX designer can design interfaces that work, that have been accepted and validated during user testing sessions. Information architectures are perfect. Interfaces are useful. Users achieve what they want. They are satisfied. Add value has been generated for the business. Everyone is happy with that.
But sometimes the functional design is too flat. Too strict. We cover users’ needs but that’s it. Nothing less, nothing more….
How to improve the experience? How to go beyond this point?
Let’s be more creative! Let’s captivate users. Don’t generate a good experience but a very rich one. Let’s be remarkable.
Let’s create an engaging design!
Principle
I’ve already heard talking about “Wahoo effect”. While this term doesn’t mean anything accurately, it refers to the wish to go ahead and create something captivating enough to generate enjoyment.
Creating an “engaging design” adds another dimension to the information architecture which is enhanced and sublimated, creating a real interactive experience.
How?
In order to engage users, the system of motion is a first avenue that’s worth exploring. Using animations and transitions appearing after a specific interaction (scroll, hover, click, swipe …). Following the Google material design principle, it’s all about creating meaningful, smart, simple and relevant animations. Adding depth to the layout using a system of layers, parallax effects and strong visuals help to immerse the user into a rich experience.
From the information architecture to the rich experience
The information architecture represents the foundations of a digital product. It’s about how it works. It’s the plan guiding users from a point A to a point B throughout different pages. It’s the structure the entire website is based on.
Once we have built a successful information architecture, let’s deal with the animations providing more sense and strengthening our structure.
This task is really creative. That’s why I think it’s important to involve both the UX and the Visual Designer on this.
It’s up to the UX to make sure every single animation is meaningful and useful. It’s absolutely necessary because we are not working on the aesthetic aspect but on the efficiency side.
“Motion is meaningful and appropriate, serving to focus attention and maintain continuity”
Google Design Principles
Those motions also help users to quickly understand affordances. Again it’s an opportunity for us to visually explain how it works, what are the interactive elements etc.
Then, the graphic designer and the art director can follow those animations, improve them and create new ones regarding the look and feel approach.
Progressive Disclosure
Creating engaging design by using animations brings new possibilities to guide the user’s attention.
A Few years ago some people started to talk about the “Progressive Disclosure” principle going further than the “Less is More” mindset. At this stage, the CSS3 was not as popular as it is now. Interfaces were quite flat. Material Design by Google didn’t exist yet.
With these new design principles and technical capabilities, we can now fully use this Progressive Disclosure approach.
For example: after a particular interaction, use a meaningful motion to display another component catching the user’s attention and explaining visually how it works and what it is for.
By mixing progressive disclosure and meaningful animations, it’s now even easier to catch the user’s attention and drive their eyes to focus on what we want, where we want and when we want.
“An emphasis on user actions makes core functionality immediately apparent (…) Think about how the user’s attention should be directed. What elements and motions support that goal?”
Google Design Principles
Examples of meaningful animations
by Barthelemy Chalvet
See more examples on:
- http://www.materialup.com/
- http://capptivate.co/
Limits and abusive usage
It’s crucial to avoid disturbing his attention too much. Keep in mind that an animation increases a lot the strength of a component. So consider this strength. Is it relevant to have a strong visual impact for this component? Does it still follow the information architecture logic or does it become more important than minors elements?
Conclusion
Let’s go beyond the static information architectures and try to captivate users thanks to meaningful and subtle motions.
As UX Designers, it’s part of our role to deal with those motion systems to deliver a very rich — and even emotional — experience and strengthen the user’s engagement.
More than ever before, we can use all the capacities of the progressive disclosure logic to drive the user’s attention on the right content at the right moment.
