How UX Evolves for Virtual Reality

UX Design of VR

Hey designers, like it or not, virtual reality (VR) is really coming. We just spent or are still spending great efforts to adapt to the trend of mobile, now part of the focus should probably be shifted to look at the UX of VR. This article is going to talk about how UX looks like in virtual reality and what should be paid attention when designing for VR.

What build up the VR experience

There are many categorizations about the types of VR. For example, categorizing it into three main types of VR experience: 1-Hyper-immersive and emotion-based, 2-POV documentary, 3-Gamified experiences/games. It is good to know these currently popular types of VR, but since it is content-focused and the content is always expanding, I found it may not be the best way to deconstruct VR.

A more easy-to-understand way is looking the extent of two components: Environment and Interface. Is it having a complex environment without interface? Or is it having complex interfaces while no environment? Games should be placed in the former quadrant, while the user dashboard, video watching interface and (potentially) virtual shopping would go to the other quadrants.

VR: Environment + Interface

Understanding the two components is very important since all the interactions and design considerations will be based on that.

What makes a good UX of VR

Before diving into how to create a good design, let’s look into the criterion of good UX for VR first:

  • Believable:

    Believable is the key to virtual reality. Unlike other digital products, in virtual reality, users are enveloped entirely in a virtual environment because they want to experience something different or something they couldn’t do otherwise. So how to leverage the design (image, sound, etc.) to let them feel it is real is very important.

  • Interactive:

    When people in a closed space, they need to interact with the environment to be engaged and avoid some negative emotions, such as fear. In virtual reality, the challenge of interaction design is to make it very intuitive because people expect it to be real having as little interferences as possible. It is also not as easy-to-control as traditional digital products in virtual reality because there is a “distance” between controller and interface (image using a television remote to browse an interface on the TV, and compare it with the experience of using a mouse to browse a website), so making everything looks natural and accord with how people act in the real world would be the goal.

  • Explorable:

    Different from how we play with computer or phone – sitting tight, the motion and movement in virtual reality matters (a lot). Therefore, it is different from a 3D movie where audience only watch and feel, instead, they need to be part of the stories in VR. As designer, you can allow them to walk, or even simulate flying, where is the stage for you to show your creativity.

  • Immersive:

    By achieving the previous three criterions, the ultimate goal is to make users feel immersive – enjoying the whole experience. VR could be a tool for people to escape from their daily lives to try something totally new and even surprising, which requires isolating them with the real environment they are in and providing 360 degrees experience.

VR-interface

Major considerations when designing for VR

After understanding the VR experience and what makes a good design, now it’s time to learn how to create an awesome design for VR and what are the major considerations.

  • Interactive & Reactive Design:

    The experience of virtual reality is highly interactive and reactive which respond to users’ motion. To build the great interactive experience, using head tracking, motion tracking, eye tracking (potentially) and leveraging the controller in user’s hand are the keys.

  • Comfort and Ease:

    Making user comfortable is unprecedentedly important for UX designer of VR. Since users are in a virtual environment, it is very likely the motion sickness or virtual reality sickness happens. It could because the image is not designed right, or users lose the control of their movement, which should be taken care seriously and better avoided at the first place.

  • Text and Image Scale:

    In virtual reality, detail matters. It is vital to keep visuals clear and legible to prevent eye strain. Unlike traditional screens, the visuals are constantly changing while the user is moving. Therefore, different style guides need to be prepared for different circumstances, such as the size of font and the shading of objects.

  • Sound:

    Music and sound effects are not only just for creating atmosphere or decoration in VR, but also, more importantly, being used as showing users’ relations with other objects and the environment, which could be hints for users to interact and move.

VR-Motion Tracking

We are at a turning point for the popularization of VR and user experience. More factors and context need to be considered in VR, but the good thing is there are many untapped territories here, as well as the opportunities for UX designer to grow and become expert of certain field. I’m looking forward to seeing more and more UX designer start diving into this category since the UX is actually deciding the future of VR.

 

References:

[1] Anderson, S. (2017, April 14). You’re the center of the universe: A UX guide to designing virtual reality experiences. [online] Telepathy. Available at: https://www.dtelepathy.com/blog/philosophy/ux-guide-designing-virtual-reality-experiences [Accessed 1 Nov. 2017].

[2] Hopkins, C. (2015, May 29). Designing For Virtual Reality. [online] Ustwo.com. Available at: https://ustwo.com/blog/designing-for-virtual-reality-google-cardboard/ [Accessed 1 Nov. 2017].

[3] Hudelson, B. (2017, May 16). Designing for VR | A Beginners Guide – Prototypr. [online] Prototypr. Available at: https://blog.prototypr.io/designing-for-vr-a-beginners-guide-d2fe37902146 [Accessed 1 Nov. 2017].

[4] UX Planet. (2017, Aug 7). How VR Is Changing UX: From Prototyping To Device Design. [online] Available at: https://uxplanet.org/how-vr-is-changing-ux-from-prototyping-to-device-design-a75e6b45e5f8 [Accessed 1 Nov. 2017].

[5] Charara, S. (2017, May 22). Explained: How does VR actually work?. [online] Wareable. Available at: https://www.wareable.com/vr/how-does-vr-work-explained [Accessed 1 Nov. 2017].

[6] Ravasz, J. (2016, May 8). Design Practices in Virtual Reality – uxdesign.cc. [online] uxdesign.cc. Available at: https://uxdesign.cc/design-practices-in-virtual-reality-f900f5935826 [Accessed 1 Nov. 2017].

[7] Cortes, L. (2016, March 16). The UX of VR. [online] Creative Bloq. Available at: http://www.creativebloq.com/ux/the-user-experience-of-virtual-reality-31619635 [Accessed 1 Nov. 2017].

[8] Allen, D. (2015). The Fundamentals of User Experience in Virtual Reality. [online] Block Interval. Available at: http://www.blockinterval.com/project-updates/2015/10/15/user-experience-in-virtual-reality [Accessed 1 Nov. 2017].

[9] Applebee, S. and Deruette, A. (2017, February 6). Getting Started With VR Interface Design – Smashing Magazine. [online] Smashingmagazine.com. Available at: https://www.smashingmagazine.com/2017/02/getting-started-with-vr-interface-design/ [Accessed 1 Nov. 2017].

Design Critique: Medium (IOS App)

 

Medium (ios app)

Medium is an online publishing platform launched in August 2012, having a mass of amateur and professional people and publications writing blog posts on it. The clean design quickly differentiates it from other publishing platforms and aggregates many professionals. This article is going to assess the design of medium IOS app using Don Norman’s concepts and principles in his book: The Design of Everyday Things.

Great Signifiers and Mappings

Signifiers and mappings

The Medium app uses clear labels and icons to inform users the functions or content on the platform, which is, as the theory of Don Norman, signifiers. For navigation bar, it has icons with a thicker thickness to show the major features of the platform. For articles, it has icons with a thinner thickness for functions of “Like”, “Share” and “Save”. No matter in the list or single article page, it displays great detail of the articles: the author, publish date, estimated reading time and topic label, fully informing readers the related information.

The title, content, and actions also match very well. “Home” and “Series” are the two type of stories available on the platform, users can swipe the screen to switch between the two.

Delicate Feedbacks Design

Medium-Feedbacks Design

For the “Save” features, the design of feedbacks is very delicate. It not only instantly changes the status of the icon, but also flash the text explanation of user’s actions, avoiding potential confusion.

Innovative Conceptual Model

Medium - Conceptual Model

(from Medium)

Besides regular blog post, Medium has a new type of story just for mobile users – Series. Series display stories by card, and the card can be added to over time and unfold. The usual conceptual model for reading blog post is scrolling vertically. But for “Series”, the conceptual model is swiping horizontally, and the author will decide how many words readers should read on one screen.

A problem is there is no page number (signifier) on the screen for “Series” story. There is a progress bar on the top of the screen, but users can’t tell how many pages left. I will suggest adding a page number at the bottom the screen, so users are better informed and able to estimate the time for reading.

Medium - Writing Series

The design for “writing series” feature also successfully implies the conceptual model of how to navigate the interface and start writing – swipe and tap, which is cool and innovative.

Space for “Knowledge in the World”

Don Norman introduces the concepts of “knowledge in the head” versus “knowledge in the world”. “Knowledge in the head” is efficient to use while requiring considerable amounts of learning. Inversely, “knowledge in the world” requires no learning and helps us store information we otherwise would forget, but it is difficult to use. Both of them are essential for human’s daily functioning, but they have a negative correlation. It means if you choose the advantage of one, then you will lose the advantage of the other.

As information explodes, relying on “knowledge in the world” is becoming necessary. Good design as Medium can help us minimize its disadvantage. In the personalized reading list, Medium offers four buckets for users to store useful articles or information: Saved, Archived, Recommended, Highlighted. It makes these “knowledge in the world” easier to use.

Medium-“knowledge in the world”

To make it even better, it will be helpful to add features allowing users tag or categorize the articles they save, or the system automatically helps users complete the categorization. It would improve the accessibility of this knowledge, and enable users to find the information they want quickly.

To sum up, the design of Medium platform satisfies the design principles by Don Norman: clear signifiers, delicate feedbacks, and well-display conceptual model. With the considerations of human and environment factors, its IOS app has mobile-only features which is a great example of human center design.