Paper Prototyping - When Low-Tech is High-Tech

One of the projects I'm currently working on is a re-design of an existing Web Application. The original platform that was used to build the original web application is no longer being supported. So the client had no choice, they must move to more modern architecture. We have chosen Java/Tomcat/Spring/Hibernate.

Since the old application has been around for many years, we're running into some interesting design challenges that do not existing on new projects.

• The audience for this application is small. Approximately 20 users


• The application is used during the entire business-day. (This is sometimes referred to as a Sovereign Posture). Like a desktop application, it's running all day long.


• There is very little turnover at this client, so all of the users are very comfortable with the current design.


• And new users are not added very often

The easiest thing we could do is simply port the existing UI design to a new architecture. After-all, the users don't really care what is going on behind the screens. And they've learned to live with all of the quirks.

There are some uncommon conventions in the current web application which we'd like to improve in the re-designed interface:

• The original app uses Web Frames - which is frowned upon by current web design trends


• The back-button doesn't work reliably (the user's have become accustomed to this


• It contains Javascript driven menus that change dynamically. So it's like magic, you never know what menu choices will appear under the menu because it depends heavily on state


• The current design loses about 25% of the screen-width to a permanent series of web buttons.


• In-line styling, vs. consistent usage of CSS

Developers always love to jump right in and start building screens. But instead, we used a design concept that's worked for me in the past called Paper Prototyping.

My one sentence description of Paper Prototyping is...designing web-sites using paper, markers, scissors, and post-it notes. Low-tech meets high-tech.

Benefits:

• Saves Time and Money


• Real Return on Investment


• Everybody can participate in the design


• Test interface concepts before investing time to code and HTML


• Easy to modify


• Change is as easy as crumpling up a piece of paper


• A suprisingly good way to capture business requirement

It's always easier to capture business requirements when the client can see and touch the user interface. But rather than waiting weeks or months while putting together a prototype, The Paper Prototype gives us a change to show a paper "pretend" version of their web-site immediately.

What happens when you push this button?
What screen displays when I click here?
Can I have a pop-up Calendar here?
What happens if no results are found?

The 3 main developers and I got together last night, and worked through about 5 screens and the main layout in about 2 hours. Along the way we came up with some great ideas that may not have been generated if we hadn't been all looking at the same "screens".

Five Paper Prototyping Tips

Paper Prototypes: Still our Favorite


Go ahead - It's easy...

How to run the Spring Petclinic Sample Web Application

This week, I was asked to introduce a co-worker to some of the main Programming concepts behind Java Web Applications. This person was very familiar with DotNet, but had not touched Java in many years.

Like most programmers, he didn't want to read books...he wanted to get his hands on sample code as quickly as possible.

Rather than downloading the official Java EE Servers and exploring their sample code, I suggested he start looking at Java, Spring, and a lighter-weight Java Web Server such as Apache Tomcat.

Spring is NOT part of the official Java release from Sun. However, it is one of the leading (if not the leading) platforms to build and run enterprise Java applications.

Apache Tomcat is one of the leading (if not the leading) Java Web Servers (technically its a Java Servlet container). Unlike other industry giants such as BEA WebLogic ($expensive$), or IBM WebSphere($expensive$), Apache Tomcat (FREE) is not a full-blown Java EE Server and does not support the entire specification. That doesn't matter much though because developers have found it to be more than powerful enough to address a significant portion of the Enterprise Application problems out there. Especially when Apache Tomcat is paired with Spring.

So that's the set-up. There are more than enough documents out there on the Web which give detailed information about Java, Spring, and Tomcat. What I couldn't find for him is a straight-forward step-by-step guide on how to get these samples working for a Java-newbie. So here are my notes to him!

Before starting - you will need to download and install 3 things. A JDK (Java Development Kit), Apache Ant (one of the most widely used command-line build tools...very analogous to 'make' in the C/C++ world), and Apache Tomcat (the Java Servlet Container):

• Java JDK download of 1.5 or higher




• http://java.sun.com/javase/downloads/index.jsp


• I downloaded "Java SE Development Kit 6u12"


• After installing, add the JDK's "bin" sub-directory to your User or System Path


• Test the installation!  Open a new Command-Prompt Window


• Type "java -version"

•  Download and Install Apache Ant 1.6 or higher - Command-Line Build Tool.  Not required for Java, but it's the most widely-used Build Tool




• http://ant.apache.org/bindownload.cgi


• I downloaded Ant 1.7.1 ( apache-ant-1.7.1-bin.zip )


• Unzip this file to a location of your choice


• Add Ant's "bin" sub-directory to your User or System Path


• Test the installation!  Open a new Command-Prompt Window


• Type "ant -version"

• Download and install a Java Web Server.  I'd recommend Tomcat




• http://tomcat.apache.org/download-60.cgi


• I downloaded 6.0.18 under Binary Distributions / CORE / zip (apache-tomcat-6.0.18.zip)


• Unzip this file to a location of your choice


• Open a command-prompt, and Start-Up Tomcat by running "bin/startup.bat"


• Open a web-browser and visit this URI: "http://localhost:8080/".  If Java and Tomcat are installed properly, you will see the Apache Tomcat Page!

We're almost there, now we have to download Spring (which will contain the sample PetClinic application)

• Download spring-framework-2.5.6-with-dependencies.zip


• Unzip everything - you will get a directory called "spring-framework-2.5.6"


• Look in the directory samples/petclinic




• in this directory, there is a readme.txt file.  That gives instructions on how to build the sample


• Type "warfile" from the command-line to run warfile.bat


• If all goes well, you should see the message "BUILD SUCCESSFUL"




• In the directory "spring-framework-2.5.6/samples/petclinic/dist" you should now find a file called "petclinic.war".  this is the Web Archive - it contains the entire PetClinic Application.  This is the file that should be deployed to your Web Server.


• Since the PetClinic sample needs a working database, the Spring developers have kindly provided a small java database ready-to-go. You can Start-Up the pet clinic database by running this file




• spring-framework-2.5.6/samples/petclinic/db/hsqldb/server.bat




• Copy the petclinic WAR file to the Tomcat Webapps directory




• Copy spring-framework-2.5.6/samples/petclinic/dist/petclinic.war
  
  


• to this directory: apache-tomcat-6.0.18/webapps


• About a second after copying the file, the WAR file will auto-deploy and you will see a new directory called apache-tomcat-6.0.18/webapps/petclinic




• The application is now deployed. 
  
  


• Try to visit this URI:  "http://localhost:8080/petclinic"

This should be all you need to do to make Java, Apache Ant, Apache Tomcat, and Spring run on a machine that never had any of these installed before.

Insurance Breaks for Playing Computer Games...

I think Allstate Insurance is on the right track.

"Could playing computer games enhance mental agility enough to turn people over 50 into better drivers? Allstate Corp. wants to find out, and if the answer is yes, it might offer insurance discounts to people who play the games."

"Under a new pilot program called InSight, Allstate will offer specialized computer games to 100,000 customers in Pennsylvania aged 50 to 75...Then the group's accident rates will be compared to a control group of people who do not play the games."

I've got to ask my friend Ben in Pennsylvania if he's an Allstate customer...