Presented at Web Unleashed 2017 More info at www.fitc.ca/webu Presented by Adelle Lin, Intel Corporation Overview The web is beginning to spatialize. With the rapid development of hybrid reality tools –computer vision, webGL, 360 filming, animation as well as the hardware such as headsets and sensors– users are already beginning to expect richer content and more immersive ways to connect. How will the web look within virtual / augmented / alternate / mixed realities? Information architecture starts to embody physical architecture, sitemaps start looking like blueprints; this calls for a new framework for UX design. Do we take skeuomorphic design rules and reapply them in physical form or invent new metaphors? Through a few case study prototypes, Adelle examines devices that are used across the spectrum of digital to material, and explains assessment techniques for designing a hybrid-connected future. Objective Let’s make a 3d web together Target Audience Designers, framework developers, VR, AR, futurists, storytellers Five Things Audience Members Will Learn Current and future 3D immersive web trends and technologies Interaction design for 3D web Development tools for VR / AR Lessons from game design Assessing UX complexity for your project

1. When the Web Re-Enters
the Material World
Mixed reality metaphors and frameworks

2. @adellelin

3. ADELLE LIN
@adellelin
adelle.lin@gmail.com

4. Introduction
Intel Image 2
@adellelin

5. @adellelin

6. KevR
@adellelin

9. @adellelin

10. @adellelin

11. @adellelin

12. Real
Environment
Augmented
Reality (AR)
Augmented
Virtuality (AV)
Virtual
Environment
Mixed Reality (MR)
@adellelin

13. AR TOOLS
@adellelin

14. HARDWARE
TOOLS/
PLATFORM
MARKETPLACES
@adellelin

15. Liisa
@adellelin

16. @adellelin

17. How do YOU experience the web?
@adellelin

18. How do we Experience the web?
@adellelin

19. @adellelin
MooR:
Developing a Web Concept for Mixed Reality

21. What is the Navigation Bar?
@adellelin

22. FEATURES:
Artist menu using object recognition
Artist desk = hub for information
Exhibit of works
Physical movement around space
Voice prompts
@adellelin

23. @adellelin

24. Metaphors /
Skeuomorphic DESIGN
@adellelin

25. An Icon:
Needs to be
“systematically
related to what
it represents”
@adellelin

26. +delete rm -r
The trashcan
@adellelin

27. As long as our relational brain gets it
@adellelin
+delete rm -r

28. Angular scale of screens

29. Screens in VR
@adellelin

30. Typing
@adellelin

31. Metaphors to consider:
Reading screens
Moving things
Opening things
Moving in space
Back, saving, deleting
Communication w/ people and things
Inputs from and to the real world
@adellelin

32. Information Journey
1. Recognize need
2. Acquire
3. Interpret and validate
4. Use
@adellelin

33. Acquiring Information:
Google
Smart Agent
Algorithmic Recommendation
Crowd - sourced
Social Media
Location Based
Surfing
@adellelin

34. Foraging
@adellelin

35. “Double experts teleport”
@adellelin

37. Sensemaking:
Search
Extract
Encode
Analyze
@adellelin

38. Three “Sensory Modalities” relevant to learning:
1. Verbal
2. Visual
3. Kinesthetic
@adellelin

39. Work it
Work it
Work it
Work it
Work it
Work it
Work it
Work it
Work it
Work it
Work it
@adellelin

40. @adellelin
Using Information:

41. Let’s Bookmark
@adellelin

42. Open Tabs / Open Tabs / Open
Tabs

43. @adellelin

44. Picture of space
Things could get messy...
@adellelin

45. What
form
should
data
take?
@adellelin

46. @adellelin
Shoebox,
Evidence file,
Schema

47. @adellelin

48. @adellelin

49. @adellelin

50. Draw from Metaphors that work
for your application
@adellelin

51. Mixed Reality Design
Assessment Tool
@adellelin

52. Amorphous system + Familiar environment + General context → User Experience can be more interpretive
Structured system + Foreign environment + Specific context → User Experience might require more directiveness
@adellelin

53. Relational Context
@adellelin

54. Context towards specific
Users required expertise in evaluating art
Would be marketed
Is a minimum space requirement
@adellelin

55. System / Interactions
@adellelin

56. Many invitations to
interact
Multimodal
interaction
Soft rules for
exploration
Non-linear
approach to site
@adellelin

57. Environment Design
@adellelin

58. Artist studio as a generally recognizable space
Using foreign concept of desk as navigation
bar
Using lighting to indicate activation
@adellelin

59. @adellelin

60. Structured system + Foreign environment + Specific context → User Experience needs to be more directive
Making an Assessment
@adellelin

61. User Experience
@adellelin

62. Keep objects just
below eye height
More text
explanation
Lobby explains
main features
Iconography
simulating real life
@adellelin

63. Rick and Morty combiner
@adellelin

64. Thank you!
adelleninja.com
touchtech.io
adelle.lin@gmail.com
@adellelin