Design Process of the UI in games
UNIVERSITY OF BOLTON
LITERATURE REVIEW
Design process of the user interface in
games
James Drake - 1202333
GAM6000 - Research Methods
Distribution: Examining tutors of the University of Bolton
Literature Review
ACKNOWLEDGEMENTS
I would like to thank Alexandria Neonakis, Lead UI / UX designer and artist at Naughty Dog
for her support and guidance as well as David Ballard for providing me with the
opportunity to talk with her.
Further appreciation must also be shown to the author of Level Up, Scott Rogers for his
insight into user interface design from a ground level as well as Stephen J. Eskilson, author
of Graphic Design: A History. (Both books can be found at heading 5.0 – Further Reading
Material)
Further appreciation must go to Richard Merrick, UI / UX Designer at Rebellion Studios
(Sniper Elite 3), as well as Liam Wong (Graphic Designer / 2D Artist) of Ubisoft Montreal
(Far Cry 4) for their continued help and direction with reading material and advice on
industry practises.
ABSTRACT
Page 1
Literature Review
This document outlines some of the elements attributed with user interface design and
designer motivations on approaching design decisions
CONTENTS
Acknowledgements............................................................................................................ 1
Abstract............................................................................................................................. 1
1.0 - Introduction.................................................................................................................. 3
1.1
Terminology.............................................................................................................. 3
User interface (UI).......................................................................................................... 3
User experience (UX)...................................................................................................... 3
Loot Rush........................................................................................................................ 3
2.0 – Literature..................................................................................................................... 4
2.1 – Diegetic..................................................................................................................... 4
2.2 – Meta.......................................................................................................................... 5
2.3 – Spatial....................................................................................................................... 6
2.4 – Non-Diegetic............................................................................................................. 7
2.5 – What is considered bad UI........................................................................................ 9
2.6 – UI for touch devices................................................................................................ 10
2.7- User Experience meets world immersion....................................................................11
3.0 - Summary.................................................................................................................... 12
4.0 - Bibliography............................................................................................................... 13
4.1 – Figure Referencing..................................................................................................... 14
4.2 – Game and Media References...................................................................................... 15
5.0 – Further Reading Material............................................................................................ 16
Page 2
Literature Review
1.0 - INTRODUCTION
This report consists of presenting a link between the user interface design and the
philosophy of such elements in a game. This involves: preliminary research, iterative
design, art tests and logical problem solving (from the perspective of the player).
Fig 1 – UI Trello Card
Fig 1 shows the tasks related to this literature review that is assigned to a team member in
Trello. This includes: research, design, iteration and player related problem solving.
This document is the second assignment for the Research Methods module; its purpose is
to highlight further research into user interface design within games and the processes
involved. This research will be applied to the overall project.
Before discussing and exploring the concepts of user interface design it seems foremost
relevant to define certain terminology.
1.1TERMINOLOGY
During the course of this report references will be made to terminology outside the norm.
USER INTERFACE (UI)
“UI, or User Interface, refers to the methods (keyboard control, mouse control) and
interfaces (inventory screen, map screen) through which a user interacts with your game”[
CITATION Qui13 \l 2057 ].
USER EXPERIENCE (UX)
Jakob Nielsen defines the user experience as “An exemplary user experience is to meet the
exact needs of the customer, without fuss or bother”[ CITATION NieNA \l 2057 ]. Erik
Flowers reiterates Neilsen’s notion by defining UX as “The Intangible design of a strategy
that brings us to a solution”[ CITATION Flo12 \l 2057 ].
LOOT RUSH
Loot Rush is the game for Research Methods, GAM6000 Dissertation project of Team 5.
2.0 – LITERATURE
Page 3
Literature Review
One of the foremost responsibilities of a UI designer is to deduce what style of design
works best for the project. This can be broken down into four primary categories: Diegetic,
Meta, Spatial and Non-diegetic. (Stonehouse, 2014).
2.1 – DIEGETIC
Diegetic UI is a mixture of feeding the player information while constricting itself to
formats that feed the games narrative. Stonehouse defines this as “ UI that is fiction or
geometry that the player interacts with”. He also makes the point that this can sometimes
be cumbersome to the player with it having “ slow response times”[ CITATION Sto14 \l
2057 ].
An example of a game that uses this style is Far Cry 2 (Ubisoft, 2008) In Far Cry 2 the
player is required to explore the open / sandbox world to acquire variations of in-game
economy. The only process that enables the player to accurately find said economy is by
accessing the map and GPS locator. [See Fig 2]
Far Cry 2’s map and GPS system matches the “slow response times” that Stonehouse
referred to. The player has to constantly pick the geometry out of their pocket and place it
back to access the map and GPS.
Fig 2 – Far Cry 2 (Ubisoft Montreal, 2008) Map and GPS
Due to the quick nature of Loot Rush it seemed out of place to give it a UI system that is
generally reserved for narrative driven games with a focus on immersion as opposed to
pick up and play arcade style.
2.2 – META
Page 4
Literature Review
Meta UI is a middle-ground between diegetic and non-diegetic UI. The Call of Duty
franchise uses this format for health. [See Fig 3]
Fig 3 – Call of Duty (Infinity Ward, 2007), Damage
Indicator
The purpose of this is to eliminate as much static UI as possible. Instead of having a health
bar the player’s screen will flash red and fade in and out when damage is taken. This
effectively and efficiently negates the need for a health bar while still enforcing the
game’s narrative of war, damage taken, danger etc. (It’s also worthy to note that the
colour red is almost always used in instances of danger).
In terms of Loot Rush it would make thematic sense for the act of loot collection itself to
contain aspects of meta UI while also paying attention to colour theory and psychology.
For example, using an armour pick up as a yellow aura as opposed to something physical
such as the player attaching armour geometry.
Scott Rogers states a similar idea for a game to achieve a minimalist look. Design should
consist of “glows or attention-drawing effects on items to make them stand out to the
player” He goes on to say designers should “opt for full screen-sized effects over smaller
or subtle ones. It never hurts to overemphasize .”[ CITATION Rog10 \l 2057 ].
2.3 – SPATIAL
Spatial UI is a system that would accompany Loot Rush well, as its core principles are
“breaking the narrative in order to provide more information to the player than the in
game character should be aware of” (Stonehouse, 2013).
Page 5
Literature Review
Fig 4 – Splinter Cell Conviction spatial UI
Figure 3 shows how pertinent information can be signaled to the player while not deterring
from the narrative. Stonehouse states that “spatial elements can be beautiful pieces when
they work with the geometry of the world”.
While film being an entirely different art form the use of spatial interfaces works equally as
well but without the need for player movement or human participation. Figure 5 shows
Sherlock (BBC). To make his thought processes understandable and more intriguing to the
viewer they are displayed in such a manner.
Fig 5 – Sherlock uses of spatial UI to convey information
A spatial approach for Loot Rush seems more than appropriate but audience demographic
becomes an opportune focus point with this approach.
UI Designer of Naughty Dog, Alexandria Neonakis says that “ dependent on the project.
Cinematic AAA console games require minimal, clean UI. Kids games need readability and
ease of comprehension to come first, so a subtle clean UI isn't necessarily the right
choice”[ CITATION Neo14 \l 2057 ].
Page 6
Literature Review
Depending on the age range and varying cultures the game will be played, it’s essential to
focus on how said cultures interpret wording. When thinking about age it’s of the up most
importance to ensure it eligible to the reader.
Apple’s developer guidelines suggest that developers “ Use terminology that you’re sure
your users understand”[ CITATION App14 \l 2057 ].
2.4 – NON-DIEGETIC
Non-Diegetic UI is where the UI stands (generally) on a 2D plane and no in-game
characters are aware of said UI.
Games requiring instant response to the player’s action with a high ratio of information
being given at once generally adopt this form of UI. League of Legends (Riot Games, 2009)
uses this form of interface.
Fig 6 – League of Legends UI screengrab
“Elements have the freedom to be completely removed from the game's fiction and
geometry and can adopt their own visual treatment” (Stonehouse, 2014) this sort of
philosophy is echoed by Desi Quintans (The Good and Bad in UI, 2013) where he states,
“A good UI tells you what you need to know, and then gets out of the way.” (Quintans,
2013).
Page 7
Literature Review
While League of Legends is defined as a MOBA (Multiplayer Online Battle Arena) the
similar style of UI is often seen in MMO (Massively Multiplayer Online) games where the
player needs immediate information given to them at all time. Alexandria Neonakis (UI
Designer, Naughty Dog) supports the argument further by saying;
“MMO's require a lot of information on the screen at exactly the right time. So those
would be all about organizing a lot of elements for fast recall”[ CITATION Neo14 \l 2057 ].
With a game like Loot Rush the player needs to have constant awareness of their cooldown
timers and other usable abilities at a glance. This sometimes might be better suited to
having UI elements directed on the players avatar / character as opposed to a surrounding
2D HUD (Heads up display) plane.
An example of this would be League of Legend’s champion Leona.
Fig 7 – Leona using W ability in League of Legends
Whenever the player hits W to engage Leona’s shield the player is shown a circle of light
around the champion instead of the surrounding HUD elements, this enables to the player
to keep focused on the action instead of looking away and potentially missing something.
With Loot Rush a concept was to display a golden key above whichever player picked it up,
this way the player wouldn’t have to look around the HUD to check, their eyes could stay
focused on the level and continue with the intended experience.
2.5 – WHAT
IS CONSIDERED BAD
UI
Page 8
Literature Review
To create a strong UI one must first understand what makes a bad one.
Daniel Burns defines a bad UI as “Unresponsive, Unintuitive, Inconsistent design and
lacking to zero direction”[ CITATION Bur14 \l 2057 ].
Desi Quintans makes an example of Oblivion when focusing on poor UI decisions, noting
that “It’s a combination of wasted space, improper scaling, and inappropriate
controls”[ CITATION Qui13 \l 2057 ].
Fig 8 – Oblivion inventory screen
The mention of improper scaling and wasted space go hand in hand when referring to
Oblivion’s (Bethesda, 2006) inventory system. For a scene / menu that is dedicated to the
players inventory only 21.7% of the screen space is actually dedicated to controlling the
inventory [see Fig 9]
Fig 9 – Oblivion inventory screen with percentage ratio
This sort of screen dedication implies poor foresight when thinking of console players
playing with a controller and not a mouse and keyboard. With only 6 items to see at a time
it’s incredibly cumbersome for console players to navigate such an interface. And if we
remember back to Anthony Stonehouse stating that “ slow response times” can frustrate
Page 9
Literature Review
the player as well as looking at Daniel Burns’s core list of bad UI principals and seeing
“unintuitive “in the list you can see how Oblivion’s (Bethesda, 2006) combination of the
two in the inventory system can lead to a negative experience.
2.6 – UI
FOR TOUCH DEVICES
With some thought being given towards Loot Rush working on a touch device it’s
important to observe trends within UI design on such a device, devices including: iPad
(Apple, 2008) and Surface (Microsoft, 2012).
With the consistent viewpoint that UI should be “ easy to navigate” and have a focus
“information being easy to find” coming from the likes of Desi Quintans, Alexandria
Neonakis and the Apple design team behind iOS8 (Apple, 2014) it’s fundamental to keep
these basic principals in mind.
Touch screen games “work best when they only support one input at a time ”[ CITATION
Cre13 \l 2057 ]. Games genres such as: ‘turn based’ (Final Fantasy Tactics), ‘tower defense’
(Field Runners 2) and ‘card games’ (Hearthstone). These games all support a single touch
philosophy, players using their devices in various scenarios; standing, sitting, walking etc
won’t find the UI navigation too intensive and in turn the UX will remain intact and
therefore not inflicting on the players overall experience.
“Controls for touch are often at their best when they mimic human motions we already
understand: flicking, pulling, sliding etc.”[ CITATION Cre13 \l 2057 ].
Two of the most profitable touch screen games are Angry Birds (Rovio, 2009) and Clash of
Clans’ (Supercell, 2012) adhere to that mentality, Angry Birds requires the player to make
two movements to play the game, swiping to navigate the screen and a pulling motion to
move the in-game avatars. The interim between games also adheres to a “ minimal load
times” philosophy mentioned by Desi Quintans in his guide to good UI. Daniel Burns states
that “Slow is evil. We’re talking seconds, but it can make a huge difference in whether the
user sticks around” [ CITATION Bur14 \l 2057 ].
With the addition of a supplementary touch version to Loot Rush appearing on iPad or
Surface devices it’s imperative that we stick to such practices that have been seen before
it in successful games. The success of a game and an accomplished UI design almost go in
hand in hand with touch screen games.
2.7- USER EXPERIENCE MEETS WORLD IMMERSION
Aside from HUD elements and effects to signal meaning to the player designers also need
to focus on the experience in-game interfaces appear. This can be seen as graphic design
work generally but its core is set in the overall UX.
Page 10
Literature Review
“The world of Left behind (Naughty Dog, SCE, 2013) had to feel familiar – a place two
teenage girls could explore – but different from the main game in order to compliment the
specific story we were telling. These logos populated the Boston and Colorado
malls.”[ CITATION Nau14 \l 2057 ]. [See Fig 10]
Fig 10 – Twisted – Used in Left Behind as Ice Cream shop logo
With the world of Loot Rush there will be experimentation into what sort of lifestyle can be
conveyed through the UI and graphic design within the world.
If levels were to contain shops or castles then the UI could continue the aesthetic of the
levels. Broken wood environments could hold up the UI, castle brick could have engraved
UI elements on them.
3.0 - SUMMARY
Throughout the reading material referenced within the literature review and in the further
reading material section (5.0) It's made clear that a deep focus must be made to
acknowledge the gameplay first and only then make the decision on what form of UI
should be approached.
Page 11
Literature Review
While the content in the literature review holds a valuable grasp on approaching UI and UX
further reading must be undertook to fully appreciate and understand the level of work
required in a piece of work that takes it from concept to completion.
Further reading should be done into design areas such as: Typography, colour theory,
consumer and player psychology and layout. All areas could have individual literature
reviews due to the expansive history of their subject area. A book that encompasses each
of these elements in extensive detail is Graphic Design, A History (Eskilson, 2014). [More
information on the book can be found in the 5.0 - Further Reading Material.
4.0 - BIBLIOGRAPHY
Apple, 2014. Developer.Apple. [Online]
Available at:
https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/Mobile
HIG/FeedbackCommunication.html#//apple_ref/doc/uid/TP40006556-CH56-SW1
[Accessed 26 Decemeber 2014].
Page 12
Literature Review
Burns, D., 2014. The Difference Between Good UI and Bad UI. [Online]
Available at: http://www.dburnsdesign.com/blog/2014/05/the-difference-between-good-uiand-bad-ui/
[Accessed 2 January 2014].
Credits, E., 2013. Extra Credits: Designing for a Touch Screen. [Online]
Available at: https://www.youtube.com/watch?v=NBHircZu5EI
[Accessed 28 December 2014].
Dog, N., 2014. The Art of Naughty Dog. First ed. Santa Monica: Dark Horse.
Flowers, E., 2012. UX is not UI. [Online]
Available at: http://www.helloerik.com/ux-is-not-ui
[Accessed 22 December 2014].
Neonakis, A., 2014. UI Design [Interview] (15 December 2014).
Nielsen, J., N/A. The Definition of User Experience. [Online]
Available at: http://www.nngroup.com/articles/definition-user-experience/
[Accessed 22 December 2014].
Quintans, D., 2013. GameDevelopment. [Online]
Available at: http://gamedevelopment.tutsplus.com/tutorials/game-ui-by-example-a-crashcourse-in-the-good-and-the-bad--gamedev-3943
[Accessed 21 December 2014].
Rogers, S., 2010. Level Up The Guide To Great Video Game Design. First ed. Chichester:
John Wiley & Sons Limited.
Stonehouse, A., 2014. User interface design in video games. [Online]
Available at:
http://www.gamasutra.com/blogs/AnthonyStonehouse/20140227/211823/User_interface_d
esign_in_video_games.php
[Accessed 23 Decemeber 2014].
4.1 – FIGURE REFERENCING
Fig 2 – Far Cry 2 map and GPS. 2014. . [ONLINE] Available at: http://alienbabeltech.com/main/wpcontent/uploads/2009/02/fc2_map.jpg. [Accessed 18 December 2014].
Page 13
Literature Review
Fig 3 – Call of Duty, damage indicator. 2014. . [ONLINE] Available
at:http://static.giantbomb.com/uploads/original/0/118/217676-cod4hurt.jpg. [Accessed 18
December 2014].
Fig 4 - Splinter Cell Conviction spatial UI. 2014. . [ONLINE] Available
at: http://www.thewanderlust.net/blog/wp-content/uploads/2010/03/conviction.jpg. [Accessed 19
December 2014].
Fig 5 Sherlock uses of spatial UI to convey information. 2014. . [Screenshot] Not Available [Accessed
20 December 2014]. NOTE: Taken as screenshot by self
Fig 6 - League of Legends UI screengrab. 2014. . [Screenshot] Not Available [Accessed 23 December
2014]. NOTE: Taken as screenshot by self
Fig 7 - Leona using W ability in League of Legends. 2014. . [Screenshot] Not Available [Accessed 23
December 2014]. NOTE: Taken as screenshot by self
Fig 8 - Oblivion inventory screen. 2015. . [ONLINE] Available
at:https://31.media.tumblr.com/25263aebb00f3523f8b0ad654280ca2e/tumblr_inline_nc2fhalTYS1rt
xsfs.jpg. [Accessed 03 January 2015].
Fig 9 - Oblivion inventory screen ratio. 2015. . [ONLINE] Available
at:https://31.media.tumblr.com/25263aebb00f3523f8b0ad654280ca2e/tumblr_inline_nc2fhalTYS1rt
xsfs.jpg. [Accessed 03 January 2015].
Fig 10 - Twisted – Used in Left Behind as Ice Cream shop logo. 2015. . [ONLINE] Available
at:https://31.media.tumblr.com/25263aebb00f3523f8b0ad654280ca2e/tumblr_inline_nc2fhalTYS1rt
xsfs.jpg. [Accessed 03 January 2015].
4.2 – GAME AND MEDIA REFERENCES
Infinity Ward 2003, Call of Duty, Video Game: PC, California: Activision Blizzard
Ubisoft Montreal 2010, Splinter Cell Conviction, Video Game: Xbox 360, PS3, Montreuil: Ubisoft
Bethesda 2006, Oblivion, Video Game: Xbox 360, PS3, PC, California: 2K Games
Riot Games 2009, League of Legends, Video Game: PC, California: Riot Games
Page 14
Literature Review
Blizzard 2013, Hearthstone, Video Game: PC. iPad, California: Blizzard Entertainment
Square 1997, Final Fantasy Tactics, Video Game: Playstation, Tokyo, Japan: SCE
Subatomic Studios 2012, Field Runners 2, Video Game: iOS, Windows, Android, Playstation Vita,
California: Apple Inc.
Rovio 2009, Angry Birds, Video Game: iOS, Google Play, Espoo, Finland: Rovio Entertainment
SuperCell 2012, Clash of Clans, Video Game: iOS, Android, Helsinki, Finland: SuperCell
Naughty Dog 2013, The Last of Us & Left Behind, Video Game: PS3, PS4, Japan, Tokyo: SCE
BBC 2010, Sherlock, TV Show: BBC, London: BBC
5.0 – FURTHER READING MATERIAL
Below is a collection of reading material that was read through that didn’t make it into the
final references section but still lead to interesting reads and research surrounding the art
and design process linked with UI design.
Alexandira Neonakis Portfolio –
http://alexneonakis.com/301442/5001745/gallery/the-last-of-us
Clash of Clans success –
Page 15
Literature Review
http://www.forbes.com/sites/ewanspence/2014/02/12/clash-of-clans-developer-reports-829-millionin-revenue-and-a-desire-to-support-the-finnish-community/
The Lack of Design in ‘Design work’ –
http://blog.intercom.io/the-dribbblisation-of-design/?
utm_source=twitter&utm_medium=paid_social&utm_content=ugly&utm_campaign=design++thought+leader+-+blog
Video Game user interface design diegesis theory –
http://devmag.org.za/2011/02/02/video-game-user-interface-design-diegesis-theory/
Game UI Discoveries: What Players Want http://www.gamasutra.com/view/feature/4286/game_ui_discoveries_what_players_.php
Creating immersive experiences with diegetic interfaces http://www.cooper.com/journal/2010/08/diagetic_interfaces.html
Beyond the HUD –
http://publications.lib.chalmers.se/records/fulltext/111921.pdf
How we made The Last of Us’s Interface work so well –
http://kotaku.com/how-we-made-the-last-of-uss-interface-work-so-well-1571841317
Colour management and UI Design –
http://betterin2d.com/2014/12/07/colour-management/
Design Patterns –
http://ui-patterns.com/patterns
Page 16
Literature Review
Tuts+ -http://tutsplus.com/tutorials/search?utf8=%E2%9C%93&search%5Btopic
%5D=Web+Design&search%5Bterms%5D=&button=
Scott Rogers – Level Up – Design book –
http://www.amazon.co.uk/Level-Up-Guide-Great-Design/dp/1118877160/ref=sr_1_2?
ie=UTF8&qid=1420338110&sr=8-2&keywords=level+up
Stephen J. Eskilson – Graphic Design, A History –
http://www.amazon.co.uk/Graphic-Design-Stephen-J-Eskilson/dp/1856698246/ref=sr_1_1?
ie=UTF8&qid=1420338134&sr=8-1&keywords=graphic+design+a+history
Page 17
LITERATURE REVIEW
Design process of the user interface in
games
James Drake - 1202333
GAM6000 - Research Methods
Distribution: Examining tutors of the University of Bolton
Literature Review
ACKNOWLEDGEMENTS
I would like to thank Alexandria Neonakis, Lead UI / UX designer and artist at Naughty Dog
for her support and guidance as well as David Ballard for providing me with the
opportunity to talk with her.
Further appreciation must also be shown to the author of Level Up, Scott Rogers for his
insight into user interface design from a ground level as well as Stephen J. Eskilson, author
of Graphic Design: A History. (Both books can be found at heading 5.0 – Further Reading
Material)
Further appreciation must go to Richard Merrick, UI / UX Designer at Rebellion Studios
(Sniper Elite 3), as well as Liam Wong (Graphic Designer / 2D Artist) of Ubisoft Montreal
(Far Cry 4) for their continued help and direction with reading material and advice on
industry practises.
ABSTRACT
Page 1
Literature Review
This document outlines some of the elements attributed with user interface design and
designer motivations on approaching design decisions
CONTENTS
Acknowledgements............................................................................................................ 1
Abstract............................................................................................................................. 1
1.0 - Introduction.................................................................................................................. 3
1.1
Terminology.............................................................................................................. 3
User interface (UI).......................................................................................................... 3
User experience (UX)...................................................................................................... 3
Loot Rush........................................................................................................................ 3
2.0 – Literature..................................................................................................................... 4
2.1 – Diegetic..................................................................................................................... 4
2.2 – Meta.......................................................................................................................... 5
2.3 – Spatial....................................................................................................................... 6
2.4 – Non-Diegetic............................................................................................................. 7
2.5 – What is considered bad UI........................................................................................ 9
2.6 – UI for touch devices................................................................................................ 10
2.7- User Experience meets world immersion....................................................................11
3.0 - Summary.................................................................................................................... 12
4.0 - Bibliography............................................................................................................... 13
4.1 – Figure Referencing..................................................................................................... 14
4.2 – Game and Media References...................................................................................... 15
5.0 – Further Reading Material............................................................................................ 16
Page 2
Literature Review
1.0 - INTRODUCTION
This report consists of presenting a link between the user interface design and the
philosophy of such elements in a game. This involves: preliminary research, iterative
design, art tests and logical problem solving (from the perspective of the player).
Fig 1 – UI Trello Card
Fig 1 shows the tasks related to this literature review that is assigned to a team member in
Trello. This includes: research, design, iteration and player related problem solving.
This document is the second assignment for the Research Methods module; its purpose is
to highlight further research into user interface design within games and the processes
involved. This research will be applied to the overall project.
Before discussing and exploring the concepts of user interface design it seems foremost
relevant to define certain terminology.
1.1TERMINOLOGY
During the course of this report references will be made to terminology outside the norm.
USER INTERFACE (UI)
“UI, or User Interface, refers to the methods (keyboard control, mouse control) and
interfaces (inventory screen, map screen) through which a user interacts with your game”[
CITATION Qui13 \l 2057 ].
USER EXPERIENCE (UX)
Jakob Nielsen defines the user experience as “An exemplary user experience is to meet the
exact needs of the customer, without fuss or bother”[ CITATION NieNA \l 2057 ]. Erik
Flowers reiterates Neilsen’s notion by defining UX as “The Intangible design of a strategy
that brings us to a solution”[ CITATION Flo12 \l 2057 ].
LOOT RUSH
Loot Rush is the game for Research Methods, GAM6000 Dissertation project of Team 5.
2.0 – LITERATURE
Page 3
Literature Review
One of the foremost responsibilities of a UI designer is to deduce what style of design
works best for the project. This can be broken down into four primary categories: Diegetic,
Meta, Spatial and Non-diegetic. (Stonehouse, 2014).
2.1 – DIEGETIC
Diegetic UI is a mixture of feeding the player information while constricting itself to
formats that feed the games narrative. Stonehouse defines this as “ UI that is fiction or
geometry that the player interacts with”. He also makes the point that this can sometimes
be cumbersome to the player with it having “ slow response times”[ CITATION Sto14 \l
2057 ].
An example of a game that uses this style is Far Cry 2 (Ubisoft, 2008) In Far Cry 2 the
player is required to explore the open / sandbox world to acquire variations of in-game
economy. The only process that enables the player to accurately find said economy is by
accessing the map and GPS locator. [See Fig 2]
Far Cry 2’s map and GPS system matches the “slow response times” that Stonehouse
referred to. The player has to constantly pick the geometry out of their pocket and place it
back to access the map and GPS.
Fig 2 – Far Cry 2 (Ubisoft Montreal, 2008) Map and GPS
Due to the quick nature of Loot Rush it seemed out of place to give it a UI system that is
generally reserved for narrative driven games with a focus on immersion as opposed to
pick up and play arcade style.
2.2 – META
Page 4
Literature Review
Meta UI is a middle-ground between diegetic and non-diegetic UI. The Call of Duty
franchise uses this format for health. [See Fig 3]
Fig 3 – Call of Duty (Infinity Ward, 2007), Damage
Indicator
The purpose of this is to eliminate as much static UI as possible. Instead of having a health
bar the player’s screen will flash red and fade in and out when damage is taken. This
effectively and efficiently negates the need for a health bar while still enforcing the
game’s narrative of war, damage taken, danger etc. (It’s also worthy to note that the
colour red is almost always used in instances of danger).
In terms of Loot Rush it would make thematic sense for the act of loot collection itself to
contain aspects of meta UI while also paying attention to colour theory and psychology.
For example, using an armour pick up as a yellow aura as opposed to something physical
such as the player attaching armour geometry.
Scott Rogers states a similar idea for a game to achieve a minimalist look. Design should
consist of “glows or attention-drawing effects on items to make them stand out to the
player” He goes on to say designers should “opt for full screen-sized effects over smaller
or subtle ones. It never hurts to overemphasize .”[ CITATION Rog10 \l 2057 ].
2.3 – SPATIAL
Spatial UI is a system that would accompany Loot Rush well, as its core principles are
“breaking the narrative in order to provide more information to the player than the in
game character should be aware of” (Stonehouse, 2013).
Page 5
Literature Review
Fig 4 – Splinter Cell Conviction spatial UI
Figure 3 shows how pertinent information can be signaled to the player while not deterring
from the narrative. Stonehouse states that “spatial elements can be beautiful pieces when
they work with the geometry of the world”.
While film being an entirely different art form the use of spatial interfaces works equally as
well but without the need for player movement or human participation. Figure 5 shows
Sherlock (BBC). To make his thought processes understandable and more intriguing to the
viewer they are displayed in such a manner.
Fig 5 – Sherlock uses of spatial UI to convey information
A spatial approach for Loot Rush seems more than appropriate but audience demographic
becomes an opportune focus point with this approach.
UI Designer of Naughty Dog, Alexandria Neonakis says that “ dependent on the project.
Cinematic AAA console games require minimal, clean UI. Kids games need readability and
ease of comprehension to come first, so a subtle clean UI isn't necessarily the right
choice”[ CITATION Neo14 \l 2057 ].
Page 6
Literature Review
Depending on the age range and varying cultures the game will be played, it’s essential to
focus on how said cultures interpret wording. When thinking about age it’s of the up most
importance to ensure it eligible to the reader.
Apple’s developer guidelines suggest that developers “ Use terminology that you’re sure
your users understand”[ CITATION App14 \l 2057 ].
2.4 – NON-DIEGETIC
Non-Diegetic UI is where the UI stands (generally) on a 2D plane and no in-game
characters are aware of said UI.
Games requiring instant response to the player’s action with a high ratio of information
being given at once generally adopt this form of UI. League of Legends (Riot Games, 2009)
uses this form of interface.
Fig 6 – League of Legends UI screengrab
“Elements have the freedom to be completely removed from the game's fiction and
geometry and can adopt their own visual treatment” (Stonehouse, 2014) this sort of
philosophy is echoed by Desi Quintans (The Good and Bad in UI, 2013) where he states,
“A good UI tells you what you need to know, and then gets out of the way.” (Quintans,
2013).
Page 7
Literature Review
While League of Legends is defined as a MOBA (Multiplayer Online Battle Arena) the
similar style of UI is often seen in MMO (Massively Multiplayer Online) games where the
player needs immediate information given to them at all time. Alexandria Neonakis (UI
Designer, Naughty Dog) supports the argument further by saying;
“MMO's require a lot of information on the screen at exactly the right time. So those
would be all about organizing a lot of elements for fast recall”[ CITATION Neo14 \l 2057 ].
With a game like Loot Rush the player needs to have constant awareness of their cooldown
timers and other usable abilities at a glance. This sometimes might be better suited to
having UI elements directed on the players avatar / character as opposed to a surrounding
2D HUD (Heads up display) plane.
An example of this would be League of Legend’s champion Leona.
Fig 7 – Leona using W ability in League of Legends
Whenever the player hits W to engage Leona’s shield the player is shown a circle of light
around the champion instead of the surrounding HUD elements, this enables to the player
to keep focused on the action instead of looking away and potentially missing something.
With Loot Rush a concept was to display a golden key above whichever player picked it up,
this way the player wouldn’t have to look around the HUD to check, their eyes could stay
focused on the level and continue with the intended experience.
2.5 – WHAT
IS CONSIDERED BAD
UI
Page 8
Literature Review
To create a strong UI one must first understand what makes a bad one.
Daniel Burns defines a bad UI as “Unresponsive, Unintuitive, Inconsistent design and
lacking to zero direction”[ CITATION Bur14 \l 2057 ].
Desi Quintans makes an example of Oblivion when focusing on poor UI decisions, noting
that “It’s a combination of wasted space, improper scaling, and inappropriate
controls”[ CITATION Qui13 \l 2057 ].
Fig 8 – Oblivion inventory screen
The mention of improper scaling and wasted space go hand in hand when referring to
Oblivion’s (Bethesda, 2006) inventory system. For a scene / menu that is dedicated to the
players inventory only 21.7% of the screen space is actually dedicated to controlling the
inventory [see Fig 9]
Fig 9 – Oblivion inventory screen with percentage ratio
This sort of screen dedication implies poor foresight when thinking of console players
playing with a controller and not a mouse and keyboard. With only 6 items to see at a time
it’s incredibly cumbersome for console players to navigate such an interface. And if we
remember back to Anthony Stonehouse stating that “ slow response times” can frustrate
Page 9
Literature Review
the player as well as looking at Daniel Burns’s core list of bad UI principals and seeing
“unintuitive “in the list you can see how Oblivion’s (Bethesda, 2006) combination of the
two in the inventory system can lead to a negative experience.
2.6 – UI
FOR TOUCH DEVICES
With some thought being given towards Loot Rush working on a touch device it’s
important to observe trends within UI design on such a device, devices including: iPad
(Apple, 2008) and Surface (Microsoft, 2012).
With the consistent viewpoint that UI should be “ easy to navigate” and have a focus
“information being easy to find” coming from the likes of Desi Quintans, Alexandria
Neonakis and the Apple design team behind iOS8 (Apple, 2014) it’s fundamental to keep
these basic principals in mind.
Touch screen games “work best when they only support one input at a time ”[ CITATION
Cre13 \l 2057 ]. Games genres such as: ‘turn based’ (Final Fantasy Tactics), ‘tower defense’
(Field Runners 2) and ‘card games’ (Hearthstone). These games all support a single touch
philosophy, players using their devices in various scenarios; standing, sitting, walking etc
won’t find the UI navigation too intensive and in turn the UX will remain intact and
therefore not inflicting on the players overall experience.
“Controls for touch are often at their best when they mimic human motions we already
understand: flicking, pulling, sliding etc.”[ CITATION Cre13 \l 2057 ].
Two of the most profitable touch screen games are Angry Birds (Rovio, 2009) and Clash of
Clans’ (Supercell, 2012) adhere to that mentality, Angry Birds requires the player to make
two movements to play the game, swiping to navigate the screen and a pulling motion to
move the in-game avatars. The interim between games also adheres to a “ minimal load
times” philosophy mentioned by Desi Quintans in his guide to good UI. Daniel Burns states
that “Slow is evil. We’re talking seconds, but it can make a huge difference in whether the
user sticks around” [ CITATION Bur14 \l 2057 ].
With the addition of a supplementary touch version to Loot Rush appearing on iPad or
Surface devices it’s imperative that we stick to such practices that have been seen before
it in successful games. The success of a game and an accomplished UI design almost go in
hand in hand with touch screen games.
2.7- USER EXPERIENCE MEETS WORLD IMMERSION
Aside from HUD elements and effects to signal meaning to the player designers also need
to focus on the experience in-game interfaces appear. This can be seen as graphic design
work generally but its core is set in the overall UX.
Page 10
Literature Review
“The world of Left behind (Naughty Dog, SCE, 2013) had to feel familiar – a place two
teenage girls could explore – but different from the main game in order to compliment the
specific story we were telling. These logos populated the Boston and Colorado
malls.”[ CITATION Nau14 \l 2057 ]. [See Fig 10]
Fig 10 – Twisted – Used in Left Behind as Ice Cream shop logo
With the world of Loot Rush there will be experimentation into what sort of lifestyle can be
conveyed through the UI and graphic design within the world.
If levels were to contain shops or castles then the UI could continue the aesthetic of the
levels. Broken wood environments could hold up the UI, castle brick could have engraved
UI elements on them.
3.0 - SUMMARY
Throughout the reading material referenced within the literature review and in the further
reading material section (5.0) It's made clear that a deep focus must be made to
acknowledge the gameplay first and only then make the decision on what form of UI
should be approached.
Page 11
Literature Review
While the content in the literature review holds a valuable grasp on approaching UI and UX
further reading must be undertook to fully appreciate and understand the level of work
required in a piece of work that takes it from concept to completion.
Further reading should be done into design areas such as: Typography, colour theory,
consumer and player psychology and layout. All areas could have individual literature
reviews due to the expansive history of their subject area. A book that encompasses each
of these elements in extensive detail is Graphic Design, A History (Eskilson, 2014). [More
information on the book can be found in the 5.0 - Further Reading Material.
4.0 - BIBLIOGRAPHY
Apple, 2014. Developer.Apple. [Online]
Available at:
https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/Mobile
HIG/FeedbackCommunication.html#//apple_ref/doc/uid/TP40006556-CH56-SW1
[Accessed 26 Decemeber 2014].
Page 12
Literature Review
Burns, D., 2014. The Difference Between Good UI and Bad UI. [Online]
Available at: http://www.dburnsdesign.com/blog/2014/05/the-difference-between-good-uiand-bad-ui/
[Accessed 2 January 2014].
Credits, E., 2013. Extra Credits: Designing for a Touch Screen. [Online]
Available at: https://www.youtube.com/watch?v=NBHircZu5EI
[Accessed 28 December 2014].
Dog, N., 2014. The Art of Naughty Dog. First ed. Santa Monica: Dark Horse.
Flowers, E., 2012. UX is not UI. [Online]
Available at: http://www.helloerik.com/ux-is-not-ui
[Accessed 22 December 2014].
Neonakis, A., 2014. UI Design [Interview] (15 December 2014).
Nielsen, J., N/A. The Definition of User Experience. [Online]
Available at: http://www.nngroup.com/articles/definition-user-experience/
[Accessed 22 December 2014].
Quintans, D., 2013. GameDevelopment. [Online]
Available at: http://gamedevelopment.tutsplus.com/tutorials/game-ui-by-example-a-crashcourse-in-the-good-and-the-bad--gamedev-3943
[Accessed 21 December 2014].
Rogers, S., 2010. Level Up The Guide To Great Video Game Design. First ed. Chichester:
John Wiley & Sons Limited.
Stonehouse, A., 2014. User interface design in video games. [Online]
Available at:
http://www.gamasutra.com/blogs/AnthonyStonehouse/20140227/211823/User_interface_d
esign_in_video_games.php
[Accessed 23 Decemeber 2014].
4.1 – FIGURE REFERENCING
Fig 2 – Far Cry 2 map and GPS. 2014. . [ONLINE] Available at: http://alienbabeltech.com/main/wpcontent/uploads/2009/02/fc2_map.jpg. [Accessed 18 December 2014].
Page 13
Literature Review
Fig 3 – Call of Duty, damage indicator. 2014. . [ONLINE] Available
at:http://static.giantbomb.com/uploads/original/0/118/217676-cod4hurt.jpg. [Accessed 18
December 2014].
Fig 4 - Splinter Cell Conviction spatial UI. 2014. . [ONLINE] Available
at: http://www.thewanderlust.net/blog/wp-content/uploads/2010/03/conviction.jpg. [Accessed 19
December 2014].
Fig 5 Sherlock uses of spatial UI to convey information. 2014. . [Screenshot] Not Available [Accessed
20 December 2014]. NOTE: Taken as screenshot by self
Fig 6 - League of Legends UI screengrab. 2014. . [Screenshot] Not Available [Accessed 23 December
2014]. NOTE: Taken as screenshot by self
Fig 7 - Leona using W ability in League of Legends. 2014. . [Screenshot] Not Available [Accessed 23
December 2014]. NOTE: Taken as screenshot by self
Fig 8 - Oblivion inventory screen. 2015. . [ONLINE] Available
at:https://31.media.tumblr.com/25263aebb00f3523f8b0ad654280ca2e/tumblr_inline_nc2fhalTYS1rt
xsfs.jpg. [Accessed 03 January 2015].
Fig 9 - Oblivion inventory screen ratio. 2015. . [ONLINE] Available
at:https://31.media.tumblr.com/25263aebb00f3523f8b0ad654280ca2e/tumblr_inline_nc2fhalTYS1rt
xsfs.jpg. [Accessed 03 January 2015].
Fig 10 - Twisted – Used in Left Behind as Ice Cream shop logo. 2015. . [ONLINE] Available
at:https://31.media.tumblr.com/25263aebb00f3523f8b0ad654280ca2e/tumblr_inline_nc2fhalTYS1rt
xsfs.jpg. [Accessed 03 January 2015].
4.2 – GAME AND MEDIA REFERENCES
Infinity Ward 2003, Call of Duty, Video Game: PC, California: Activision Blizzard
Ubisoft Montreal 2010, Splinter Cell Conviction, Video Game: Xbox 360, PS3, Montreuil: Ubisoft
Bethesda 2006, Oblivion, Video Game: Xbox 360, PS3, PC, California: 2K Games
Riot Games 2009, League of Legends, Video Game: PC, California: Riot Games
Page 14
Literature Review
Blizzard 2013, Hearthstone, Video Game: PC. iPad, California: Blizzard Entertainment
Square 1997, Final Fantasy Tactics, Video Game: Playstation, Tokyo, Japan: SCE
Subatomic Studios 2012, Field Runners 2, Video Game: iOS, Windows, Android, Playstation Vita,
California: Apple Inc.
Rovio 2009, Angry Birds, Video Game: iOS, Google Play, Espoo, Finland: Rovio Entertainment
SuperCell 2012, Clash of Clans, Video Game: iOS, Android, Helsinki, Finland: SuperCell
Naughty Dog 2013, The Last of Us & Left Behind, Video Game: PS3, PS4, Japan, Tokyo: SCE
BBC 2010, Sherlock, TV Show: BBC, London: BBC
5.0 – FURTHER READING MATERIAL
Below is a collection of reading material that was read through that didn’t make it into the
final references section but still lead to interesting reads and research surrounding the art
and design process linked with UI design.
Alexandira Neonakis Portfolio –
http://alexneonakis.com/301442/5001745/gallery/the-last-of-us
Clash of Clans success –
Page 15
Literature Review
http://www.forbes.com/sites/ewanspence/2014/02/12/clash-of-clans-developer-reports-829-millionin-revenue-and-a-desire-to-support-the-finnish-community/
The Lack of Design in ‘Design work’ –
http://blog.intercom.io/the-dribbblisation-of-design/?
utm_source=twitter&utm_medium=paid_social&utm_content=ugly&utm_campaign=design++thought+leader+-+blog
Video Game user interface design diegesis theory –
http://devmag.org.za/2011/02/02/video-game-user-interface-design-diegesis-theory/
Game UI Discoveries: What Players Want http://www.gamasutra.com/view/feature/4286/game_ui_discoveries_what_players_.php
Creating immersive experiences with diegetic interfaces http://www.cooper.com/journal/2010/08/diagetic_interfaces.html
Beyond the HUD –
http://publications.lib.chalmers.se/records/fulltext/111921.pdf
How we made The Last of Us’s Interface work so well –
http://kotaku.com/how-we-made-the-last-of-uss-interface-work-so-well-1571841317
Colour management and UI Design –
http://betterin2d.com/2014/12/07/colour-management/
Design Patterns –
http://ui-patterns.com/patterns
Page 16
Literature Review
Tuts+ -http://tutsplus.com/tutorials/search?utf8=%E2%9C%93&search%5Btopic
%5D=Web+Design&search%5Bterms%5D=&button=
Scott Rogers – Level Up – Design book –
http://www.amazon.co.uk/Level-Up-Guide-Great-Design/dp/1118877160/ref=sr_1_2?
ie=UTF8&qid=1420338110&sr=8-2&keywords=level+up
Stephen J. Eskilson – Graphic Design, A History –
http://www.amazon.co.uk/Graphic-Design-Stephen-J-Eskilson/dp/1856698246/ref=sr_1_1?
ie=UTF8&qid=1420338134&sr=8-1&keywords=graphic+design+a+history
Page 17