Slides for a talk Osama Ashawa, Principal of Design, and I presented at ConveyUX 2017 conference on March 2. http://conveyux.com/sessions/design-dos-and-donts-for-great-ar/ Osama can be found here: https://www.linkedin.com/in/osama-ashawa-846b0248/

1. DOs & DONTs OF AR

2. D O s & D O N T s
O F A R
Hello
!!
His work at ChaiOne has been spent
questioning, deconstructing, and
crafting successful research-driven
designs for users inhabiting diverse
environments.
As a Lead User Researcher, Evelina
uses her expertise in cognitive
neuroscience and psychology to help
Fortune 500 companies achieve their
business objectives by improving the
user experience of their tools.
LEAD USER RESEARCHER DESIGN PRINCIPAL
Osama AshawaEvelina Tapia, PhD
@LMAOSAMA@MYNAMEISEVELINA
2

3. AUGMENTED
REALITY
AR
MIXED
REALITY
MR
VIRTUAL
REALITY
VR
THREEREALITIES
D O s & D O N T s
O F A R
3

4. AUGMENTED REALITY
THREE REALITIES
Augmented reality (AR) is a live direct or indirect view of a
physical, real-world environment whose elements are
augmented (or supplemented) by computer-generated
sensory input such as sound, video, graphics or GPS data.
AR takes your view of the real world and adds digital
information and/or data on top of it
D O s & D O N T s
O F A R
1/3
4

5. MIXED REALITY
THREE REALITIES
Mixed reality (MR), sometimes referred to as hybrid reality,
is the merging of real and virtual worlds to produce new
environments and visualizations where physical and digital
objects co-exist and interact in real time.
Mixed reality lets the user see the real world (like AR) while
also seeing believable, virtual objects (like VR).
D O s & D O N T s
O F A R
2/3
5

6. VIRTUAL REALITY
THREE REALITIES
The computer-generated simulation of a three-dimensional
image or environment that can be interacted with in a
seemingly real or physical way by a person using special
electronic equipment, such as a helmet with a screen inside
or gloves fitted with sensors.
D O s & D O N T s
O F A R
3/3
6

7. D O s & D O N T s
O F A R
REALITYSPECTRUM
7
AR MR VR

8. AUGMENTED
REALITY
D O s & D O N T s
O F A R
8

9. AUGMENTED REALITY
AR can be experienced on multiple
platforms.
Mobile Devices
People experience AR most commonly
on smart phones and tablets.
Smart Glasses
A hands-free option for experiencing
AR, great for industrial and
manufacturing use cases.
Viewer Boxes
More of an immersive experience,
Headsets that utilize a smart phone
have increased in popularity most
notably with Google’s Cardboard.
AR
D O s & D O N T s
O F A R
9

10. D O s & D O N T s
O F A R
EXAMPLEOFMOBILE
10

11. D O s & D O N T s
O F A R
EXAMPLEOFMOBILE+VIEWERBOX
11

12. D O s & D O N T s
O F A R
EXAMPLEOFSMARTGLASSES
12

13. 13
AR
MOBILEARD O s & D O N T s
O F A R
Mobile Devices

14. MOBILE
AR
D O s & D O N T s
O F A R
14

15. MOBILEAR
INTERFACE DESIGN INTERACTION DESIGNDIGITAL OBJECTS
WE WILL COVER
D O s & D O N T s
O F A R
15

16. DIGITAL
OBJECTS
D O s & D O N T s
O F A R
16

17. DOs&DONTs
17
Animations
Appearance Touch, don’t look
Digital objects should aim to
appear 3-dimensional rather
than flat.
Give your objects expression
and creativity
Reward users with interaction
— watching an animation loop
is boring, engage the user."
#$
D O s & D O N T s
O F A R

18. D O s & D O N T s
O F A R
Digital objects should aim to appear 3-
dimensional rather than flat
Appearance
DIGITALOBJECTS

19. D O s & D O N T s
O F A R
Make objects in the scene more expressive and
creative through animations.
Animations can:
• Capture the user’s attention
• Indicate interactivity
Animations
DIGITALOBJECTS

20. D O s & D O N T s
O F A R
Reward users with interaction — watching an
animation loop is boring, engage the user.
Touch, don’t look
DIGITALOBJECTS

21. INTERFACE
DESIGN
D O s & D O N T s
O F A R
21

22. DOs&DONTs
22
Reuse Mobile
Patterns
Visual Hierarchy Space & Type
Highlighting
Interactivity
2D foreground of app UI feels
interactive (e.g as in Augment
app); use opacity to create a
sense of foreground and separate
3D and 2D menu regions
Use some of the mobile UI
elements - don’t have to
invent a whole new language.
Use animation, highlighting,
graphic states, and even
vibration to indicate interactive
elements within view. Visual
cues elicit discovery.
Clearly distinguish between
interactive and non-interactive
elements of your digital object.
Designing things for low
resolution - text needs to be easy
to read until hardware catches up
% &
'(
D O s & D O N T s
O F A R

23. D O s & D O N T s
O F A R
• Use 2D interface layers to contrast against the
3D object and live world view
• Anchored elements reinforce the perception of
an interface rather than an element in the
augmented world.
2D / 3D LAYERS
INTERFACEDESIGN

24. D O s & D O N T s
O F A R
Buttons, switches, sliders, and menus are already
well established mobile interaction patterns and
UI elements.
• Large video area
• Use clear and large icons
• Text overlay
REUSE MOBILE
PATTERNS
INTERFACEDESIGN

25. D O s & D O N T s
O F A R
Reusing pixels for different content — based on
user’s proximity show/hide different things —
especially small screen in cardboard cases
PIXEL ECONOMY
INTERFACEDESIGN

26. D O s & D O N T s
O F A R
Use animation, highlighting, graphic states, and
even vibration to indicate interactive elements
within view.
Visual cues help prompt discovery, so including
object highlighting, looping animation(i.e.
wiggle), or an explicit prompt as the user nears
the virtual object will help distinguish your
interactive elements.
HIGHLIGHTING
INTERACTIVITY
INTERFACEDESIGN

27. D O s & D O N T s
O F A R
• Concise and exact
• Communicate the need-to-know
• Consider the moving environment
CAREFUL
TYPOGRAPHY FOR
LOW RESOLUTION
INTERFACEDESIGN

28. INTERACTION
DESIGN
D O s & D O N T s
O F A R
28

29. DOs&DONTs
29
Touch-Free
Touch Feedback
Follow established interaction
patterns and guidelines for touch
controls. Give attention with
foreground UI and their legibility
against the live scene.
Directional interactions like
“look and wait” for making
choices as well as head
gestures like nodding, will be
necessary.
Visual and haptic feedback,
established by mobile UI
patterns, reassure interactivity
to users.
)
*+
D O s & D O N T s
O F A R

30. D O s & D O N T s
O F A R
Touch is great for user engagement.
It promotes discovery and is the most natural
type of interaction with mobile devices, especially
if they’re simulating physical properties through
digital objects.
Touch
INTERACTIONDESIGN

31. D O s & D O N T s
O F A R
When experiencing AR through a viewer box,
touch interaction is extremely limited or non-
existent. We’re left with a couple options:
• “Look” and wait
• Gestures
Touch-Free
INTERACTIONDESIGN

32. D O s & D O N T s
O F A R
How you provide feedback to the user depends
on the modality of interaction. Touch and non-
touch interactions can provide feedback in
these ways:
• Audio
• Visual
• Haptic
Feedback
INTERACTIONDESIGN

33. 33
TOSUMUP
Rapid prototyping and testing
of new UI patterns will be
necessary to verify efficacy.
TEST NOVEL UIMOBILE PATTERNS
UX principles and best
practices for AR will need to
be continuously tested and
revised as a community.
COMMUNITY DRIVEN
Rely on tried-and-true mobile
UI patterns and practices.
Consider the live camera
view’s effect on UI clarity.
D O s & D O N T s
O F A R
,
-
. /

34. ZAPPAR
MAKEUP GENIUS
AUGMENT
DINOSAURS!
ANATOMY 4D
INKHUNTER
IRON HUD
SIGHT PLUS
TRYIT
D O s & D O N T s
O F A R
34

35. Thanks ConveyUX
THEEND
35
D O s & D O N T s
O F A R