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
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.
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.
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.
IT #2: 5 ways your college website turns away students (continued)
According to the KDG report, prospective students are not only used to reading short bits of information thanks to social media, but many incoming freshman read at a 7th grade level.
“This means your college website must be at the 7th grade level, especially the sections used to attract prospects and to guide them through the application process. No, we’re not kidding,
1. Reading like the New York Times.
2. Requiring Form Fills.
prospective students are often fatigued by long forms that they must complete in order to get the information they need and will quickly leave the website. “Not only will a live chat feature save students time, it can also save your admissions office time answering questions from prospects and applicants
3. Not Understanding What’s Important.
a delicate balance between static and antiquated, and being too interactive. “Don’t get so caught up in the design that there’s a disconnect between what your institution is and marketing gimmicks. You also don’t want super technical, information-filled pages.”
4. Using Fake Images.
images of students posed for the camera won’t do, either. They want to see students, like them, doing the things students do on campus—with exceptions, of course…Candid images, combined with some documentary-style photos from important events on campus, will go a long way toward creating a website that invites visitors to look deeper.
looked at sites like Airbnb.
5. Using Clichéd Statements about Passé Issues
They may read at a 7th grade level, but that doesn’t mean they can’t recognize a cliché.
boasting about unique accomplishments with current relevance for students in a down-to-earth way, such as mentioning a good acceptance rate or a special program for those with learning disabilities. Positive statistics about campus crime rates, successful career counseling efforts or facts about innovative STEM programs are also good talking points.
For more information on the KDG report and blog synopsis, click here.
more on university web pages in this IMS blog
more on presentations in this IMS blog
Posted in LinkedIn by Jonathan Moser
Check Out Thayer Academy’s new site: from Camps and Campus Maps to Infographics, History, and even some Digital Storytelling:
Camp Thayer: https://lnkd.in/e6CVMmk
Campus Map: https://lnkd.in/eu9aUGm
History of Thayer: https://lnkd.in/eSzgEbr
Facts & Figures: https://lnkd.in/eH_F6za