Link to project: https://www.behance.net/gallery/159355721/BioShock-UI-Redesign?tracking_source=search_projects%7CBioShock

As I approach completion and submission of this project, now seems a perfect time to reflect on the skills and experience I have gained over the past eleven weeks.

A key new skill I have developed through this project has been learning to use Adobe XD. When I began this redesign, I had no experience in the application, but by seeking tutorials and practicing diligently I have become proficient with the software to the point where I feel comfortable performing a wide array of tasks. This is a useful hard skill to have under my belt, as many UI designers use Adobe XD as their main tool when designing interfaces, and I hope this will prove useful as I enter industry. To extend this knowledge, I would like to take the time to learn other popular UI design tools, such as Figma, in order to become a more versatile developer.

Work on this project has also led me to conduct a great amount of research into the field of UI design in order to better understand the discipline and make more considered design decisions. This research has led me to watch a number of GDC talks and informational videos, read theoretical texts, follow tutorials, and assess contemporary game UI. I feel that all of this has contributed to a greatly increased understanding of UI/UX design, particularly in relation to games. There is always more to learn however, and I intend to continue this research for the foreseeable future, engaging with a wide variety of resources.

I feel that I have mostly succeeded in my mission to improve the usability of BioShock‘s UI. By applying much of the theory and techniques that I have learnt through my research, the redesigned screens provide a more readable, frictionless user experience. One area that this improvement can be seen is in the grouping of relevant information (similar buttons, stats, or icons) to make for more digestible information, where the eyes have to do less scanning.

Another goal of mine was to modernise the UI’s aesthetic to make the visual profile more in line with modern titles. This was largely done by moving away from the original’s skeuomorphic, semi-3D design to a more minimal, and flat design. This makes for much less visual noise and is also more representative of current game UI trends. Another key overhaul in the UI’s aesthetic was a greater embracement of the Art Deco architectural style, to make for a more elegant interface that still feels in line with the world that the player is inhabiting. I believe that for the most part I achieved this refinement in aesthetic styling, and most of the wireframes appear visually consistent.

I am happy that I was able to create animated prototypes of my UI designs and include them in my project submission. They add a great deal of life to the wireframes, and help to illustrate how the UI would be navigated in-game. By making them work using a controller, I was better able to test their usability in a console-context, and much of this testing led to great improvements in the UI’s design. Unfortunately, I was not able to make animations of all the wireframes created, and if I had more time I would have liked to prototype the hack prompt, research camera, and vendor screen.

While I am proud of the screens I was able to make within the timeframe, there are some that I had planned to create, but was unable to due to time constraints. These include: plasmid/gene selection, a credits screen, a map screen, and a hacking screen. Despite this, I feel that the quality of the redesigned interfaces contained in the projects are to a high standard, and I would not have wanted to compromise that in order to fit more in. I could likely develop this project further, outside of university and add these elements in, to make a more complete redesign of BioShock‘s UI.

Overall, this project has been an enjoyable challenge and a great learning experience. By learning a new piece of software, I have added a new skill to my portfolio. Similarly, all of the research and theoretical reading undertook has led me to further develop myself as a designer. There were definite challenges faced along the way, and some areas of the project which I would like to see expanded upon, but overall, I am proud of myself for tackling an new area of design and widening my skillset. I have also found that UI/UX is an area of design which I greatly enjoy, and would like to continue to develop myself within, possibly through more game redesigns in the future. Furthermore, through regular posts on this development blog, I have been able to critically evaluate my progress, consolidate my learning, and reflect on my role as a designer within the games industry. I look forward to taking my learnings from this project forward with me as I prepare to enter the industry.

References

BioShock. 2007. Irrational Games, 2K Games.

Main menu

As I approach the end of this project, I decided to finally create an important front-end screen that no UI redesign would be complete without: the main menu. Main menus are a vital part of any game, as they have the opportunity to create a strong first impression with the player, and skilful design can help to effectively represent the atmosphere of the game as a whole.

The original BioShock has a nicely presented main menu screen, with the game’s logo taking centre-stage, drawing the player’s eye and appropriately reflecting the nautical aesthetic of an underwater city (fig. 1). Buttons are arranged vertically below it, and the backdrop shows the game’s iconic lighthouse above water, creating a feeling of anticipation for the eventual descent. For my redesign, I wanted to present the logo in a manner that is minimal, while still reflective of the lavish Art Deco aesthetic. I also wanted to better convey the buttons as interactable objects and employ grouping in their arrangement

I started by tackling the game’s logo. To make mine look flatter, I started by drawing over the original’s, using the pen tool to draw simple linework that represents the various structures. I then wrote the title of the game in large, boldface lettering, occupying the centre of the logo (fig. 2). While there were elements that I like about this revised logo, I felt that the whole thing looked markedly worse than the existing one. It felt like a weak first impression for the player, while the original does such a good job at setting the tone. This led me to take a PNG of the logo and simply add a gold colour grading to it, to make it look appear more harmonious with the colours of the rest of my design (fig. 3). This instantly looked much better than my previous attempt and I am much happier with this direction.

Next, I created the buttons. These did not take very long as they are essentially the same appearance as those seen in the previously created pause menu. I created buttons for ‘Resume’, ‘New Game’, ‘Load Game’, ‘Options’, and ‘Quit Game’, grouping them based on utility. These were placed under the logo, which I resized and positioned nearer the top of the screen (fig. 4).

Finally, I added in button prompts in the bottom-left and placed a background (fig. 5). Much like the rest of my screens, the background was darkened for better readability.

Prototyping

With the main menu finished, I now had fifteen completed UI screens. I am happy with this as a final number, as many of the projects I have researched seem to favour quality over quantity. While I could rush to attempt other designs, I feel that the screens I have currently make for a focused, coherent project when viewed together. This also gave me more time to embark on an important element of the project: prototyping.

Adobe XD’s prototype tools allow for designers to create animated wireframes that can effectively represent the flow of UI navigation. In order to better illustrate how my UI designs would function in-game, I took advantage of this tool to create interactive, animated versions of my wireframes. I was even able to make it so that transitions were handled by controller inputs (fig. 6), which meant that users can essentially navigate through the UI using a console controller.

Creating these prototypes was a fun challenge, and I enjoyed experimenting with different animations speeds and easing’s to create the best user experience. Seeing my designs come to life through this level of interaction is a great joy, and makes them seem even more believable as in-game UI. See below for some of the finished animations, and the ‘flow’ (visual scripting) that makes them work.

Research

This week, I watched an excellent talk on using UI to reflect the aesthetics, culture, and visual rules of the fictitious world a game is set in (Chow 2018). The lecturer makes the resonant statement that “UI is an opportunity to reflect your games world and strengthen your game’s visual branding through narrative, graphics and usability” (Chow 2018). This is certainly something that I have been aiming to do with this current redesign project; using UI as an opportunity to reinforce the once decadent, lavish world of Rapture.

Chow goes on to explain the three phases of creating immersive UI: research, exploration, and iteration. All three of these are shown to be crucial to the development process. UI designers must take the time to research the world that the game exhibits, seeking visual influences, patterns, and textures that can be adopted into the UI. They must then allow time for exploration of different UI screens, creating a variety of wireframes that utilise different approaches (skeuomorphic vs flat, diegetic vs non-diegetic etc.) in order to understand what works and what doesn’t. Once a certain style has been landed on, iteration is crucial as designers refine elements such as readability, personality, and layout in pursuit of accessible UI.

References

BioShock. 2007. Irrational Games, 2K Games.

CHOW, Steph. 2018. Immersing a Creative World into a Usable UI [GDC talk]. Available at: https://www.youtube.com/watch?v=ONYmBBZiBj8 [accessed 25 November 2022].

Overhauling the typeface

After putting it off for much of the project, I finally decided to change the core font used within the redesign. This was something that I had been planning to do for a while, as while I like the clean look of the Poppins typeface, I feel that it clashes with the Art Deco styling of the rest of the UI elements. Following a talk with my lecturer, where he pointed out the same issue, I decided to overhaul the typeface.

I started by going to Adobe Fonts and browsing via tags, including ‘sans serif’ and ‘geometric’. From this search, I selected a handful of potential fonts that I thought could work within the project. After activating them, I set about creating side by side screen comparisons (figs. 1, 2 and 3). I chose to use the ‘audio log’ UI for my comparison screens as it contains the most amount of text and uses various weightings. After changing each screen and observing them side by side, I chose to use the Rajdhani typeface (fig. 4) as I feel that it has a sleek, modern styling that fits an Art Deco theme, while retaining a great amount of readability.

Having settled on a new typeface, I set about altering each finished screen, replacing the Poppins font with Rajdhani. I am very happy with how these screens look now and I feel the user experience has been greatly improved by the new typeface which allows for a much easier reading experience. There were some instances where I had to shift font weightings, sizes, and text spacing in order to make allowances for Rajdhani’s thinner lettering. Due to this, I feel that it is important to secure a final typeface early on in the development of your UI as changing it can impact your designs in significant ways.

Photo feedback

The next screen that I focused on was the research feedback for the camera mechanic. In-game, players are able to take photos of enemies in order to ‘research’ them and gain helpful perks. Each photo is graded based on quality, with contributing factors such as action shots and multiple subjects being in the image. I liked the skeuomorphism of the original screen which is made to look like a film photo, and wanted to retain that aesthetic (fig. 5).

I created a similar shape to the original, with more minimal stylisation. I ensured to replicate the thick corner borders, and very slightly rotated the entire shape to make it look more like a physical object. I then placed the image inside of it, in this case, a screenshot of a ‘leadhead splicer’ in an action shot, and made it grayscale (fig. 6).

Next, I created a large red diamond icon for the grade to be displayed on. The location of this was moved to the top left of the UI element, as it is a salient piece of information for the player. Score bonuses were also re-positioned to be right next to the grade, in order to better group the information. I then created the research progress bar, which has a very similar profile to that of the previously created enemy health bar. I changed the colour of the fill to white in order to better distinguish it from health. Finally, I placed a ‘close’ prompt below the bottom right portion of the element (fig. 7).

Research

As I spent time tackling typefaces and text arrangement, I decided to take some time to deepen my understanding of the area. I found a GDC talk by Inkle’s Joseph Humfrey on ‘Designing Text UX for Effortless Reading’ (Humfrey 2018). This talk was surprisingly engaging, and led me to consider how small design considerations can greatly affect a user’s experience when consuming text. Humfrey highlighted focus and pacing as the two pillars of effective text UX, with various elements such as typeface, animation and sectioning contributing to them. Generous margins and paragraph spacing should be employed to allow the text space to ‘breath’, while you should aim to have no more than fifteen words per line in order to prevent the player losing their location within the writing. All of these considerations come together to make it so that “ideally the player should never have to think – the words just drop into their brain” (Humfrey 2018). These lessons are applicable to any form of text presentation within games, and I will refer to them to ensure that text consumption is enjoyable for the player, rather than feeling like a chore.

References

BioShock. 2007. Irrational Games, 2K Games.

HUMFREY, Joseph. 2018. Designing Text UX for Effortless Reading [GDC talk]. Available at: https://www.youtube.com/watch?v=x4G8UNiE560&t=623s [accessed 16 November 2022].

Revisiting the audio logs

This week I decided to revisit the collectable screen for the audio logs; UI that I had previously tackled to mixed results (fig. 1). The wireframe that I created in week five of this project has a lot of design elements that I like, in particular the general layout as well as the visual identity of the playback button and progress bar. However, the buttons on the left of the screen don’t feel like interactable components, and the change in state is not clear enough to effectively highlight the current selection. As I have had a few weeks of working on the project since then, I came back to the screen in the hope that I could bring more insight and improve upon its design.

I began with the overall profile of the dialog box that takes up the majority of the screen. While I like the arrangement and general grouping of elements, I feel that the sections of my previous design were too closed off from each other, creating a feeling of disparity. To remedy this, I drew up a dialog box of the same size, and broke it up into the button selection area and the detail/transcript area. However this time, rather than using a definitive line to block them off, I created a subtler break which doesn’t quite extend to either end of the box. I already much prefer this as it implies the separation and creates a more cohesive UI (fig. 2).

I then added in the playback button, progress bar, and transcript. As I was happy with the previous design, the location and arrangement of these elements has been largely untouched. I also added in a more subtle, centred page title, and kept the diamond navigation indicators, this time placed in the top-right (fig. 3).

When adding in the selection buttons, I knew I would have to try a few variations before deciding on one which works. Below are some of the renditions created before eventually coming to a working design (figs. 4, 5 and 6). These were heading in the right direction, and I certainly felt more confident in their appearance as buttons. The small separation between each one denotes that they are individual elements in a list. I experimented with different state changes for the selected button, including colour shifts, borders, and highlights. I was still not happy with the layout and felt that I was constrained by being too similar to what the original had done.

It wasn’t until I looked back at the previous artboards created that I realised I had already figured out the look for these buttons in week six, within the vendor menu. Using that framework, I then created similar horizontal menus, separated by level name. Then, all I had to do was create a simple reel icon for the discovered audio logs. I used a question mark for the undiscovered ones (something the original BioShock doesn’t show.) Because the buttons were now visual, I moved the title text and character name over to the playback section of the screen, which I prefer as it makes that portion of the screen feel less empty than it did previously (fig. 7).

Research

My research for this week has primarily been a continuing of my engagement with previously accessed resources. I have read another chapter of UI is Communication (McKay 2013). Chapter two elaborates more on the the metaphor of UI being a ‘friendly conversation’. It details how to best present commands (the verbs of your conversation) in a manner that easily shows the user their available options without overwhelming them. As a rule of thumb, essential commands should be instantly discoverable within their given context, while more advanced actions can be located within less discoverable menus such as toolbars to allow for users to find them without being initially paralysed by choice. McKay also goes over the balance between conciseness and over-explanation within UI. Some commands are so obvious that to explain them would waste the users time and risk patronising them. On the other hand, if a command is highly contextual and could result in an irreversible action, a degree of explanation should be employed so that users know exactly what they are performing.

References

BioShock. 2007. Irrational Games, 2K Games.

MCKAY, Everett N. 2013. UI is Communication: How to Design Intuitive, User Centered Interfaces by Focusing on Effective Communication. London: Newnes.

Hacking prompt

I began this week by focusing on an important system within BioShock‘s gameplay loop – hacking and lockpicking. Dependent on someone’s playstyle, it is likely that players will spend a lot of time engaging with this UI, as it is used to hack security bots, cameras, and turrets, as well as to pick your way into valuable safes. A common gripe with the original game is that hacking is not fun – for something that is heavily incentivised to the player, it takes them out of the overall experience and requires that they engage in a minigame. While I do not intend to redesign the puzzle system, I hope that by iterating on its UI, I will be able to at least improve the overall experience of hacking.

As always, I began by looking at the UI of the original prompt (fig. 1). As with much of the rest of the game, it has a heavily stylised interface, with realistic theming and semi-3D elements. At the top of the screen, the player’s hacking related tonics can be seen, followed by a short description of the process. Below that is a vague bar that indicates difficulty, and a cluster of buttons are occupying the bottom portion of the screen. To the right is the player’s current money (relevant for using the ‘buyout’ option.) The intention with my redesign is to translate the style semi-3D style to that of my own; to group the elements more logically; to make both the tonic slots and difficulty meter more clear to the player.

Rather than have the UI take place on a separate screen, I wanted it to operate as an overlay to paused gameplay. This would go some lengths to retain player immersion. I created a decorative rectangular dialog box with a dark, translucent fill that would hold much of the information (fig. 2).

Next I created a header that displays exactly what the player is attempting to hack, in this case a Security Bot. Below, and separated by a divider, is a contextual description that explains the results of a successful hack. I then created two meters that represent the difficulty of hacking, and tonics held. By changing the difficulty bar to a defined meter, the player is able to see quantitative representation of difficulty, and better assess their options. Buttons have also been aligned to the same vertical positioning, and grouped depending on whether they will advance the player to the hacking minigame, or exit and return to gameplay (fig. 3).

Finally, I created two indicators in the top-left corner of the screen that display the amount of dollars the player has, and the number of autohack tools available (both relevant to the ‘buyout’ and ‘autohack’ options respectively.) I feel that this screen is a marked improvement on the original, and with the removal of superfluous details makes for a more accessible and easily readable piece of UI (fig. 4).

Weapon select

As my UI redesign is for the console version of BioShock, I needed to create a controller-friendly method of selecting weapons. The original has a radial menu for weapon selection which works well, however some elements are slightly unintuitive by today’s standards (fig. 5). Icons are large which adds to readability but also makes for a small amount of empty space within the structure, and grouping could be better employed – perhaps by moving the ammo count closer to the weapon wheel so that salient information is nearby.

Adhering to the Art Deco styling, all of my UI elements have featured strict angular lines, with no rounded edges or circles to be seen. This posed a unique challenge when creating a weapon wheel, as I needed to create a radial menu that fits the circular form of a thumbstick, without appearing inconsistent to my previous designs. Using the previously established diamond shapes, I created varying circular arrangements, with the shapes sat at different points on the circle (figs. 6, 7 & 8). The first arrangement was my favourite as I feel it has enough space in-between elements to make for better clarity.

From here, I began populating the radial menu with weapon icons (fig. 9). I created these by taking images of BioShock‘s weapons and drawing over them with the pen tool. It was important to use enough lines to convey the form of the weapon, without going overboard on unnecessary detail. I am happy with the results, as each weapon looks visually distinct.

Next came the placement of weapon information, including name, primary ammo counts, and secondary ammo counts. Once again, I experimented with different placements of this information before finally landing on the right location (figs. 10 & 11). With the central empty space that this radial menu affords, it was more logical to place it here than to the side. With this design, the player is able to see the weapon’s available to them, and their ammo pool for the current selection in one location without having to scan around the screen.

Finally, I added an arrow indicator to represent the direction in which the player is pushing the thumbstick, as well as a control prompt in the bottom left (fig. 12). With that, the screen was finished in its current state. I intend to animate it later down the line, along with some of my previous designs.

Research

Looking for further reading within the world of UI/UX design, I searched online for recommended resources. One book that came up on a lot of lists was the textbook UI is Communication (McKay 2013). Luckily the book was available online through the university’s library, and I have begun reading it. The first chapter goes over ‘communication design principles’, arguing that human-to-computer interaction should be no different from a human-to-human conversation. McKay argues that UI interfaces should be “polite, respectful, and intelligent” and “feel like a natural, professional, friendly conversation” (2013: 61). To this end, to design effective UI’s it is crucial to understand effective communication. By treating each design as a conversation, UI/UX designers can ensure that all user interactions are efficient and intuitive.

References

BioShock. 2007. Irrational Games, 2K Games.

MCKAY, Everett N. 2013. UI is Communication: How to Design Intuitive, User Centered Interfaces by Focusing on Effective Communication. London: Newnes.

List of figures

Figure 5: Jada Griffin. 2017. BioShock weapon select menu screenshot. NerdReactor [online]. Available at: https://nerdreactor.com/2017/05/15/prey-vs-bioshock-5-comparisons-make/bioshock-weapons/ [accessed November 2 2022].

This week saw me delve into the world of vendor UI design, a task which proved to have its own unique challenges. I also created a simple ‘level select’ screen to be accessed in the bathyspheres.

Shop menu

Within BioShock, vendors are an important interaction for the player as they allow them to purchase useful healing items, ammo, and weapon upgrades. As the player is often purchasing with a very limited currency, the design needs to be efficient and intuitive so that they have a good understanding of what they are spending their money on.

Looking at the design of the original’s vendor screens (fig. 1), I can see multiple areas for iteration. Item titles are not centred properly to their respective buttons. There is also a great deal of blank space to the right side of the screen, which could be better utilised. This is also where the currency count is located, the most pertinent information within this UI. As players read left-to-right and top-to-bottom, I feel a better location for this would be the top-left, where there is no risk of players missing it.

I took some time to research shop UI’s within more modern games to see if I could find current trends, or gleam any inspirations. The first I looked at was for Destiny 2 (2017), a game which has received a lot of deserved praise for its intuitive UI (fig. 2). The vendor UI uses grouping to organise elements pertaining to different systems, such as ‘faction rewards’, ‘miscellaneous’, and ‘daily bounty’. I like the horizontal arrangement of items in this context; it is much more instantly scannable and does not require the player to scroll to see all the elements they have access to.

Days Gone (2019) shares some similarities in its vendor UI presentation (fig. 3). Horizontal grouping is used, with clean icons and large text denoting what each item is. Player currency is located at the top of the screen in a large font size that is very hard to miss. I like that the cost of each item is shown in a different colour, highlighting the important information.

Taking both of these designs into account, I created my own vendor screen. I started by looking at the items generally available to players through in-game vendors and breaking them down into groups. I would argue that there are three groups of items – healing items, EVE replenishing items, and ammo. I intended to arrange my vendor UI around these groups for clarity. I then created three horizontal sections for these groups, with headers above. I experimented with a variety of shapes for the item slots, including diamond shapes and more elaborate line work. In the end, these all proved to get in the way of accessibility and simple squares proved to be the best fit (fig. 4). I created some simple corner borders around one slot to indicate which one the player had selected.

I enjoyed making simple icons for each item type, including bandages, cakes, coffee, soda and different ammunition types (fig. 5). My goal was to flatten and minimalise the original’s item icons to make for a more modern appearance which retains high readability. I am happy with the aesthetic I arrived at.

I then created a dialog box on the right hand side to display more information about the selected item. This box displays the item’s name and price, a brief description of it’s utility, and how many the player currently holds (if applicable). A currency count was added to the top-left (the first place user’s tend to scan from), and button prompts were placed below the dialog box. The name of the current vendor is located in the bottom left of the screen in a large, heavily-weighted font.

Location select

The next area of UI I tackled was the level/location select available to players when using a bathysphere. While an infrequently used screen, the original design is nicely themed to be aesthetically linked to the in-world Rapture Metro system. I wanted my design to be similarly themed in line with a metro system, this time taking the appearance of a rail map (fig. 8), to visually indicate the distance that the player is travelling between locations.

Using the pen tool, I drew an angular path across the screen, moving up and down in 45 degree increments, to represent the main line of the metro system. At regular intervals, I placed a diamond on the path, each one representing one of the eight accessible locations. These were then labelled accordingly, with the currently selected level having a filled-in diamond and fully opaque title. To add some more believability to the rail map, I added some small paths diverging from the main line, to indicate other locations accessible via the metro. Final touches were then added, including a ‘Rapture Metro’ title, a subtitle directing the player to select a destination, and button prompts seen at the bottom (fig. 9).

Research

In an attempt to increase my proficiency with my current toolset, I have started taking an online course on using Adobe XD (Scott 2022). Taught by a professional UI/UX designer, the course goes through the application in great detail, with practical tasks helping to cement the knowledge. The lecturer also takes time to describe how the design process works within a professional context, which has helped me to gain a better understanding of how this form of design works within industry. I am a quarter of the way through the 9.5 hour course and have already learnt some great keyboard shortcuts and less obvious features that have helped improve my workflow. I look forward to delving further into the course, where future lessons promise to cover animation, prototyping, and working in conjunction with other Adobe products.

References

BioShock. 2007. Irrational Games, 2K Games.

Days Gone. 2019. Bend Studio, Sony Interactive Entertainment.

Destiny 2. 2017. Bungie Inc, Activision.

SCOTT, Daniel Walter. 2022. ‘User Experience Design Essentials – Adobe XD UI UX Design’. Udemy [online] Available at: https://www.udemy.com/course/ui-ux-web-design-using-adobe-xd/ [accessed 26 October 2022].

List of figures

Figure 2: 2017. Destiny 2 vendor UI screenshot. Interface in Game [online]. Available at: https://interfaceingame.com/screenshots/destiny-2-faction-reward/.

Figure 3: Jake Green. 2019. Days Gone vendor UI screenshot. USgamer [online]. Available at: https://www.usgamer.net/articles/29-04-2019-days-gone-weapons-best-weapons-weapons-list-can-you-store-weapons

Figure 8: BBC. London Underground Map. Available at: https://www.bbc.co.uk/london/travel/downloads/tube_map.html [accessed 29 October 2022].

Alongside my team project work, this week I have been steadily creating more UI screens and conducting personal research to better my understanding of UI/UX design.

Quit game screen

As I made a pause menu last week, I decided to create the quit game screen as a continuation. The original has a pleasant aesthetic, with simple, intuitive design (fig.1). This meant that not much needed to be iterated on, however I did of course need to adjust the design to be in keeping with my style. As the original’s ‘quit game’ button appears overlaid on the pause menu itself, I feel it creates unnecessary visual noise and clutter. For my design I would take the player to a separate screen with less distractions. I also felt that the text is not properly aligned with the center of the element, making for some noticeable empty space.

With these intentions in mind I began designing my rendition. The original shape I created resembled the ‘new objective’ element created in week three. While I feel this shape worked in its prior implementation, it is too asymmetrical for the purposes of a dialog box (fig. 2). What I created needed to better cater to player’s expectations, likely taking a rectangular shape.

The next version I made was very simple – simply a rectangular dialog box, with button prompts in the bottom center (fig. 3). As a wireframe, it is much more readable, and I used it as a basis to begin building on. I added more geometric lines and details, allowing myself to experiment with different shapes, while adhering to horizontal symmetry. Below are some of the iterations created (figs 4 & 5).

Eventually I landed on a design I am happy with (fig. 6). It feels lavish enough to be considered Art Deco, while not detracting from readability and efficiency. It will also likely serve as a template for further dialog boxes that I design for this project.

Audio logs

I have also begun creating the mock-up for the radio message collectible screen within the game. Audio logs are a central part of the BioShock experience, and the primary method by which narrative is delivered. Because of this, I want to make sure that this screen is fully intuitive so that players can find and listen to desired audio logs with little effort. The original menu feels slightly messy, with the centered text making for a lot of empty space to either side (fig. 7). Once clicked on, an entry takes you straight to another panel where it plays the audio alongside a written transcript. For my version, I would like to keep entries and transcripts on a single page, to minimise navigation.

I began with the general outline of the panel, creating a centred rectangle and splitting it into three subsections; one for the page title, one for button selection, and one where the transcript and play/pause button will be located (fig. 9).

For the title section, I added some angular lines, allowing some to overflow from the base shape. I also added four diamonds to the top left in order to represent which page the player is on in relation to others (fig. 10). Buttons were stacked closely on top of each other within the left-hand portion of the screen. Alongside the title and character name that the original’s UI displays, I also ensured to include the level it was obtained in. A filled in diamond represents which entry is currently selected (fig. 11). The rest of the panel is taken up with a transcript of the audio log, a progress bar, and a play/pause button (fig. 12). I really like the overall profile of this area and I feel that the button and progress bar are optimal sizes. The text feels slightly too large and could likely be decreased.

Overall, while there is a fair amount that I like about this screen, I feel there is room for improvement. The overall navigation could be made more intuitive, and the buttons could be clearer, especially when highlighting a change in state. This will likely be a design that I come back to for further iteration.

Research

Next week I intend to begin designing some of the vendor screens for the game. This requires presenting multiple purchasable items on one screen, without overwhelming the player with choice. To help prepare myself for this I watched an interesting video essay on inventory UX design (Design Doc 2019). It showed the history of inventories in games and highlighted how they have evolved over the years. It stressed the point of making inventories feel intuitive, stacking multiple items, and allowing players to perform common actions with great ease. Ocarina of Time (1998) was brought up as an example of bad inventory design as within the Water Temple you have to frequently cycle between inventory pages to equip and unequip steel boots that allow for traversal. This could have been easily remedied by making the boots more easily accessible to save on time spent in the menu.

I have also been reading Lost in a Good Game (Etchells 2019), a memoir and exploration of the psychological effects (good, bad, and unknown) of video games. Author Pete Etchells is a professor of psychology and science communication and provides fascinating insights and anecdotes about the powerful healing abilities of engaging with video games. Game design is largely about understanding the psychology of players, and the more I can engage with this subject field the better placed I will be to understand and utilise psychology within my design. I look forward to delving deeper into this book.

References

BioShock. 2007. Irrational Games, 2K Games.

Design Doc. 2019. Inventory UX Design – How Zelda, Resident Evil, and Doom Make Great Game Menu UX [YouTube video]. Available at: https://www.youtube.com/watch?v=5_3BUU9ZmNo [accessed 21 October 2022].

ETCHELLS, Peter. 2019. Lost in a Good Game. London: Icon Press.

Ocarina of Time. 1998. Nintendo, Nintendo.

Having made a good start at redesigning the HUD, this week I have begun to tackle the menu systems of the game. Read on for my breakdown of each screen, and the research I have conducted to aid me.

Load save menu

For the load game screen, I wanted to create a sleek, readable menu, with each slot holding all information required at a glance. Looking at the original’s load game menu, I think it does a good job of displaying information, showing the exact time saved, the current level, and whether it is an autosave or not (fig. 1). The only piece of information I wanted to add to my version was the length of time played in hours, minutes and seconds. I always find it useful when a gameplay timer is included, and it is interesting to see exactly how long your playthrough has been thus far. I also feel that it makes it slightly easier to pinpoint which save you want to load into.

For my rendition of the screen, I began with the basic skeleton of the original’s (with the top-centre title, vertically stacked buttons, and button prompts in the bottom-centre). I brought the title down slightly lower and added a simple divider below to separate it from the focus point of the screen (fig. 2).

I replaced the rounded semi-3D button design, with my own flat, angular bars that are stylistically consistent with the health bars on the HUD. I arranged the text information into three distinct groups, spacing them out evenly from left to right. To the far left is the time at point of save, both the date and the exact clock time. The former has been written in a heavier weighting than the latter, to create a visual hierarchy that draws attention to the date first as it is likely to be the most important piece of information. In the centre of the button is the name of the level the save was created within. To the far right is the playtime, and information on whether the save was manual or automatic, again employing a visual hierarchy with font weighting. While there is quite a lot of information held within each slot, I ensured to use a small font size and wide buttons to create a large amount of space between each group (fig. 3).

For the finishing elements, I created some simple button prompts that tell the player how to select an option, and back out. To the currently selected button I added a thicker outline, change in colour, and angular brackets to either side in order to clearly reflect the change in state. I added a subtle transparent gradient to the bottom of the buttons to better show that it is scrollable. Finally, I replaced the original’s dark background, with a dimmed screenshot of Rapture underwater, as I like the blue hue it gives the whole screen (fig. 4).

Loading screen

Having made a load save screen, it made logical sense to then move on to the actual loading screen – what the player will see while the game loads a level in the background. To help me better visualise my plan, I looked at examples from other games in an effort to gleam some techniques.

The loading screen for Dishonored 2 (2016) has a stylised feel, with the UI’s aesthetic heavily reflecting the world that the game takes place in (fig. 5). Messy, bleeding ink represents the grimy ‘whale-punk’ environment, and shattered glass belies it’s class divisions and political upheaval. The information presented to the players is neatly grouped; mission title and objective sit at the top left, and navigable hints are arranged in the bottom left, directly across from a simple load bar and location name. As evidenced here, in level-based games it is important that the loading screen shows you the area you are entering, and gives some information about the place.

The next loading screen I looked at was for Final Fantasy XV (2016) (fig. 6). There is a great deal of restraint shown here, with the only information displayed being the location name, a brief description, and a loading wheel. Once again, an image of the locale is displayed, giving a visual description of the area, allowing for the description to be kept very brief. The use of black letterboxing is effective, as it creates a cinematic feel and creates anticipation for gameplay. I feel that the loading wheel is too far towards the center, creating a strange feel of empty space in the bottom right corner. This could be easily remedied by moving it to the bottom right of the screen.

Taking what I learnt from these other effective load screens, I created my own for the Fort Frolic level (fig. 7). I used an atmospheric screenshot of the area that captures the look and feel of the space, and overlaid black letterboxing to create that cinematic feel. I then wrote out the location title, and the description below it. For the description, I chose an advertisement that plays on the PA announcement during the level, as I feel it helps retain verisimilitude while also effectively describing the location. Finally, I added a loading bar to the bottom right of the screen. I feel that this screen reads nicely from left to right, and leaves enough empty space to allow the player to get a full view of the image.

Pause menu

The final screen I created this week was a reworked pause menu. The original one functions well, although I feel that there is an unnecessary number of UI groups on screen (fig. 9). When looking at it, I feel that the money, ADAM, and director’s commentary could easily be grouped together and make the whole screen easier to read. I also think that despite black ‘cut-out’ overlay of buildings being effective in raising the contrast for the lower UI elements, it also gives the overall interface a cheap feeling that I would like to remove.

For my rendition, I began by taking a screenshot of gameplay and adding darker hue with background blur to soften hard edges and make sure the player’s eyes are focused on the UI. I then recreated the buttons, using the staple shapes that I have already used multiple times before. When arranging these buttons, I chose to separate out certain groups that pertain to different actions in an attempt to make the selection process a fraction easier. Resume is located at the top; generic actions such as saving, loading, and the options menu are the next group down; both quit actions take up the bottom two spaces. The ADAM, money, and director’s commentary checkmark are vertically arranged and placed on the left. The design of these elements is very similar to that of the weapon display found on the HUD, in order to keep visual consistency. I like this design as I feel that information is kept clear and visually consistent (fig. 10).

I struggled with the layout for this screen, going through about seven different arrangements before landing on one that worked well. The other layouts felt less intuitive for a variety of reasons, including the alignment of certain items being inconsistent, and the feeling that more importance was given to one UI group over the other (figs. 11, 12 & 13).

Research

Research this week largely took place on the ‘Interface in Games’ website (2022). This site hosts a large collection of UI interfaces, screenshots and videos from a wide array of AAA and indie titles. Games can be explored by genre, and specific filters can be applied such as ‘in-game’, ‘menu’, or ‘overlay’ allowing users to find the exact UI screens and elements they are looking for. I have found it to be a great tool to use when searching for inspiration and it has helped me to better identify UI patterns that players are accustomed to expecting. I have also been using ‘Game UI Database’ for the same purpose (2022).

References

BioShock. 2007. Irrational Games, 2K Games.

Dishonored 2. 2016. Arkane Studios, Bethesda Softworks.

Game UI Database. 2022. Available at: https://www.gameuidatabase.com/contribute.php [accessed 12 October 2022].

FINAL FANTASY XV. 2016. SQUARE ENIX CO., LTD., Square Enix.

Interface in Games. 2022. Available at: https://interfaceingame.com [accessed 12 October 2022].

Further HUD mock-ups

Following on from last week’s initial HUD mock-up, I have continued to create more in-game UI elements, including the health and EVE stats, loot prompts, enemy health, and objective notifications. See below for the finished mock-ups (figs. 1 and 2) and read on for my process in creating them.

As with any successful interface, I want my UI rework to have a distinct, and consistent style that runs throughout. As already evidenced in the weapon display, I think that the use of diamond-shaped icons and angular lines will be core to this style and keep the visual profile close to that of the Art Deco movement.

I started by creating the health and EVE bars. Looking at the original UI, I like how the two are in a staggered layout, with the above bar coming further out than the bottom one. I decided to keep this structure but try to design for a more elegant appearance. I used diamonds as a basis for the icons and health kit/EVE hypo counts, with sleek rectangular bars proceeding outwards, capped out at a slanted 45-degree angle. These bars were each further detailed with thin, half-diamonds to add some more visual intrigue to the elements. I chose flat, muted colours for the fills, to prevent them from distracting the player during gameplay.

Looking at the loot prompt for the original game, there is a lot that I like. I think that the placement is logical, and I like that the UI does not take the player to another screen, rather keeping them absorbed in the game world (something Bethesda would later adopt in Fallout 4 (2015).) I still felt that it could be slightly smaller, and made to look flatter, as the use of semi-3D UI only serves to break immersion and distract the player from the game world. Keeping this in mind, I designed a loot prompt that takes up less screen space, trims superfluous information, and adheres to the style that I am following. Along with readable icons, I have also opted for simple colour coding to telegraph to the player what each item does (red for healing, blue for EVE, brown for money.)

The next HUD element that I reworked was the enemy health bars that appear on screen when engaging in combat. In the original’s HUD, enemy health takes the form of a large crescent occupying the centre top-half of the screen. I feel that this UI element is by far one of the most distracting in the game and was in need of some revisions. To start with, I knew I wanted a smaller enemy bar, and I also wanted to include the name of the enemy it belonged to, as there are times when multiple enemies are on screen, and it would be useful to know exactly who you are shooting at. In order to achieve this minimal appearance, the crescent would have to be turned into a straight bar, and likely moved to the top-centre of the screen. The finished result is similar to that of Skyrim‘s (2011) enemy health bars, while in-keeping with the Art Deco theme. Just like the player health bar, I added half diamonds to either end in order to add more decorative flourish.

The final piece of HUD UI I created this week was the objective notification that alerts the player to their next goal. This UI piece is only on-screen for a limited time, so my goal was to create something that is visually distinct from the rest of the HUD and will draw the player’s eye to the important information. I went through multiple renditions of this, ranging from lavish designs to simplistic ones. I feel that what I ended up with was somewhere between those two extremes. I like the filled in diamond sat above the ‘new goal’ text, which serves as an anchor for the element and draws the player’s eye. I would like for this diamond to be animated, possibly flashing in and out of view, for greater visual draw.

Spiritsweeper UI

I have also been undertaking UI work within my uni team’s game. We have recently had a large pivot in the game’s design, moving from an action-adventure game to a cosy exploration game. The gameplay is very different, and the UI and HUD will have to reflect that.

Our artist, Lou, created an initial illustration of an interior space that the player will be tasked with cleaning, which I was able to use as a base for my HUD mock-up. The progress bar is shaped like a large broom (the player’s primary tool in-game), serving as a piece of meta UI. I also created some contextual button prompts that will allow the player to understand the actions available to them at all times. While simple, this mock-up helped the team to better visualise the look of the game’s interface at this early stage of pre-production, and gave me some more experience within Adobe XD.

Research

My research for this week has largely been centered around an exceptionally useful GDC talk named ‘Art Direction for AAA UI’ (Younas 2018). Within the talk, Younas gives a broad look at the many principles of UI/UX design and their applications within games. The focus on AAA games was especially helpful as BioShock is a title that fits within that bracket.

Gestalt Theory was presented, which has a number of principles pertaining to the idea that “an organized whole, is perceived as greater than the sum of its parts” (Kurt Koffka). Using this, we can create UI that is understood holistically, with the player being able to pick up on patterns and symmetry and subconsciously grouping together elements that are in close proximity. In the case of BioShock, by placing both the health and EVE bars close together, the player is able to group the two together into one more manageable UI piece. In a more rudimentary sense, it also helps to limit the amount of time a player’s eyes are spent moving around the overlay to seek out information of similar pertinence.

Younas also provided some usability principles that apply to almost any game’s UI, which will prove so indispensable that I plan to print them out and stick them above my monitor. It is important to limit screens to seven or less unique UI groups, so as not to overwhelm the player. Menus should not be more than three levels deep, for ease of navigation and allowing the player to quickly return to the root. Buttons, sliders and checkboxes should largely look and function how players expect them to, and pages should flow in a hierarchy going from top-left to bottom-right (how the Western brain reads information.)

He also spoke in-depth about the importance of using a grid for layouts, considering multiple aspect ratios, utilising negative space, carefully selecting typography, understanding shape language and colour psychology. This was a fantastic talk, and one I will be revisiting in the future.

References

BioShock. 2007. Irrational Games, 2K Games.

Fallout 4. 2015. Bethesda Game Studios, Bethesda Softworks.

The Elder Scrolls V: Skyrim. 2011. Bethesda Game Studios, Bethesda Softworks. 

YOUNAS, Omer. 2018. Art Direction for AAA UI [GDC talk]. Available at: https://www.youtube.com/watch?v=kjbxxbmJCh [accessed 13 October 2022].

Practicing Adobe XD

This week I have been continuing to learn and practice using Adobe XD, experimenting with the application’s tools and making some mock-ups. I am currently working on a group project, for which we are in the early stages of pre-production for a game. As part of this pre-production I created a mock-up for an inventory/stat screen (fig. 1).

I made an effort to ensure that the presentation of the UI was in keeping with the cosy aesthetic of the game we were making. Our concept centers around the collection of magic plants to empower your player in useful ways. To present this, I created three separate stacks, each representing a different type of plant, along with an icon for the stat they affect. Next to that is the current elemental effect applied to your weapon.

Further to the right is the ‘stats’ panel that displays player health, stamina, and critical hit chance, as well as the description of the weapon’s effect. As a side note, I was able to use the prototype feature to set up a controller so that upon pressing the R1 button, the stat panel slides off screen (fig. 2). Pressing it again will bring the stat screen back into view. In both instances, I made it so that the rest of the UI scales and move in order to make space. While this is a small feature, its inclusion means that I can create some functional prototypes of working UI to further demonstrate how my designs would work.

Along the top of the screen are UI pieces displaying carry capacity, current objective, and amount of currency. These pieces all had a drop shadow applied to them in order to add some more depth to the UI, and make the text more readable.

BioShock UI notes

Whilst BioShock (2007) is a game I know inside out, I wanted to dip back into it, this time with an eye towards the UI design. While playing I made some notes on it’s strengths, weaknesses, and possible improvements. Below are some examples of what was written.

• The UI here is not poorly designed by any means, more so a product of its time.
• The quest arrow at the top is iconic for how distracting it can be, there must be a subtler implementation of this idea.
• Multiple fonts are used for different pieces of information, this detracts from overall readability and makes the UI feel less cohesive.
• HUD elements look semi-3D, almost like they should be diegetic, makes for more visual noise and could be argued that it breaks immersion.
• I like the general grouping of HUD elements, it reads clearly from top-left to bottom-right.
• UI in general is a blend of Art Deco, and steampunk aesthetics, without fully committing to either. I would like to try and double down on the Art Deco half of this combination.
  • The sleek, clean lines of the style would afford a more minimal and immersive overlay.

In summary, BioShock‘s UI is far from horrible, but it certainly feels dated by today’s standards. For this reason, I feel that it is ripe for a redesign, with the challenge being to retain the distinct feel and usability, while streamlining and modernising the overall profile. To achieve this, a key decision I have made is to create UI that fully commits to the Art Deco aesthetic.

Early UI element concepts

Whilst I had been spending so much time in Adobe XD, I decided to create some mock-ups for a HUD piece that might fit with my concept of an entirely Art Deco inspired UI (fig. 3). I began by creating variations of a UI element that would display the currently selected weapon, alongside ammo-type and ammo count. These were made utilising Art Deco’s recognisable angular, perpendicular lines.

I am pleased with a number of these designs, in particular, the middle left. I feel it adds enough flourish and ornaments, without detracting from overall readability. I initially created the piece using a circular base shape (seen in the top left) but quickly abandoned this idea as it feels incongruous to Art Deco’s sensibilities.

Taking the UI element, and overlaying it onto a screenshot of gameplay, I can already see its utility within the context of the game (fig. 4 ). In comparison to the corresponding HUD piece of the original (fig. 5 ), I feel that it makes for a more streamlined, unobtrusive piece of UI.

There are already some definite improvements to be made. I feel that the element could be made smaller, and I still need to include representation for the alternative ammo types. I look forward to filling out the rest of the HUD next week.

Research

To better ground myself in the era and style I am aiming for with this UI, I wanted to gain more understanding of the Art Deco movement. To help with this I watched a short YouTube documentary on the style (Curious Muse, 2021), taking notes of anything that could apply to my project. Key takeaways from this were the optimistic and hopeful feelings it aimed to instill, in response to the economic turmoil of a post-WW1 Europe. The movement had an eye to the future, intending to reflect aspects of modernity and prosper, representing this through the use of angular, perpendicular lines . Translating this style into UI design will entail carrying these core concepts over, something I have already begun to do in my concepts.

References

BioShock. 2007. Irrational Games, 2K Games.

BioShock 2. 2010. 2K Marin, 2K Games.

CURIOUS MUSE. 2021. Art Deco in 9 Minutes: Why Is It The Most Popular Architectural Style? [YouTube documentary]. Available at: https://www.youtube.com/watch?v=ZHF7vnbZD8Q [accessed 30 September 2022].