Comments on Where the Wireframes Are: Special Deliverable #3

Darrel — Fri, 26 Jan 2007 14:50:24 GMT

Wow. David Heller said what I *think* I was trying to say in a much more eloquent manner. I agree completely.

hk dunston — Fri, 26 Jan 2007 14:50:24 GMT

Hey,

*nice* idea—good designers would appreciate the flexibility and less, umm, focused designers won’t get to simply add fonts and colors to the wireframe and call it a day. (side note: if you are not confident in your designers’ abilities, this approach could end up creating more trouble that it is worth.)

Another reason why I like this approach is that a complex site will frequently re-use components on different pages. This approach to wireframes treats each component of the site as an independent entity with differing priorities based on the page, preventing inconsistencies and making documentation, QA, etc, much, much easier. Engineers and htmlers will appreciate this change as well, particularly if it is coupled with detailed specs for each component.

Also, this method seems a lot easier to update—keeping the UI spec current as the project progresses will probably always be painful but it never hurts to try and alleviate the pain a little bit.

One downfall: I find that most clients have a hard time envisioning how the site is going to work. Standard wireframes (particularly if they are linked up) are really good at helping clients feel comfortable signing off on site functionality relatively early in the process. I wonder whether IAs will have to stick with wireframes in cases where clients seem particularly intransigent.

thanks for the idea!
—hk

David Heller — Fri, 26 Jan 2007 14:50:24 GMT

Shovel, Rake & Pail:
The reason why people share in this is that their primary skill sets require them to do so.

Graphic Designers have a particular point of view on visual design. It is not the best point of view, but a particular one. An IA’s job requires her to take part in the visual design process. I can’t imagine doing my job w/o picking up the graphic designer’s tools from time to time. Visio is my home, but Fireworks is my garage and illustrator is a small 1/2 bathroom.

I think the business case you make is not reality at all, nor is it actually the business case. It is very old school personnel management. In a more modern flexible organization the goal is to get the right people in a room who will create the most profitable experience for my customers. That means I need to make sure I have all the skills I can afford, to work as efficiently as possible together to create the most usable and most sellable products I can. That is a management strategy. Pigeon holing has been proven to cause inefficiencies in the work place by many studies, if for no other reason, it creates anxieties that make people less wanting to work.

I have worked in a pigeon hole and I have worked collaboratively. I’ll take collaboration over the birds any time.

—dave

Darrel — Fri, 26 Jan 2007 14:50:24 GMT

I like this approach, but I feel a better way to solve the stated problem would be to develop projects in a less linear fashion.

My agency experience was very linear. A project would go from VP to AE to Project Manager to Site Map to Visual Design to Production, etc.

This, of course, was the actual problem as each step would bring up issues that SHOULD have been addressed earlier, but weren’t due to the linearity of the project. This, I’m guessing, is the actual problem you were attempting to adress in your article.

This issue is also compounded by the mis-use of the term ‘design’ to refer solely to the visual designers. This is a dangerous habit, IMHO that seems to be wide-spread. Not calling IA design is a detriment to the project.

My solution? The IA should be working directly with the Visual Designers to develop the wireframes. Simple: a multi-step process turned into one. The client begins seeing the ‘site’ earlier, the Visual Designers start seeing the ‘goals’ earlier and there are significantly fewer revisions during the process.

Melvin Kumar — Fri, 26 Jan 2007 14:50:24 GMT

Hi,

I think it all depends on the company you are working with .

In the various companies I worked in, I could not implement similar processes. This is basically due to the wide differences between the visuals designers and developers I work with .

I produced different processes for the various companies, but they all have the same elements of user experience and they all enabled us to produce a better product.

So, I believe, you should choose the right elements that enable your company to work harmoniously .

My two cents of experience.

Thank you.

Melvin Jay Kumar

Iva — Fri, 26 Jan 2007 14:50:24 GMT

Hi all, I’ve been using wireframes (storyboards) for all web project for a couple of years now and ran across the exact pros/cons described in the article. I find them extremely helpful on larger teams and on teams with non-technical/novice to the web producers/editors, etc. Often the client is not sure what they want and is looking for so much guidance that it is crucial to have multiple wireframe signoffs.

We are in the process of launching a Content Management system and our web native editor is based on the concept of a living storyboard. Exactly because of the challenges surrounding a storyboard. Our editor _is_ the wireframe. It may start out vanilla flavor (no design at all), folders, pages, content are created and arranged (by IA or the team wearing the IA hat on a project). When design comps start finalizing they are templetized and become available in the storyboard, so content creators can preview the content with crome, images, css, etc. As business logic is added it also becomes available in preview/generated html. But the order is not important. Never worked on projects where we could stick to the same process especially in larger organizations. So if design comes first and wireframes later – our goal is to accomodate any workflow that people are familiar and comfortable with. Everything is reusable because content/design/code are the components of the complete site.

I would be very interested to hear what your thoughts are on this concept of a living wireframe(storyboard).

Best,
Iva

Dan — Fri, 26 Jan 2007 14:50:24 GMT

Katie, Ron, and David:
Thanks for your comments. I’d anticipated a LOT more controversy surrounding this article. What I’m seeing instead is a description of different approaches to the same problem. From Katie’s “wireframes after design” idea to Ron’s “experience models,” IAs clearly have many approaches to choose from.

To respond to David’s comments: conflict might be a trigger event, a pointed opportunity to explore these alternative approaches. Adopting alternate approaches, however, might evolve into something more than preventative measures for toe-stepping.

There is, however, a more rigorous business case for clearly delineating the responsibilities of IAs and visual designers. As a manager, I want to use my personnel in the most effective and efficient way possible. The toe-stepping is less “personality conflict” and more “getting people to do what they do best.”

To transform your excellent shovel-pail-rake analogy into a bad one: why would I have my shoveler use a rake or a pail?

We could get into the Platonic parallels at this point, but that is, perhaps, for another column…

David Heller — Fri, 26 Jan 2007 14:50:24 GMT

Ok, I can’t let it go … Dan, I think you are absolutely right. If the set up is IA > Visual Designer then I can see great value in your process that you created.

Even if these are just roles and not people you HAVE to have a place to do interaction design and this is also in the wireframe. IA > ID > Visual Design.

This being said, you can still employ your techniques if you have a dual-role visual designer who can do UX/ID design as well as visual and information design. Most Visual Designers don’t do this.

Who is going to say this is a drop down list? or no, I prefer radio buttons instead? Or this needs to be a browsertree navigation? but the browsertree needs to be employed in this metaphor not this one. Who is to say that the flow if interaction (even on the client side only) will go a specific directly? These require a storyboard of some kind to communicate.

Lastly, I think that the whole stepping on toes of visual designers argument is overstated. I have refused where I have worked to give into the uppidity status that visual designers afford themselves. I realize this is more of an agency culture issue, but it is one that needs to change. Visual Designers just have to learn to play well with others and we have to learn not to be scared to play in their sandbox. We are a team of people with different expertises, that doesn’t mean we step on each other’s toes it means that we all have a stake in the final user interface and thus are implicitly in the same sandbox.

I have a shovel and you have the pail and she has the rake. Time to build a kick-butt castle.

Ron Biggs — Fri, 26 Jan 2007 14:50:24 GMT

We had the same problem with IA was first introduced. But, we had a pow wow with the Designers and arrived at something that worked for all of us: wireframes (primitive or complex) were spatial, hierarchical, and prioritizing in nature—- and whatever appeared to be “design” wasn’t. Instead, those things showed content relationships and were to be interpreted against the design concept. Wireframes are only starting points for grounding the design studies.

We then graduated to Experience Models, which were detailed. By this time, however, the IAs and Designers had design concepts (“vernacular”) that the IAs could use to draw wireframes that corresponded to a large degree to the design concept, minimizing to that same degree the amount of interpretation needed.

Not all of our IA was anticipated. And while there are a lot of aspects that appear to be layout “design,” the precedent had already been set that these aspects would be interpreted. We could tell a “green” designer by designs that came out looking remarkably like the wireframe or x-model.

This mutual education took a lot less time than coming up with deliverables that didn’t “interfere” or presume upon design. The perspective we took was that Design needed to grow past the traditional to some degree.

-ron biggs
Sr. IA/Experience Designer—- Euro RSCG Interactive

katie — Fri, 26 Jan 2007 14:50:24 GMT

Great article. I think it’s always important to reviews existing work methods with regard to IA.

I’m sure some designers might have problems with wireframes feeling restrictive at times. However, as a designer you should be able to take loads of information and formulate a cohesive visual solution. If designers have the site concept and various page layout levels designed PRIOR to production on the pages (when wireframes are really used)—the wireframes should just help them to produce the pages.

As a designer I always appreciate well-worked wireframes. But they don’t lead the creative concept that’s being developed—they really are a reference which allows me to check that my design will function properly as i go along.

Dan — Fri, 26 Jan 2007 14:50:24 GMT

RE: I’m interested to know how you produced these documents. (Jonathan)

For better or worse, all in Visio. The advantages are that it allows me to do layout pretty easily, and it allows me to put the little component diagrams in-line. The disadvantage is that… well… it’s in Visio, though for clients I export to PDF. I suppose it would be easy enough to do the entire document in Word or PowerPoint, using Visio only to diagram the functional components.

RE: Does not a good web designer think of the IA, usability, functionality, branding, layout, and navigation all at once? (Nick)

Of course! A visual designer must have a general understanding of all those issues (as well as color, contrast, typography, etc.). I’d take it a step further and say that a good IA needs to have a general understanding of a graphic designer’s issues. A good IA must also have an understanding of database design and object-oriented programming, not so that she can do it herself, but so she can have intelligent conversations with other people involved in the process. (Of course, the column is about deliverables, so I’m well out of scope here.)

Perhaps the distinction is best understood through the responsibility of the details. An IA must pay attention to the details of the functionality: what happens when users traverse the entire hierarchy, how do we classify this piece of information, what happens when users click on this combination of buttons. The domain of a graphic designer encompasses an entirely different set of details. The page description diagram allows information architects to elaborate on their own details.

RE: The earlier article however, stated that ‘it is the information architect that puts a stake in the ground: the finished product will look like this!’ (Satya)

Yikes! I hope I’m never inconsistent from one article to the next, so thanks for keeping me on my toes. I suppose I should clarify what I meant in Special Deliverable #1. When I say, “look like,” I don’t necessarily mean visually. The finished product, being an interactive system, will have a set of behaviors. (If you want to get philosophical, those behaviors are expressed through the visual design.) The IA puts a stake in the ground by describing the system’s behaviors, through functional documentation, vocabularies, or what-have-you – perhaps in conjunction with a technical designer who will describe a database schema or infrastructure topology.

RE: I find that wireframes are at times the quickest way to express an idea. (Andrew)

No doubt wireframes are speedy, and that’s what I was referring to in the first bullet under Pros: “demonstrates a site concept quickly.” You’re absolutely correct in that good page descriptions can require a lot of effort. But I believe that effort is not in adjusting layout or typography, but actually describing the functionality. Ultimately, this is the best use of an information architect’s time.

As for projects designers find boring, I can’t help you there: I work for the US government!

Andrew — Fri, 26 Jan 2007 14:50:24 GMT

Good stuff here, although the effort of writing a good consise page description diagram like this would be quite high in some cases. I find that wireframes are at times the quickest way to express an idea.

I must be in the minority: I’ve worked with designers who *prefer* getting wireframes from me. This is partly because I tend to work on projects that designers consider boring: “What, another giant catologue of 5000 products with a bunch of categories and search functions? No Flash or tricky stuff? Give it to Andrew…”

satya viswanathan — Fri, 26 Jan 2007 14:50:23 GMT

Dan,
I have been following your (earlier and current)articles closely.

Can I see a slight shift between your earlier article -Opening Pandora’s Box: Special Deliverable #1
and this current one?

In your current article, I see that you have made a conscious effort to create a comfortable situation for designers as well as IAs. The earlier article however, stated that ‘it is the information architect
that puts a stake in the ground: the finished product will look like this!’

Being a UI designer, I have personally faced situations when the IA, and site structure has been given to me with the line of ‘caution’ that, “the client has seen this and likes it. so please dont stray too far.”
Like you, there are days when I think I will be making things look pretty all my life…

I really appreciate your efforts to:
1. Realize that there is a problem in the current way of working
2. Come up with a solution…

I do hope this process gets gains the required popularity and ‘designers’ like me (and many others) get space for their creativity. :-)

Thanks,
Dan.

Nick Finck — Mon, 21 May 2007 09:45:34 GMT

Dan,

First off, let me say great article… it depicted my life within an agency several years back… they had no IA, no user exp department… just a bunch of markup monkeys and creative artsy types… all in one group.

Now, I have been developing and designing web sites since 1995 so it would be no shock to me to say that a good web designer is also an IA. I am curious what your thoughts are on that. Do you feel that they are so far apart that one could not conceptually pair the two?

In this article here you seem to indicate that the two are very close… the IA cramping the designer’s creativity, the designers creativity cramping the IA’s …well, IA.

Does not a good web designer think of the IA, usability, functionality, branding, layout, and navigation all at once? Is there a need to have a new [yet, I admit, old] craft called an IA or is the need to educate ad-hoc designers with the true skills needed for the job?

Food for thought.

jonathan hanemann — Fri, 26 Jan 2007 14:50:23 GMT

Dan,

I’m interested to know how you produced these documents. Did you use Visio in conjunction with Word, Illustrator, etc?

I’m asking because the idea that your format eliminates having to navigate between two documents (a functional spec and wireframes, for example) is tempting. However, I’m not looking to make things more complicated for myself or for others who have to update my documents.

Thanks.