Ben Nadel
On User Experience (UX) Design, JavaScript, ColdFusion, Node.js, Life, and Love.
I am the chief technical officer at InVision App, Inc - a prototyping and collaboration platform for designers, built by designers. I also rock out in JavaScript and ColdFusion 24x7.
Meanwhile on Twitter
Loading latest tweet...
Ben Nadel at CFUNITED 2009 (Lansdowne, VA) with:

Exercise List: The Prototype And Interface Driven Design

By Ben Nadel on

Now that we have the basic idea of what our ColdFusion application, Exercise List, is supposed to do, it's time to figure out what it is supposed to look like. Inspired by the likes of Clark Valberg and Hal Helms, I am going to be employing an Interface Driven Design strategy in which I nail down what the application will do from a visual and functional standpoint before I even worry about the data model and the underlying architecture. The idea here is that interface discovery period will help dictate what the underlying data model will need to be, and, in fact, while putting together the mockups, I realized that I was missing an essential data point: symmetry of an exercise (bilateral vs. unilateral).

Ordinarily, the mockup would be broken out into a clickable prototype, but for the size of this project (and the time contstraints I am giving myself), I don't think that is a requirement. I am envisioning the site as only having four pages:

  • Search exercises
  • View exercise detail
  • Add / Edit exercise
  • Delete Exercise

This could, of course, be more complicated and I could have spent more time on the design, but I didn't want to lose sight of the project goal; this is not so much about how to properly take a project from inception to delivery - this is more about learning how to program with objects in ColdFusion in an object oriented fashion. And, while getting a clear understanding of the underlying data model is important, I don't think we have to linger on the design for that understanding to be available in this ColdFusion application.

So, here are the designs that I have come up with; the designs have been cropped a bit on the right so as to fit within the confines of my web site (they will be bigger in reality).

Search Exercises

In this screen, the search criteria will be on the left and then the search results will be loaded on the right. When the joint criterion are not in use, their boxes will be minimized so as not to clutter the interface.


 
 
 

 
Exercise List: Searching And Listing Exercises  
 
 
 

View Exercise Detail

This is a straight forward detail page. For the most part, it is just echoing back the data in the database. At the bottom, though, it does list out related exercises. I believe that this work by matching up joint actions (but necessarily planes of movement). The Edit and Delete links will only be provided on this page.


 
 
 

 
Exercise List: View Exercise Detail Page  
 
 
 

Add / Edit Exercise

I figure that both the Add Exercise and Edit Exercise screens will be the same. The difference is that one will populate the data during form initialization.


 
 
 

 
Exercise List: Add / Edit Exercise Page  
 
 
 

Delete Exercise

The delete confirmation page is small. This is just to make sure that you don't delete things accidentally. I would like to make logical deletes rather than physical deletes to the data, but we don't have to tackle that idea just yet.


 
 
 

 
Exercise List: Delete Confirmation Page  
 
 
 

So those are the four screens that I am envisioning. I wish I had time to follow good Interface Driven Design practices, but I just need to get moving on this. I think that mockups will provide me with enough direction to get a phase I application (procedural code) done with no problem.

Note: I am not a designer. I know that there is stuff that could be improved about this interface, but I am fighting the urge to spend too much time on it. There is more important stuff to be tackled. And, assuming I write some nice, clean XHTML and CSS code, changing the look and feel of the application midstream should be an easy task.



Looking For A New Job?

100% of job board revenue is donated to Kiva. Loans that change livesFind out more »

Reader Comments

Are you going to make this Web 2.0?
Modals for delete?
Drag and drop to create the exercise routine?
When you check the box, the choices should "sliiiiide" open.

If only there was a JavaScript library that could help make that stuff easy! If only.

Reply to this Comment

@Glen,

The one thing I was envisioning, at least for Phase I, was the Sliiiide feature for the joint actions. The rest of the Web 2.0 stuff, I think will just distract me from my primary goal - to learn more about OOP.

But naturally, jQuery will be in my header ;)

Reply to this Comment

Post A Comment

You — Get Out Of My Dreams, Get Into My Comments
Live in the Now
Oops!
Comment Etiquette: Please do not post spam. Please keep the comments on-topic. Please do not post unrelated questions or large chunks of code. And, above all, please be nice to each other - we're trying to have a good conversation here.