David Ross's Blog Random thoughts of a coder

Recently I was working at a consulting company and was a little shocked to see the screen design process involved drawing a prototype on scrap paper, building the screens and then getting the client to review the final product.  I don't think this approach works.  While end users may not have the technical expertise to read a 300 page technical design document, they can grok a dozen detailed screen shots.  My guiding principle with development is to get feedback and get it often.  Personally I feel Information Architecture diagrams are one of the best methods of doing this. 

After working with some fantastic Information Architects over the years I've come to rely on good quality upfront screen designs being used to:

• Engage the customer and build excitement in the product
• Help drive the estimation process and determine the system's complexity
• Map fields from the GUI to the repository/database
• Enforce standards across the application including layout and validation errors
• Ensure that all text including error messages are created and spell/grammar checked by the business analysis team - It should be possible to copy text off the diagram

A good deck of diagrams will:

• Be customised for different audiences (same deck of cards but with sheets removed for different scenarios)
  • Senior Management - Given cards that show the end system's look and feel
  • Application Champion - Given cards that show dynamic behaviour - Before/After effects of a button press or validation error on a field entry
    
  • Data Analysts - Given cards/populate the mappings between user interface fields and the underlying data model
  • Programmers - Given all cards
• Include version numbers on each sheet
• Provide traceability between the screen and the original requirement/user story

Unfortunately I no longer have access to the fantastic IA template that provided all of the points listed above.  So instead in the space of a couple of hours I created a Visio template for doing simple Site Maps and Wireframes in Visio. 

The following shows a site map example:   

And an example of a page is as follows:

As you can see it's very basic but I think it's a good starting point.  The stencil includes

• Standard background for all diagrams
  • Sheet Id
  • Requirements Traceability
    
  • Version number
    
  • Boxes for descriptive text about the Site Map/Wireframe
• A couple of useful shapes
  • Distance marker
  • Page fold

Hopefully it may prove useful to a couple of people...

Visio 2007 - AI Template v 0.01.zip (131.63 kb)