DEV Community

loading...
Cover image for The Hero's Journey and the User Experience

The Hero's Journey and the User Experience

Aimeri Baddouh
I wish my code was half as good as my expectations for how my code should be. My lattes are better than my code, so maybe I should make latte art instead of ascii art
・3 min read

We've all been there: We click on a link, the website loads, and we are immediately lost in information. Text everywhere without any meaningful organization, pictures sprinkled here and there, and ads everywhere. Even worse, the website doesn't give us any of the information we are looking for!

Example of a website that showcases how bad the user experience can be
Example of a website that showcases how bad the user experience can be. Credits to https://www.theworldsworstwebsiteever.com/

Why are so many websites and applications so hard to use and navigate? One of the many things that go into a good design is the story, or the user journey. A user knows when they come across a well designed site when they feel like they participate in the story the page is trying to tell.

Humans have an innate appreciation for good storytelling, and the study of what makes a good story involve multiple disciplines of study, going from narratology, to psychoanalysis and psychology. One way we could look at the user experience when utilizing a website is in terms of the Hero's Journey, popularized by Joseph Campbell in his book The Hero with a Thousand Faces.

Campbell outline seventeen stages in his book, dividing the world of the hero in two: The known world and the unknown world. The journey starts with the hero in their home town, or the known world, where everything is familiar to them, until they receive a call to action which takes them into the unknown world. Once on the other side of the journey the hero is changed, and even after they return home they are not the same anymore. They see the world in a new way.

In this interesting website you go from the comfort of your home to finding out all about access to clean water on a journey that takes you to even outer space. The journey ends back at home with you forever changed.
In this interesting website you go from the comfort of your home to finding out all about access to clean water on a journey that takes you to even outer space. The journey ends back at home with you forever changed. Courtesy of https://www.everylastdrop.co.uk

How does the Hero's Journey relate to the user experience in developing a good website or application? Consider their journey through your website. Even how we describe parts of the website alludes to a larger narrative: We have page hero sections, call to action, and the ultimate goal is to convey information in order to change the user when they reach the end. If the user takes a passive stance while perusing the site interest will dwindle. This doesn't mean fancy animations and renaissance-style drawings on a website, but it does mean a clear journey from a place of comfort to the user through the unknown (the information being conveyed) all the way to the end of the journey where the user is changed by the new information.

Apple takes their consumer on an informative journey through all the new features of their new iPhone in a clean and direct way.
Apple takes their consumer on an informative journey through all the new features of their new iPhone in a clean and direct way. Credit to https://www.apple.com/iphone-x/

So, next time you are designing any interaction with the user, consider the hero's journey, and take the user on a journey of their own!

Discussion (0)

Forem Open with the Forem app