08/03/2020
1
PA201
Virtual Environments
Lecture 4
Virtual Reality User Interface Design
Fotis Liarokapis
liarokap@fi.muni.cz
08th March 2020
HCI Principles
Definition
• “Human–computer interaction (commonly referred
to as HCI) researches the design and use of
computer technology, focused on the interfaces
between people (users) and computers. Researchers
in the field of HCI both observe the ways in which
humans interact with computers and design
technologies that let humans As a field of research,
human-computer interaction is situated at the
intersection of computer science, behavioral
sciences, design, media studies, and several other
fields of study.”
https://en.wikipedia.org/wiki/Human%E2%80%93computer_interaction
The Field of HCI
https://www.pinterest.com/pin/388998486545084172/
What is HCI?
• Human-Computer Interaction
Advanced HCI?
08/03/2020
2
HCI Importance
• Cheaper/available computers/workstations
meant people more important than machines
• Excellent interface ideas modeled after human
needs instead of system needs
– User centered design
HCI Importance .
• Evolution of ideas into products through several
generations
– Pioneer systems developed innovative designs, but
often commercially unviable
– Settler systems incorporated (many years later) wellresearched
designs
• People no longer willing to accept products with
poor interfaces
HCI Discipline
A discipline concerned with the:
of interactive computing systems for human use
design implementation
evaluation
HCI Discipline Definition
• “Human-computer interaction is a discipline
concerned with the design, evaluation and
implementation of interactive computing
systems for human use and with the study of
major phenomena surrounding them.”
Association for Computing Machinery (ACM)
Three paradigms of HCI
• The Three Paradigms of HCI Harrison, Tatar
and Sengers, CHI 2007
Human Factors Classical Cognitivism Information Embodied Cognition Interaction
Three paradigms of HCI .
1st HCI Paradigm
Human Factors
Engineering
2nd HCI Paradigm
Classical Cognitivism
Information
3rd HCI Paradigm
Embodied Cognition
Interaction
Metaphor of
Interaction
Interaction as ManMachine
Coupling
Interaction as
Information Transfer
Interaction as
Phenomenologically Situated
Central Goal
for Interaction
Optimise fit
between man and
machine
Optimise accuracy and
Efficiency of Information
Transfer
Support of SituationAction in
the World
Typical Questions
of Interest How can we fix
specific problems
that arise in
Interaction?
What mismatches arise
in communication
between humans and
computers?
How can we accurately
model what people do?
How can improve the
efficiency of HCI?
What existing situated activities
should we support? How do
users appropriate technology?
How can we support interaction
with constraining it by what a
computer can do/understand?
What is the wider context roles,
politics and values?
08/03/2020
3
Three paradigms of HCI ..
1st HCI Paradigm
Human Factors
Engineering
2nd HCI Paradigm
Classical Cognitivism
Information
3rd HCI Paradigm
Embodied Cognition
Interaction
Appropriate
Disciplines for
Interaction
Engineering,
Programming,
Ergonomics
Laboratory and
Theoretical Behavioural
Science
Ethnography, Action Research
Ethnomethodology, Interaction
Design, User Centred Design
Desirable
Methodologies Cool Hacks
Verifiable Quantitative
design and evaluation
methods that can be
applied regardless of
context
Apalette of situated design and
evaluation strategies
Legitimate kinds
of Knowledge
Pragmatic Objective
Details
Objective facts and
models with general
applicability
Thick Description of Context
and Stakeholder Concerns.
How do you know
something is
True?
You Tried it out and
it worked
You confirm of refute
your hypothesis based
on a statistical analysis
of the evidence
You argue about the
relationship between your data
and what you seek to
understand
Three paradigms of HCI …
1st HCI Paradigm
Human Factors
Engineering
2nd HCI Paradigm
Classical Cognitivism
Information
3rd HCI Paradigm
Embodied Cognition
Interaction
Values
Reduce errors and
make it work.
Ad Hoc is OK.
Cool Hacks that
exploit a specific
instance are desired
Optimisation.
Strive for Objective,
Abstract, Quantitative,
Generalizable
Knowledge wherever
possible.
Principled evaluation is
a priori better than ad
hoc, since design can
be structured to suite
this paradigm.
Structured Design
better than unstructured.
Reduce
Ambiguity. Top Down
View of Knowledge.
Construction of meaning is
intrinsic to and unfolds from
interaction. What goes on
around systems is more
interesting than what’s
happening at the interface.
“Zensign” - what you don’t build
is as important and what you do
build. Goal is to grapple with
the full complexity around the
system.Knowledge can not just
be a powerful abstraction but
can be embedded in the world
as hidden context and tacit skill
which is revealed through
engagement
Which HCI Paradigm is Correct?
• The key question is not which of the paradigms is
“correct” but what different perspectives,
strengths, weaknesses, insights and tools they
offer and when they are appropriate to apply
Classical Cognitive
Information Epoc
Embodied/Situated
Interaction Epoc
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
Why Interface Design Process?
• 63% of large software projects go
over cost
• Managers gave four usabilityrelated
reasons
– Users requested changes
– Overlooked tasks
– Users did not understand their own
requirements
– Insufficient user-developer
communication and understanding
08/03/2020
4
Why Interface Design Process? .
• Usability engineering is software engineering
– Pay a little now, or pay a lot later!
– Far too easy to jump into detailed design
that is:
• founded on incorrect requirements
• has inappropriate dialogue flow
• is not easily used
• is never tested until it is too late
Foundations for designing interfaces
• Understanding users and their tasks
– Task-centered system design
• How to develop task examples
• How to evaluate designs through a task-centered walk-
through
Foundations for designing interfaces .
• Designing with the user
– User centered design and prototyping
• Methods for designing with the user
• Low and medium fidelity prototyping
– Evaluating interfaces with users
• The role of evaluation in interface design
• How to observe people using systems to detect
interface problems
Foundations for designing interfaces ..
• Designing visual interfaces
– Design of everyday things
• What makes visual design work?
– Beyond screen design
• Representations and metaphors
– Graphical screen design
• The placement of interface components on a screen
Foundations for designing interfaces …
• Principles for design
– Design principles, guidelines, and usability
heuristics
• Using guidelines to design and discover usability
problems
This is a
great
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
08/03/2020
5
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. Virtual reality
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
08/03/2020
6
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
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
Nowadays Many Mediums
• Mobile and Social Media
• Social Computing
• Virtual and Augmented Reality
• Ubiquitous Computing
• Tangible Computing
• Brain-Computer Interfaces
08/03/2020
7
Mobile and Social Media
• Smart Phones
• Apps vs HTML5
• Location Based Services (LBS)
• Communication and Content
Creation
• A post PC era of phones and
tablets?
• Constantly changing
interactions, social context
and place.
• Twitter, Facebook,
Foursquare, Google Maps
Social Computing
• Computer Supported
Collaborative Working
(CSCW)
• Beyond immediate
interaction to a web of
surrounding relations
• Ethnography,
Ethnomethodology
• Actual Practices
Virtual and Augmented Reality
• Virtual Worlds - Simulation,
immersion
• Second Life, Massive Multiplayer
Online Role Playing
Games MMORPG
• Virtual Reality - A separate
virtual place
• HeadMounted Displays, Caves
• Augmented Reality - The Real
World Plus
• Tablets, Phones, Google Glasses
Ubiquitous Computing
• Computers omnipresent
but “invisible”
• Computers escape
from the desktop and
disappear
• Wireless, Wearable,
Small, Embedded
• RFID tags,
• Micro-controllers,
Speckled computing,
Machine to Machine
• Internet of Things (IoT)
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
08/03/2020
8
Pros and Cons
https://www.ics.uci.edu/~taylor/ics52_fq01/UISlides.pdf
Interaction
style
Main advantages Main disadvantages 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
Slowfor 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 management.
Operating systems,
Command and
control systems
Natural
language
Accessible to casual
users
Easily extended
Requires more typing.
Natural language understanding
systems are unreliable.
Information
retrieval systems
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
08/03/2020
9
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
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
08/03/2020
10
Information Presentation .
https://www.ics.uci.edu/~taylor/ics52_fq01/UISlides.pdf
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 components
https://www.smashingmagazine.com/2017/02/getting-started-with-vr-interface-design/
08/03/2020
11
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
A Process For VR UI Design .
• Designers should expand their expertise to
different fields in order to be able to create fully
controlled experiences, guiding users in VR by
shaping the virtual environment in such way
– Such as psychology, architecture, sound design,
lighting design and physics
https://uxdesign.cc/design-practices-in-virtual-reality-f900f5935826#.d5o5fi71f
Start Designing VR User Experience
• Before you start designing for your VR app,
considering some of these fundamental
questions may help you:
– How do people get started?
– What affordances are provided to guide people
without overwhelming them?
– Do you want to err on the side of providing too
much guidance or create a minimalist environment
that doesn’t overload the user with too many
choices?
https://uxplanet.org/designing-user-experience-for-virtual-reality-vr-applications-fc8e4faadd96
Start Designing VR User Experience .
• Don’t expect people to know what to do and where
to go
• Slow and progressive familiarization, visual clues,
and guidance from the software should all be used
to help the user
• When you’re designing for VR, you’re designing for
the capabilities of people as much as you’re
designing for the capabilities of the system
• So it’s essential that you understand your users and
the issues that may come up while they experience
VR
https://uxplanet.org/designing-user-experience-for-virtual-reality-vr-applications-fc8e4faadd96
Typical Interaction Methods
Point-and-Click 3D UI
Controller-based 3D UI
Gesture-based 3D UI
https://www.mdpi.com/2076-3417/9/22/4861/htm
Process For Designing
VR User Experience
08/03/2020
12
Designing your First VR App
• Start your process with
the logical first step
– Which is to devise a
strategy or plan
https://uxplanet.org/designing-user-experience-for-virtual-reality-vr-applications-fc8e4faadd96
Designing your First VR App .
• Before you even begin considering structuring for
VR, you need to consider what sort of Experience
you need to make?
• There is certainly not a one-measure fits-all
• Most ethnographic research strategies are totally
open within VR, including:
– Client Interviews, Fly-on-the-Wall, Usability Testing,
Touchstone Tours, Simulation Exercises, Shadowing,
Participant Observation, Heuristic Evaluation, Focus
Groups, Eye Tracking, Exploratory Research, and Diary
Studies
https://uxplanet.org/designing-user-experience-for-virtual-reality-vr-applications-fc8e4faadd96
Setting up the Environment for
Designing
• To apply mobile app workflow to VR UIs, you first
have to figure out a canvas size that makes sense
Above is what a 360-degree environment looks like when flattened. This representation
is called an equirectangular projection. In a 3D virtual environment, these projections
are wrapped around a sphere to mimic the real world
https://uxplanet.org/designing-user-experience-for-virtual-reality-vr-applications-fc8e4faadd96
Setting up the Environment for
Designing .
• The full width of the projection represents 360
degrees horizontally and 180 degrees vertically
• We can use this to define the pixel size of the
canvas: 3600 × 1800
• Working with such a big size can be a challenge
– But because we’re primarily interested in the interface
aspect of VR apps, we can concentrate on a segment
of this canvas
https://uxplanet.org/designing-user-experience-for-virtual-reality-vr-applications-fc8e4faadd96
Setting up the Environment for
Designing ..
• The area of interest represents the one-ninth of
the 360-degree environment
– Positioned right at the center of the equirectangular
image and is 1200×600 pixels
https://uxplanet.org/designing-user-experience-for-virtual-reality-vr-applications-fc8e4faadd96
VR Design Principles
08/03/2020
13
Text Readability
• Because of the display’s resolution, all of your
beautifully crisp UI elements will look
pixelated
• This means, first, that text will be difficult to
read and, secondly, that there will be a high
level of aliasing on straight lines
• Try to avoid using big text blocks and highly
detailed UI elements
https://uxplanet.org/designing-user-experience-for-virtual-reality-vr-applications-fc8e4faadd96
Text Readability .
• Intended viewing distance: how far away we
have designed these to be viewed
• What is the optimal distance that these screens
were intended to be viewed from and that
intended viewing distance will inform the size of
the screen in addition to the size and density of
the content therein
https://uxplanet.org/designing-user-experience-for-virtual-reality-vr-applications-fc8e4faadd96
Text Readability ..
• Distance-independent millimeter (dmm) can be
described as one millimeter at a meter away
• So it’s an angular unit that just follows a
millimeter as it scales off into the distance
https://uxplanet.org/designing-user-experience-for-virtual-reality-vr-applications-fc8e4faadd96
Ergonomics
• When first designing for VR it’s exciting to
think about creating futuristic interfaces like
we’ve seen from Hollywood blockbusters like
Iron Man or Minority Report, but the reality is
those UIs would be exhausting if used for
more than a few minutes
https://uxplanet.org/designing-user-experience-for-virtual-reality-vr-applications-fc8e4faadd96
Ergonomics .
https://uxplanet.org/designing-user-experience-for-virtual-reality-vr-applications-fc8e4faadd96
Ergonomics ..
https://uxplanet.org/designing-user-experience-for-virtual-reality-vr-applications-fc8e4faadd96
08/03/2020
14
Ergonomics ...
https://uxplanet.org/designing-user-experience-for-virtual-reality-vr-applications-fc8e4faadd96
Avoiding Simulation Sickness
https://uxplanet.org/designing-user-experience-for-virtual-reality-vr-applications-fc8e4faadd96
Brightness Changes
• Be mindful of sudden changes in brightness
• Given the proximity of the screen to the user’s
eyes, transitioning the user from a dark scene to
a bright scene may cause discomfort as they
acclimate to the new level of brightness
• It is similar to stepping out of a dark room into
the sun
https://uxplanet.org/designing-user-experience-for-virtual-reality-vr-applications-fc8e4faadd96
Button Placement
• Avoid placing fuse buttons close to each other
– Fuse buttons work best if they are large targets that
are sufficiently far apart from each other
– If multiple smaller fuse buttons are placed near each
other, the user could accidentally click on the wrong
button
– Smaller buttons that are close to each other should
require a direct click to activate
https://uxplanet.org/designing-user-experience-for-virtual-reality-vr-applications-fc8e4faadd96
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
08/03/2020
15
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
https://uxdesign.cc/design-practices-in-virtual-reality-f900f5935826#.d5o5fi71f
Terrain Features .
• 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
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
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
08/03/2020
16
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
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
08/03/2020
17
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
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
08/03/2020
18
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
http://realityshift.io/blog/ui-ux-design-patterns-in-virtual-reality
Motion Flow .
• 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
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
08/03/2020
19
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
Questions