Our User Interface Design is modular, and fairly consistent. For this reason, only a few screen shots are shown here to highlight design elements. It should be assumed, however, that all pages look similar to at least one of these four.
Also, you may notice that the web browser changes in the screen shots. This is because we wanted to demonstrate how the application look and feel will change with browsers. As with any other design element, the User Interface design is an evolving design, and is subject to a lot of changes before we reach the final product.
Screen Shot 1
The first Screen Shot is a shot of the login page that every user will be presented with when they first access the application. It's a standard design, with little to be noted.
Screen Shot 2
The second Screen shot above is a shot of the main menu. Currently, the main menu is a collection of links to the other menu pages. The small "home" icons next to each link will eventually be replaced with helpful icons for each link. Take not of the blue navigation bar on the top. The drop down box on the right provides quick access to any other section of the application, and a "where you are" links on the left help the user remember where they are in the application, and how they got there. Both of these elements are designed to ease navigation in the application.
Screen Shot 3
All sub menus look very similar to the homeowner menu shown above in Screen Shot Three. Here is how the menu works: First, the user will chose one of the radio buttons for the page that they would like to work on. Depending on the option, the user will then choose an homeowner from the select box. Once the user is satisfied with their choice, they will click GO to go to the next page. Thus, if user Joe wants to edit the homeowner information for John Doe, he would select the Edit Homeowner radio button, and then select John Doe's name out of the list box, and then click on GO.
Context help for each menu option is provided to the left. Help is only shown for the menu option that the user currently has selected. It is our hope that the help to the left will help the user understand what each menu option leads to. Also, the select box of homeowners is hidden when the Add Homeowner option is selected, since it does not make sense to select a homeowner when adding a new homeowner to the system.
The content of the Select Box on the left may change due to the subject matter (such as selecting properties instead of homeowners), but the general design is the same.
Screen Shot 4
Screen Shot 4 shows what the typical Add and Edit pages will look like. The forms will be organized logically, so as the ease the adding of new information. At the bottom of each Add and Edit page will be a button to commit the changes to the database. View pages will also look very similar, however, they will not contain any editable text boxes.
Screen Shot 5
Screen Shot 5 represents the spread sheet like interface to Tax Payments, Insurance Payments, and Mortage payments. The forms on these pages are oriented horizontally rather than vertically. Each row in the form shall contain one record. The idea is that the Spreadsheet UI design for these pages will make it more intuitive to the Harrisburg Habitat Business manager when he manages payments. They also provide a high amount of speed in that the user will not have to go through the menus to edit a lot of different records at once.
