Tag Archives: wireframe

SharePoint 2010 Wireframes

Another version of SharePoint is on us, and the need for the vital excercise of wireframes still exists. I created wireframes for MOSS, and now I have added new wireframes for 2010. If you search for SharePoint 2010 wireframes you’ll find a blog post, but those aren’t really true wireframes in the low-fidelity sense (they’re closer to full comps); and he’s not releasing them publicly anyway. I am a fan of very low-fidelity wireframes, and Visio is one of the better tools to do this in.

There are two wireframes: one is for a team site template, and the other is for My Sites. I did not create a publishing site one, because if you’re doing wireframe activities for a publishing site most likely you’re starting over on your interface. You can however use parts from the team site one when building it if you wish. The SharePoint Foundation and Server 2010 team sites are the same so you can use the same wireframe.

They are provided in a Visio format and PDF. I have created them in Visio 2010 and assume they will work in older versions of Visio; please let me know if they do not. I also once again made use of the (updated) GUUUI Visio stencil kit.

UPDATE: A commenter below has linked to some Balsamiq templates if you use that application.

The Wireframe Audiences

Information Architecture is a difficult field. Not only do we continually have to sell the importance of our field, but we also serve a role that most IT people do not. We walk the thin line between business analysts and designers; we also have the difficult job of translating functional business requirements into something our developers can understand and our customers can buy off on.

Because we often don’t fit well into a nice category we are responsible for a much larger part of designing information systems. Nothing makes this more evident than the process of creating wireframes, and I’m going to address the debate on interactive vs. static wireframes in the context of our role in the development process from the perspective of designers, customers, and managers. The time has come to more clearly define who we are, the role we play in the development process, and be sure that we satisfy all interested parties in the process.

The following quote from Rosenfeld and Morville in their IA magnum opus will be expounded upon:

Wireframes represent a degree of look and feel, and straddle the realms of visual design and interaction design. Wireframes (and page design in general) represent a frontier area where many web design-related disciplines come together and frequently clash. The fact that wireframes are produced by an information architect (i.e., a non-designer) and that they make statements about visual design (despite being quite ugly) often makes graphic designers and other visually oriented people very uncomfortable. For this reason, we suggest that wireframes come with a prominent disclaimer that they are not replacements for “real visual design.” The fonts, colors (or lack thereof), use of whitespace, and other visual characteristics of your wireframes are there only to illustrate how the site’s information architecture will impact and interact with a particular page. Make it clear that you expect to collaborate with a graphic designer to improve the aesthetic nature of the overall site, or with an interaction designer to improve the functionality of the page’s widgets. (pgs. 308–9)

Are We Interaction Designers?

The answer is yes and no. We certainly have a role in the overall user experience process, but we are not responsible for how a user actually interacts with an information system. Let’s face it our annotations don’t replace the role of a qualified interaction designer. I will be focusing on the fact that our value-added proposition is that we can effectively lubricate the evolution from a stiff business requirements document into something reminiscent of a usable system that is then passed onto the programmers, designers, and usability gurus.

Please understand that I understand that the field of IA, UX, and all other aspects of architecting interfaces often happens with just a single person. I don’t want to minimize that as I myself served all these hats. I’m simply pointing the role of a wireframe in the overall interface design life cycle.

There are an abundance of tools that purport to aid architects in creating interactive wireframes, but then what does that display to our team members? Does a designer want to be handed a garbled, poorly-coded, auto-generated layout with cookie-cutter interactions? I know when I was a designer I wanted at least some liberty in what the interaction and user experience ended up looking like. It’s true that in most design shops that the designer serves an IA role, but when we have dedicated information architects shouldn’t we stick to doing what we do best? Don’t we deliver more value in designing taxonomies, labels, navigation, and conceptual layouts?

The Customer’s Perspective

The customer will always prefer something interactive—that isn’t a question. Looking at a bland Visio document doesn’t exactly inspire someone, but what is the purpose of the wireframe? Are we not trying to get the customer to focus on the layout, labels, etc and not how the interaction will take place? When we design interactive wireframes doesn’t it also pigeon-hole the designers to design around the interactions from the IA’s wireframe?

Here is what usually happens when you give anything interactive to a customer when you’re trying to do IA and not interaction design/user experience. They will spend more time clicking around complaining about the pop-up windows and the way it looks and not what we actually want them to be looking at? The value in static, seemingly dry wireframes is that they have no choice but to focus on what we bring to the table in terms of IA and not user experience.

The Designer’s Perspective

Designers are artists in their trade. They make money, because they know typography, colors, interactions, and all the other unique challenges to being a designer. I can’t tell you how many times I’ve asked for wireframes when what I was given was a poor mockup. Let us answer once-for-all that a mockup and wireframe are not the same thing. The designer does not want to be given a mockup—that is the very thing they are experts in. The problem only escalates when an information architect tries to tread too much on what the designers are supposed to do.

When an information architect goes out and converses with the customer, interacts with the functional business requirements, and creates and receives buy off on a wireframe that it is almost invaluable to a designer and the other programmers. A programmer can then focus on database schemas, object orientation, while the designer can worry about the aesthetics of the interface. You will become a programmer/designer’s best friend if you can abstract the job of creating labels while not dictating how the interaction and how it will actually look.

The Project Manager’s Perspective

Project Manager’s are often the hardest to sell on the value of IA. They look at IA as something the designer does, and that only contributes to the difficulty of selling the importance of our field. They are likely to look at the designer and say: give me a mockup to send to the customer, and when money becomes an issue in the project they’ll cut IA’s always before designers. I have never heard of a designer being cut in place of an IA. It has never happened.

We need to carve out what we do best. Designing information systems amongst different skill sets is not reminiscent of some measure of unrelated diversification—everything we do as IA’s is related to everything else. We just need to be sure that what we do we do as well as we possibly can while enabling our fellow designers and programmers while appeasing our customer.

Conclusion

The thesis of this essay was to define what our role is in the wider scope of the development process, and address just one small part of our value added proposition in the development of wireframes. We have so much to offer, but we must be careful on where we tread because we fill such a political position in the development process.

SharePoint Wireframes

If you spend anytime at all doing interface design work you know the value-added from wireframes early on in the development process. It helps to point the customer to what’s important in the early-going, namely, labels, location of content, navigation, etc while not worrying about the font or what color the background is going to be. It’s this stage that information architects flex their muscles.

I have created a wireframe for MOSS 2007. It is based on the master page that comes out-of-the-box with SharePoint 2007. If you want to make it WSS-specific, all you really have to do is remove the “My Site” and “My Links” in the top-right navigation bar.

The two formats available are a Visio template (.vst) and a PDF. I made use of the GUUUI Visio stencil kit in Visio 2007, but it should open fine in 2003. If you don’t have Visio you can use the PDF.