At first glance, web design and video game design appear to be two separate worlds. One is considered “serious business”, while the other is, well, “fun and games”. However, web designers and developers could learn some valuable lessons from electronic games creators and the storytelling techniques they employ to create a user experience.
Some Background on Video Games
A video game is designed around interaction with a user interface, which generates visual feedback on a video device.
Electronic games can be played on a variety of platforms, including personal computers and laptops, handheld consoles and home consoles, arcade machines, web browsers, mobile devices and more recently, virtual reality headsets.
The game “Tennis for Two”, created by physicist William Higinbotham in 1958, is widely considered to be the world’s first official video game. The game used a cathode ray tube display showing two lines that represented a side view of a tennis court, and a dot representing the ball.
Needless to say, gaming graphics and interactions have come a very long way since then! Games immerse players in painstakingly crafted worlds, and guide them through complex storylines towards the end goal.
So, what inspiration can web design professionals draw from video game design?
1. The User is the Hero
Video games put the player in the driver’s seat, giving them control over their actions and allowing them to be the hero of the story unfolding in front of them. Players have a clear mission, and their decisions will determine whether they achieve the goals set for them.
In the same way, websites can put their visitors in control of their journey through the site. For example, allowing a visitor to create their own user profile and avatar gives them a sense of control over their onsite journey from the beginning. Providing them with personalised, relatable content will help to carry this user experience through the site.
2. More Symbols = Fewer Distractions
Mobile search traffic is on the rise, with studies showing that more than half of visits to websites are now done via smartphone. Of course, mobile screens are much smaller than computer screens. It’s important to keep these smaller layouts clutter-free and clear.
Video game designers use simple visual symbols to give the user information in a way they can instantly interpret and understand. Think player character health trackers, life counters, route maps, collected prizes and achievements, etc. These symbols also transcend language barriers, making a game (or website) more widely accessible to users from different cultural backgrounds.
By using symbols instead of words, web designers can simplify and minimise navigation and directional cues, which won’t distract visitors from the main website content. This could be as simple as using a magnifying glass icon instead of the word “Search”, or a shopping cart icon to represent the check-out.
3. Smart Use of Space
Games create parameters and boundaries for the player to move around in. This “spatial storytelling” helps to direct the story and influence the player’s behaviour.
Game designers might do this by using light and colour to highlight a certain element or area of a screen, directing the player’s attention towards it. They may also use sound-based clues to direct the player. Some creators use NPCs (non-player characters) to interact with players and give them advice or direction.
Web design also needs to steer visitors along a certain path (i.e. towards conversion). This could include adding subtle visual cues to guide them towards the next click, or using a mascot character to talk them through the process of sign-up, subscription or check-out.
Good Storytellers Make Great Developers
There’s more to web design than endless lines of code. Effective, user-friendly web design requires creative thinking, and an instinct for how to guide users through the site’s “story”.
If you have a passion for code and a knack for creativity, web design could be the perfect career path for you. Sign up for one of HyperionDev’s six-month online web development bootcamps, and start honing your skills today.
