{"id":13839,"date":"2017-12-11T11:08:44","date_gmt":"2017-12-11T11:08:44","guid":{"rendered":"https:\/\/marvel7077.wpengine.com\/?p=13839"},"modified":"2020-09-01T09:20:49","modified_gmt":"2020-09-01T08:20:49","slug":"mixed-reality-user-flows-new-kind-template","status":"publish","type":"post","link":"https:\/\/www.shopjessicabuckley.com\/blog\/mixed-reality-user-flows-new-kind-template\/","title":{"rendered":"Mixed Reality User Flows: A New Kind of\u00a0Template"},"content":{"rendered":"

As designers, we create user flows and give them to developers, product managers, clients, and sometimes even users for testing. At its best, a user flow is a concise, clean, and compelling way to showcase the scope and vision of your application before it is developed. Oftentimes user flows<\/a> are the key piece of documentation that we provide developers to actually bring our apps to life.<\/p>\n

Most user flows for web and mobile products look something like this:<\/p>\n

\"\"<\/a>

A traditional web\/mobile user flow (from KM Design\u00a0House)<\/p><\/div>\n

This user flow can be deciphered pretty easily by anyone. It lays out a clear roadmap for how a user can accomplish tasks within the application. There is only one input option available: clicking.<\/p>\n

But if we were to adapt this format for a mixed reality experience, it would get cluttered quickly. Imagine adding voice input options to this flow. And 3D objects that can be resized and rotated. And 360 sound. And Cortana. And multiple application windows\u2026and more. This user flow, if kept in this same format, would likely get very messy and difficult to read if it were translated directly for the medium of mixed reality.<\/p>\n

Mixed Reality User Flows: Scene, not\u00a0Screen<\/h2>\n

In mixed reality, there are so many different components to design for that the format of a standard web\/mobile user flow doesn\u2019t work very well. There\u2019s a lot going on in any given mixed reality experience. Designers working in mixed reality aren\u2019t creating a screen-based experience \u2014 we\u2019re creating scene-based experiences. Devices like the HoloLens bring computing to your personal landscape. Mixed reality has everything to do with the physical world, timing, and a variety of input actions. A user can accomplish the same task in a number of different ways, all while other things are happening (e.g. a user can select an object at the same time audio and video are playing). On top of that, the actions and objects in a mixed reality scene are probably influenced by the physical landscape they\u2019re placed in. So as a designers, how can we account for all of this in a user flow? How can we describe mixed reality scenes in a clear and concise way to developers, product managers, and other stakeholders? How can we help others understand the intention of our mixed reality app, as well as the precise interactions available to users in any given MR scene?<\/p>\n

We need a different format for mixed reality user flows \u2014 something clean, clear, and concise, but also something that shows the full scope of our application and all the various components that make up a mixed reality experience. And ideally, this document should also provide specific interaction details, so that we can give our mixed reality user flows to a developer and she or he could begin coding with a clear understanding of the design\/flow\/interactions in each scene.<\/p>\n

Last year, I worked with a small team to design and develop an app for the HoloLens. This was our solution for creating user flows for mixed reality:<\/p>\n

\"\"<\/a>

This is actually a partial user flow. Our flow for this particular user journey has 3 more\u00a0panels.<\/p><\/div>\n

Our design process was messy (you can read more about that here<\/a>). We clocked in dozens of hours deciding which interactions would be available in each scene. We didn\u2019t usually have a HoloLens on hand during our design meetings, so we came up with other ways to prototype our ideas. We kept meticulous track of our interaction design decisions in a spreadsheet. And then, the amazing Katie Chen<\/a> boiled it all down into the clean and concise document above (she is a genius!).<\/p>\n

\"\"<\/a><\/p>\n

\"\"<\/a>

My teammate Cindy, testing things out on the HoloLens.<\/p><\/div>\n

The mixed reality user flow my team and I created describes a clear user journey and takes into account the variety of components inherent in a mixed reality experience. Our mixed reality user flow is something in between a storyboard and a traditional web\/mobile use flow. It\u2019s like a storyboard because it\u2019s describing a scene and telling a story (the user\u2019s journey), and it\u2019s like a web\/mobile user flow because it describes specific interactions and user goals.<\/p>\n

Here\u2019s a breakdown of the user flow:<\/p>\n

<\/p>\n
\"\"<\/a>

Here\u2019s a GIF highlighting each component of this mixed reality user flow. You can view this, but bigger, in the template I link to\u00a0below.<\/p><\/div>\n

<\/center><\/p>\n

    \n
  1. Scene<\/strong>: This is what the user is seeing. This is in first person, but you could easily change it to be in third person.<\/li>\n
  2. Input Options<\/strong>: These are the different input options available in any given scene. Note how some input options are available in some scenes, and aren\u2019t in others.<\/li>\n
  3. Audio<\/strong>: This is what the user is hearing. Our app had a significant amount of audio narration, so we used this space to write out actual scripts.<\/li>\n
  4. User Action<\/strong>: What does the user do to move within a scene or move from one scene to another? Does the user air tap an object? Double air tap? Bloom? Gaze at something to select it?<\/li>\n
  5. Icon Key<\/strong>: Last but not least, we have a key telling us what all these icons mean.<\/li>\n<\/ol>\n

    Put a bunch of these panels together in a sequence, and you get a mixed reality user flow. Or, what I\u2019ve been calling a \u201cReality Sequence.\u201d As a medium, mixed reality is so fundamentally different from web and mobile, that I don\u2019t think \u201cuser flow\u201d is the most accurate description of this document. Sure, it shows a flow, but it also tells a story and takes into account time and the physical world. I think Reality Sequence is a more accurate descriptor, because it implies that many things are happening in real time, and the outcome depends on the way a whole host of factors interact with one another.<\/p>\n

    I\u2019ve created a mixed reality user flow template, which you can find here<\/a>. Feel free to use this to get started on your own mixed reality design projects.<\/p>\n

    <\/p>\n
    \"\"<\/a>

    A mixed reality user flow template (a one-pager). You can download it\u00a0here.<\/a>\"\"<\/a><\/p><\/div>\n

    <\/center>

    <\/p>\n
    \"\"<\/a>

    The same template, but with 4 panes on a page. You can download it\u00a0here<\/a>.<\/p><\/div>\n

    <\/center>I\u2019ve also created a Reality Sketching template<\/a>. This is a third-person view template, and is intended to help visualize the scene designed process in mixed reality. Determining how much distance will be between the user and the digital object they are interacting with is crucial, and a third person sketch is helpful for envisioning this (this is a topic for a whole separate Medium post).<\/p>\n

    <\/p>\n
    \"\"<\/a>

    Third-person sketching template to get the creative juices flowing. Download available here.<\/a><\/p><\/div>\n

    <\/center>If you use either of these templates, let me know how it goes! These are living documents, and I\u2019d love to keep refining them.<\/p>\n

    This article was originally published on Lillian's Medium page<\/a>.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"

    As designers, we create user flows and give them to developers, product managers, clients, and sometimes even users for testing. At its best, a user flow is a concise, clean, and compelling way to showcase the scope and vision of your application before it is developed. Oftentimes user flows are the key piece of documentation that we provide developers to… Read More ￫<\/a><\/p>\n","protected":false},"author":142,"featured_media":13859,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11],"tags":[],"class_list":["post-13839","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-viewpoint"],"acf":[],"yoast_head":"\n\n\n\n\n\n\n\n\n\n\n\n\n\t\n\t\n\n\n\n\n\t\n