Are high fidelity prototypes the new wireframes?

15 Mar 2012 - 3:32pm
2 years ago
13 replies
3276 reads
amir khella
2008

I am working on an article on whether high fidelity protos are starting to replace wireframes.

The main question is: if it's possible to create high fidelity prototypes with the same speed a prototype is created, should wireframes be skipped to move directly from sketches to high fidelity prototypes?

Wireframes are obviously better in communicating the core concept without getting distracted by design detail, but in my experience, clients and users often lack the necessary imagination to interact with the wireframe. After all, we use fully designed apps, not wireframes, in our daily lives.

Another point is that many of the design details actually contribute to enhancing the usability of the concept (e.g. an organge sign up button would overperform a wireframe button). If you're testing a wireframe knowing that a color would make a difference, should you include it in the wireframe or test without it anyway? 

Finally, most platforms currently provide standard controls (iOS, Android, Bootstrap, ...), and people are getting used to them by now. Should we downgrade the user experience from standard controls to wireframe controls? or should we prototype with the standard controls anyway?

Would love to get some thoughts and viewpoints here.

 

Thanks

Amir

Comments

15 Mar 2012 - 4:20pm
Adam Korman
2004

I wouldn't say that prototyping has completely replaced wireframes for me, but it has replaced some wireframes for me. Since I have taken to prototyping more in the past couple of years, I find that the wireframes I do make are generally less detailed than they used to be, and they are often more of a tool for me to sketch out ideas (prior to prototyping) rather than something that I share with others. This is especially true working long term on products. Since the the basic structures and page layouts are more-or-less set, it is can be much faster to go from some rough sketches directly to prototype rather than  work out the details in wireframes.

Since I'm mostly working on a web app right now, knowing html, css, jquery and a little ruby is incredibly powerful. And when I talk about "prototyping" I'm mostly talking about writing semi-functional code right in the codebase. Again, I wouldn't try to do that starting from scratch or working on a major redesign ... but for making incremental improvements it's great. Those little details that can be so hard to communicate to an engineer with words, drawings (or even conversations) -- I don't bother trying to communicate that stuff anymore; I just build it myself (or at least something close to it) and then work with an engineer to hook up the data/functionality and make final tweaks. That has its own pitfalls (spending any time debugging my own code always makes me question why I'm writing any code), but on balance I think it has been positive (both in speed of getting design live and quality of the product).

-Adam

15 Mar 2012 - 4:42pm
joeycordes
2012

Wireframes are great for fleshing out a high level view of a flow or structuring something static that someone else will code. But basic prototypes can communicate dynamic interactions better than a wireframe, which helps to overcome the imagination issue you bring up.

I try to skip wireframes when I can, staying close to the code makes me a better designer.

15 Mar 2012 - 5:05pm
RossSclafani
2009

Wireframes are produced by designers, prototypes are produced by coders. Wireframes are an important and much more rapid intermediary. Without wireframes, how does the designer illustrate his idea to the prototyper?

Ross P. Sclafani Owner / Creative Director Neuromantic Industries http://www.neuromantic.com http://ross.sclafani.net http://www.twitter.com/rosssclafani 347.204.5714

15 Mar 2012 - 6:43pm
hanakimis
2012

I think you've asked broad questions that don't really have black-and-white answers.

 

If it's possible to create high fidelity prototypes with the same speed a prototype is created, should wireframes be skipped to move directly from sketches to high fidelity prototypes?

In general, I think this answer will largely depend on WHAT about the interface you are trying to validate and get feedback on: overall navigation? the location of a particular control? organization of information? A new way to take an action? 

If you are trying to validate larger, wide-scoped ideas, it would probably make sense to use a wireframe. If you need to zoom into the details of a particular action, high-fidelity mockups may be a better option( I am also assuming "prototypes" as mentioned in the prompt lack any code. I often find that people are much more reluctant to completely throw away code, than completely throw away a design).

Wireframes are obviously better in communicating the core concept without getting distracted by design detail, but in my experience, clients and users often lack the necessary imagination to interact with the wireframe. After all, we use fully designed apps, not wireframes, in our daily lives.

This is very true, and you will have to use your own descretion and understanding of the clients when getting feedback. But this assumes that there will be no internal feedback loop or validation that will occur before interacting with clients. Don't forget, the wireframes are not just for getting feedback with clients, but also for forcing YOU to heavily focus on the flows and interactions, rather than polished presentation.

In my experience, we would internally iterate through sketches & wireframes, storyboard them, and then present a version with an accompanying high-fidelity mockup to demonstrate what the wireframe might look like. 

Another point is that many of the design details actually contribute to enhancing the usability of the concept (e.g. an organge sign up button would overperform a wireframe button). If you're testing a wireframe knowing that a color would make a difference, should you include it in the wireframe or test without it anyway?

If you think you will be able to get significantly different, or more insightful feedback then add color judiciously. However, when you do this,  there is also an underlying assumption that the high-fidelity version will have a control that stands out as much as a color control on an otherwise black-and-white wireframe.

Keeping things in black-and-white could also allow you to explore different and creative ways to emphasize the control as well.

Also, don't forget you can add quite a bit of details to your wireframes without making them "hi-fidelity".

Finally, most platforms currently provide standard controls (iOS, Android, Bootstrap, ...), and people are getting used to them by now. Should we downgrade the user experience from standard controls to wireframe controls? or should we prototype with the standard controls anyway?

I don't think you are downgrading user experience, but simply testing UX flows and interactions. As you've mentioned, using wireframes FORCE people to ignore polished presentation and concentrate on providing different kinds of feedback.

 

15 Mar 2012 - 7:32pm
chunkee
2011

Due diligence. Core interaction fundamentals are represented in the wireframe. Starting with a high fidelity design thwarts the purpose of the design process; to hit the target as close as possible the FIRST time in the release. By removing the low fidelity process and mockups, either from a design studio or single designer, you risk missing the prefered and determined user experience. Immediate high fidelity removes the core clarity of the interactions and workflow for both the user experience and business requirements.

Cheers!

jC

26 Mar 2012 - 12:36pm
Jeremy Kriegel
2009

I agree that we are trying 'to hit the target as close as possible the FIRST time', but I think you're missing a key component of how wireframes help us do that. As others have gotten at, wireframes help us fail quickly and often by finding out what doesn't work and being able to iterate over many potential solutions in a short period of time. Contrary to what Mats said, wireframes are perfect for early, lightweight usability testing. They allow you to examine your basic layout and flow before committing much time or resources to a given direction.

16 Mar 2012 - 5:26am
Mats Lindqvist
2011

I would say that we are talking about two different things. Wireframes are tools for placing content,a more advanced sketch (among other things). It should not be used for testing usability nor used as a high fidelity prototype. The definition of a high fidelity prototype is that "it uses materials that you would expect to be in the final product" (Sharp, Rogers & Preece, 2011), and where wireframes should capture the initial conceptual model. another definition of wireframes is that it serves two functions. First they "make an abstract mental picture of a page more concrete" and second, Wireframes work as documentation devices (Wodtke & Govella, 209). For me, wireframes are used for communication, and a way of getting an idea where to place content in a more structured way.

One do talk about physical design when mentioning wireframes but, there is no interactivity in a wireframe, which it should be in a high fidelity prototype. Interactivity could mean that you use post-it notes or other tools for simple interactivity, though they are in different phases in the development/design process.

Talking about HiFi-prot replacing WF is far from basic theory and core principles of interaction design. It´s like talking about pears replacing blueberries in a berrie pie. For me, replacing is out of question. They are used for different things, sometimes by different people, sometimes in different processes etc.

But, it is also important to say that people (obviously) use it in different ways. My point of view is based upon the interaction design discipline..

16 Mar 2012 - 7:55am
philipbrook
2008

Remember the term wireframe is borrowed from traditional sculpture. The artist makes a frame from wire (and mesh) onto which modelling clay is applied. The finished piece is them moulded and cast in bronze or whatever material is required. 3D modelling CGI stuff follows the same metaphor. It's a simple mesh that describes the totality of a thing in a simple way. For our sculptor it's about being 3m long by 2m wide with a 4m trunk and ears or 0.8m.

Technically, anything prior to go live lock down full release is a prototype. 

Fidelity simply means true to something, hence low fidelity or high fidelity etc.

A process flow described using post it notes is prototypical and lo fi so therefore a lo fi prototype. A set of comps ( comprehensive visuals) are high fidelity because they are very close to the intended solution. Who creates the artefact is is irrelevant to the stuff being a prototype or not.

16 Mar 2012 - 9:19am
Tania Schlatter
2007

It is not about speed, it is about thinking. When students in the Interactive Information Design 2 class I teach create high-fidelity prototypes instead of wireframes, they become wedded to something half-baked too soon. They haven't done the work to think about all the features and content types that need to be represented, and have a very hard time backing up to incorporate things they've missed. Also, they miss opportunities to try a wider range of possible designs because they are attached to details, and not concepts. 

Tania

16 Mar 2012 - 9:32am
bjminihan
2010

In my work, functional prototypes have replaced a lot of wireframing, and normally I would argue that's okay...

However, Tania has a very good point.  I usually go straight to high fidelity prototyping when I just don't have the time or budget to build a proper idea bank for a project.

I recognize that this process locks me into ideas that later turn out to be awful, but thankfully, it's very rare (whether that makes me a good designer who guesses right the first time, or I just have very forgiving clients, I don't know =])

Ideally, I would much prefer a project where I can take my time, and walk through all of the stages of ideation and creative thinking exercises, before I get to the functional prototyping stage.  Every once in awhile, one of those projects comes along, but they're pretty rare.

Bryan

16 Mar 2012 - 11:59am
rolfsf
2012

I've been bumping into this topic in various forms quite a bit lately. As with many aspects of design, I don't think there is a simple answer. It really depends on the problem, the project, the team, and the designer.

I happen to do a lot of prototyping and am quite comfortable thinking and designing in html, css and some javascript. However, there a many cases where I will start with sketches and/or wireframes first to throw out a few quick options. In many cases I build very simple, lo-fi html prototypes to explore an interaction model that just isn't obvious on paper. I always maintain a hi-fidelity prototype that is, in many cases, indistinguishable from the production application - and this is where we really get a feel for whether a solution is right. When the design of an application is stable and there's a decent library of patterns, it's actually more effective to go straight into the prototype, like @Adam Korman says above.

Another aspect of this topic relates to the explosion of new mobile devices, screen sizes, screen resolutions (iPad3), etc.  It's become much more difficult to show this dynamic range of fluid layouts with typical wireframes. Many stakeholders simply can't picture the transformations that have to happen when displaying on different devices. A nice, simple example I came across was this post: http://www.thismanslife.co.uk/projects/lab/responsivewireframes/

16 Mar 2012 - 7:08pm
aalapd
2009

I find myself iterating through various degrees of detail through sketching. My recent projects have all involved not creating wireframes in the traditional sense but sketching concepts in a very lo-fi manner and then adding more details to those sketches or drawing new more detailed sketches in successive iterations. I still call these wireframes but they are hand drawn.

When I do move to a computer I go for pixel perfect mockups with or without branding and color.

- Aalap 

16 Mar 2012 - 8:01pm
StevenDufresne1
2012

Following Aalap's post, wireframes also get us away from the computer and allow us to flesh out important functional and theoretic processes that get buried within detail. I'm not too keen on the slow shift to computer generated wireframes. They become more product than blueprint.

Syndicate content Get the feed