• Avril Putz
• 01 Apr 2011
• 15 Comments

Our top UX consultant wireframing in 3D

After 3D movies, 3D television and 3D games, it’s natural for the 3D revolution the move to user interfaces. We’ve chosen this special date to announce the next generation in UX: 3D wireframes.

We at cxpartners have already been working towards this next step in the evolution of the web by introducing a new service: 3D wireframes.

So what are 3D wireframes?

3D wireframing is wireframing in 3D. While many designers advocate drop shadows or emboss effects to provide the illusion of depth, 3D wireframes Deliver Deeper Depth (hence the acronym ’3D’).

We believe it’s important to design for 3D first. We use bodystorming to have UX consultants act out the various user interface elements and position them in space. From this we develop a sketchnote which we re-envision in Axure.

Once the designs are complete we run the wireframes through our specially developed Anaglyphic or Quartz polarisation filtration software. The result is a set of designs that will work with all the leading 3D monitors, TVs and glasses.

An example 3D wireframe:

A 3D wireframe that works with standard anaglyphic glasses

Although 3D web is not yet widespread we feel it’s important to prepare for this inevitable step forward. We are learning about the impact 3D has on the user experience and interface design and have been working on some secret 3D projects.

Usability guru and all round clever guy Jared Spool has seen what we’ve been working on and is looking forward to the future:

‘I’ve been waiting for the world of design to break free of the bonds of flatland. Finally, with 3D wireframing we can set our minds free and our design ideas can float into the real world.’
Jared Spool

Why 3D is important online

Designing in 3D can benefit your website in many ways we don’t yet know about, and can really only dream of. However there are known benefits that we have seen whilst working on recent projects.

Increasing efficiency

2D button fixations

By using a technique call Focused Dimensional Affordance Projection (or F-DAP for short) you can be selective about what areas of the web page you make 3D. For instance the main call to action of a key offer. By making this the only 3D element on the page the user’s focus is instantly drawn to it. This makes progression through a process such as a checkout much more efficient.

3D Button fixations

We ran a brief study on the effects of F-DAP by creating a test that involved finding the call to action on a number of pages. First in 2D then in 3D F-DAP. As you can see in the eyetracking results the F-DAP pages perform much better.

Calls to action with no F-DAP filtering were much harder to spot. The averaged over 100 fixations and around 15.93 seconds to click. The F-DAP calls to action on the other hand, were spotted much more quickly, averaging at around 0.003 seconds per click. Participants stated that finding the buttons ‘just felt instinctive’ while others said ‘It works like a dream’.

Better overall user experience

3D wireframes increase overall satisfaction and add a new dimension to designs. People prefer 3D wireframes as this infographic proves:

Proof that 3D wires increase overall user experience

What our clients say about 3D wireframes

9/10 stakeholders prefer watching user testing in 3D

It’s clear 3D wireframes are the next big thing, but don’t just take our word for it. Here’s a quote from a client who we have produced 3D wireframes for.

‘I’ve never seen so much depth in a wireframe before, the call to action pops off the page, a new dimension in wireframing’
Kiki D.

We believe 3D wireframes are the future. The future is today. Today is April 1st.