20/03/2017
1
PA201
Virtual Environments
Lecture 5
Virtual Reality User Interface Design
Fotis Liarokapis
liarokap@fi.muni.cz
20th March 2017
User Interface Design
What is User Interface Design?
• The process of designing effective and user
friendly interfaces for software systems and
applications
– Applies in all computer science
– Other disciplines as well
• i.e. Hardware design
The User Interface
• Users usually judge a software application based
on its interface rather than its functionality
– A poorly designed interface can cause a user to
make catastrophic errors
– Poor user interface design is the main reason why so
many software systems are never used
Many Types of Interfaces
• Command
• Speech
• Data-entry
• Form fill-in
• Query
• Graphical
• Web
• Pen
• Augmented reality
• Gesture
Graphical User Interfaces (GUIs)
• GUIs allows users to interact with electronic
devices through graphical icons and visual
indicators such as secondary notation
– Opposed to text-based interfaces, typed command
labels or text navigation
• GUIs can be found in hand-held devices and
many applications exist
– i.e. Augmented reality
20/03/2017
2
GUI Characteristics
https://www.ics.uci.edu/~taylor/ics52_fq01/UISlides.pdf
GUI Advantages
• They are easy to learn and use
– Without experience can use the system quickly
– Can switch quickly from one task to another
– Can interact with several different applications
– Information remains visible in its own window when
attention is switched
• Fast, full-screen interaction is possible with
immediate access to anywhere on the screen
https://www.ics.uci.edu/~taylor/ics52_fq01/UISlides.pdf
User-Centred Design
• In user-centred design the needs of the user are
paramount and where the user is involved in the
design process
• User interface design always involves the
development of prototype interfaces
User Interface Design Process
https://www.ics.uci.edu/~taylor/ics52_fq01/UISlides.pdf
User Interface Design Principles
• User interface design must consider the needs,
experience and capabilities of the system users
– Principles underlie interface designs although not all
are applicable to all designs
• Designers should:
– Be aware of people’s physical and mental limitations
(e.g. limited short-term memory)
– Recognise that people make mistakes
https://www.ics.uci.edu/~taylor/ics52_fq01/UISlides.pdf
User Interface Design Principles .
https://www.ics.uci.edu/~taylor/ics52_fq01/UISlides.pdf
20/03/2017
3
Design Principles
• User familiarity
– The interface should be based on user-oriented terms and
concepts rather than computer concepts
• i.e. An office system should use concepts such as letters, documents,
folders etc. rather than directories, file identifiers, etc.
• Consistency
– The system should display an appropriate level of consistency
– Commands and menus should have the same format,
command punctuation should be similar, etc.
• Minimal surprise
– If a command operates in a known way, the user should be
able to predict the operation of comparable commands
https://www.ics.uci.edu/~taylor/ics52_fq01/UISlides.pdf
Design Principles .
• Recoverability
– The system should provide some resilience to user errors
and allow the user to recover from errors
• This might include an undo facility, confirmation of destructive
actions, 'soft' deletes, etc
• User guidance
– Some user guidance such as help systems, on-line
manuals, etc. should be supplied
• User diversity
– Interaction facilities for different types of user should be
supported
• i.e. Accessibility
https://www.ics.uci.edu/~taylor/ics52_fq01/UISlides.pdf
User-System Interaction
• Two problems must be addressed in interactive
systems design
– How should information from the user be provided to
the computer system?
– How should information from the computer system
be presented to the user?
• User interaction and information presentation
may be integrated through a coherent
framework such as a user interface metaphor
https://www.ics.uci.edu/~taylor/ics52_fq01/UISlides.pdf
Interaction Styles
Interaction Styles
• Direct manipulation
• Menu selection
• Form fill-in
• Command language
• Natural language
https://www.ics.uci.edu/~taylor/ics52_fq01/UISlides.pdf
Pros and Cons
https://www.ics.uci.edu/~taylor/ics52_fq01/UISlides.pdf
Interaction
style
Main advantages Main disadva ntages Application
examples
Direct
manipulation
Fast and intuitive
interaction
Easy to learn
May be hard to implement.
Only suitable where there is a
visual metaphor for tasks and
objects.
Video games
CAD systems
Menu
selection
Avoids user error
Little typing required
Slow for experienced users.
Can become complex if many
menu options.
Most generalpurpose
systems
Form fill-in Simple data entry
Easy to learn
Checkable
Takes up a lot of screen space.
Causes problems where user
options do not match the form
fields.
Stock control,
Personal loan
processing
Command
language
Powerful and flexible Hard to learn.
Poor error manage ment.
Operating systems,
Command and
control systems
Natural
language
Accessible to casual
users
Easily extended
Requires more typing.
Natural languageund erstanding
systems are unreliable.
Information
retrieval systems
20/03/2017
4
Direct Manipulation Advantages
• Users feel in control of the computer and are
less likely to be intimidated by it
• User learning time is relatively short
• Users get immediate feedback on their
actions so mistakes can be quickly detected
and corrected
https://www.ics.uci.edu/~taylor/ics52_fq01/UISlides.pdf
Direct Manipulation Disadvantages
• The derivation of an appropriate information
space model can be very difficult
• Given that users have a large information
space, what facilities for navigating around
that space should be provided?
• Direct manipulation interfaces can be complex
to program and make heavy demands on the
computer system
https://www.ics.uci.edu/~taylor/ics52_fq01/UISlides.pdf
Menu Systems
• Users make a selection from a list of
possibilities presented to them by the system
• The selection may be made by pointing and
clicking with a mouse, using cursor keys or by
typing the name of the selection
• May make use of simple-to-use terminals such
as touch screens
https://www.ics.uci.edu/~taylor/ics52_fq01/UISlides.pdf
Menu Systems Advantages
• Users need not remember command names as
they are always presented with a list of valid
commands
• Typing effort is minimal
• User errors are trapped by the interface
• Context-dependent help can be provided
– The user’s context is indicated by the current menu
selection
https://www.ics.uci.edu/~taylor/ics52_fq01/UISlides.pdf
Menu Systems Disadvantages
• Actions which involve logical conjunction (and)
or disjunction (or) are awkward to represent
• Menu systems are best suited to presenting a
small number of choices
– If there are many choices, some menu structuring
facility must be used
• Experienced users find menus slower than
command language
https://www.ics.uci.edu/~taylor/ics52_fq01/UISlides.pdf
Command Interfaces
• User types commands to give instructions to the
system
– i.e. UNIX
• May be implemented using cheap terminals
• Easy to process using compiler techniques
• Commands of arbitrary complexity can be
created by command combination
• Concise interfaces requiring minimal typing can
be created
https://www.ics.uci.edu/~taylor/ics52_fq01/UISlides.pdf
20/03/2017
5
Command Interfaces Disadvantages
• Users have to learn and remember a command
language
– Unsuitable for occasional users
• Users make errors in command
– An error detection and recovery system is required
• System interaction is through a keyboard so
typing ability is required
https://www.ics.uci.edu/~taylor/ics52_fq01/UISlides.pdf
Command Languages
• Often preferred by experienced users because
they allow for faster interaction with the system
• Not suitable for casual or inexperienced users
• May be provided as an alternative to menu
commands
– i.e. Keyboard shortcuts
• In some cases, a command language interface
and a menu-based interface are supported at
the same time
https://www.ics.uci.edu/~taylor/ics52_fq01/UISlides.pdf
Natural Language Interfaces
• The user types a command in a natural language
• Generally, the vocabulary is limited and these
systems are confined to specific application
domains
– i.e. Timetable enquiries
• NL processing technology is now good enough to
make these interfaces effective for casual users
– But experienced users find that they require too
much typing
https://www.ics.uci.edu/~taylor/ics52_fq01/UISlides.pdf
Multiple User Interfaces
https://www.ics.uci.edu/~taylor/ics52_fq01/UISlides.pdf
Information Presentation
• Information presentation is concerned with
presenting system information to system users
• The information may be presented directly (e.g.
text in a word processor) or may be transformed
in some way for presentation (e.g. in some
graphical form)
• The Model-View-Controller approach is a way of
supporting multiple presentations of data
https://www.ics.uci.edu/~taylor/ics52_fq01/UISlides.pdf
Information Presentation .
https://www.ics.uci.edu/~taylor/ics52_fq01/UISlides.pdf
20/03/2017
6
Types of Information
• Static information
– Initialised at the beginning of a session
• Does not change during the session
– May be either numeric or textual
• Dynamic information
– Changes during a session and the changes must
be communicated to the system user
– May be either numeric or textual
https://www.ics.uci.edu/~taylor/ics52_fq01/UISlides.pdf
Information Display Factors
• Is the user interested in precise information or
data relationships?
• How quickly do information values change?
• Must the change be indicated immediately?
• Must the user take some action in response to a
change?
• Is there a direct manipulation interface?
• Is the information textual or numeric? Are
relative values important?
https://www.ics.uci.edu/~taylor/ics52_fq01/UISlides.pdf
VR Interaction Styles
Types of VR Apps
• Generally speaking from a designer’s perspective, VR
applications are made up of two types of components:
– Environments
– Interfaces
• You can think of an environment as the world that you
enter when you put on a VR headset — the virtual planet
you find yourself on, or the view from the rollercoaster
that you’re riding
• An interface is the set of elements that users interact with
to navigate an environment and control their experience
https://www.smashingmagazine.com/2017/02/getting-started-with-vr-interface-design/
Types of VR Apps .
• All VR apps can be positioned along two axes
according to the complexity of these two
components
https://www.smashingmagazine.com/2017/02/getting-started-with-vr-interface-design/
A Process For VR UI Design
• Whereas most designers have figured out
their workflow for designing mobile apps,
processes for designing VR interfaces are yet
to be defined
• Designing for VR should not mean transferring
2D practices to 3D, but finding a new
paradigm
https://uxdesign.cc/design-practices-in-virtual-reality-f900f5935826#.d5o5fi71f
20/03/2017
7
A Process For VR UI Design .
• Designers should expand their expertise to
different fields, such as psychology,
architecture, sound design, lighting design and
physics, in order to be able to create fully
controlled experiences, guiding users in VR by
shaping the virtual environment in such way
https://uxdesign.cc/design-practices-in-virtual-reality-f900f5935826#.d5o5fi71f
VR Design Solutions
Role of the Ground
• Users can find themselves in
such situation in poorly
designed VR experiences,
causing inevitable motion
sickness
• The ground to horizon
relationship is as important
in VR
– Similar to our physical reality
https://uxdesign.cc/design-practices-in-virtual-reality-f900f5935826#.d5o5fi71f
Atmosphere
• Atmospheric (aerial)
perspective can help
users to understand the
scale of the virtual
environment, therefore
making the experience
more natural
– The gradual fading of the
landscape is a clear cue
for depth and distance
Masaccio using atmospheric perspective
to create the illusion of depth
https://uxdesign.cc/design-practices-in-virtual-reality-f900f5935826#.d5o5fi71f
Terrain Features
• Ground is rarely an open environment
• A path affords pedestrian motion from one place to
another, between other terrain features
• An obstacle is an animal-sized object that affords collision
• A barrier is a specific kind of obstacle that is usually
blocking vision as well as movement
• A water margin prevents pedestrian locomotion
• A brink, the edge of a cliff
• A step is a layout of adjacent steps which afford both
descent or ascent
• A slope may or may not afford pedestrian locomotion
dependent on the angle and texture of the ground
https://uxdesign.cc/design-practices-in-virtual-reality-f900f5935826#.d5o5fi71f
Terrain Features .
• Using these features in a controlled manner,
as the building blocks when designing the
virtual environment, will result in (natural) VR
experiences guided by human intuition
https://uxdesign.cc/design-practices-in-virtual-reality-f900f5935826#.d5o5fi71f
20/03/2017
8
User and Soundscapes
• In virtual reality changing the environment entirely
is effortless
– Although for the user these sudden and overwhelming
changes can cause sickness and confusion
• A gentle introduction to the new environment can
be achieved by fading-in the ambient soundscape of
the place at first, then the image
• This allows to build a mental image of the
environment via sound
– Lowering the shock factor
https://uxdesign.cc/design-practices-in-virtual-reality-f900f5935826#.d5o5fi71f
Video
• https://player.vimeo.com/video/138951063
Guiding the User with Objects
• Navigating the user via a
certain path in a cluttered
environment can be difficult
without using conventional
wayfinding UI elements
• The usage of these elements
could break the immersion of
the experience
– However subtle changes in the
environment, such as growing
flowers at the openings of a
field in order to draw the users
attention to the correct path,
could still maintain the
genuineness of the place
https://uxdesign.cc/design-practices-in-virtual-reality-f900f5935826#.d5o5fi71f
Red flowers in Firewatch guiding the
player towards the correct direction
Contextual Reticle
• In non-tracked VR reticles are used in order to
show the user the specific point where they gaze
– e.g. Gear VR, Google Cardboard
• It helps to orient in space by showing the centre
of focus
• It is also used for movement and interacting with
objects
• These specific tasks demand different reactions
from the reticle
https://uxdesign.cc/design-practices-in-virtual-reality-f900f5935826#.d5o5fi71f
Contextual Reticle .
• Idle state
– The idle state reticle should be as minimal as
possible, giving only a hint where the centre is
• Movement
– The reticle should be activated when the user looks
at any place that is approachable
– When doing so, the reticle should transform into a
larger pointer, highlighting the selectable area with a
circle projected over it from the user’s perspective
https://uxdesign.cc/design-practices-in-virtual-reality-f900f5935826#.d5o5fi71f
Contextual Reticle ..
• Interacting with objects 
– When the user turns his/her attention to an interactive
object the reticle should react accordingly
• Reticle colouring
– The reticle should adapt its colour to the brightness level
of its background, by switching between light and dark
modes in order to stay visible in all lighting conditions
• Objects as reticle 
– Replacing the reticle with specific 3D items can be an easy
cue for the interaction
• e.g. a key as the reticle whilst opening a lock
https://uxdesign.cc/design-practices-in-virtual-reality-f900f5935826#.d5o5fi71f
20/03/2017
9
Interactive Objects
• If not all objects are interactive, users should be
hinted which objects they can interact with
• The contextual reticle can be a help in this case,
but in some cases, in order to avoid confusion,
the interactive objects should change, too
• This could be a minor change in the shading of
the object or even a subtle sound describing its
behaviour whilst looking at it
– e.g. subtile click in case of light switches
https://uxdesign.cc/design-practices-in-virtual-reality-f900f5935826#.d5o5fi71f
VR Design Patterns
Introduction to VR Design Patterns
• UX experts used to design forms, websites and
smartphone applications
– Now they need to re-learn the trade to design interfaces and
interactions in virtual reality
• Many of the traditional UI elements simply do not work
in VR, and a significant part of the existing UX toolkit is
simply inappropriate
• To begin with, designing for a flat surface - our laptop or
phone screens - is very different from designing for a
spherical world with the user at its centre
– Luckily there are people researching UI and UX in VR, and
there are a few tried and tested patterns
http://realityshift.io/blog/ui-ux-design-patterns-in-virtual-reality
Curved Design
• Take an element as simple as a rectangle, a
picture or a video player
• Put it into a VR environment, and it just doesn't
work, especially if it's too wide or tall
• The edges of a flat surface will be further away
from the user's eye focus, making them blurry
and hard to read
• The solution is curved design
– You need to stop thinking about the canvas as a
surface, and imagine it as a sphere
http://realityshift.io/blog/ui-ux-design-patterns-in-virtual-reality
Curved Design .
http://realityshift.io/blog/ui-ux-design-patterns-in-virtual-reality
Narrowing the Field
• In VR placing any meaningful control element to
the periphery of the field of vision is a bad idea
– It's simple biology: your vision is simply not sharp
enough on the edges.
• We are used to think in a landscape or portrait
format on the web, and on smartphones
• Neither work particularly well in VR, as they force
the user to tilt their head too much
– Instead, controls should be placed inside a 1:1 rectangle
area
http://realityshift.io/blog/ui-ux-design-patterns-in-virtual-reality
20/03/2017
10
Narrowing the Field .
http://realityshift.io/blog/ui-ux-design-patterns-in-virtual-reality
Using Z Zones and Depth
• Objects that are too close to your eyes will get blurry
• Just raise your hand and start moving it towards your face
- you simply can't maintain focus when it's closer than a
few inches
• Objects, and especially controls should never be placed
too close to the user
• On the other hand people are much better in telling the
distance between two objects in close distance, than
between two objects far away
• If the distance is important from an interaction point of
view, the objects should be placed reasonably close to the
user's eyes
http://realityshift.io/blog/ui-ux-design-patterns-in-virtual-reality
Using Z Zones and Depth .
http://realityshift.io/blog/ui-ux-design-patterns-in-virtual-reality
Motion Flow
• In virtual reality the camera is mapped to the player's head,
with it's focus being at the centre (unless you use eye tracking)
• This means you never ever should change the environment
against the head movements, or force the user turn their head
involutarily
– Both leads to motion sickness, and being nauseated
• Of course sometimes you want to guide the user through the
user interface, towards the direction where something is
happening
– This is where subtle tools like motion flow comes into play
– Pressing a button can trigger the button to extend, or slowly start
moving, gently guiding the user to turn their head
– We are implying a direction, guiding their eye to the next point of
interest
http://realityshift.io/blog/ui-ux-design-patterns-in-virtual-reality
Moving Interface
• It's the opposite of motion flow, when we
don't urge the user to look in a specific
direction, but rather move the new elements
directly to the field of view
• Standing the centre of a sphere means you
don't see, and you don't know about UI
elements changing behind your back
• Sometimes it's better to put them right in the
front of the user
http://realityshift.io/blog/ui-ux-design-patterns-in-virtual-reality
Capturing Attention
• The long evolution of the Homo Sapiens trained us
to pay attention to lights and movement
– This evolutionary skill is perfect to capture focus in a
virtual reality environment
• A great example is the game demo Lost by Oculus
– They use fireflies in a dark forest to lead the eyes of the
user
• We expect to see more subtle, clever plays on light
and shadow in VR applications and games
http://realityshift.io/blog/ui-ux-design-patterns-in-virtual-reality
20/03/2017
11
Capturing Attention .
http://realityshift.io/blog/ui-ux-design-patterns-in-virtual-reality
Anchor Objects
• Virtual reality causes dizziness for a lot of people
• Chances are if you had a bad experience with VR you
won't try it again
– And definitely won't try it the third time
• We are used to standing or sitting still while the world is
moving around us, a good example being driving
• It's not causing nausea, because we have a visual anchor,
the car dashboard
• Establishing such an anchor object in the virtual space is
something interface designers should consider
• Research suggests even a virtual nose can help
http://realityshift.io/blog/ui-ux-design-patterns-in-virtual-reality
Anchor Objects .
http://realityshift.io/blog/ui-ux-design-patterns-in-virtual-reality
Holophonic Sound
• Holophonic means 3D sound
• The idea is that with listening through the right
equipment you can tell if the sound is coming from
above, below, or from behind your back
– And not just left and right, as with the stereo systems
• Holophonic sounds are amazing in games, but they
very well might be used for VR control interfaces
– Imagine a video start playing outside of your view, and
you will hear ‘exactly’ where the sound comes from
http://realityshift.io/blog/ui-ux-design-patterns-in-virtual-reality
Conclusions
• Virtual reality and user interface design are
emerging as a new medium with the potential
of having as strong an impact in society
• Nowadays can build the foundations of
interface, experience and interaction design
specific for this medium
– Without taking already existing solutions for
granted
Videos
• VR Interface Design Pre-Visualisation Methods
– https://www.youtube.com/watch?v=id86HeV-Vb8
• UI/UX design for WebVR
– https://www.youtube.com/watch?v=ZOaOYTOpwy
M
• Google I/O 2015 - Designing for virtual reality
– https://www.youtube.com/watch?v=Qwh1LBzz3AU
• Designing For Virtual Reality
– https://www.youtube.com/watch?v=hM1AnOqaE-w
20/03/2017
12
Questions