Designing interactive elements in virtual spaces

Interactive elements are discoverable, communicate their function, and allow for an immersive experience

What interactive elements tell you how to make an elevator work?

via GIPHY

Think about it — the first time you used an elevator, how did you learn what to do? Chances are — if you were a child — someone showed you. But if you don’t have someone with you, how do you know what to do in the space?

If you remember the movie Elf, Buddy the Elf had no idea what to do with the elevator. Once he noticed the buttons with lights, it turned into a game.

The elevator space needs to show us elements we can interact with so we can use the tool and get to the floor we want to go to. The button panel has to provide us with certain types of information:

1. A way to discover the interactive elements — buttons
   A elevator has these by the door so they are easy to find.
2. Buttons that communicate the function
   The button itself looks like something a person can press, triggering an action
3. Little else in the elevator to distract a person from what else they can do
   Sure — you might see signs, but in general, the key functions are uncluttered by much else.

UI elements in virtual spaces require similar considerations

How many meetings and events do you attend virtually in a month? What about a day? Chances are fairly high that Zoom, Microsoft Teams or Google Hangouts meetings play a prominent role in a tech worker’s routine.

Conferences, work meetings, and other events provide virtual options for their attendees. In some cases, these events are now held exclusively online. Convenience, flexibility, cost-effectiveness and customization drove the shift to virtual space (in addition to a global pandemic), so it’s unlikely virtual spaces will go away anytime soon.

But virtual spaces, like video conferencing tools, present design challenges. And one of the biggest complaints I hear when using a tool is that a function can’t be found. “How do I share my screen?” It’s there, but the user can’t see it.

How does a designer make the platforms interactive and engaging while maintaining immersion? What is the best way to include interactive elements so they enhance the user experience?

(While 3D virtual reality has risen in popularity, the technology is still not widely in use. Two-dimensional virtual spaces are much more established and offer higher levels of functionality. For this reason, we’ll focus on 2D.)

Consider aesthetic

First, think about how well an interactive element fits into the overall aesthetics of a 2D virtual space.

The point of a virtual spaces is the immersive experience. That’s why elements need to fit into the experience rather than distract from it. If interactive elements clash with the overall aesthetic, those elements will interrupt the immersion that users want.

On the other hand, users also need to be able to find which elements they can interact with. If UI elements aren’t differentiated in a meaningful way, users will find it difficult to locate them.

It’s a very fine line: discoverability while non-disruptive to the experience.

A good way to ensure that interactive elements are both visible and cohesive with their environment is to establish a consistent pattern that indicates an interaction. Designers can do this through:

• highlights or shadows
• animation
• labeling
• a combination of these techniques

The key is to make sure that interactive UI elements stylistically match the environment. This lets you maintain the cohesive experience of the environment while at the same time differentiating points of interest to users.

Communicate functionality

Visual or auditory feedback

Another important consideration is how to communicate functionality. Designers can do this by implementing visual and/or auditory feedback.

What do we mean by feedback? Give users a clue about what they can interact with when they get close to the element by giving a signal through something visual or through sound. These cues could be changes in color or shape, highlights, tones or even voice messages. The trick is to make the message immediate and clear.

Users that get in close proximity to an interactive elements will begin to learn the cues and develop a mental model of how they function within the virtual environment.

Location

Designers can also communicate interaction through location.

Humans tend to group things that are close in physical proximity to each other. Proximity is a core principle of Gestalt theory. It’s also supported by the idea of proximity bias: the perceived relationship between things that are close to each other.

Based on these principles, designers can use the natural appearance of the virtual environment to point users in the right direction towards interactive elements.

For example, if a virtual space takes the form of an office building with different rooms and stairways, a navigational element in or near a doorway makes logical sense. Users already have an implicit understanding of what doorways are used for – leaving or going to another room. With this in mind, users will perceive a relationship between the element and the doorway and are more likely to interact with it

Be wary of adding too many interactive elements

Don’t hide what’s important

Strategic placement can be very powerful when communicating function. But don’t overload a space with interactive elements. Too much visual load will cause users to feel overwhelmed.

Think about it this way — a street with too many signs actually makes it harder to navigate the road. Important messages get hidden.

The same is true for an environment with lots of visual elements. Users will feel overwhelmed with too much to look at and not see the important interactive elements.

Contextual associations are important, but this tactic should only be used when the associations are clear.

Prioritize elements

Designers should reduce the number of interactive elements and prioritize those that provide the most value.

Consider the purpose of each element:

• What will users be able to achieve?
• Is the element meant to navigate the virtual space, interact with other users, or provide feedback?

Users should quickly and easily understand the purpose of the interactive element. Failing to do so will overload and confuse the user, diminishing the overall experience.

Verify interactive elements through user testing

All of these strategies are great tools for increasing discoverability, communicating function, and providing immersive user experiences. But you should understand if your design works.

Test interactive elements with users to guide how to set up the interface.

Users rarely behave the way designers expect. Be sure to set up tests that specifically study how users see and interact with the components in the environment. This is the best way to uncover usability issues and patterns that users find confusing. It will also help identify patterns that worked and allow designers to iterate and improve their designs.

In conclusion

With the increasing popularity of virtual spaces — like video conferencing — designers have an additional challenge. They must create identifiable and cohesive interactive elements that engage users and provide an immersive virtual experience.

When designing these interactive elements, it’s essential to maintain aesthetic cohesion while still making interactive elements stand out in a meaningful way.

Designers can achieve this by employing context, strategic placement, and providing interactive feedback.

Limiting the number of elements users must interact with, and testing their efficacy with users will further improve the solutions proposed by designers and will help create a successful virtual space.