Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

When the Web Re-Enters the Material World


Published on

Presented at Web Unleashed 2017
More info at

Presented by Adelle Lin, Intel Corporation


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.


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

Published in: Internet
  • Get Paid To Manage Facebook Fan Pages! Facebook Fan Page Workers Required - Start Immediately. ◆◆◆
    Are you sure you want to  Yes  No
    Your message goes here
  • How we discovered the real reason nice guys don't get laid, and a simple "fix" that allows you to gain the upper hand with a girl... without changing your personality or pretending to be someone you're not. learn more... ◆◆◆
    Are you sure you want to  Yes  No
    Your message goes here
  • Secrets To Working Online, Hundreds of online opportunites you can profit with today! ◆◆◆
    Are you sure you want to  Yes  No
    Your message goes here
  • Your opinions matter! get paid for them! click here for more info...●●●
    Are you sure you want to  Yes  No
    Your message goes here
  • You can now be your own boss and get yourself a very generous daily income. START FREE...♥♥♥
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

When the Web Re-Enters the Material World

  1. 1. When the Web Re-Enters the Material World Mixed reality metaphors and frameworks
  2. 2. @adellelin
  3. 3. ADELLE LIN @adellelin
  4. 4. Introduction Intel Image 2 @adellelin
  5. 5. @adellelin
  6. 6. KevR @adellelin
  7. 7. @adellelin
  8. 8. @adellelin
  9. 9. @adellelin
  10. 10. Real Environment Augmented Reality (AR) Augmented Virtuality (AV) Virtual Environment Mixed Reality (MR) @adellelin
  11. 11. AR TOOLS @adellelin
  13. 13. Liisa @adellelin
  14. 14. @adellelin
  15. 15. How do YOU experience the web? @adellelin
  16. 16. How do we Experience the web? @adellelin
  17. 17. @adellelin MooR: Developing a Web Concept for Mixed Reality
  18. 18. What is the Navigation Bar? @adellelin
  19. 19. FEATURES: Artist menu using object recognition Artist desk = hub for information Exhibit of works Physical movement around space Voice prompts @adellelin
  20. 20. @adellelin
  21. 21. Metaphors / Skeuomorphic DESIGN @adellelin
  22. 22. An Icon: Needs to be “systematically related to what it represents” @adellelin
  23. 23. +delete rm -r The trashcan @adellelin
  24. 24. As long as our relational brain gets it @adellelin +delete rm -r
  25. 25. Angular scale of screens
  26. 26. Screens in VR @adellelin
  27. 27. Typing @adellelin
  28. 28. 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
  29. 29. Information Journey 1. Recognize need 2. Acquire 3. Interpret and validate 4. Use @adellelin
  30. 30. Acquiring Information: Google Smart Agent Algorithmic Recommendation Crowd - sourced Social Media Location Based Surfing @adellelin
  31. 31. Foraging @adellelin
  32. 32. “Double experts teleport” @adellelin
  33. 33. Sensemaking: Search Extract Encode Analyze @adellelin
  34. 34. Three “Sensory Modalities” relevant to learning: 1. Verbal 2. Visual 3. Kinesthetic @adellelin
  35. 35. Work it Work it Work it Work it Work it Work it Work it Work it Work it Work it Work it @adellelin
  36. 36. @adellelin Using Information:
  37. 37. Let’s Bookmark @adellelin
  38. 38. Open Tabs / Open Tabs / Open Tabs
  39. 39. @adellelin
  40. 40. Picture of space Things could get messy... @adellelin
  41. 41. What form should data take? @adellelin
  42. 42. @adellelin Shoebox, Evidence file, Schema
  43. 43. @adellelin
  44. 44. @adellelin
  45. 45. @adellelin
  46. 46. Draw from Metaphors that work for your application @adellelin
  47. 47. Mixed Reality Design Assessment Tool @adellelin
  48. 48. 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
  49. 49. Relational Context @adellelin
  50. 50. Context towards specific Users required expertise in evaluating art Would be marketed Is a minimum space requirement @adellelin
  51. 51. System / Interactions @adellelin
  52. 52. Many invitations to interact Multimodal interaction Soft rules for exploration Non-linear approach to site @adellelin
  53. 53. Environment Design @adellelin
  54. 54. Artist studio as a generally recognizable space Using foreign concept of desk as navigation bar Using lighting to indicate activation @adellelin
  55. 55. @adellelin
  56. 56. Structured system + Foreign environment + Specific context → User Experience needs to be more directive Making an Assessment @adellelin
  57. 57. User Experience @adellelin
  58. 58. Keep objects just below eye height More text explanation Lobby explains main features Iconography simulating real life @adellelin
  59. 59. Rick and Morty combiner @adellelin
  60. 60. Thank you! @adellelin