Skip to content

Latest commit

 

History

History
109 lines (58 loc) · 8.51 KB

File metadata and controls

109 lines (58 loc) · 8.51 KB

Design and Prototype

Objectives

  • Summarize inclusive collaboration design methods for teams.
  • Differentiate the tasks that are part of the design process vs. the prototyping process.
  • Contrast the difference between low fidelity vs. high fidelity storyboards.

Introduction

The main objectives of design is meant to iterate thinking, which is to:

  • Approach a problem broadly
  • Effective sharing of ideas with others
  • Evaluation of ideas to reach a solution

All these processes are necessary to iterate an idea and turn it into a product for the users. However, designing XR applications differs from the usual 2D design process. Typically, the 2D design process is utilized for user experience with products such as mobile phones, tablet and desktops for a less interactive and immersive experience than XR.

Design Process

Microsoft has developed a set of techniques which allows for quick iteration through complex design problems while also allowing for effective inclusion of team members, regardless of their skills and background.

These methods allow for team members without specialized 3D skills to offer ideas before diving into prototyping phase. The methods mainly consist of:

Bodystorming

The main aim of bodystorming is to develop innovative XR experiences, by encouraging the team members to think about the events occurring in the real world beyond the traditional world of 2D devices. It is a technique used for quick generation and evaluation of ideas that are too vague to prototype.

This simpler procedure aids in hosting a more in-depth session in scenarios where the outside stakeholders who are unfamiliar to XR development will be involved, and the need to refine broad scenarios arises.

This is accomplished by encouraging interaction with physical props in a real-world space, by utilizing simple, cheap crafting materials to build physical props to represent digital objects, user interfaces, and animations in a proposed experience.

Three people working on a bodystorming session, utilizing props to recreate scenes and devices.

Source: Microsoft

Bodystorming is meant to narrow down possibilities to test later during the in-device prototyping phase, to offset the burden of solving both technical and design challenges during the prototyping phase, and thus does not replace technical prototyping.

Acting

Following the bodystorming process of ideating with physical objects in the real world, the next step is to go through an experience with these objects. The process of acting focuses more on staging how a user would move through the experience or when evaluating how a user would go about a specific interaction.

Four people practicing acting how an application would work on a head mounted device.

Source: Microsoft

This process is focused to experience the user’s perspective, while allowing observers to observe how the events play out. Stakeholders could also be involved as part of the audience to provide more specific feedback from users’ viewpoint. This process also gives experts a quick, rough concept of how the experience might unfold, without need for a device-based prototype.

Storyboarding

Storyboarding is a technique meant for portraying and introducing experience concepts to new stakeholders or potential users, commonly used in the entertainment industry, such as movies and video games development.

This technique conveys both the overall flow of an experience at low fidelities and the aesthetic look and feel at high fidelities. Similar to prototyping understanding the fidelity needs of a storyboard is key to gathering the right feedback and avoid counter-productive discussions.

A low fidelity storyboard is utilized for quick discussions, especially when conveying high-level ideas. Such a storyboard can be as simple as stick-figure drawings and primitive shapes to denote virtual elements in a scene or the proximity of interactive components both physical and virtual. Furthermore, low-fidelity storyboards are executed with relative ease and requires low skill barrier.

An example of a low fidelity storyboard, showcasing simple drawings of a person interacting with an XR application.

Source: Microsoft

A high fidelity storyboard is used to bring in new stakeholder. Such a storyboard combines insights from the bodystorming session with the proposed aesthetic direction. Furthermore, a high-fidelity storyboard requires an artist embedded within the team to capture difficult to describe scenarios.

An example of a high fidelity storyboard, showcasing a series of people interacting with digital depictions of a building at the same time using an XR head mounted device.

Source: Microsoft

Overall Design Process

Design work is often physical before going into the development phase. The design process could start with whiteboarding and sticky notes and expands into physical bodystorming and acting. The process itself is done in continuous iterative phases.

Flowchart of the overall design process.

Source: Microsoft

Prototyping Process

The prototyping process focuses on building high fidelity prototypes. While the prototype is not a production ready version of the app or experience, it should be a parallel to how the user expects to interact with the app. The prototyping phase can uncover aspects of the app design which may need to be reconsidered before heading into the development of the production version of the app. Often times in prototyping, alternative or temporary objects are used in place of the actual objects that are used in production. Thus, you spend more time on developing and fine-tuning the user experience (UX) and less on visual design aspects such as creating the perfect splash screen or customizing a button's design. However, this does not mean that user interface (UI) should be neglected during this process.

Application prototype with basic shapes and colors as placeholder objects. An enlongated cube to serve as player and a post to serve as a net.

Two versions of an application's prototypes, the earliest on the left

Source: Curriculum Project

There are tools available to aid in the prototyping process which can mitigate your need to start from scratch. For sketching and laying out UI, consider using the Figma Toolkit.

A set of prototype UI examples using the Figma Toolkit

Source: Microsoft

And if you're in need of adding interactivity and simple UI, consider built-in UI and functionality that comes with your development platform. There's also toolkits available such as the Mixed Reality Toolkit (for Unity and Unreal) which provides assets for rapid prototyping and helps accelerate your development process.

A screenshot of some of the Mixed Reality Toolkit's prototyping tools.

Source: Microsoft

Post-Lecture Quiz

Quiz

Review and Self Study

We've identified the following resources to provide additional context and learning for the content reviewed in this lesson. We encourage you to review the material below and explore additional related topics.