Skip to content

Sprint 2 Save State Design Gameplay screen

Aleks Siroki edited this page Oct 1, 2022 · 3 revisions

Navigation / Quick Links

During sprint 2 we designed another set of buttons using Pixilart.

Save Game Icon Design

The concept for the Save game icon was derived from the target audience analysis and the persona average age which is 36. We believe it is because "Super Swipers" [1] observed entire evolution of the gaming industry. In addition they are the generation that have seen floppy disk drives mounted on their computers. In other words, the “floppy disc style” icon seams the only reasonable choice to communicate the meaning of the “save game” icon. Furthermore, the style of an icon could be associated with nostalgic moment that “brings in warm memories” from the past. Yet another need derived from our analysis. This means that another user group (Retro Enthusiasts who like retro games from Sprint 2) could associate our design style with the correct meaning – save game.

image

Figure 10: Design inspiration for the “floppy disk style” save icon. Left and middle images original source derived from Medium.com and Flaticon.com respectively. Right image final design of the “save game” icon made in Pixilart.

Justifying the findings through survey [Appendix Sprint 2 Survey Save Game Icon Design]

To confirm our assumptions, we’ve sent out several surveys with multiple design options to pick from. We asked users to select the illustration which they are more likely to use to save the game. The purpose of the survey was to confirm our design direction - correct association with the meaning of the icon and its purpose.

As seen in Figure 11 total of 11 responses were recorded. Findings from the survey indicate that people responded positively to the new icons from the cognitive perspective. In other words, the association with the correct meaning was almost 75% which is more accurate than in Sprint 1. image

Figure 11: findings from the survey indicate that 7 out of 11 users associate icon number 2 with the Save Game.

Once the save button design was finalized, we moved on to designing the load game icon.

Load Game Icon Design

Reflecting on the sprint 1 the Load game icon for the Atlantis Sinks game had an arrow pointed upwards, illustrating the “upload” state. However, we wanted to associate the icon with technology as opposed to loading screen or uploading into the cloud. As seen in the Figure 12, we derived inspiration from the flaticon.com. The concept was to keep the arrow (illustrate upload state) but at the same time associate it with games (load game). However, as seen in Figure 12, the arrow is very simplistic and doesn’t fit with the overall design concept in the game.

image

Figure 12: Design inspiration for the “Upload file style” load icon. Left and middle images original sources derived from flaticon.com

We improved the final design of the “load” icon by incorporating existing UI elements from the top right corner of the gameplay screen. As seen in Figure 13, the already designed “Go back” icon originally created by another team has a thicker arrow pointing upwards. We replicated the same style into our own concept.

image

Figure 13: Evolution of the “Load Game” icon. From left to right first option that didn’t match the overall style, second is the “go back” icon designed by another team, third is the final version of the “load” icon that match the style of its predecessor.

Justifying the findings through survey [Appendix - Sprint 2 Survey Load Game Icon Design]

To justify the correct design approach, we used the survey similar in structure to the “save” icon. The purpose of the survey was to identify whether the chosen design direction of the load icon accurately represents the meaning in the eyes of the players. As seen in Figure 14, the insights show that almost 60% of users clearly understand the meaning of an icon. In addition, icon number 4 has similar design style, thus we can infer that the concept of a “console or a computer” located under the arrow pointing upwards is the optimal solution to visualize the Load state.

image

Figure 14: Survey results state that the most preferable design that users associate the Load state with is a device with an arrow pointing up

In conclusion, now that we’ve identified the primary design direction for both Load and Save icons in the gameplay menu, the next step was to focus on creating the actual buttons and deploying the final user testing session to confirm our design choices made throughout the sprint.

[1] Activision Blizzard Media, “Modern Gamer Personas” https://www.activisionblizzardmedia.com/content/dam/atvi/ab-media/gamer-identity/Gallery_of_the_Gamer_-_Modern_Gamer_Personas.pdf

Table of Contents

Home

How to Play

Introduction

Game Features

Main Character

Enemies
The Final Boss

Landscape Objects

Shop
Inventory
Achievements
Camera

Crystal

Infrastructure

Audio

User Interfaces Across All Pages
Juicy UI
User Interfaces Buildings
Guidebook
[Resource Management](Resource-Management)
Map
Day and Night Cycle
Unified Grid System (UGS)
Polishing

Game Engine

Getting Started

Entities and Components

Service Locator

Loading Resources

Logging

Unit Testing

Debug Terminal

Input Handling

UI

Animations

Audio

AI

Physics

Game Screens and Areas

Terrain

Concurrency & Threading

Settings

Troubleshooting

MacOS Setup Guide

Clone this wiki locally