Component Attributes

Although components can come in many different shapes and forms, the below five questions can be used to break them down to their composing attributes.

How many dimensions does it have?

Determines the Dimensionality of the component. There are two types of dimensions: two dimensions and three dimensions.

Where does it come from?

Determines the Origin of the component. There are three types of origins: omnipresent, manual and procedural.

How does it change over time?

Determines the Time-based Quality of the component. There are two types of this quality: animated and still.

Can you interact with it?

Determines the Interactivity of the component. There are two types of interactivity: static and dynamic.

Where is it?

Determines the Position of the component. There are three types: anchor to device, anchor to world, and anchor to component.

Dimensionality

Dimensionality takes into consideration the UI components' functional dimension attribute. There are two main types of dimensionality:

Two Dimensions

Three Dimensions

Components with more dimensions can fit better into the real world, while 2D components are often used for important information and navigation.

Two Dimensions

As the name suggests, having two-dimension(2D) attribute means the component is flat. As the users move around, they cannot view different sides of components with this attribute.

Design Guidelines

Limit the number of components with 2D attributes since they interfere with users’ perception of the space. Even those that are anchored in the real world through floor calibration will look out of place against the user's surrounding environment.

Use Case

2D attribute is often used for:

• Navigation (i.e. menu items)
• Guides and important information: without this, the users might miss out an essential part of the experience or lose the game (i.e., instruction, warning, score in a game)

Three Dimensions

The three dimensions attribute allows users to view different sides of components as they move their device or body around.

Design Guidelines

This attribute can make the component seems to fit into the real world, especially when combined with the anchor to world positioning.

Don't forget to design the back of the component as the users might be able to see it.

Use Cases

3D attribute is often used for:

• Component that is positioned in relation to a surface in the real world
• Component that overlays on top of or replaces a component in the real world

Origin

The origin attribute determines how a component is inserted into the digital layer of the experience. There are three types of origin:

Omnipresent

Manual

Procedural

Omnipresent

Having the omnipresent attribute means the component is present in the application when the augmented reality feature is enabled.

Design Guidelines

Often combined with the anchor to device positioning, this attribute can require significant screen real estate.

Use the omnipresent attribute only for important components. Ask yourself they are the types of components that users need to look at or have access to at any time.

Use Cases

Omnipresent attribute can be used to:

• Guide users through the calibration process
• Allow recalibration: It's a good practice to always allow users to recalibrate their environment at any time. The real world, as we all know, changes all the time.
• Access important navigational items, i.e., to toggle back and forth between AR and none-AR modse within the app.

Manual

If a component can be manually added to the digital layer by the users, it has the manual attribute.

Design Guidelines

Components with manual attribute should be well positioned within the real world. Users already have a complete control of the camera and they can easily tell if the components that they add aren't where they want them to be.

Use Cases

Manual attribute is often used for:

• World building or interior design applications
• Applying filters

Procedural

Component can be added by the system procedurally. This action is often triggered by a marker or geolocation.

Design Guidelines

Make sure the users know where the component is added. Design solutions to guide the users to look in the direction you want them to.

Use Cases

Procedural attribute can be used to:

• Overlay or replace an element in the real world
• Generate nonplayable characters in games