Written by Mark Coulstring
Video games have long been a driving force in what users can experience on their computers, evolving from simple early games to the newest that can be completely immersive. Throughout this evolution, video game designers have always gotten one element of design right: storytelling. Mobile and web application designers can utilize the techniques and technologies video game designers use to tell an immersive story and hit conversions effectively. The video game players at Seamgen want to underline some storytelling techniques to consider when providing your users with an immersive experience.
Make Your User The Hero
In every game, there’s a protagonist, and you want to make your player (or user) be the hero. The goal is to give them the impression that they have control over their heroic journey. The user should feel fully immersed in the storyline while they are guided to the end. Ultimately, every player reaches the same outcome, regardless of which path they take. Though the final reward is the same for every player, the experience isn’t any less enthralling as the player is actively engaged throughout.
It’s this type of experience that websites and mobile application designers should deliver to their users, right? Motivating your user to reach the end, whatever the ending may be, is influenced by the amount of control they have over their user experience. When users reach the ending, designers can translate those actions into conversions (i.e., purchasing items in a check-out, subscribing to the newsletter, clicking links, etc.) The best way to prompt an ending is by giving your users the ability to determine how they traverse the story.
Here are a few ways to do this with web and mobile design:
Creating user personas
User personas are detailed descriptions of fictional individual users along with unique physical and psychological characteristics. Developing user personas allows you to understand how these users will interact with your website or mobile application, as this will make the development phase easier. User personas typically include necessary information such as a name, age, and gender as well as points of interest such as hobbies, jobs, or lifestyle details. Additionally, your user personas should encompass a fundamental problem they’re trying to solve, and it’s your job to establish a journey that helps your user discover the solutions to that problem.
Enabling avatars
Enabling avatars ties back to user personas and conversions. An avatar is an icon or figure representing a particular person, albeit in video games, Internet forums, etc., that is used to define unique user identities. Allowing users to upload photos and personalize their profiles gives them a sense of identity on your platform. You can utilize the self-given information to further personalize their experience by directing which content they see or what types of offers they receive. This sense of personalization will allow you to hit conversion metrics effectively by honing in on what that particular user likes.
For example, the video game designers of the free (and trending) co-op survival game, Fortnite, allow their users to create avatars for others to see during gameplay. The game limits its free customizations, but users can pay a certain amount of dollars to upgrade further and personalize their avatar. Fortnite users willingly pay to distinguish themselves because they want that sense of personalization, and the checkout process for these customizations is a conversion that the designers can track.
Relatable Content
Relatable content is the information you want to present to your users based on their user personas. When a user associates themselves with your website or mobile application, they expect your offering to align with the content you produce. Your content must coincide with your aesthetics, your purpose, your goals, etc. In video game design, designers stick to familiar topics or settings the player can relate to and sets the expectation of gameplay and design. In The Legend of Zelda: Breath of the Wild, the hero, Link, must use wisdom and courage to face adversity in the fictional kingdom of Hyrule to save Princess Zelda. With this theme and setting, players do not expect to see gameplay similar to that of Grand Theft Auto.
Thematics and settings also apply to web and mobile design. Your brand, layout, content, and imagery should reflect your purpose in an interconnected way. Provide consistency and don’t confuse your user with clutter. The last thing you want is for your user to close a page and never come back, much like how designers don’t want their players to quit and never return. When you’re creating content, think about your user personas as you connect your purpose to their desire to consume your content. Additionally, keep in mind the problems you aim to solve for your user and your plan of action to keep them returning after they’ve consumed your content. Focusing on these points will ensure your web or mobile application is immersive, easy to follow, and purposeful for the user.
Utilizing Real Estate
Whether we like it or not, traffic to websites is shifting from desktop to mobile. In 2017, 50.3% of all website traffic worldwide was generated through mobile phones and is expected to increase each year. The switch to mobile access is further challenging designers to tell a story on a screen with limited real estate. We can learn from our video game designer counterparts and utilize symbols as a way to declutter so that users can focus on the story in front of them.
Whether you’re designing for desktop or mobile, you want to limit the distractions your user will see to provide a seamless and immersive experience. Employing the use of easily recognized symbols keeps the design functional and distraction-free. Some ways video game designers use symbols to declutter is by placing health bars at the top or bottom corner of the screen or putting navigation menus off to the side. To incorporate icons into your website or mobile design, use icons that symbolize functions such as a photo icon for account details, gear icon for settings, or a shopping cart icon to checkout, etc.
Note: you don’t want to overuse icons. They’re there to display elements your users are already familiar with and will refer to often. Decluttering isn’t about hiding everything, but instead is a means of tidying up. If you’re concerned about potential confusion, using labels or alt texts will provide elaborations to those that need clarification.
The Path to Victory
Video games often use roadblocks to prevent players from navigating into forbidden territories. For example, Halo uses physical elements to confine the user to the central game space by prompting them to move back and forth between layers to find an ideal route toward the end game. As web and mobile designers, we don’t have this luxury, but we can design the platform to steer our uses to a direct conversion path whether it’s promoting pathways, encouraging specific behaviors, or eliciting emotional reactions.
Here are two ways you can do this with design:
Spotlights
Video games often utilize lighting to draw attention to critical pathways. However, it’s not as easy to employ this technique in a web or mobile application because it could negatively affect the user experience. Instead, creating a spotlight on critical areas of your design will prompt the same attention as lighting does. This could be stylizing specific fonts or infusing the desired area with color.
Planting Hints
In any game, designers plant hints to help players reach the end game. These hints can be direct or indirect such as a change in music or a sparkle in the landscape. Although not many websites or applications autoplay music or have sparkling easter eggs plastered all over the site, designers can use other elements to entice their users. For example, designers can plant hints by using interactive features such as animations or utilizing lines or arrows that define the space through which your users navigate the site. These features are subtle, but a surefire way to lure your user into clicking a button or filling out a contact form.
As attention spans decrease, users want the most efficient way to get to the “good stuff” on your site. It is your job as the designer to explore creative ways to communicate the story of your site, convey the solutions to your user’s problems, and reach end goals effectively. By utilizing the design strategies and storytelling techniques our video game counterparts employ, we can shape and share the story of our websites and mobile applications to hit conversions and provide an immersive user experience.
Thanks for reading!
If you’d like to learn more about design and the user experience, check out our other posts. To inquire about any custom application design or development, please contact us.
