Documenting Interface Design
Friday January 26, 2007 / 9 CommentsUse cases, functional specs, interface specs, site maps, you name it. I have yet to come across any of these documents that are usable. I’m as guilty of this as the next person, but if our job as information architects, interaction designers, or whatever we call ourselves, is to help create interfaces for humans, then why do we use tools and create documents that are mind-numbingly unusable by the engineers and programmers who are supposed to build it all.
I’ve worked with a lot of clients, and I’ve seen a lot of documentation. Over the last couple of years, I’ve done my best to migrate away from traditional documentation methods and find ways that actual help others visualize what the end product should look like. I’m a huge proponent of rapid prototyping whenever it’s feasible, and I strongly believe the value of functional specs and use cases as they are used today serve a very limited role.
The Problems
- Document Debt – These documents are almost never designed to have any real life expectancy.
- Unusable – These documents are virtually impossible to translate into screens and a user interface. They do very little to take the end user of the document, engineers, into account.
- Separation Anxiety – There’s almost always a plethora of documents that are all inter-related and do a fantastic job of separating the information so that you have to swim through multiple documents just to find the details on one simple thing.
- Not Engaging – There is nothing about these documents that makes them interesting. It becomes extremely tedious for people to create them and to read them. This leads to confusion and apathy towards the quality of these documents. Let’s just be honest. Nobody likes to write them, and nobody likes to read them. They don’t engage their users.
- Unnatural – Creating multiple disparate documents is not a way to organize information.
- Illusion of Agreement – As the good folks at 37signals have noted, these documents only create the illusion of agreement. Words leave room for interpretation, and that leads to assumptions and miscommunication.
The Solution
I don’t have the details worked out yet, but I’m slowly putting together a vision of how we can really document web applications in a pragmatic way. The primary driver is to create something that people can understand, and to make documents that engineers actually look forward to using. It’s a hybrid of wireframes, page description diagrams, and functional specs.
It’s about designing modules, bits, and building blocks. Those modules are then heavily and appropriately documented based on their usage, behavior, limitations, etc. The modules would each fit on their own single piece of paper. If a module starts to require more information such that it won’t fit on a single sheet of paper, it needs to be broken out into smaller modules.
Of course, documenting modules is only good if there’s a clear higher level vision, but for the sake of focus, we’ll assume that’s already happening. The problem lies with how we’re expressing that vision on paper. I’ve been hashing it out recently, and it’s coming together nicely. As with anything, I don’t think it’s the solution for everything, but in the right circumstances, I see an incredible amount of potential.
As a quick disclaimer, the catch here is that use cases and functional specs are traditionally used to create the requirements for the app. Those requirements then evolve into wireframes based on a traditional waterfall approach. A lot of my ideas are based on my belief that requirements should not be developed independent of the user experience. The requirements and interface should be developed hand in hand. So, if you disagree with me there, this approach might not be right for you.
Summary
We can’t escape the need for documentation. Pictures aren’t detailed enough, but words aren’t clear enough. Engineers sit down and program modules. They should be able to sit down with one sheet of paper, maybe front and back, and code a module without interruptions. They shouldn’t have to swim through half a dozen documents, go back and forth asking questions about details that were overlooked.
If we’re so concerned about interfaces and humans, it’s time we start giving the interface to our documentation the innovation and atttention that we give to the rest of our interfaces. I hate talking about things before they’re finished, but I couldn’t contain my excitement/frustration anymore.
Unrelated: This will most likely be my last post before the new version of the site goes live. It’s been a long time in the making, and I’m just going to buckle down and get it out there. I’m excited because it’s the most purpose-driven design I’ve ever done. See you on the other side.
Featured Stuff - Resources: Wireframes & Page Description Diagrames
Omnigraffle and Visio versions of the wireframe templates and stencils I use on all of my projects. There’s even a few examples included for good measure. More about Wireframe & Page Description Diagram Stencils and Templates
Cool. Can’t wait to see what you’ve got cooking.
Chris MoritzWould like to see the solution hashed out a little more but I like where your ideas are flowing. I can definitely see the appeal for the engineers.
My concern lies with the question of to what level must one design the “modules” so as to remove alternative interpretations by the client and thus improve upon the miscommunication that arises through the current method of using “words”. I.e. These modules may become so detailed that we find ourselves swimming once again.
ps: Looking forward to the new design.
Aaron SchmidtDon’t forget that there are still mounds of documents that cover all the cases where those modules interact with each other, and that increases as the complexity of the product increases. Most of the questions I get from m developers are along the lines of “when module A is in this state, and module B is in that state, and the user does this, but the system is in this state, what should we do?”
You’re hitting on a great interest of mine, so I’ll be watching.
Jed WoodI found myself nodding “yes” a lot to the list of problems that you started this article with.
Can’t wait to see this new approach you’re describing and your new site design.
SallyI’m also looking forward to this and will try to find a solution myself. I disagree though that “a single sheet of paper” is the ideal medium for this. It has to be a digital format. My rationale:
- Paper is the wrong medium to show interaction processes
- Why use paper when every other step of the process is digital (design, development)
- We need a close tie in of these documents into the workflow of designers and developers, so that eventual mistakes are not repeated over and over again (no redundancies)
I also doubt that this single approach exists, as it has to depend on the implementation details, e.g. a module is something different in each CMA and therefore needs a different treatment at the IA level.
Ralf GehrigVery interesting subject and I totally agree that the design documents should be useful and usable (because not everybody can afford not to have a documentation signed by the client :D).
I am looking forward to see your approach!
Zoltan GoczaThere is a practice I’ve adopted recently that corresponds to what Garrett describes above. I’m usually preparing highly detailed HTML/CSS/JavaScript prototype of the application we’re working on. This prototype is used as a specification of the user interface (demonstrates the behavior of the app, the structure, sets some guidelines for the information design etc) and is also used for user testing and getting feedback from clients.
The problem is that this prototype sometimes cannot explain what’s happening behind the scene – how’s the information stored in the database, how should it be processed etc. This kind of information is critical for the developers and also for the clients but in the same time doesn’t become obvious from the prototype itself.
So I’ve started to take notes during the process of thinking of and actually building the prototype. These notes explain the things shown on the screen and the expected behavior but only when they (and their functions) are not self-evident.
Documenting the thought process (the outcome is usually a brief list with notes) was very useful for me and my team diminishing the number of unclear things and speeding up the work.
georgeAs a front-end web developer, I find that IA/UX wireframes are generally fairly useful. I’ve had some very well written wireframes.
The issue I find to be problematic, is the translation of the design from wireframe to visual design, and then the consequent interpretation of that design back to the wireframe: “Is this bit here meant to be section 7 in the wireframe?”
I don’t really know what the solution to that might be, and this is dealing with static templates only, not even thinking about web sites as systems. I think that it all comes down to communication, throughout the design process.
Having said that, any call to clearer documentation with meaning and longevity to at least the end of the project would be useful.
I’ve written about css analysis of websites here but I think that this stage of web site design might well become easier with ‘oiling the joints’ between the transition between design and development areas, whether waterfall or agile processes are used.
Dan EastwellComments are closed for this entry.