eLivingCampus wireframes and paper prototyping

Robert Fulghum famously wrote that all he really needed to know he learned in kindergarten.  He meant, of course, the important stuff like sharing and not hitting, but perhaps he also meant cutting out.    In the development of the eLivingCampus we’ve been doing just that with our paper based prototyping. 

We first develop wireframe interfaces from our dialogue diagrams.   Last week I said that dialogue diagrams were the most important part of the development process.  I’ve changed my mind.  Now I think it is the thought process that goes into turning those flow diagrams into interfaces.  The simple way would be to make a screen for every box on the diagram but this would be a mistake.  So too is the approach of making a screen for every database table.   The purpose of the dialogue diagrams is to understand the flow of interaction.  We need to carefully combine this flow with the metaphor that represents the user’s understanding of that flow and create an interface that matches that.    Instead of lots of screens we try for as few as possible.  

A single screen with a clear model that matches and anticipates what I’m trying to achieve so that I can forget I am using a computer is the ultimate goal.  

You can be sure of a good argument in class by saying that MSWord is almost the perfect interface.   I think it is – think about the words we use “I’ve got to write an essay tonight” – our focus is successfully on the task not the tool.  It’s only when this breaks down, when we can’t find where they’ve hidden something important in 2007  that the tool becomes the focus (grrr).   At our institution the financial management system interface is so bad – so not in tune with the users’ model of the flow –  instead of the task (“paying the bills”) the administration staff refer grumpily to “doing the finance 1s”.  

We describe our wireframes as the “stickmen of interfaces”  – a focus on easily drawn function rather than form.  The first test is against the dialogue diagrams and the data model (again, no magic). 

We look at Jacob Nielsen’s how to video (often to much hilarity) and discuss what we are trying achieve.  The basic idea is aiming to simulate interaction with as little effort and resources as possible.   Some of the class (geeky boys usually) object to this cutting and pasting using scissors – they’d rather be coding.  But they get swept along with the rest of the class “using their fingers as a the mouse” and “thinking aloud”. 

 

Flickr slideshow of rest of eLivingCampus wireframes and paper prototypes.