When to Use High Fidelity Wireframes

When I say ‘high fidelity’ for a wireframe, I mean it looks almost the same as the actual interface you are going to publish.  It most likely means there’s no design document (like a Photoshop design) based on the wireframe, and the wireframe is all you need to give to the UI developer.  The wireframe is proportionally accurate in terms of layout, spacing, font size and colours are very close to the actual thing.  Creating such a thing is actually quite easy using modern vector design software (Visio, OmniGraffle, InDesign, etc.).  It should cut a whole design step out of your process and speed up your specification-to-build cycle. However, you should not take this approach unless certain conditions exist:

This is a great approach when the visual design has been nailed down already.  That means there’s a styleguide with design rules and patterns already established and fixed.  Essentially you are dealing with Lego blocks – you have an array of modular features and the wireframe is just to show how you want to stack them together for a particular page or screen.  The best way to know that the modular pieces will fit well together and lay out well on the page is to make them as realistic as possible, and hence the high fidelity approach.  

The scenario when you absolutely should not use this approach is when the design is in flux.  As I’ve stated before, wireframes should never dictate design (nor vice versa). It’s also not the right approach when you’re breaking out of existing capabilities of the user interface, because that’s basically creating new design. This is an important realization if you’ve been in evolution mode for a long time – try to spot early on that you’re not re-using existing features and switch to a concepting and design mode instead.  The high fidelity wireframe is 100% evolution not revolution, and trying to apply it when you need to innovate will end in poor results.

Filed under: creative delivery, information architecture, method, user interface , concepting, design, evolution, high fidelity, indesign, information architecture, lego, method, omnigraffle, revolution, visio, wireframes

Making sense of 3D Flash interfaces

You must have seen the 3D web and software design trend, starting with Apple’s 3D-esque interface designs of recent years, and lately boosted by the impressive PaperVision 3D for Flash.  They make for beautiful, layered experiences and the sense of depth is intuitively pleasing. However, it doesn’t take much to turn a trend like this into a for-the-sake-of-it gimmick. 

The key to using 3D well is to think about the psychological value of 3D to a user, and not just turning things into 3D willy nilly.  People have portions of their brains that are dedicated to processing 3D visual scenes, and tapping into that is a powerful way to communicate things that have been tricky with 2D design:

Movement patterns provide a major cue in 3D – when objects move in unison (eg, rotating in a circle) there’s evidently a relationship between them.  The path in space taken by the objects give up clues to whether there’s a finite set and how fast you are moving through them. Apple’s ‘coverflow’  carousel is a prominent example of using movement in space but the approach could be applied in many different ways.  

Sense of place is communicated on multiple levels – 2D experience design relies on esoteric navigation constructs such as tabs and breadcrumbs to show people where they are in the overall structure of content.  Although many are now common across hundreds of websites, they take some learning and are often unintuitive.  In contrast, when you’re looking at a 3D scene with objects located in relative space the structure is immediately evident and familiar.  

Proximity = relevance – when you have many spatial constructs, the ones in close proximity are the ones that you assume are relevant to the matter at hand.  In a 2D space, this type of approach becomes a difficult task of managing clutter. Using size, location and perspective in 3D space is powerful for showing relevance, not just because of the extra dimensions but also because our brains are designed to process things that way.

Real world rules apply – unlike unique constructs built for UIs, the rules of 3D are the rules of the real world, so it’s easy to know whether you are breaking the rules based on what would make sense in the world: Objects shouldn’t appear out of nowhere, things should move predictably and with a sense of weight/mass, and so on.

Bonus: Lessons from 3D games have been learnt over years of experimentation and evolution that can now be leveraged in UI design. Video games have been building complex 3D interactive experiences for years and UI designers can actually claim some reference value from those hours of playing!

Filed under: 3D, creative delivery, information architecture, revolutions, style, trends, user interface, user-centred , 3D, design, flash, papervision3d, psychology

Wireframes are for evolution not revolution?

I’ve been a part of some very interested conversations recently about a user experience we’ve been developing and whether they making evolutionary improvements to a website or revolutionary change.  In the course of these discussions we’ve developed some concept sketches of revolutionary user experiences that we are contemplating.  The interesting thing about the concept sketch is that it is a hybrid between a boxes-and-arrows wireframe and a visual sketch.  

I’ve written before about the fallacy of wireframes being independent of design, however I’m very interested in the thought that wireframes are not a one-size-fits-all approach, but in fact come in different flavours with different levels of specificity.  Wireframes typically exist at a level of detail where content and functionality is already defined and their task is to optimise which elements are on which page and when.  The inherent assumptions of this type of wireframe regarding the interface layout make it extremely unlikely to revolutionise the user experience.  However, the artefact that you need to create when starting on a revolutionary concept is decidedly not a piece of graphic design, it’s a content/functionality sketch… which to my mind is a form of wireframe.  

Filed under: creative delivery, folly, information architecture, method, style, user interface , design, evolution, IA, revolution, user experience, UX, wireframes