Adobe Creative Cloud

May 19, 2016 /

Game Design Engagement and the User Experience

In a previous life, I was a Flash designer and developer, implementing interactive content and games for eLearning, advergaming and animation. Game design teaches you a great deal about designing intuitive interfaces and building experiences that balance the need for lower cognitive loading with maintaining user engagement and forward progress.

Video games are “fun” and the greater the fun the user derives from the game, the greater the replay value and engagement. Ralph Koster breaks down the fundamental interactive game elements into four meta concepts or game atoms: input, model, feedback and mastery. Input: What are asking the user to do? Model (or mode): Initiated by the input, the interface will present a different state or new content. Feedback: The interface provides the user with feedback of the change. Mastery (learnability): The user can quickly learn the structures and tasks to perform with the interface. Game design follows the mantra “easy to learn, difficult to master” to encourage interaction, not discourage users. Sites need to be simple and easy to learn for the user to engage with the content.

On an Android phone, to move an app icon from the tray to the main screen, the user needs to hold down (input) the selected icon; the main screen and side areas are shown (model); Haptic (feedback) is given to the user. The icon outline moves with the user to show the possible placement of the app icon on the screen. Users can quickly learn this action through one or more repetitions. For a web page, this may be something as simple as a changing the color of a submit button on mouse press, showing the user a progress bar and then a notification that they have successfully submitted the information.

app_placement

Engage users with Content, Tell a Story

Begin with laying out a content audit for your site and decide what kind of story your content will tell. What are the Calls to Action? What will the user use or think after reading your content? What is relevant and important to your audience and supports your communication goals? Tell a story and engage the user with interactivity that delivers and surrounds your content.

Command line adventure games like Zork did not offer much in terms of graphics but engaged you with the story and remember becoming engrossed in Zork with the opening line, “You are standing in an open field west of a white house, with a boarded front door. There is a small mailbox here.

zork-opening_screen

When designing a content strategy, think about how the story will communicate the main ideas or information on the site. What is the main messaging that you want the user to act on? What value does it provide? To help define the how the user will engage with content, we can create job stories and empathy maps to understand the user journey through the digital experience.

Storytelling can be as simple as a notification that the user needs 3 Stars until their next Star Reward.

starbuck_starts

Designing an Information Space

Point users in the direction they need to go, balancing the need to help users meet their goals with the freedom that lets them explore the information space to find a way to return home. Let users find and engage with content without any cumbersome navigational structures or trees. Navigation should be clear and unobtrusive to help the user move forward through the content and the information they wish to find. Avoid falling into the myth of needing to restricting navigation to the “three clicks or two taps rule” depending on the device.

Animation and Context

Radial menus provide the best of both worlds – quick animations to bring the user into the available tasks and fast learnability and performance. Touch devices and screens lend themselves to gesture-based interactions and can help users visually identify courses of action.

fall out companion wheel

Turok the Dinosaur Hunter was one of the first games that I played that had a radial menu for the player inventory rather the traditional list or linear inventory systems. A more recent example of a contextual menu is the Companion Wheel from Fall Out and the second screen Pip Boy experience. Path, Tumblr and Microsoft’s OneNote use a radial menu system to provide the user with clear interaction choices and important decision-making while balancing the user’s motivation with the ability to interact with the menu. We can use the Fogg Method and microinteractions to help both novice and expert users interact and navigate within the information space. Icons are a major part of navigation design – they allow users to recognize content elements and move through the navigation and information space. Remember to add labels to icons to increase the recognition and learnability and animation to increase engagement.

path_icons_menu

onenote radial 01 onenote radio 02

Conclusion

Understanding the underlying motivation of the user can help you design interactive experiences that are fun and engaging user experience regardless of the platform or content. Leveraging storytelling helps motivate and engage users in your content. Keep navigation light and unobtrusive. Provide contextual menus and icons to help users identify actions and tasks. Engage users by making online experiences personable and fun. Both web and game design borrow from each other so remember the next time you are playing a video game, it’s research.