User Experience 4: Usable User Interface

Unit 4: Usable User Interfaces
UX, Usability and Interfaces
Second term, January 2019 Dr. Marc Miquel Ribé
Course in User Experience
Bachelor Degree in Video Game Design and Production
Computer Engineering for Information System Management

Fact 2. Gamers don’t really talk about interfaces unless it’s really bad.
Fact 1. An interface is like a joke. If you have to explain it, it’s not that good.
UX professionals do talk about interfaces

Overview of the Session (4A)
4.1 What is an Interface
4.1.1 Input and Outputs
4.2 General GUI (Menus and Websites)
4.2.1 Aesthetics
4.2.2 Information Architecture
4.2.3 Interaction Design
4.3 In-game GUIs
4.3.1 What Makes in-game GUIs usable?
4.3.2 Do Integrated GUIs Have Better Usability and UX?
4.3.3 Recommended In-game UIs and Menu Case Studies
Goal of the Session: understand what makes graphical user interfaces usable and with
good UX.
Usable GUI (Outputs)

Goal of the Session
Understand what makes graphical user interfaces usable and
with good UX.

What is part of the interface in this picture?
Las Mansiones de la Locura es un juego cooperativo de
investigación y terror inspirado en la obra de H. P. Lovecraft.
Los jugadores deben colaborar para sortear los obstáculos
planteados por una aplicación digital totalmente integrada
en el juego.
[https://www.youtube.com/watch?v=bvkZdNvU0xk]
4.1 What is an interface?
4.1.1 Inputs and Outputs

In a board game, most of the parts are interface because they are information and random generation.
In this board game, the digital app provides essential information and minigames too.
AGAIN: Interface is everything that allows the player to take control of the game and operate in it.
• Cards info
• Dice
• Screen Interface
• Keyboard
• Instructions
• ...
What is part of the interface in this picture?

We typically think of interface
as only the Graphic User
Interface (GUI) (see images),
but it also includes the
peripherical input devices.
In computing (programming), an interface is a shared boundary across which two separate
components of a computer system exchange information.
What is an interface in video games? A boundary between the user and the video game.

In digital games there is a need to translate from a physical space into a digital, and since the
player agrees on playing, there is an abstract space.
In a Rally based video game, the wheel controller is the interface to act in the digital space, but
also the signs on the road help the player.
In video games, the game happens in two
different spaces: physical and digital. The
two communicate with each other thanks
to ‘interfaces’.
The interface is the boundary between
the physical and the digital world so the
player keeps interacting.

Elements of a Video Game Interface
The interface is one of the least understood yet most critical elements in the game. The interface
is the connection between the player and the game world.
The invisible [physical] interface elements include the control triggers, keys, and mouse, which are
used to select and use weapons, move around the world, and communicate with both NPCs and
other players.
The visible elements are the on-screen features that can let the player know his or her health,
available weapons and their status, locations of enemies, distance to targets, position within the
world, and any other information that is considered critical to gameplay, both in terms of what the
player can do and what the player may not want to do (such as not attacking a powerful enemy
when health is low).
What makes a good game is intuitive, what makes a good interface is largely dependent upon a
vast number of cognitive issues that are generally unknown to interface designers, yet are slowly
beginning to make their way into the game industry. Understanding these issues can greatly
advance the quality and usability of game interfaces, and, ultimately, of gameplay.
—Richard Wainess, PhD (Senior Research Associate, UCLA/CRESST)
Novak, J. (2011). Game development essentials: an introduction. Cengage Learning.

The interface is everything (all sort of devices and information) that allows the player to take
control of the game and operate in it.
• INPUT: From physical to digital: controller (buttons, movement) and controls, menus…
• OUTPUT: From digital to physical: menus, in-game UI (visual, sound, vibration),…
Interface is the inputs and outputs of any computing system

• Game usability will depend on how these inputs/outputs are designed.
• Game UX will depend on interface usability, plus other aspects (narrative,
aesthetics, mechanics,…)
At any point of these “chain” there can be a problem (hardware, controls) and create a
bad UX.

We need to translate from physical space into digital space in a way that the player forgets about
it and actually believes that is acting in the digital game.
• INPUT: From physical to digital: controller (buttons, movement) and controls,…
• OUTPUT: From digital to physical: visual, sound, vibration,…
We need to design these inputs and outputs so it is easy to interact with the video game.
By now, in this lesson, let’s stick only with the ‘inputs’ part…
The Art of Game Design: A Book Lenses. Jesse Schell. 2009. Chapter 13.

We have mainly two different digital graphical interfaces in a video game:
In the next two sections (4.2 and 4.3) we will see them:
1. General GUI (Menus) / Show and allow the player to manipulate information (OUTPUT-INPUT)
Their purpose is to guide the player wherever he wants to go. They generally appear in a moment of
inactivity.
2. In-game UIs / Show the player key information visually (mostly OUTPUT)
Their purpose is to assist the gameplay. They are generally visual information while playing.

This distinction may be a bit blurry depending on the game genre, but still useful.
Let’s say that any interface that takes an input is a menu. The menu may be also visual like
an in-game UI and appeal to emotion, but is navigable.
OK, the distinction between menu and in-game GUI is a bit blurry

The decision whether implementing options in an in-game GUI or in a shell menu is not clear.
For instance: where should I put a tool selection?
It depends on how each option is linked to mechanics and the quantity of options.
Another option is a floating menu. This is set up so that its contents automatically
update themselves to adapt to the player’s surroundings. This effectively means
that unlike most context menus, which have a set of options depending on the time
and position of the cursor or player at which the menu was called, this menu is
either open or closed, but is always active.”
[https://gurusability.wordpress.com/2014/03/20/arma-3-the-usability-of-context-menus-in-games/]
Some menus are in the gameplay, and they are called floating menus.
Best option is redundancy: provide controls and provide a well-designed shell menu.
Because the beginner may have the menu to do it relaxedly (learnability), and the expert
may have the ability to do it in the gameplay much faster (efficiency).

This is the Norton Commander a PC text-based UI for managing files on top of MS-DOS.
It had no drag and drop, it had no icons, it had no ‘recycle bin’,… but it was a navigable menu.
QUESTION: What is the most important characteristic for any menu to be usable?
The most important characteristic of menu: navigable

4.2 General GUI (Menus, Software and Website)
Any interface has….
• Aesthetics
• Information architecture
• Interaction design
These three aspects will determine whether it is usable and also it has good User Experience.

Once already in the digital part of the game, the interface is every
piece of information that gives the player that is useful for the player
to control the game.
Usability is how easy it is to control the game (controllers, controls),
but it is related to how easy is to understand this information (GUI).
Usability is about perception and cognition. ”Do not make me think”.
A good interface User Experience depends on good usability but it can
also appeal to emotion and motivation with aesthetics and its
meaning.
Some relevant information of the interface will be necessary for usability.
Some aesthetic information may be accessory and just improve the User Experience.
Try to see what is necessary, what is accessory in the next menus.
4.2.1 Aesthetics

Oblivion inventory does not follow an
appropiate use of space.
I may like my carachter, but is it really
useful to see it this big?
What is necessary for usability in this interface and what is accessory and (perhaps) good for UX?
Signal-to-Noise ratio (useful info. / useless info). Tip: Do not put much useless info. even though it is artistic.

Forza Horizon 2 is smooth and clean like a PC operating system. Some elements increase the
appeal and therefore are good for UX. But the menu is usable because the information is very
easy to grasp (good contrasts, use of colors, controls reminders,…).

[https://dontcritme.wordpress.com/2012/09/25/borderlands-2-the-good-the-bad-and-the-cheeky/]
Borderlands 2’s UI uses color innecessary in an already risky bet

Dead space: same idea but better done. Less colours, because the important elements are the items.

This Witcher’s Menu has so much noise!

As seen, some art designers try to put too much emphasis on the fantasy they create, and
they try to deliver some elements to create emotion. But…
The most important contradiction of the digital UI design: UX can kill UX
• You may need aesthetics and originality to push emotion and trigger motivation for you
to keep playing.
• But you need usability do play more rapidly and efficiently plus easy to learn, so it can
have a good user experience.
• But you need aesthetics to continue creating emotion and motivation.
The more the wheel is moved by ‘originality’ and ‘aesthetics’, the more it can create friction
and stop itself.
And this is how some art designers believe they are doing something wonderful, but they
fail at respecting the usability dimension/objectives.
Let’s keep this in mind when study digital interfaces…

Let’s remember these four of the five usability dimensions proposed by Jakob Nielsen.
• Learnability: How easy is for the player to learn what each part of the interface mean?
• Efficiency: Once players have learned the design, how quickly can they perform tasks?
• Errors: Can the interface prevent you from making mistakes or tell you when you do?
• Satisfaction: Does it give a good emotion to use the interface?
I did not want to mention memorability because is very related to learnability.
You should take the usability dimensions as goals of your interface.
Think how each design element might help in each of them.
Keep these goals in mind when designing all kind of UI!
If you any of you have a different opinion about interfaces, that’s fine.
Let’s just test them with these goals mind.
We will aim at usability as a primary goal. Better aesthetic as a secondary goal.

4.2.2 Information Architecture
“Information architecture (IA) is the structural design of shared information environments; the art
and science of organizing and labelling websites, intranets, online communities and software to
support usability and findability.” (Wurman, 1997)
It is a field that is linked to library science that originated in the late 90’s to respond to the
software and websites need for a better design.
Wurman, Richard Saul, ed. (1997). Information Architects (1st ed.). Graphis Inc. ISBN 1-888-00138-0.

Information architecture (IA) is about the the way each information is labelled, the search and
navigation between them.

Game Menus’ only reason of existence is to lead us to play the way we want or to provide us
additional information (to play the way want/need).
Some types of menus are called “Shell Menus” as a metaphor of stopping the gameplay.
Usually, a menu is designed for:
• Title/start screen (movie poster, logo, etc. This is mostly about branding!)
• The pause (options, calibration tool, save/load…)
• Controls
• Inventory, Characters, etcetera.
• Etcetera.
Shell Menus are explained in: Fundamentals of Game
Design. Adams (2013). p. 62.
A menu is a navigable input interface.
We will focus on that.

Information and options. How to sort them. We need the right structure.
This is one of the most important problems in websites. Information architecture is aimed
mainly at two things:
- Finding the proper place for each information in the page layout and in the navigation.
- Finding the proper labels for each navigable information so the user understands it.
Problem: how can we fit all the different spaces in a game menu so they are navigable and usable.

How did they design World of Tanks Blitz menus?
[https://www.youtube.com/watch?v=Abdy1Cmueyg&t=1172s]

[https://www.youtube.com/watch?v=Abdy1Cmueyg&t=1172s]
Exercise: What concepts from this and the previous units are mentioned in the video?
World of Tanks Blitz

Usually decisions are based on different two different criterion:
1. What the company wants to promote (business strategy).
2. What the user considers important, what the user puts together,…
Card sorting is the solution for discovering number 2!
Card sorting is a technique in user experience design in which a person tests a group of
subject experts or users to generate a dendrogram (category tree) or folksonomy. It is a
useful approach for designing information architecture, workflows, menu structure, or web
site navigation paths.
To perform a card sort:
1. A person representative of the audience receives a set of index cards with terms written on them.
2. This person groups the terms in whatever way they think is logical, and gives each group a
category name, either from an existing card or by writing a name on a blank card.
3. Researchers repeat this process across a group of test subjects.
4. The researchers later analyze the results to discover patterns.
[https://www.interaction-design.org/literature/book/the-encyclopedia-of-human-computer-interaction-2nd-
ed/card-sorting]
[https://www.smashingmagazine.com/2014/10/improving-information-architecture-card-sorting-beginners-
guide/]

• Open card sorting: participants create their own names for the categories.
• Closed card sorting: categories are provided to participants.
• Reverse card sorting: an existing structure of categories is tested to see if users find the
final information in an easy way.
Some researchers use statistical tools to evaluate the relationship between categories, or
even Eye tracking to see where the participants look at.
Card Sorting Game at a glance
•Duration: Up to 1hr
•Group structure: Small teams
•Outcome: Language & categories
•Preparation needed?: Yes
•Who to involve: Users
We could try to improve any video game menu with Card Sorting

Nintendo’s Bad UI Design – The Wulff Den
[https://www.youtube.com/watch?v=8NQ7IbhNqRM]
Super Smash Bros. DS. Shell menu.
It uses very creative menu buttons and, at the
same time, the information architecture (the
way spaces are classified and linked) is not
straightforward.
It favours ‘Smash’ (a quick fight) and hides all
the other possible gameplay styles.
They surely did not do card sorting
Good Design, Bad Design
[https://www.youtube.com/watch?v=bE_ZuNp1CTI]

Let’s take for instance “Training”.
You need to access ‘Games & More’ (not clear
name) to access ‘Solo’ and get to menu.
Nintendo’s Bad UI Design – The Wulff Den
[https://www.youtube.com/watch?v=8NQ7IbhNqRM]
This is the training. To find it, you need to
remember exactly where it is… which
means that it is not very usable (especially
according to the Nielsen dimension of
memorability).
It is difficult for a player to remember this.
But why did they create ‘Games & More’
in the first place, a label that is that
general?
Good Design, Bad Design

Information architecture: position, navigation, naming.
What are the players’ most used? Do they vary with experience? Design for use.
Besides Information Architecture, interaction design also make things easy to learn and
efficient to work with.
Super Smash Bros Melee Menu:
not original but more usable. Why?
• Clear labels.
• Classic up-down navigation that
facilitates reading.
• Anticipates inner menus info.

Interaction design is the field which focuses on meaningful communication of media through
cyclical and collaborative processes between people and technology.
Interaction design patterns are “solutions” to particular problems with interacting with
information.
They have something positive: once learnt by the user, they are easily understood again.
[https://www.interaction-design.org/literature/article/what-is-the-difference-between-interaction-design-
and-ux-design]
Design patterns are generable and repeatable design solutions to design problems.
They are very useful for interface design (website, menus, etc.)
Interaction design patterns are useful to allow the user navigate and interact.
4.2.3 Interaction Design patterns

A library is a collection of design patterns. Here I propose you to check out, welie.com/patterns
and especially, ui-patterns.com.
Patterns are listed according to categories and subcategories (getting input, navigation,
dealing with data, social, etc.).
Some ’special patterns’ are called persuasive: cognition, game mechanics, perception and
memory, feedback and social, and are not ‘classic’ in the sense that they use cognitive
psychology knowledge to be more effective.
[http://www.welie.com/patterns/
http://ui-patterns.com/]
Check them out!

• Problem: The user needs to know
their location in the website's
hierarchical structure in order to
possibly browse back to a higher
level in the hierarchy.
• Used: when the structure of the
website follows a strict hierarchical
structure of similar formatted
content.
• Problem: Content needs to be
separated into sections and
accessed using a flat navigation
structure that gives a clear
indication of current location.
• Used: Use when there are
between 2 – 9 sections of content
that need a flat navigation mode.
• Use when section names are
relatively short
Breadcrumbs
Tabs
Some useful patterns for navigation…

Progressive Disclosure
Carousel
Dropdown Menu
Horizontal Dropdown Menu

Steps Left Morphing Color Buttons
Intentional Gaps
Drag and drop
Some useful patterns for getting input…

Dashboard Autocomplete search
No pattern is perfect, but some are more suitable depending on the occasion.
It is good to use them, because people already know them and are easily understood.
Some useful patterns for dealing with data (format, search, etc.)

“The Legend of Zelda: Breath of the Wild” Quick interface usability Analysis
QUESTION: How can you find that shrine or tower you remember its name but not the place?
4.2.4 Discussing some menus usability

The map contains dozens of shrines, towns, among other items. It would be
comfortable to look for a specific names in a searcher.
How can we make navigation more efficient?
Our goal is to achieve efficiency, please.
Navigation jumping point to point?
Drop-down menu of category filter?
Category mapped to buttons?
Searcher?
X button and Dpad are not mapped to any action!

• The inventory menus allow navigation using the L-R buttons (which are properly mapped on
screen), and it is redounded to both bumpers and triggers (fantastic redundancy with natural
mapping). However, the navigation is not circular, which sometimes would save some ‘clicks’.
• It is not possible to choose between GUI text options using the right thumbstick. Meanwhile,
this is possible in the Switch home menus. In certain situations it may be very comfortable.
Efficiency, please, with redundancy.
Inconsistency

Like in Zelda BOW, it is interesting how there are two unrelated shell
menus: (+) pause menu and (-) map. The first is aimed at ‘helping’ the
play, while the second is dedicated to total game change and options.
Inside the map there is another menu for lists (moons, transformations,
etc.) this works very well with circular navigation using L-R.
“Super Mario Odyssey” Quick interface usability Analysis

The map is bigger than the screen, so it is navigable with the left thumbstick and zoom with the
right thumbstick. It even includes a magazine/guide in both their sides. When the game is played in
portable Switch mode, it would be great that the map-magazine/guide was navigable using tactile
controls for displacement and zoom. This was also a feature missing in Zelda BOW map.
Efficiency, please, with redundancy.

In terms of interaction, the heuristics or general principles provided by Adams (2014) are very
applicable to menus. I just want to highlight:
• Give good feedback (e.g. an active button’s appearance should change either momentarily or
permanently to acknowledge the player’s click).
• Limit the number of steps required to take an action. Think about the experienced players.
• Permit easy reversal of actions. Keep saved versions of the game configuration or profile.
• Prevent errors. When an action is important, ask for double verification.
• Provide redundancy. Allow players to do things in different ways.
But they are more of the same. This is Nielsen and Norman reloaded!
Adams, E. (2014). Fundamentals of game design. Pearson Education.

4.3 In-game UI
Today interfaces are multimodal (multiple inputs and outputs). The dominant UI is the graphic one.
Every piece of information that allow us to control the game is UI.
There are two in-game UI:
1. HUDS
2. Integrated GUI
In-game UI also have:
• Aesthetics
• Information Architecture
• Interaction design patterns
Evolution of Video Games User Interface (UI)
[http://www.hongkiat.com/blog/video-games-ui-evolution/]
Game UI by Example: Crash Course in the Good and The Bad
[https://gamedevelopment.tutsplus.com/tutorials/game-ui-by-example-a-crash-course-in-the-good-and-the-
bad--gamedev-3943]

a) The right information
What does the player usually asks:
Where I am?
What am I actually doing right now?
What challenges am I facing?
Did my action succeed or fail?
Do I have what I need to play successfully?
Am I in danger of losing the game?
What information can this character give me?
The Art of Game Design. Schell. 2009. “The Lens of Feedback” p. 230.
Fundamentals of Game Design. Adams. 2013. p. 205.
Good UI only “Tells the player ONLY what he needs to know”, Shell, Adams.
4.3.1 What makes in-game HUDs usable?
• Do not allow situations in which NPC and other elements (e.g. Tutorial) give information
simultaneously and can stress the player.
• Do not show HUD elements when the player should focus on the narrative.
• Do not give irrelevant information when it can be easily deduced by the player.

“Tell the player ONLY what he needs to know”
No more, no less information.

Icons (metaphors) always need to be simpler in artistic design than in-game elements.
It is not a bad idea to remind…
KYSS = Keep your symbols simple!
Canonic icons are very easy to recognise
Remember, cognitive affordances: you want icons easy to process by the brain.
b) The right representation of the concepts

This is the Overcook interface:
Icons are kept simple (cognitive affordance)
Use of the color to indicate state (sensory affordance)
…

c) The right use of color, size and place to create patterns
Channels of Information in the UI (Schell, 2009).
One important goal of any interface is to communicate information. Determining the best way for
your game to communicate necessary information to the player requires some thoughtful design,
since games can often contain a great deal of information, and often much of it is needed at the
same time. To figure out the best way to present the information in your game, try following
these steps.
Step 1: List and Prioritize Information (e.g. In Zelda: rubies, keys, health, current weapon, etc.).
Step 2: List Channels (top center of the screen, bottom right, avatar, game music, etc.)
Step 3: Map Information to Channels (e.g. Top screen: number of rubies, keys, health, etc.).
Step 4: Review Use of Dimensions (let’s say it is a number: the number displayed, color of the
number, size of the numerals, font).
Good use of the channels and dimensions is what helps perception
Try not to repeat dimensions. We are trying to map meanings to dimensions.

The limit is the legibility.Overwatch - Compact and centered
[https://www.youtube.com/watch?v=7qUpyH9sdIY]
Pay attention to visual differences (colors, size, etc.) between elements as they may be
interpreted as indicators of meaning. Think of the limitations of human vision in terms of
colours and focalization.
Recommended: this is a great 5 minute review of the UI!
The only video problem: they say UX instead of UI.

Half Life 2 shows us that HUDs don’t have to be afterthoughts, or an unfortunate necessity that
detracts from a game’s art. Instead, they can actually be additive (even beautiful). They also
don’t need to rely purely on visual elements to convey information.
Half Life 2 - Clean and aural
Half Life is slower, more tense and calculated. It does not need to map to extreme colors for
high speed action. It is one of the first cinematographic games.

Integrating your HUD in a way that feels like an integral part of the game. The game is for
touch screens, so you make it feel more physical and touchable.
Hearthstone – Tactile, artistic but clear
It creates a great UX because of the art and interaction, but the use of color provides
clarity and ease the perception in a small screen.

d) The right timing (Kairos)
Don’t strain the player’s short-term memory. Don’t require the player to remember too many
things at once. You can give hints based on what the player needs.
An element of an interface should be there when the player needs it, the time it takes it to read
it, and then leave. If it is very important, you can block it until the player takes it away.
Depending on the value of the information, it must be integrated into other elements that are
recoverable (an agenda, a non-player character who knows everything, etc.).
When?
• Door, gates,…
• NPC appear
• Items and weapons
• Minigame
• Combat notification
• Secret treasure
• …
Tom Clancy’s Splinter Cell

The Legend of Zelda Breath of the Wild has a very minimalist HUD, with reminders when there is a
different area (too cold or hot). Link’s face expression also provides this information.
The Legend of Zelda Breath of the Wild – minimalist and useful

• The use of colors to achieve contrasts is key to convey some
information (life, team) and cost.
• The typography is funny but very legible.
• Some information disappears when not needed (life, level).
• Some information appears when doing needed (cost of
putting a card)
This is a very compressed game, UI must be chirurgical.
Clash Royale - Surface and use of color

Far Cry 3's HUD does not leave you alone. It’s an example of bad HUD…
[https://gamedevelopment.tutsplus.com/tutorials/game-ui-by-example-a-crash-course-in-the-good-and-
the-bad--gamedev-3943]

e) The right use of non visual channels
It is very important to give affordances that are easily perceived. You could miss a label on the
screen but it is hard to miss vibration and sound. They are sensory affordances.
Sound richness may be as important as good representation or creating patterns.
Sound can be used to give feedback in a gentle way (menus) for buttons.
You can use vibration to give information about the player state or an important event.
• Use visuals for every information
• Use sound for important information
• Use vibration for essential information
Games in which time is a key mechanic should take more into account these channels.
But remember the Weber-Fechner Bias: we do not perceive the change in magnitude accurately.

In-game screen interfaces can be classified into four different types depending on their integration.
They can integrate in the game world (place) or they are in the game narrative (representation).
Some time ago, there were only one or two types of graphic interfaces…Guess which.
4.3.2 Do integrated GUIs Have Better usability and UX?

Diegetic
Diegetic user interface elements exist within the game world (fiction and geometry) so the player
and avatar can interact with them through visual, audible or haptic means. Well executed diegetic
UI elements enhance the narrative experience for the player, providing a more immersive and
integrated experience.
Beside the holographic interface, Dead
Space also draws interface on the actual player
avatar, a very appropriate solution for diegetic
third person games.
Metro 2033 uses a complete Diegetic UI with
no HUD elements to help to support the game's
narrative. It runs the risk of frustrating the
player though slow response times but this
forms part of the game mechanic. The
character's watch is used to measure how long
the filter in the gas mask will last and how
visible he is:

Non-diegetic
Non-diegetic elements are an interface that is rendered outside the game world, only visible and
audible to the players in the real world. Example: most classic heads-up display (HUD) elements.
World of Warcraft uses a mostly Non-diegetic
UI, one exception being the Spatial player
names. It allows the user to completely
customise it, hopefully ensuring a familiar
experience. Most of the UI elements in World
of Warcraft sit on the 2D hub plane, some
elements sit within the world's geometry
such as the player names however the
character isn't aware of any of the UI:
Mass Effect 3 uses many Non-diegetic UI
elements in order to inform the player of the
character's selected weapon and power --
among other things. Given it's futuristic
setting I can't help to think if some of this
information could have been integrated in to
the game world, narrative, or even both.
The Non-diegetic elements still inherit the
visual style associated with the game world:

Spatial
UI elements presented in the game's 3D space with or without being an entity of the actual game
world (diegetic or non-diegetic).
TF2 also makes heavy use of "spatial non-diegetic" elements, like icons over players' heads, and other markers. It's
worth noting that the name tag is not spatial but rather fixed to the observer's camera, just below the crosshair.
Splinter Cell Conviction also adopts Spatial elements in the form of projections that illustrate objectives within the
game world. Their scale does seem to challenge the fiction slightly more than other examples. Type is overlaid in to the
environment to communicate messages to the player rather than the character:

Meta
Representations can exist in the game world, but aren't necessarily visualized spatially for the
player; these are meta representations. The most apparent example is effects rendered on the
screen, such as blood spatter on the camera to indicate damage.
Sometimes UI elements don't fit within the geometry of the game world. They can still maintain the game's
narrative but sit on the 2D hub plane -- these are called Meta elements. A common example of a Meta UI
element is blood the splatters on the screen as a form of health bar, as in Call of Duty: Modern Warfare
2. Blood splashing on the screen within the 2D HUD plane to tell the player that the character is losing health:
It could exist in the world, but it is displayed on the screen in 2D.
HUD often include non-diegetic and Meta.

Fagerholt, E., & Lorentzon, M. (2009). Beyond the HUD-user interfaces for increased player immersion in FPS
games. (This is an entire Thesis dedicated to interfaces).
[http://www.gamasutra.com/view/feature/4286/game_ui_discoveries_what_players_.php?print=1]
[http://www.gamasutra.com/blogs/AnthonyStonehouse/20140227/211823/User_interface_design_in_video_games.php]
In-game screen interfaces can be classified into four different types
This distinction is also used in cinema.
Diegetic is dialogue, explosions…
Non-diegetic (narration, music)

There has been a trend in on-screen user interface design to move system information away
from windows, icons and overlays and integrate it into the game-world (diegetic).
Diegetic is becoming people thanks to high definition technology.
However, the benefit of HUD (superimposed information) is that the UI designers may use a
separate plane that does not interfere with the space of the gameworld when presenting
system information.
Off with their HUDs!
[http://www.gamasutra.com/view/feature/2538/off_with_their_huds_rethinking_.php?print=1]
PAPER: Do Players Prefer Integrated User Interfaces? A Qualitative Study of Game UI Design Issues. Stein C.
Llanos and Kristine Jørgensen (2011).
But do players prefer diegetic?

QUESTION: Does playing with only diegetic helps in achieving an immersive state?
[https://www.youtube.com/watch?v=EiFU-lOIHVE]
The Problem with “Immersive” UI’s

Case Study: Assassin’s Creed Interface
PAPER: Do Players Prefer Integrated User Interfaces? A Qualitative Study of Game UI Design
Issues. Stein C. Llanos and Kristine Jørgensen (2011).
1. Goals: Evaluate the player’s preference for diegetic interfaces.
2. Concepts/Theoretical Framework: For types of interfaces (diegetic, non-diegetic, meta,
spatial). Involvement (immersion, flow).
3. Methodology: Interviews.
4. Results:
This preliminary analysis demonstrates that the idea that so-called “immersive” or minimal
interfaces that strive towards including all system information into the gameworld environment
and explaining it as part of fiction are not necessarily a goal to pursue.
5. Conclusions:
Diegetic interfaces are not necessarily a goal to pursue. Regardless of whether one is designing a
minimal or a more extensive UI, the designer must always make sure to present gameplay
relevant information in a sufficiently clear and precise manner.
QUESTION: Is there any type of interface going to disappear in the future?

4.3.3 Recommended in-game UIs and menus case studies
If you want to watch full discussions about specific games. Here we have:
Horizon:
[https://www.youtube.com/watch?v=rpFmD0YgyhA]
Far Cry 3 (Negative Example of UI and Menus):
Menus, Spatial UI, Consistency in Icons, etcetera.
[https://www.youtube.com/watch?v=2upjCuYaLrc]
Halo 5 (Negative Example of UI and Menus):
Menus, Voice use, Necessary Information, Sorting Elements, etcetera.
[https://www.youtube.com/watch?v=2upjCuYaLrc]
Hearthstone: How to Create an Immersive User Interface (Good Example of UI and Menus)
Hearthstone senior UI designer Derek Sakamoto breaks down Blizzard's approach to UI design as part
of this illuminating talk at GDC 2015, in the process shedding light on how you can best craft a great
UI for your own game.
[https://www.youtube.com/watch?v=axkPXCNjOh8]
Destiny: UX/UI Video Game Review (Good Example of Menus and UI)
[https://www.youtube.com/watch?v=a_h9wYNjiPQ]
[https://www.hudsandguis.com/home/2015/5/25/destiny-ui]
This is a good analysis in 17 minutes! It
uses the psychology concepts from the
course! Good deal!

Circulation code are part of the interface between the cars driving the same roads.
Apple wants to add an extra layer to improve this interface for us to receive the
information better. They want to make driving more usable.
Easier to learn
Easier to be efficient
Easier to remember
Easier to prevent errors
….
[https://www.patentlyapple.com/patently-apple/2018/08/apple-invents-an-augmented-reality-
windshield-that-will-even-support-facetime-calls-between-different-vehicles.html]

Key Questions (TakeAways)
• Graphical interfaces design must aim at good usability. Some UX will be the
consequence of aesthetic pleasure, but necessarily, there need to be good
usability. This means, an interface must allow the player to be efficient, to
learn it easily, easy to remember, among others.
• A good menu is designed according to the top priority tasks. Information
architecture is the field which studies how to put clear labels, to structure
navigation according to priorities and to locate information in space.
Interaction design patterns may help the user in navigating and introducing
information.
• A usable in-game interface will be if it is easy to perceive and easy to process.
Use iconic and clear design and employ colors, specially for high speed
gameplay. The integration of the interface in the narrative may not be the best
option for usability, although it may improve an aesthetic part of the
experience.
Do you think you are ready to study the usability and UX of any menu and user
interface?

References and Bibliography
• All the references provided in the Powerpoint are valuable.
• Game Interface Design. Brent Fox. 2004. Entire book.
• Gameplay and Design. Kevin Oaxland. 2012. Chapter 15.
• Game Development Essentials: Game Interface Design. Kevin Saunders. 2012. Entire book.
• Game Development Essentials. Jeannie Novak. 2011. Chapter 8.
• Fundamentals of Game Design. Ernest Adams. 2013. Chapter 8.
• The Art of Game Design: A Book Lenses. Jesse Schell. 2009. Chapter 13.
• Game Feel. Steve Swink. 2008. Chapter 2 and 6.
• Designing Games. Tynan Sylvester. 2012. Chapter 9.
• UX Week 2010 | Joe Kowalski | Video Games and the User Interface (UI, controllers).
(https://www.youtube.com/watch?v=hQe_TS5opu8)
• UX without UI — Creating User Experiences in Action Games
(https://www.youtube.com/watch?v=mESuaYdB_g4&t=392s)
• Beyond the HUD – User Interfaces for Increased Player Immersion in FPS Games
[https://www.slideshare.net/DICEStudio/beyond-the-hud-user-interfaces-for-increased-player-immersion-in-fps-
games] à Good to learn about diegetic, non-diegetic, spatial and meta.
If you prefer, you can get his thesis about it.
• UI examples from Mobile Games:
[http://www.game-patterns.com] [http://gamesinspiration.com] [http://mobilegameui.tumblr.com]
• The player becomes the producer.
[http://www.gamasutra.com/view/feature/6296/the_player_becomes_the_producer_.php?print=1]

• GOTO 2012 • User Interface (UX) Techniques • Janne Jul Jensen.
[https://www.youtube.com/watch?v=7OSkB4BCx00]
• Information Architecture for the World Wide Web. Morville and Rosenfeld. 1998.
• Seductive Interaction Design: Creating Playful, Fun, and Effective User Experiences. Stephen P. Anderson. 2011.
• Microinteractions: Designing with Details. Dan Saffer. 2013.
• 10 Awesomely Inspirational Game UI’s [https://www.gamedesigning.org/gaming/user-interfaces/]
• Good Design, Bad Design - The Best & Worst of Graphic Design in Games ~ Design Doc
• Vacheva B. Review of Chronos VR UI & UX (2018, February 7th).
https://productmanageronthego.wordpress.com/2018/02/07/review-of-chronos-vr-ui-ux/

ARTICLES ON UX:
• If you want to practice the concepts of the Unit 4 and 3. Try to read these articles and
argue whether they are right or wrong in their statements using the concepts, principles
and heuristics proposed.
• Persona 5’s Interaction Design is the best! [https://medium.com/@ousiadroid/what-you-
can-learn-from-persona-5s-ui-design-4a4a646245b1]
• Five examples of terrible game UX [https://uxplanet.org/five-examples-of-terrible-game-ux-
777fea291990]
• The video game user experience awards [https://blog.prototypr.io/the-video-game-user-
experience-awards-9d63afda9f5c]
• The video game user experience awards 2 [https://blog.usejournal.com/the-best-video-
game-ux-of-2017-part-2-be2f10e28ac7]
There are very beautiful examples of interfaces that work very smoothly!

Overview of the Session (4B)
4.4 Physical Interfaces (Controllers)
4.4.1 What Makes a Controller More Usable?
4.4.2 Evaluating Controllers Usability and UX
4.5 Actions Mapping (Controls)
4.5.1 What Makes Buttons Mapping More Usable?
4.5.2 What Makes Gestures Mapping More Usable?
4.5.3 Virtual Reality: Controllers and Controls
Goal of the Session: understand what makes video games controllers and controls
usable and with good UX.
Usable physical interfaces (Inputs)

Goal of the Session
Understand what makes controllers and controls usable and
with good UX.

The interface is everything (all sort of devices and information) that allows the player to take
control of the game and operate in it.
• INPUT: From physical to digital: controller (buttons, movement), controls, menus,…
• OUTPUT: From digital to physical: menus, in-game UI (visual, sound, vibration),…
REMEMBER THE BEGINNING OF THE LAST SESSION….

QUESTION: If usability is the ease of use, how can we design usable inputs?
Let’s remember the first two of the five usability dimensions proposed by Jakob Nielsen:
• Learnability: How easy is for the player to learn to use the controller/controls?
• Efficiency: Once players have learned the design, how quickly can they perform tasks?
KEY POINT: The more complex the game in terms of mechanics, the more difficult to design
usable controllers and controls. Player-interface-game are aligned.
(the five are: learnability, efficiency, memorability, errors, satisfaction)

KEY POINT: The physical controller limits how usable the controls can be. A good usable input
interface starts with a good controller design.
Now, let’s remember three of the six usability design principles proposed by Don Norman.
• Mapping (control and effects mapping to real world).
• Feedback (confirmation that an action has been performed).
• Constraints (interfaces should prevent invalid states).
(the six are: consistency, visibility, affordances, mapping, feedback, constraints )
The controller design must follow the usability design principles.

4.4 Physical interfaces (controllers)
A game controller is a device used with games or entertainment systems to provide input to a
video game, typically to control an object or character in the game.
A controller is usually connected to a game console or computer by means of a wire or cord,
although, since the mid-2000s, wireless controllers have become widespread.
Input devices that have been classified as game controllers include keyboards, mouses,
gamepads, joysticks, etc. Special purpose devices, such as steering wheels for driving games and
light guns for shooting games, are also game controllers.
What is essentially a controller? It is ‘mainly’ an input device.

What is essentially a controller?
• Shape and materials
Porousness, plastic-feel, etcetera. By “button quality,” I mean the feel of the spring
resistance. Particular buttons on input devices are often described the same way the feel of a
game is described: tight or loose, quick-responding or sluggish. This feel is contingent on the
quality, construction and type of springs that drive the motion of the input, whether they’re
on a button or a joystick.
• Data Inputs types
Joystick, buttons, etcetera.
• Connectivity and response latency
The media it uses and its speed.
• Inputs’ layout
The aspects which influence the controller ergonomy are: size, strengh in use, buttons reach
(layout) and hand posture.

Any controller controller can be usable depending on how its different characteristics are tailored
to interact with the game experience complexity.
Let’s examine how relevant each characteristic can be…
a) Controllers’ latency
4.4.1 What makes a controller usable?
LATENCY is the time delay between when a game receives input and when it displays
perceptible feedback resulting from that input.
Sometimes players compensate latency pressing the button slightly earlier (!).
The action loop must have no lags

Game Feel. Steve Swink. Chapter 2 and 6, 7. p. 135.
UX without UI — Creating User Experiences in Action Games
[https://www.youtube.com/watch?v=mESuaYdB_g4&t=392s]
The response of the controller must be faster than human perception.
“Feedback (confirmation that an action
has been performed).” Don Norman
Design Principle.
“Visibility of system status: real-time
feedback to keep users informed.”
Nielsen Heuristic
This is key for the gamefeel.

b) Input types
A game controller has different sorts of
sensors and actuators.
Sensitivity
Sensitivity is the degree of freedom which a
sensor of a controller can detect. Different types
of sensitivity: force (speed), position, etc.
How sensitive is a controller depends on how
many states can recognize.

The mouse is very sensitive and it
offers a great mapping in 2D.
However, it has no boundaries…

Because rich experiences need different and sensitive inputs. In other words, it is only
possible to map into a realistic digital reality with sensitive sensors that can obtain
information from complex reality.
Mapping (control and effects mapping to real world). Don Norman Design Principle.

With sensitive inputs it is possible to map better into the digital physics.
In fact, every physical movement with buttons must be mapped naturally to a digital
movement.
• Think of the sense direction jump by Mario. Doesn’t it feel natural? What about the sprint
(holding a button) and jumping higher?
Platform games like Super Mario 64 rely on
how the actions simulate the physical
dimensions.
Acceleration, momentum, friction,… is be
properly mapped to controls.

Designing the User Experience of Game Development Tools. Lightbown (2015). p. 88
Designing Games. Sylvester (2012). p. 236
• Gamefeel is the moment-by-moment experience of projecting intent through an interface.
It needs mapping, so there is a relationship between physical interface elements and the
actions they control that feels natural.
A game with good input captivates players the moment they touch it. It’s a pleasure just to
interact with it. And that bene t is omnipresent. It lasts throughout the life of the game—for
tens, even hundreds of hours.

c) Physical feedback
A button provides a sensation of feedback.
This is useful to know when an action has
been performed.
Feedback (confirmation that an action has
been performed). Don Norman design
principles.
[http://www.gambitmag.com/2015/02/10-worst-video-game-controllers/]
“Turbo Touch 360 controller was released
on the SNES and Genesis. You had
nothing to press and so your character
would sort of go in the general direction
of where you slid you thumb.”
The feedback provided by the trigger is different than from a bumper.

d) Adjusted number of inputs
Perhaps your game uses many mechanics and different sorts of combinations that would
require many different inputs. Does every action require a button?
[https://www.atlanticbt.com/blog/functionality_vs_usability_ux/]
[https://en.wikipedia.org/wiki/Flexibility%E2%80%93usability_tradeoff]
Are six buttons necessary?

Usability-Flexibility Tradeoff
As the flexibility of a system increases (this means, it can do more things and be more
efficient), the usability of the system decreases - because 1) it is not that easy to learn, and 2)
the user may make involuntary mistakes.
[https://www.atlanticbt.com/blog/functionality_vs_usability_ux/]

e) Input layout and ergonomy
The exact place buttons are
located in the controller is
fundamental.
Remember Fitt’s Law?
Not all fingers are equal, then
the button layout matters a lot.
Ergonomic Analysis. (p. 72). Universal Methods of Design. Martin et al. (2012)
Level Up! The Guide to Great Video Game Design. Scott (2014)

Controllers’s layout
Distance and position matter a
lot for designing a layout.
Nintendo used to favour one
or two buttons over the rest.
Most of their games are two
mechanics oriented.
Distance between buttons set
a constraint so you do not
push two buttons by mistake.
But somehow controllers can
also be less efficient.
Ngage had just problems:
• 7 and 5 buttons (too
diagonal?).
• Other buttons (difficult to
press?).
• How to compromise with a
phone?

4.4.2 Evaluating controllers’ usability and UX
QUESTION: Do you think there is a controller absolutely more usable than others?
There are certainly controllers with some characteristics that favour usability in different sorts
of game at the same time. Some gamepads.
QUESTION: What makes a good controller UX?
In first place, a good usability. But there are many other factors. One of them is the symbolic
value of playing with that controller (is it original, is it wanted, is it old, is is funny…?).
Let’s see some different types of controllers…

1. Arcade controller
An arcade controller is a collective set of input devices designed primarily for use in an arcade
cabinet. A typical control set consists of a joystick and a number of push-buttons.
A typical joystick is a digital input device that registers movement according to the range of
motion that it is designed to detect. Most modern joysticks have an 8-way configuration,
allowing for movement in the cardinal directions and the diagonals.
Joystick: Usually 8 states
Late 1970’s and mid 80’s
Enough for mapping in 2D
Less states make it easier to prevent mistakes. So, in a way are more usable for those games.

2. Joysticks and Paddles
A joystick is a single vertical stick anchored at the bottom that can be tilted a limited amount
in any direction. The joystick is spring-loaded and returns to its central position if the player
lets go of it. When the game software checks the position of the joystick, it returns two
absolute data: an X-value indicating tilt to the left or right, and a Y-value indicating the tilt
forward or back.
A paddle is a controller that features a round wheel and one or more fire buttons. The wheel
is typically used to control movement of the player or of an object along one axis of the video
screen. Paddle controllers were the first analog controllers and they lost popularity when
"paddle and ball" type games fell out of favor.
Enough for in 2D
Less states make it easier to prevent mistakes. So, in a way are more usable for those games.

3. Classic gamepad
The standard SNES controller (1990) adds two additional face buttons (X and Y) to the design
of the NES iteration, arranging the four in a diamond shape, and introduces two shoulder
buttons. It also features an ergonomic design by Lance Barr, later used for the NES-102 model
controllers, also designed by Barr.
Enough for 2D actions
Sometimes less sensitivity may avoid errors.
Imagine moving in a sort of grid 2D world
(Bomberman like): the D-pad is much more
useful than the thumbstick!
The gamepad provides ergonomy.
d) Modern gamepad
It is excellent for 3D control
It has different sort of buttons
and it includes a thumbstick.

d) Keyboard and mouse
WASD Keyboard setup is used widely.
Keyboard is very flexible so it allows to map many keys into actions.
First person games (strong use of the camera and pointing), strategy games (top view and
pointing)…benefit from the mouse.

4. Touchscreen
They blend controllers, controls and screen-interface. They provide a direct feel of the game.
Advantages:
Good at pointing
…
Disadvantages:
No easy 3D (no thumbstick)
No constraints between buttons (imprecision)
No feedback of the button state
No ergonomy to hold it
You need to be aware of the place the player
looks at, the way the player holds it, and
therefore find the areas which are easier to
touch.

Twin Stick Shooter
[http://www.gamasutra.com/view/feature/134693/a_guide_to_ios_twin_stick_shooter_.php]
Physical constraints of the object only allow certain controls

5. Current gamepad
Compared to the modern gamepad, it is more comfortable, it has different input types, it is
more sensitive, and has a better latency. But it has not changed much for the past 15 years.
Why does the gamepad has remained invariant for this long time?

We should ask maybe the two most important questions. The first: who is the target player
of this video game product?
Cognitive Limits, game compleixity and fun / Stability
Remember Cognitive limits: we can only remember around 3-4 possible actions/items at the
same time. If we have many options, we take longer to think. Games are a simplified
abstraction of the real world in best case scenario. To have fun we do not need the real world
(physical space). Does making more complex games increase fun? I have my doubts.
Finally, Console video games are not aimed to hardcore players as PC video games.

Learnt habits and skills / Stability
• Why the PS4 maintains the thumbstick and pad positions as 20 years ago?
• Why do we have the thumbstick or spatial controls on the left?
The QWERTY layout was designed to prevent the jamming of mechanical arms on early typewriters. The
Dvorak layout, by contrast, was designed to maximize typing efficiency: it grouped keys based on frequency
of use, and positioned keys to promote alternating QWERTY Keyboard keystrokes between hands, among
other refinements. The result is a 30 percent improvement in typing efficiency, and claim to most of the
world records for speed typing. Despite the clear advantages of the Dvorak design, QWERTY enjoys the
following of generations of people trained on the layout, which in turn drives manufacturers to continue
perpetuating the standard. Dvorak wins on performance, but QWERTY wins on preference.
Preference over efficiency?

Flexibility-usability trade-off / Stability
Flexibility-usability trade-off rule: As the flexibility of a system increases (this means, it can do
more things), the usability of the system decreases (because it is not that easy to learn and the
user may make unvoluntary mistakes).
Games tend adapt to the controller.
Market costs / Stability
Video game companies need to sell one
controller to play ‘most’ of the games,
otherwise people would not buy the console
thinking about needing very different types of
controllers.
The second question is: what inputs can we add without increasing its complexity/cost?

Vibration and audio/ Changes (at its time)
We are used to map touch with sound.
We are used to map touch with physical reactions.
• To signal important information
• Amplify emotions
• To make a UX more immersive
It is important to set the level of vibration and duration.
Trigger it simultaneously to other signals.
MORE CHANNELS OF FEEDBACK MAKE A
SYSTEM MUCH MORE USABLE AND
IMPROVE THE UX AT THE SAME TIME!
“Rumble can be very startling when it’s unexpected, which makes it an
excellent feature for survival horror and stealth games. Don’t use rumble
constantly, or the player will learn to ignore it. Also, if you use rumble too
much, the player’s hands will begin to tingle unpleasantly.
It’s best to use rumble when something big happens, such as an explosion,
or when something bad happens, such as when the player’s racing car
scrapes the wall of the racetrack”.
Fundamentals of Game Design. Ernest Adams (2013). p. 231.

Buttons and gestures in the same controller / Changes
• Gamepad provides an efficient way of controller physical displacement and actions with the
two hands. You need less time to press a button than to make a gesture.
• Sakurai (Game designer) confessed in 2006 that he was not very excited with Wii gesture
controls for Super Smash Bros.
[http://www.nintenderos.com/2017/02/sakurai-confeso-en-una-entrevista-de-2006-que-no-le-hacian-mucha-
gracia-los-controles-de-movimiento-de-wii/]
Gestures may be more usable in terms of easy to
learn but less usable in terms of efficiency.
Nintendo Switch has very different ”inputs”
(gesture, buttons, thumbstick, triggers, touch-
screen…) and three different controllers (joy-
cons in-out afor one, aside for two players, pro
controller)
Switch controllers provide many solutions but are less usable.

Other inputs: More buttons, skin conductance, GPS, etc. / Changes
Future games may rely on other non voluntary data obtained through other interfaces. For
instance, future games could use skin conductance and use it to modulate specific parts of
the game (to make it even more scary, etc.).
Some of these inputs may be
unconscious (compared to the
physical controllers, which the
player uses consciously)

Bottom line, the game controller the company decides to sell is designed according to user
experience and marketing aspects.
Factors such as size, inputs, shape, layout….
Target customer is key in taking decisions about the controller:
- Previous experiences
- Price willing to pay / Production cost
- Hands size
- …
It is hard to say which is the best gamepad in terms of usability and user experience, yet we
can study which factors improve it or not for all players (and for a certain group of players).
[https://kotaku.com/the-quest-to-make-a-better-video-game-controller-1818823822]

Case Study: Gamepad vs. Wheel
PAPER: Beyond the Gamepad: HCI and Game Controller Design and Evaluation: Michael Brown,
Aidan Kehoe, Jurek Kirakowski, and Ian Pitt. (in book: Evaluating User Experience in Games.
Regina Bernhaupt. 2010; p. 209-p.229; Chapter 12)
1. Goal: Evaluate the usability and UX of the steering wheel, gamepad and keyboard for the
game Colin McRae 2007
2. Concepts/Theoretical Framework: Functionality, Usability, User Experience
3. Methodology: 12 subjects (mean age 24.6, ranging 19-30). Participants were asked if they
drive regularly (5). Questionnaires (CPQ, SMEQ and CIT). Play the game until they feel
comfortable with the method (5-20 min).
4. Results:
• Usability. Efficiency (pooer performance for steering wheel, more time than keyboard
and gamepad respectively); Satisfaction (Gamepad and Steering wheel > keyboard);
lower efficacy in steering wheel. More natural mapping but less usability (!)
• UX. More positive comments for the steering wheel than for keyboard and gamepad.
Better UX but lower usability. Funny, isn’t it?
5. Conclusions:
The steering wheel is attractive and supports all functions needed, but in the hands of an
inexperienced users, it will lead to poor game performance. Users feel satisfied with it, though.
There is no perfect controller “at all times”, but it depends on where the user comes from (previous
training matters for controller use). A player may have a good UX and enjoy the use of a controller
even having a not that good performance.

6. Wheels, guns and guitars
Wheels and guitars provide a very natural
mapping to real and physical objects. In the
end, they are paddles and buttons.
The light guns allow pointing as gamepads
cannot do (advantage). They cannot move in 2D
or 3D space, though (disadvantage).
Very unflexible but very usable
Very good symbolic match with reality

7. Balance board and dance pads
They provide different sort of sensors to capture data provided by the human body
(movement, weight, etc.).
Advantages:
Easy learning
…
Disadvantages:
Limited to those activities
Cost
…
Very unflexible but very usable

4.5 Actions mapping (Controls)
Once we have a usable controller, we need usable controls.
We need to assign the actions in the button layout that correspond to actions in the world in a
way that we can act in the digital space *easily*. This is what we call controls – a matter of
equivalences.
What did they tell you about assigning controls?
We aim at helping the user at learning them fast and making them memorable so they can be
relearnt really fast (in other words, usability).
We need them to “make sense”.
Level Up! The Guide to Great Video Game Design. Scott (2014)

One button action equates to one game action. Actions mapping, in other words, controls.
We need to create natural mappings between buttons and actions.
An interface with good natural mapping means that the placement of the controls matches the actions
that they perform. For example, buttons to move objects le and right are placed to the le and right of each
other, instead of top and bottom.
How can natural mapping improve usability? Improving the user efficiency and learnability.
Emotional Design. Donald Norman. 2004.
[https://en.wikipedia.org/wiki/Natural_mapping_(interface_design)]
4.5.1 What makes buttons mapping usable?

We need to create natural mappings between actions and controls.
Physical dimensions should be consistent with physical dimensions simulated in the game (!)
These are buttons, but think of the physical properties of the buttons… They can also be mapped
naturally. For instance, pressing a button may remind of “accumulating”.
Emotional Design. Donald Norman. 2004.
[https://en.wikipedia.org/wiki/Natural_mapping_(interface_design)]
“Good mapping makes great design” (Design principle of Don Norman)

So finally, how do I assign the actions to controls?
There are two different ways to assign controls:
1. NATURAL MAPPING: Assign the action to the button or combination of buttons which has
more resemblance with the final action in the real world by physical and cultural reasons.
For instance, assign “fire” in a First Person Shooter game to one of the triggers, even
though the ‘easy button’ is the A. This way it will feel more natural (like a gun).
2. GENRE STANDARD: Assign the action to the button to which is usually assigned in this
particular game genre. For instance, jump = A, even though A is the ’easy button’ and the
most usual action in the game is to fire.
Genre standards have the advantage that they are patterns that the player had already
learnt. They already have a mental model of how it works.
Have your players ever played a similar game before? Go for the genre standard for safety.
Otherwise, go for the most natural mapping you find.
Important guidelines
to assign controls

Examining Smash Bros Controls - GameCube Controller mapping:
Some points on how Link’s actions are mapped:
• The synchronisation between move and A attack
imply a greater damage.
• The accumulation of A attack (keeping A button
pressed) imply a greater damage.
These two aspects are in regards to physics, and
therefore, feel natural to the player.
• B is a second type of attack which needs to be
combined with a dimensional stick move.
• UP = Spin; DOWN = Bomb; RIGHT-LEFT =
Boomerang; no stick move = Arrow.
• Both up with thumbstick and Y/X are used to jump!
A attack is the most important, then it goes with the
’easy button’. However, the other attacks are
naturally mapped according to combinations of B.
If Smash Bros. was a 2D platform
game, A would have been jump
and B, Y, X different attacks.
EXERCISE: Pick a game which requires certain synchronisation skills and evaluate
how controls are mapped. What are the criteria?

Control Exclusivity is the physical relationships between different controls and how they can be
used in combination. For example, the Xbox 360 controller places both a bumper and a trigger by
each index finger so that it’s impossible to press both at once. In BioShock, the bumper is used to
select a weapon, while the trigger is used to fire it.
When exclusive controls are mapped to nonexclusive actions, frustration and awkwardness result.
Think of any game that puts a tool select on the Xbox 360 D-Pad and movement on the left stick.
Both of these are controlled by the left thumb, which means that players have to stop moving to
change tolos (terrible).
Similarly, assigning jump to UP arrow in the D-pad in a 2D platform game would create a conflict
between walking and jumping as they use the same finger.
The fingers are the human resources
to take action. Two actions that
should happen at the same time (or
almost) should not occupy two
buttons related to the same finger or
it will cause frustration to the player.
Game Feel. Steve Swink. Chapter 2 and 6, 7.
Control Exclusivity

Allowing for Customization
Customization oriented heuristic user interface design. Shihong et al. (2007)
[http://ieeexplore.ieee.org/document/4127147/]
For a better usability and accessibility, allow customization.
Your game should include a key reassignment shell menu that allows players to assign
actions to the keys they prefer.
Reasons for the control customization:
• People used (or not used) to genre conventions.
• People with hand disability problems.
• People challenging themselves.
Fundamentals of Game Design. Ernest Adams (2013). p. 246.
To give control to the user is in line with Nielsen and other authors heuristics (Pinelle, 2008;
Desurvire, 2004; Shihong, 2007).

Top 10 Worst Video Game Controls
[https://www.youtube.com/watch?v=Ua2uFq0N15I
It is useful to watch this video in order to see how controls should not be assigned.
However, the video talks a lot about mechanics besides controls.

4.5.2 What makes gestures mapping usable?
It is easier to create a natural mapping between gestures and human communication (!)
Remember Ibister book (Unit 2), by
mapping gestures we can call to
specific emotions.

Gestures as controls: do they remove the controller?
They blend controllers and controls (Kinect) or simply becomes a support of other controls
based on buttons (wii).
Advantages:
Easy learning
…
Disadvantages:
Energy
Precision
Gestures are sometimes cultural (!)
SOLUTION:
Button-gesture redundancy
PROBLEM: What is the end of a gesture?
Y and gesture

It is the entire substitution of the physical space for a digital space. Virtual Reality
(Immersive view, but still need the inputs)
• They use a mapping of the head movement and camera.
• Actions and movement need to be mapped: some use gesture, some use some buttons
and thumbstick.
Question for you: Will we interact with VR with controllers or ‘hands’?
Is VR going to remove the controller?
4.5.3 Virtual Reality: controller and controls?

Jesse Schell believes
controllers will beat hands
for interacting in VR.
[https://uploadvr.com/jesse-schell-predictions-vr-ar-2025/]
[https://www.youtube.com/watch?v=hUyt4csFg-Y&feature=youtu.be]
“Schell predicted that most interaction with VR worlds will be done through handheld controllers
like the Oculus Touch, or the controllers for the HTC Vive VR headset. Those controllers give users
a tactile feel for interactions, and they are likely to fare better than motion-sensing systems that
detect your real hand movements, Schell said. That’s partly because the hand-sensing devices
aren’t accurate and they don’t give you that tactile feedback.”
In other words, we need to know when each “action” starts-finishes (same problem with
kinect, we have no feedack), and at the same time, we also need to know when acting in the
digital reality starts-finishes.

Key Questions (Take Aways)
• We know some factors against all controllers’ usability and UX. However,
having good UX and usability is sometimes contradictory and depends on
the number of inputs and its layout (which is related to the usability-
flexibility tradeoff).
• Assigning controls aims at creating a natural mapping between actions in
physical and digital reality so the player learns them very easily.
• It is very unlikely we will remove the controller in the future, no matter
how advanced gestures become because they provide instant feedback
(the buttons or the vibration) and allow us to successfully map 3D
movement.
Do you think you are ready to study the usability of any controller and
controls after this session?

References and Bibliography
• All the references provided in the Powerpoint are valuable.
• Game Interface Design. Brent Fox. 2004. Entire book.
• Gameplay and Design. Kevin Oaxland. 2012. Chapter 15.
• Game Development Essentials: Game Interface Design. Kevin Saunders. 2012. Entire book.
• Game Development Essentials. Jeannie Novak. 2011. Chapter 8.
• Fundamentals of Game Design. Ernest Adams. 2013. Chapter 8.
• The Art of Game Design: A Book Lenses. Jesse Schell. 2009. Chapter 13.
• Game Feel. Steve Swink. 2008. Chapter 2 and 6.
• Designing Games. Tynan Sylvester. 2012. Chapter 9.
• UX Week 2010 | Joe Kowalski | Video Games and the User Interface (UI, controllers).
(https://www.youtube.com/watch?v=hQe_TS5opu8)
• UX without UI — Creating User Experiences in Action Games
(https://www.youtube.com/watch?v=mESuaYdB_g4&t=392s)
• Beyond the HUD – User Interfaces for Increased Player Immersion in FPS Games
[https://www.slideshare.net/DICEStudio/beyond-the-hud-user-interfaces-for-increased-player-immersion-in-
fps-games] à Good to learn about diegetic, non-diegetic, spatial and meta.
If you prefer, you can get his thesis about it.
• The player becomes the producer.
[http://www.gamasutra.com/view/feature/6296/the_player_becomes_the_producer_.php?print=1]

Overview of the Session (4B)
4.4 Mobile Apps
4.4.1 What Makes an APP GUI Usable?
4.5 PC Software / Operating Systems
4.5.1 Windows vs OS X
Goal of the Session: understand what makes PC software/OS, websites and apps
more usable and with good UX.
Usable digital interfaces

Goal of the Session
Understand what makes operating systems, websites and apps
more usable and with good UX.

Remember: What is a GUI composed of?
• Information Architecture
• Interaction Design Patterns
• Aesthetics
Apps, Websites and Computer Software and Operating Systems are no different.

4.4 Mobile Apps
Before discussing what makes a mobile App GUI usable we would need to discuss the
mobile App GUI…
Let us see the information architecture and the design patterns of an App.
Quick reminder:
Information architecture (IA) is about the the way each information is labelled, the search
and navigation between them.
Interaction design patterns are the design solutions to particular ways to interact with
information within a digital user interface.

iOS
https://developer.apple.com/ios/human-interface-guidelines/overview/design-principles/
Android
https://developer.android.com/guide/topics/ui/
https://developer.android.com/design/
Why do you need UI guidelines
[https://uxplanet.org/why-you-need-ui-guidelines-d380e407b759]
You should learn a toolkit in order to 1) design much more easily, and 2) more
consistently with the rest of apps. This will help the user.
All the toolkits of these operating systems are quite similar, and use very similar controls
and interaction models.

We are going to explore the Sailfish OS e-mail client app.
I want you to check your Android or iOS native e-mail App while I am showing you the
Sailfish OS e-mail client app.
I am going to call ‘content’ to information and ‘actions’ to what we can do with content. In
an e-mail client content is normally the messages and actions are compose e-mail, send,
receive, move and delete.

These are content screens
They have a hierarchy
Could you identify the content screens in
your App and imagine its hierarchy?

The way which we can cross the
hierarchical tree is called navigation.
Usually the navigation follows the same
hierarchical structure, but not always.
Is it the case with your App?

In Sailfish OS, actions are usually within a menu that is hidden at the top of the screen. To
reveal the content of the menu (Select emails, update all, create new e-mail), you must "pull"
the contents of the screen down, that's why they call it the "pulley menu".

1. Global actions: its scope is the application in general, so they usually appear on more than
one screen. If the application is well designed, the global actions are always located in the
same place in the different screens in which they appear. The Sailfish OS email application has
two global actions: "Compose email" (Create new email) and "Update" (Update). The global
actions appear in the initial screen and in the screen that shows the messages of a directory. In
both cases, global actions occupy the same position in the pulley menu.
What are the global actions in your app? What is their position?

2. Screen actions: their scope is the content of the screen they are on. In the case of the
screen that shows the messages of a directory, the actions "Select emails" (Select emails) and
"Sort by: time" (Sort by: Time) are screen actions, because they allow you to select and order
only the messages that appear on this screen. In the case of the screen that shows the content
of a mail message, the actions "Delete" (delete), "Forward" (forward), "Reply to all" (reply to
all) and "Reply" (reply) are also screen actions, because they allow you to erase, forward or
respond only to the message that the screen contains.
Identify the screen actions of one of
the screens of your email application.
Which are? Where are they? Study
the rest of the screens of the
application: identify other places
where screen actions appear.

3. Element actions: its scope is only one of the elements of the content of the screen. For
example, in a screen that contains a list of messages, the element actions are those that apply
to one, and only one, of those messages. In Sailfish OS, the element actions are in a contextual
menu that appears when you touch an element in a sustained way.
Are there element actions in your app? Where are they?

Information is introduced in a different type of screen than the content screens: we are going
to call them instruction screens, because in them the user provides additional instructions
that the application needs in order to complete an action.
Identify the instruction screens in your app.

Of course, the instruction screens must be
connected in some way to the rest of the
application, but not through navigation: it is
the actions that connect the content screens
with the instruction screens.
The complete structure of the Sailfish OS email
application. The circles represent the actions
and the orange lines represent the connections
between the actions and the instruction
screens.

With this we have completed the structure of
our email application. Remember the
components that we have identified:
• Content screens
• connected to each other through a
navigation system
• which include actions that can be classified
based on their scope in global, screen and
element actions
• which connect the content screens with
instruction screens
Now you could draw the same diagram.

Folmer, E. “Interaction Design Patterns” (2014).
[https://www.interaction-design.org/encyclopedia/interaction_design_patterns.html]
“A design pattern is a general and repeatable solution to a common usability problem in
interface design” (Folmer, 2014). Each operating system selects one of these patterns to
represent the different elements that make up its applications. Take Sailfish OS, and some of
the elements from the previous section as an example.
Content patterns
Sailfish patterns for content are grids and lists.
Is there any of these patterns in your e-mail app?

Vertical navigation patterns (from parent nodes to child nodes, and from child nodes to
parent nodes)
Sailfish OS has no back button: to move "backwards" you must drag the screen from left to
right. The visual indication that there is a parent node to which you can return is a bright
spot in the upper left part of the screen.
The first screen of the applications in
Sailfish OS has no backward
navigation. As you can see in figure 13,
the luminous point that indicates the
existence of a parent node does not
appear in the upper left. This means
that in Sailfish OS the backward
navigation navigates the hierarchy of
applications.
• It is not possible to exit an
application using the back button
• The back button never navigates
between applications
This tends to be a software button.
Back button that allows navigating between apps and exit apps tends to be a hardware button.

Both kind of back patterns are necessary

I'm sure you've noticed that Sailfish OS and your mobile operating system share a lot of
their patterns. Do not worry: it's not chance. The reality is that all mobile operating
systems use practically the same patterns:
• Lists
• Grids
• Tabs
• Navigation backwards (through the hierarchy of the application or the history of your
activity)
• Menus
• Context menus
• And action bars (although they do not exist in Sailfish OS, they almost certainly do exist
in the operating system of your mobile phone)
These patterns are not only common to all mobile operating systems: they are all
inherited from PC applications (both native and web). Here I show you some examples.

List in gmail
Grid in iPhoto (Os X)

Tabs in Firefox Browser
Back Button to navigate
the hierarchy in Github.
Back button in Firefox Browser

Drop-down menu
Contextual menu Action bar in Gerrit

I like how they implemented the possibility of replying Whatsapp Messages without
opening the App. This is a pop-up that needs instruction.
This is very comfortable. It saves you useless interaction if you only want to reply and not
engage in conversation.
Dialog windows with interactions

How to face the challenge of designing a native application for mobile:
• Study carefully the interface toolkit provided by the operating system for which you are
designing. These guides are your best friends during the design process: keep them
always at hand. Guidelines will help you be consistent.
• Do not skip the fundamental steps of the design process: there are designers who first
design screens, but that is to start the house on the roof. Before designing any screen,
design the structure of the content (the information architecture) and create flow
diagrams for your actions. You will create a clear information architecture.
• Be relentless: designing interfaces is fundamentally a process of eliminating superfluous
elements. In the case of mobile design, you should be even more rigorous in this regard
than in PC applications. For each element of the content of a screen, for each action,
ask yourself: Is this really necessary? Can I delete it? What are the most common
actions? Are they close to each other?
• Experiment ... but never with backward navigation. There are many opportunities to
innovate in mobile design, but there are certain basic paradigms that you must respect
because breaking them causes enormous usability problems to your users.
Remember: study and respect the toolkit for interfaces of the operating system for
which you are designing. Consistency!

Don Norman Design principles
• Consistency (helping users recognize and apply patterns)
• Visibility (every available action should be visible)
• Affordances (visual attributes that give control)
• Mapping (control and effects mapping to real world)
• Feedback (confirmation that an action has been performed)
• Constraints (interfaces should prevent invalid states)
Remember Lesson 2 beginning…
Let us see few of these principles:
Consistency
Since we see what we expect, we need to be consistent and
clear in our designs.
Remember from Unit 3!

You probably know now few things that make a mobile App GUI more usable: consistency
and a clear information architecture.
In a mobile environment every instruction screen needs to be more minimal.
We are in a moving environment. We can stop at any moment.
Texts must be shorter than in web. Navigation cannot be as deep as in web.
You need to pay attention to screen resolutions.
Interaction patterns must help the user (for instance
autocomplete in searchers or user autofilled data).

Another important aspect for design is feedback and system status.
Such feedback can be as
simple as a change of color
once the user has clicked on a
button, or a progress
indicator when a process
needs a little longer to finish.
[https://www.nngroup.com/articles/visibility-system-status/]

[https://www.nngroup.com/articles/visibility-system-status/]
The Amazon Music app on iOS allows users to directly manipulate
the order of items within a playlist. Users are aware of the system
status at all times, and thus can easily identify and correct an error.
If they press a song and drag it, they receive instant feedback.
Most phones have a flashing led for notifications. Some even
change the color depending on the notification type (Whatsapp, E-
mail, missed call, etc.).

[http://microinteractions.com/what-is-a-microinteraction/]
There is a trend in interaction design called microinteractions. The term is by Dan Saffer. They are
actually the same interaction and feedback used all the time. The only difference is that they
conceptualize them as in a loop. Because we use mobile phones all the time and these microinteractions
are very very important.
Microinteractions are good for:
• accomplishing a single task
• connecting devices together
• interacting with a single piece of data such as the temperature
• controlling an ongoing process such as music volume
• adjusting a setting
• viewing or creating a small piece of content like a status message
• turning a feature or function on or off
A Trigger initiates a microinteraction. The Rules determine what happens, while Feedback lets people
know what’s happening. Loops and Modes determine the meta-rules of the microinteraction
It is the last level of detail when designing. Now you see the importance of immediate feedback.
Microinteractions

[https://vine.co/v/bErUwzMJZPH/embed/simple]
[https://vine.co/v/bEblaqQrxm0/embed/simple]

The majority of smartphone users are right handed, and certain areas of the screen are faster and easier
to interact with using the right thumb than other areas. Designers of mobile apps and eCommerce
experiences, especially those for smartphones should always remember the ‘thumb friendly zone’.
Finger position and Fitt’s Law

4.4.1 What makes a mobile App GUI usable?
You probably know now few things that make a mobile App GUI more usable.
So, as a short summary:
1. Platform consistency.
2. Give feedback for every action.
3. Provide value right away.
4. Concise content.
5. Do not create a deep navigation.
6. Reduce scrolling.
7. Consider landscape orientation.
8. Think about Fitt’s Law and the finger position.
If you want to learn more:
• Good comparisons between iOS and Android User interfaces and interaction design patterns
[https://medium.com/@chunchuanlin/android-vs-ios-compare-20-ui-components-patterns-part-1-
ad33c2418b45]
[https://medium.com/@vedantha/interaction-design-patterns-ios-vs-android-111055f8a9b7]
[https://envato.com/blog/ios-vs-android-better-ux/]
• Some problems mistakes designers made during 2016
[https://theblog.adobe.com/the-5-most-common-mistakes-ux-designers-made-during-2016/]

4.5 PC Software / Operating Systems
You probably can analyse many aspects from a PC
operating system and any software now. Because they
are essentially the same as Apps.
What changes is with a computer operating system
and with a software we basically manipulate data.
We are not used to manipulate data in phones…
Street people are not as used to data as IT people.
With mobile apps and websites we usually exchange
information, but files (data) are not the top activity.
With operating systems we operate with data and we
operate with software.
Think that in the beginning, there was only data.
Textual data stored as files.

4.4.1 What Makes a Software or OS More Usable?
The answer is very simple. OS and software with good usability respect the Norman design
principles and the ten heuristics. Let’s see them again, this time applied to software and
operating systems.
These are Don Norman Design principles:
• Consistency (helping users recognize and apply patterns)
• Visibility (every available action should be visible)
• Affordances (visual attributes that give control)
• Mapping (control and effects mapping to real world)
• Feedback (confirmation that an action has been performed)
• Constraints (interfaces should prevent invalid states)
These are the 10 Nielsen and Molich heuristics:
• Visibility of system status: real-time feedback to keep users informed.
• Match between system and the real world: concepts familiar, order and logical order.
• User control and freedom: support freedom but also undo.
• Consistency and standards: you should not be original.
• Error prevention: eliminate error-prone conditions.
• Recognition rather than recall: minimize the user’s memory load by making things visible.
• Flexibility and efficiency of use: allow users to tailor frequent actions.
• Aesthetic and minimalist design: eliminate irrelevant or rarely needed information.
• Help users recognize and recover from errors: use plain language to explain a problem & solution.
• Help and documentation: in case of necessary documentation, it should be easy to search.

Adobe’s Photoshop, the large North American computer software company, is a great example of how
designs reflecting Nielsen and Molich’s ten user interface guidelines can lead to success for a company.
1. Visibility of System Status
Photoshop does a great job of letting the user know what’s happening with the program by visually
showing the user what their actions have led to whenever possible.
The cursor graphic goes from representing an open-hand to a gripped hand when the user drags a layer
around within the Layers palette. This makes it’s easy to instantly understand the system status.
Additionally, Adobe’s choice of using a ‘hand’ is a great example of the second guideline where the
system matches the real world.
[https://www.interaction-design.org/literature/article/user-interface-design-guidelines-10-rules-of-thumb]

2. System Match to the Real World
An example of Photoshop mimicking the real world in terms and representations that their target users
would understand, is where they design the information structure and terminology to mirror the same
wording we would use in the world of photography or print media.
Photoshop utilizes the term, “Exposure”, as commonly used in
the world of photography.

3. User Control and Freedom
Photoshop is very good at providing users with control every step of the way. As the user makes
changes to an image or adds various artistic effects, they are able to quickly and easily take a step
backwards if they make an error, for instance.
4. Consistency and Standards
Photoshop maintains a standard layout and look & feel when it comes to the menu bar. They also
utilize commonly known terminology such as “New…”, “Open…”, “Save As…”, etc.

5. Error Prevention
To prevent users from making errors, Photoshop provides a brief description or label of the tools
when a user hovers over it to help make sure users are using the proper tool for the task at hand.
6. Recognition rather than Recall
Whether it be making a selection from the artistic filters menu, or opening a new image file,
Photoshop provides a sample view for users to make the right choice. Don’t make the user remember
a file name! Or exactly…

7. Flexibility and Efficiency of Use
One of the many reasons for frequent users to love Photoshop is for its flexibility and efficiency. Users
are able to utilize its flexibility by organizing and adding to their Workspace, as well as making things
more efficient by saving it for future use.
8. Aesthetic and Minimalist Design
The toolbar in Photoshop only displays the icons and is neatly tucked to the side to help keep clutter
to a minimum, and maintain a minimalist aesthetic. Icons are simple.

9. Help Users Recognize, Diagnose and Recover from Errors
Whenever there is an error, Photoshop provides dialogue that lets the user know what went wrong and
how to fix it.
10. Help and documentation
Help and documentation can be accessed easily via the main menu bar. From there, you can find a wide
variety of help topics and tutorials on how to make full use of the program.

4.4.2 Windows vs OS X
Let’s talk about the two most used operating systems. Which one is better?
“I cannot give you a definite answer, although personally I find OS X is better equipped with
design patterns that satisfy my use as a user who spends many hours a day in front of the
computer doing very different sorts of activities. I must say that I also miss some of the
Windows interaction patterns when I am in OS X, like dropping a window against the edge
so it occupies half the screen. I do not have a final answer.”
We are going to review their differences and examine why they are the way they are.
[https://usabilitygeek.com/windows-10-vs-mac-os-sierra-user-interface-artificial-intelligence/]

First we should see it as a matter of 5 principles of design.
1. You aren’t allowed to “theme” MacOS to any relevant degree.
If you call up your Windows support person, and have installed a “space” theme, then you
might need to “double click the black hole” instead of “double click the recycle bin” or
“double click the trash can”.
This can make telephone support very difficult; but it also means that when you sit down at
a random Windows machine, it may not look — or act — like your Windows machine.
Apples wants to prevent errors. Fortunately, Windows is moving towards this direction.
[https://www.quora.com/Why-is-UI-of-Mac-OS-so-much-better-than-Windows-when-Microsoft-is-very-
much-able-to-hire-the-best-designers-as-Apple]

2. Developers aren’t allowed to vary your program substantially from the user interface
guidelines, without a lot of effort. The problem arises because, on MacOS, “If you’ve seen
one word processor, you’ve seen them all”. Consistency.
This has a clear impact on UX: “All of my knowledge I gained towards climbing the learning
curve of one word processor instantly applies to every other word processor!”.
3. As a user, you aren’t allowed to do things you
aren’t allowed to do
On MacOS, you ask for permission; it happens
behind the scenes, and you mostly don’t notice it.
On Microsoft Windows, you ask for forgiveness; it
happens in your face, because it pops up an error
message, when the OS is not in a forgiving mood.

4. MacOS X is program-centric, and Windows is data-centric
This is an interesting abstract problem. As a programmer, in Windows you can use many of
the libraries and tools installed in the computer. While in OS X, every program is more
independent.
But the data and program approach are visible when it comes to the user. Two little
examples.
• Apps are packed together as a single file. So you forget about all the inner files.
• You can rename a file while it is open by a program and this creates no conflict.

More differences between the systems
Setup Experience
Both OSes offer clear and polished setup processes. You can use
both without signing in to an account with Apple or Microsoft,
but both offer a richer experience if you do.
Logging In and Getting Started
Both systems offer login options that go beyond the traditional
act of simply signing in on your desktop. Windows 10 provides
more options to login and faster. In this case it is more flexible
from Nielsen’s perspective.

Search
The search box in Windows 10 displays at
all times, and typing in it pops up a panel
with file, app, and web results. Spotlight
from OS X does it too. Perhaps Spotlight
shows information from Apps and lets you
navigate faster.
AI Helpers: Cortana vs. Siri
Cortana arrived on Windows 10 a good year
before Siri made it to the Mac, and is still
more capable in a few important ways.

Shortcuts
You need to provide shortcuts and many different ways to the same thing in order to allow the
user, first, to do things the way he can remember them best, second, much faster when done
multiple times.
This applies to batch operations (renaming files) but also to navigate in the operating system,
either between software or inside of it. This is important to make the system flexible.
(remember the Nielsen heuristic Flexibility and efficiency of use: allow users to tailor frequent
actions.)
In this case, both systems provide keyboard shortcuts. OS X provides some gestures to navigate in
the browser (i.e. the back and forward with the touch screen).
Some usual actions in the browser are opening a new tab, closing a tab, changing the opened
software, maximizing a window, etc.
[https://blogs.technet.microsoft.com/sebastianklenk/2015/05/28/windows-10-keyboard-
shortcuts-at-a-glance/]
[https://www.laptopmag.com/articles/windows-hot-keys-on-mac]
[https://www.computerworld.com/article/3023544/apple-mac/24-keyboard-shortcuts-mac-users-
need-to-know.html]

Change the app
Features like Mission Control, Expose, Spaces, and TaskBoard have given macOS a sizeable
advantage over Windows for a long time now.
With the release of Windows 10, however, Microsoft has made some pretty serious changes to
the way that users can interact with the operating system, introducing trackpad gestures,
multitasking view, multiple desktops, and a pretty advanced grid for snapping windows in place.
Mission control from OS X

Hot corners from OS X allow you to create flexible shortcuts. Corners are bad for software but
good for operating system uses.
For instance, with the Desktop and the Mission control view you can change the app or move
files from one place to another (one window to another or inside consecutive folders) without
interrupting your main screen.
This is my configuration of hot
corners. They offer me
flexibility (Nielsen heuristic).
I can quickly check and
interact with the desktop, put
the display to sleep, see the
dashboard with some
information or access an
overview of all the apps
opened (mission control).

Failure management
OS X allows you to create backups seamlessly with Time Machine. You establish an external
networked hard disk and the operating system creates incremental and total backups you can
consult to obtain specific files or to restore the entire configuration.
The Mac support is also easy to access through appointments. In this case, OS X is clearly superior.
According to Nielsen, with this you help users recognize and recover from errors.

Navigation bar and status bar
Navigation bars are one of three key areas of UI navigation. Depending on the type of device, the
navigation bar may take on many different forms. In mobile UX, navigation bars are often
simplified as much as possible, in order to accommodate the context of mobile usage, and its
often hurried pace. Which one is better? Try to answer these questions:
Should the software bar be the system status bar? Do we use them in the same way?

The information and functionalities in both status bars are very similar.
Should the software bar be the system status bar? Do we use them in the same way?

Windows navigation bar mixes actions (start), opened software (navigation bar) and system status.
OS X dock is used only for opened software. System status is in the upper status bar.
Two ideas about OS X design choices to answer the previous questions:
• Dock is easier to access (according to Fitt’s Law) and can grow according to your preference in
the same way that you can make it disappear automatically when not approaching the area.
• System status gets integrated with the current opened software top menu in a natural way.
This way there is not an extra bar. There is usually one bar: the status bar.
• When you are working using a software you do not actually see the other opened software
(the dock is hidden), you only see the status bar (system information).

Application launcher
The application launcher is the second of three key areas of UI navigation. Just as with the
navigation bar, app launchers can take on different shapes and sizes, often depending on the type
of device, but also depending on the software ecosystem.
Which one is better? Windows seems more consistent with the rest of devices (Phones and
tablets) and allow greater personalization to combine applications with information.

User Experience 4: Usable User Interface

User Experience 4: Usable User Interface

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to User Experience 4: Usable User Interface

Similar to User Experience 4: Usable User Interface (20)

More from Marc Miquel

More from Marc Miquel (18)

Recently uploaded

Recently uploaded (20)

User Experience 4: Usable User Interface