Within the simulation game research community, UX/UI design research publications often concern the effectiveness of the result, i.e., the actual game experience and interface design outcome, rather than the thinking and decisions leading up to it. This article fills this gap in the literature by discussing the UX/UI redesign thinking and decision-making behind a particular digital simulation/serious game about marine or maritime spatial planning called MSP Challenge.
User experience (UX) design is a process with the objective to design products that provide accessible, efficient and relevant experiences to users. UX design is about designing the experience of product use, the way users interact with said product, and the functions within said product. The main focus is enabling seamless goal achievement for the users.
User interface (UI) design is a process with the objective to design a ‘front-end’ interface with clear audio-visual communication and pleasing aesthetics, to aid in the efficiency of use and achieve the objective(s) set during the UX design phase. In a conventional application sense (e.g. a web or native application) UI design thus refers to the audio-visual appearance – ‘the look and feel’ – of an app that will aid the function of a product. It focuses on visual factors such as the colour palette, fonts, imagery, buttons, other interactive elements etc, as well as sound or audio effects of any kind.
What is important to consider for good UX design? The ‘user experience honeycomb system’ by Peter Morville considers seven important elements:
What is important to consider for good UI design? Multiple of the following design principles are part of Jakob Nielsen’s ‘10 Usability Heuristics’.
The purpose of the login screen is to provide the user with a clear and welcoming introduction to MSP Challenge.
Previously, the login screen closely resembled ‘launchers’ used in many traditional video game titles.
It has been our goal for a while to turn the login screen into a hub-location, not only containing the session browser but also general information about MSP Challenge, software update announcements, news etc.
When redesigning the login screen, we stepped away from the ‘game launcher’ layout, as it didn’t properly represent our vision for MSP Challenge.
MSP Challenge classifies as a serious game and while we strive to incorporate storytelling, challenges and immersive roleplaying elements into the experience just as traditional video games do, its purpose isn’t solely entertainment. We believe that MSP Challenge is a strong planning software. With its access to real-life data, Ecopath with Ecosim models, simulations and an extensive set of tools for marine and maritime spatial planning, MSP Challenge can assist in research & development projects, stakeholder engagement and education, to name a few possibilities.
We decided to go for a more conventional design that our target audience is more likely to be familiar with.
All the information that was previously featured together in the launcher has now been divided over a set of screens that the user can easily access through the fixed left-side menu.
Though we strive to make the user experience of MSP Challenge as clear and streamlined as possible, it will always remain a complex piece of software with extensive in-game possibilities. The purpose of the tutorial is to provide new users with a general introduction in order to smoothen the initial learning curve. Once completed, the users should have a general sense of what the game is about (i.e., the notion of multi-player marine spatial planning), and of the steps they can take in order to progress in the game.
When starting up MSP Challenge for the first time, new users will be prompted with the option to follow the tutorial, which they can either accept or decline.
The tutorial consists of informative pop-up overlays integrated in the actual game software, instead of being a complete separate and simplified interface. It guides the users through the core features required to get started step by step, while simultaneously introducing them to the complete software. The tutorial is an opportunity for- and encourages more adventurous users to already start exploring the rest of the interface and learn through trial and error.
Eventually, the majority of the features will need to be to be applied during an MSP Challenge session, so the sooner users get the chance to explore them the better.
The tutorial will occasionally require the users to fulfill simple tasks before they can proceed, such as consulting a specific window or creating a simple spatial plan. This avoids users from accidentally or purposefully skipping past important information.
The tutorial is divided into four sections. As the name indicates, ‘Part 1 Interface Basics’ introduces the users to the very basics, such as how to maneuver through the interactive map and where to access important windows such as the Main Menu and the Help Windows.
‘Part 2 Accessing data & exploring the consequences’ introduces the users to the data layers catalogue, the legend and the impact tool. This gives the users a first impression of what is already going on in the sea basin.
This then seamlessly leads to ‘Part 3 Creating & implementing plans’, which shows users how to turn their ideas into actual spatial plans, how to draw new- or edit existing geometry, and how to get a plan approved and ready for implementation.
Unlike all previous sections, section four focusses on end-game reflection instead of essential early-game information and functions. ‘Part 4 Evaluating consequences’ shows the users how they can assess the impact and consequences of their plans through the KPI- and Objectives Monitor windows once the simulation has run. This is why once the users wrap up section three, they are offered a shortcut to start the game and skip section four if they wish.
Once completed, the user will never be prompted to follow the tutorial again, but it can be manually reactivated through the ‘Tutorial button’ under the ‘Main Menu window’ (Cogwheel button, top-right corner).
The expectation is that by introducing a tutorial, users will be able to interact with the software with more confidence from the very start and that there will be fewer general questions throughout a session. This also makes it easier for external parties to host their own MSP Challenge sessions, without requiring the presence of an MSP Challenge member.
MSP Challenge has various tutorial videos and other helpful information available on the community wiki- and knowledge base websites, which is useful but not very accessible during a session. The purpose of introducing the Help function is to provide the users with guidance on how to interact with a window’s features. It gives them the possibility to troubleshoot their actions within the game software by making information easy to find and pinpointed to what they are doing in that very moment.
Each in-game window has a help function that can be accessed through the question mark button in the top left corner of the window header. Selecting it will trigger a pop-up to open, providing information for all the features available in said window, through infographic-like visuals.
This also makes it easier for external parties to host their own MSP Challenge sessions, without requiring the presence of a member of Cradle.
The purpose of the Active Plan window is to reduce the number of steps required to create and / or edit a plan, and to combine as many of these steps into one location.
Previously, plan creation and editing required the users to go through multiple steps dispersed over various windows.
First, users are required to fill in a plan name, select the data layers and policies (optional) of choice, and pick an execution date within the plan wizard window.
Once this is done, the plans monitor window automatically opens, in which all the existing spatial plans of the different teams can be viewed. The newly created spatial plan is preselected by default and its contents can be viewed by expanding the window to the right using the arrow button in the header. Simultaneously the active plan window will open in view mode, in the bottom left corner of the screen.
The plans monitor window has multiple tabs, containing various information about the spatial plan. In order to make changes to the data layers of the spatial plan, the user must travel to the layers tab and select the edit button.
The active plan window will expand into edit mode. The users can select one of the data layers that have previously been added to the spatial plan and either select the edit button to make changes to the existing geometry within that layer, or the create button to draw new geometry from scratch.
Once the users have made all the required changes, they need to be permanently implemented by selecting the accept button.
If the users wish to remove or add an additional data layer to the spatial plan, they are required to exit the Active Plan window’s edit mode by either accepting or canceling the changes, return to the Plans Monitor window, select the relevant spatial plan and then select the change details button in the top right corner, in order to reopen the Plans Monitor window in which the original details of the plan were drafted and can be altered.
The active plan window got introduced in MSP Challenge RC1 release.
Reducing the number of required steps / clicks, helps enhance the general flow and clarity of the game. The user is less likely to become overwhelmed if the steps and the information are to the point.
Combining steps and functions that are (thematically) connected and need to be used hand-in-hand into one location reduces the strain on cognitive load.
It isn’t ideal if the user needs to remember how- and where to navigate to (especially if the locations are numerous). This reduces the risk of the user getting side-tracked or even ‘lost’ in the process.
Embracing a complete redesign and combining various steps into one location will allows us to create more consistency in the UI, as many of the current windows were designed and tweaked at different times.
This a good opportunity to implement consistent window layouts, terminology, colours, icons, interactive elements such as buttons, on-hover information etc.