They’re $599 each, and if you’re interested, sign up at http://axuretraining.eventbrite.com/

Should wireframes contain:
Exact copy?
Images?
Color?

In my decade of experience, a website isn’t real to clients until they see some pictures, sketches, something, anything. With this in mind, my goal is to provide initial wireframes (black and white skeletons of the website) earlier rather than later. Something that represents current thinking, grounds the conversation, and provides a malleable vision. Without a visual artifact conversations quickly fly into the ether, and you quickly spend cycles speculating what do build when you should be building. I talked about this need on my other blog.

The most productive meetings are where the visual artifact or prototype is revised in real time, rather than capturing changes in notes. This gives clients something to digest immediately that represents current thinking. No waiting, and no “homework”. There’s a point where the project team runs out of information – even with a prototype. When you reach that point, stop revising and get more information or move to the next stage of development. Again, don’t spin cycles speculating – while wireframes are cheap, changing and changing back and back again is demoralizing.

Ben’s reminder that “The interface is the product” needs to be taken to heart by information architects and interaction designers as well. Wireframes and flows are not a web application – they’re a communication tool, a conversation starter. To me, using them as anything more is mistaking a tree for the forest.

A client this morning referred to me as “Santa” – because they tell me all their wishes for their app and I return with a nicely packaged interface. Fits perfect – the metaphor, not the suit.

While as Ian suggests, discussing the designer/IA relationship is the yettie form of navel-gazing. Wireframes are their most useful when they tell a story. In my experience, this story is told to the clients, project managers, and development team. Chances are, designers already know the story.

While it took me a while to wrap my head around, I’m digging the flexibility afforded in the Design Comic Templates developed at Sun. Telling stories through people and words…rather than pages and diagrams can describe interaction with a system faster than wireframing out even the core pages. Plus, it makes this work feel less like documentation. We could use more of that.

In my ongoing quest for the right information architecture wireframing tool – I have to thank TechMeme.com for introducing me to Gliffy.com.

Gliffy is a browser-based, Flash-drive diagramming tool, with the feel of a desktop app (i.e. fast and has both ‘File’ and ‘Edit’ menus). I spent a little time with it today and am quite impressed. Far more enjoyable to use than Visio or ConceptDraw.

A couple very nice built-in features;

1. User Interface symbol palette including windows, form controls, and scollbars
2. Collaboration – for multiple authors
3. Versioning – for reviewing previous iterations

The last two point mean Gliffy is a wiki for diagramming.

It’s also got the best price tag of any of the current tools – Free.

Axure v4 was released this week. You can download a 30-day free trial copy at  http://axure.com/downloads.aspx.

There are some great new features:

• Interactions: You can make prototypes respond to MouseOn and MouseOut events
• Dynamic Panels: Widgets for which you can define multiple states, triggered by interactions
• Masters on masters: You can now add a master to a master, which is something you couldn’t do before
• Radio button grouping: You can now make radio buttons single select
• CSV report generator: I haven’t played with this yet, but this might allow for some better integration with, e.g., Rational products for tracing requirements and such
• Ultra-configurable Functional Spec generation: There’s pretty much nothing about your functional spec that you can’t control now… however I’ve played with this a bit and it still seems a little buggy.

And there’s a whole slew of other stuff. Check it out if you’re so inclined.

I’ve gotten to know both NeoOffice/OpenOffice and ConceptDraw quite a bit in the past 6 months or so. Once ConceptDraw adds nested templates, it will be Visio for Mac. But it feels clunky and old, like they’re stuck in Mac OS 8.5.

The biggest benefit to NeoOffice/OpenOffice is it’s price tag….$0. For wireframes I’ve grown real fond of it. It’s somewhere between PowerPoint and an actual illustration tool. For wireframes, that’s exactly what I’m looking for. It feels a little sluggish now and again, but I’ve yet to find an app in this space that doesn’t.

Characteristics of the ideal wireframe development/prototyping tool (off the top of my head):

• Integration with a spreadsheet for lists
• Nested templates
• Template tags for date created, date updated, author name, project, client, version, page number, page name
• Palette of standard browser form elements
• Color palette limited to 5 colors; black, white, light gray, dark grey, hyperlink blue
• Export to PDF
• Multi-page find & replace
• Support for standard geometric shapes; squares, rectangles, circles
• Typeface palette limited to Arial, Arial bold, Arial italic

After playing with it for a couple days, the RailsDay.com challenge – build a working web application in 24 hours – seems viable. Rather than making documentation tools closer to prototyping, the Rails framework makes building the actual website easier. I foresee a threshold in website complexity where building it would be faster and easier than drawing out traditional wireframes.

With that in mind, a quick compare and contrast against the other wireframe options:

Pros:
• Cross platform, it’s just text files
• Output is an actual website
• Revisions can happen in real time, use your meetings to make the site better
• Plugs into versioning systems, always have the previous versions
• Default style is gray on white, perfect for wireframes

Cons:
• Access to server running Ruby on Rails and a database are required
• Some degree of programming knowledge required
• More difficult to print out

That answer relies on the answers to 2 other questions:

1. Is the purpose of the wireframes: requirements gathering, interaction design, functionality validation, content organization, usability evaluation, or site documentation?
   Each of these purposes inherently has different needs and requires different levels of detail and different frequency of change. For example, wireframes in usability evaluation will need to be quickly modified after each evaluation where as those documenting a site will only change during major refreshes.
2. Which applications do your clients prefer?
   Good wireframes are living, breathing documents – just like the sites they represent. Wireframes are the easiest way to visually communicate and comprehend the impact of a change across an entire system. This makes them the perfect candidate to experiment with well after the major Information Architecture engagement is over. Therefore, it’s best to choose an application everyone is comfortable with.

With these two questions in mind, I’ve had experience with a number of applications, each with their benefits and drawbacks. None of them the best answer. Map the strengths and weaknesses below against your answers to the above questions and you’ll find the least square peg for wireframe’s preverbal round hole.

• Wall-sized Whiteboard and a Stack of Markers
  • Description: Sometimes the best way to sort through a difficult problem is some dedicated wall-time. I normally start complex projects this way. Some of my most interesting conversations have come out of these wall sessions where everyone has a marker and we’re diagramming as we’re talking.
  • Strengths: very approachable, great for exploring different interaction models quickly with 1-5 project team members.
  • Weaknesses: requires a decent amount of physical space, difficult to distribute digitally, no redo, no copy-paste.
• Pen, Paper, Stickies, & a Copymachine
  • Description: stuff you have lying around the office, think of it as a portable whiteboard.
  • Strengths: very accessible, easy to update, rough and unfinished look provides excellent feedback in evaluations.
  • Weaknesses: difficult to distribute digitally, adds more paper to your life, no redo, no copy-paste.
• Adobe Illustrator
  • Description: Adobe’s professional digital illustration tool.
  • Strengths: Most popular vector-based drawing tool, fast, very flexible text operations, cross-platform, readable by Adobe Acrobat.
  • Weaknesses: no support for multiple pages in the same document, no text underline feature out-of-the box, no customized and editable stencil palette, tedious to make changes across multiple documents, tough learning curve.
• Macromedia Freehand
  • Description: Macromedia’s professional illustration and layout tool.
  • Strengths: supports multiple pages in the same document, find and replace for shapes and text, shapes stay connected when moved, robust text handling,
  • Weaknesses: not as popular as Illustrator, tough learning curve.
• OmniGraffle
  • Description: a young Visio for Macintosh. This is what I use for all my side projects.
  • Strengths: very flexible custom palette system, a number of wireframing stencils already exist, exports to Visio’s XML format, shapes want to be locked together, inexpensive compared to Illustrator or Freehand.
  • Weaknesses: not everywhere, Mac-only, no easy way to draw freehand, interface model not exactly like Illustrator or Freehand, doesn’t support multiple layouts, awkward to draw freehand.
• Microsoft Visio
  • Description: Microsoft’s flow-charting tool, originally built to help software developers to visualize and organize their code.
  • Strengths: supports multiple pages, supports multiple layouts, can auto-insert useful information like last-modified date, lots of organizations already have this in-house as part of Microsoft Office, wireframing stencils exist and can be easily customized, shapes stay connected when moved.
  • Weaknesses: interaction model completely unlike Freehand or Illustrator – will drive experienced graphic designers batty, might be the only reason to purchase VirtualPC, nasty type handling.
• Macromedia Dreamweaver
  • Description: Macromedia’s website building tool.
  • Strengths: hyperlinking, form elements, templating built-in, great for creating live prototypes, has site-mapping built-in, supports styelsheets, files are text and can easily be added to version-control systems, can integrate into live systems.
  • Weaknesses: no easy way to handle annotations, the generated code is throw-away, some knowledge of HTML is needed to create quickly, doesn’t print well.
• Microsoft PowerPoint
  • Description: The application you love-to-hate and hate-to-love.
  • Strengths: slides are already formatted for screens, very flexible printing options, hyperlinking and animation built-in, supports multiple pages in the same document, offers a specific place for annotations, find-and-replace, super easy to update on the fly, everybody can update it easily.
  • Weaknesses: doesn’t support multiple layouts easily, difficult to design pages longer than a single screen, somewhat awkward interaction model.