TREND 2

Storytelling

Telling your user a story rather than presenting them with information can make all the difference when designing an experience for web.

An age old concept

Another huge UX trend is finally stepping away from the ‘information only’ feel that websites have so contained. In the early 2000s, we got used to seeing a certain way all content was structured. You land on a landing page that simply linked you out to various other places on the site. The biggest shift in this was the introduction of the long scrollable page - moving away from linking out to content and having most of your information on one page. But there was still something lacking here for a lot of content.


Let’s take a step back. Storytelling is not a new concept. It’s an age old concept, of course, and one we as humans have been pretty good at. We’ve managed to tell colorful tales like Paul Bunyan or John Henry and pass them down for generations. We’ve created beautiful movies, plays, and songs that are played throughout generations. Yet, we were not taking these skills and applying them to our web designs. Websites generally looked the same. A website for a small investment banking company might as well be a website for a college kid looking for his first job - our layouts were getting too similar.


Enter digital storytelling. A good website has a good flow, it makes a point to its user, and it shows, not tells, the user what is happening. This is just like a good story. The parallels are already there! Here are the top things to consider when telling your story:

First and foremost, does your content make a point? Look at your current website. Can you tell me what the goal is if you were looking at it from an outside lens?


Next, content for digital consumption does not necessarily read in the same way that a movie or a song does. In many cases, a user can jump in from any point. Ensure that your experience is designed to guide your user in the correct direction while also always giving them an understanding of where they are at. In this eBook, I ensure that each ‘story’ I am telling is kept to one page and that there are indicators of what section you are on. The entire story can be digested by reading this eBook in any order, though my purpose was to guide you through chapter by chapter by placing ‘continue reading’ sections at the bottom.


I’ve also created the content specifically for web, for this content. Some of this content was something else before - the general idea around the trends came from a presentation I gave my team upon returning from An Event Apart in October 2016. Some of this content was created specifically for this eBook. Either way, I combed through and ensured that my content was presentable for web and created additional content where I needed it.

You wouldn’t tell a story about a crazy night out on the town to a bunch of children, right? Same reason you wouldn’t present your content to completely irrelevant people. Your audience, better known as your users, need to be thought of as you create your story. Constantly, vigilantly. Without understanding of your audience, your story loses context and can be misconstrued.


Eric Meyer discusses this greatly in his lectures on Compassionate Design. Without considering your audience - and this includes the part of your audience that isn't your ideal user - you can end up with an experience that turns your user away. For example, this poorly placed Playstation ad.2

Visuals should not just be pretty pictures. Visuals need to have meaning and further tell your story. For instance, people in photographs can provide visual cues. If a pull quote is truly important and a primary focus of your story, an image of a person near or behind it should be looking toward, not away, from the point of interest. 

Using color or imagery to determine location works as well. In this example from Navicure designed by ion interactive, each chapter is differentiated by color and an adjustment of location.

I feel like this one is a given, but it definitely has to be mentioned. You can’t tell a story on the web without user experience having a heavy hand. Consider your user: how do you want them to travel through the journey? Do you want to jump them right in and get into a lot of content up front? Or introduce your story slowly and allow them to segment yourselves? Storytelling for web is something like creating a ‘create your own adventure’ book. Your user should be able to get into the story and choose their own adventure a bit - but that doesn’t mean you can’t guide them.


One example I love is this dun & bradstreet white paper created by ion interactive. When you land, you are presented with the topic and a quick overview, allowing you to quickly determine your interest. Upon continuing, you are led into choosing your own adventure a bit by picking chapters. Throughout the experience, visual cues guide you through the experience, imagery and color allows you to easily determine where you are at in the story, and sections at the bottom of each chapter keep you moving throughout the experience.

Marketing is no longer about the stuff that you make, but about the stories you tell.

- SETH GODIN

Designing a website to tell a story is very similar to writing a book or play. So look at it from that lens - every story needs an arc.

Setup

This will serve as an introduction to your, your product, your company - whatever your focus is. This could be established by something as simple as showing a large photo of your product, a brief title and intro and visual cues to continue on.

Conflict

This is where you really want to design for the emotion you want your users to feel. Is your brand happy and peppy? Utilize fun language and bold colors. Are you going for a more production, business-like tone? Try language that is straight to the point and a minimalist design.


The entire story is created so your user will desire what you are showing them. They need to understand what this story is telling and why they would want to engage with it.

Resolution

This is where you will most likely require action from your user. If you are selling a product, this would be where you allow them to purchase or view more details. If you are creating a portfolio website, this would be where you contact info lies. In this eBook, it's the continuation to the next chapter, and finally a contact/learn more link.

TREND 3

Outside the Grid

Next →