The Future Of Mobile Web Design: Video Game Design And Storytelling

As attention spans shorten and visitors just want to get to the good stuff on a website, designers have to get more creative in how they communicate their website’s “story.”

By Suzanne Scacca  June 25, 2018

https://medium.com/@smashingmag/the-future-of-mobile-web-design-video-game-design-and-storytelling-11f5add41d25

What is truly impressive, however, is how we are now able to use design to tell a story. In other words, we no longer need to use long scrolls to set up plots or describe what a company does. This is especially great when designing for the mobile experience, which already sets pretty strict limits on how much we can “tell” versus “show.”

Three Video Game Storytelling Techniques We Need More Of In Web Design

1. Make Your Visitor the Hero

Create User Personas

Develop user personas before you do anything else when strategizing and planning for a website. Your personas should have a key “problem” they face.

Enable Avatar Setup

Use Relatable Content

In video game design, there is something known as “ludonarrative dissonance.”
the unpleasant situation where we’re asking players to do something they don’t want to do… or prevent them from doing what they want.

Spin a Fantasy

Here’s an interesting fact: people are 22 times more likely to remember data when it’s presented in a narrative form.

The brain digests visual content 60% more quickly than written content, so your web designs and other visuals (like video, animation, and so on) are the keys to doing this.

The Airbnb blog always does a great job of this type of visual storytelling.

2. Minimize Distractions by Using Symbols

As of August 2017, 52.64% of all visits to websites were done via a smartphone. And, starting in 2017, the most popular size for a smartphonewas between five and six inches and will only continue to grow in popularity as the years go on.

That’s not a lot of space to fill with content for the majority of site visitors, is it?

Functional minimalism is already something you’re doing in your own web design efforts, but have you thought about how it can tie into the storytelling aspect as well?

Here are some ways in which you might use symbols to declutter your site:

• Hamburger icon (for the navigation)
• Profile photo icon (for account details)
• Pencil icon (for an editing interface)
• Gear icon (for settings)
• Shopping cart icon (to checkout)
• Magnifying glass (to expand the search bar)
• Connector icon (to open social sharing and RSS feed options)
• Question mark (to expand live chat, search, or help options)
• And so on.

3. Be Smart About How You Use Space

Use a Spotlight

In video games, you can use light and darkness to draw attention to important pathways. On websites, it’s not always easy to employ the use of lightness or darkness as too-dark of a design or too-light of text could lead to a bad user experience. What you want to do instead is create a “spotlight” of sorts. You can do this by infusing a key area of your design with a dramatic color or a boldly stylized font.

Add Clues

If you’ve ever played a horror video game before, you know how critical the element of sound can be for it.

That said, while you might not be able to direct visitors down the page with the sound of something playing down below, you can use other elements to lead them. For one, you can use interactive elements like animation to draw their attention to where it needs to go.

Employ a Mascot

For some brands, it might make sense to employ the use of an actual mascot to guide visitors through the story.

Summary

As attention spans shorten and visitors just want to get to the good stuff on a website, designers have to get more creative in how they communicate their website’s “story.” Ideally, your web design will do more showing of that story instead of telling, which is how video game design tends to succeed in this matter.

Remember: Storytelling isn’t just relegated to big brands that can weave bright and shiny tales about how consumers’ lives were changed with their products. Nor is it just for video game designers that have hours of gameplay to develop for their audiences. A story simply needs to convey to the end-user how their problem can be fixed by your site’s solution. Through subtle design strategies inspired by video game storytelling techniques, you can effectively share and shape your own story.