Oka-Shaffer Group Project
Project Report
IS2470 Spring 2002
Don Beynon
Terri Dyga
Regis Griffin
Hiroka Oka
Wendy Shaffer
PURPOSE: The purpose of this report is to define the process that the Oka-Shaffer team used to develop the project. Included in the project report will be the:
· PROJECT DESCRIPTION
· PROJECT FUNCTIONALITY
· DESIGN PROCESS
· TEAM CONTRIBUTION
PROJECT DESCRIPTION: The Team met to come up with an idea for a project. After discussion, it was determined that we wanted to try to develop a servlet that would teach the concept of multi-dimensional arrays to beginning programming students. Once the concept was agreed upon, a quick sketch (Figure 1) of the interface was drawn.
Therefore, the purpose of this project is to demonstrate, in a graphic nature, the concept of two-dimensional arrays. The interface will contain a grid, which will represent the array. The array will be pre-populated with values for production demonstration.
FUNCTIONALITY: The initial project proposal was to provide 3 different methods via the interface that the user could use to access the elements in the array to begin to grasp the array concept. The initial interface, based upon these functional criteria, was mocked-up (Figure 2) prior to beginning any development.
· Function 1: This function will allow the user to locate a position in the Array. This section will contain 2 text boxes and a command button. The user will input X and Y coordinates into the text boxes, press “Locate” and the color of the cell in the array will change to show the user how the array cell relates to the coordinates entered.
· Function 2: This function will allow the user to locate a value in the Array. This section will contain 3 text boxes and a command button. The user will enter the value that they are searching for in the Array, press “Locate” and the color of the cell will change to show the user how the array cell relates to the value entered and the X and Y coordinates will be returned to 2 text boxes.
· Function 3: This function will allow the user to update a value in the Array. This section will contain 3 text boxes and a command button. The user will enter the new value and the X and Y coordinates that they want the new value placed into and press “Update.”. The color of the cell will change to show the user how the array cell relates to the value entered and the X and Y coordinates.
· Function 4: The Exit button, allows the user to exit the application.
DESIGN PROCESS: The design process employed in creating the “Array” tutorial followed the Task-Centered User Interface Design approach by Clayton Lewis and John Rieman. Here’s the process employed by the Oka-Shaffer Group in comparison to the Task-Centered design process.
· Figure out who’s going to use the system to do what: The target users are math and/or computer science students. Typically, an elementary math course covers the concept of an array in a pre-algebra course.
· Chose representative tasks: We identified the tasks that the user could employ in order to learn what an array is, such as locating a position within an array, locating a specific numerical value within the array, and updating a value in an array.
· Reuse (“Reuse” is used instead of “Plagiarize”. “Reuse” is a concept becoming more popular in software engineering): Members of the Oka-Shaffer group reviewed available coding from class notes, Java textbooks and Inside Servlets by Dustin Callaway as input to the source code used in developing the project.
· Rough out the design: We initially constructed a hand written concept (Figure 1) followed by an HTML version linked to the Pitt IS server. Members of the group reviewed the HTML versions and improved upon it
· Think about it: The duration of the projects was nearly four weeks. During this time the group members each provided independent thoughts and provided input to the group via emails to each other and via team meetings.
· Create a mock up or prototype: Included in the project description was a mock-up (Figure 2) of a proposed interface design based upon the initial drawing. The mock-up interface was developed in Visual Basic 6.0. Prior to adding user interaction an initial prototypes of the array (Figure 3 through Figure 6) were created in HTML to allow the team members to evaluate the concept and screen layout. Figure 7 is an example of team feedback that led to the design of Figure 8.
· Test the design with users: The design was shown to friends and acquaintances. One team member knows a high school math teacher from which an evaluation was received.
· Iterate: The project team made a number of changes during the course of the design. Improvements where made as we progressed.
· Build the design: The design was built using Java and JavaServlets (Figure-9).
· Track the design: Not applicable for our project.
· Change the design: Not applicable for our project.
THE NINE (TEN) HEURISTICS: The Nine Heuristics presented by Lewis and Rieman where used in the user interface design
1. Simple and natural: The screen shows only relevant information with clear instructions.
2. Speak the users language: Language that a young student could understand is used.
3. Minimize user memory load: The user choices and sequence of events is straightforward.
4. Be consistent: Consistency in the screen interface design was used.
5. Provide feedback: The array is highlighted and/or changed when a number is selected or inserted.
6. Provide clearly marked exits: An exit button is included.
7. Provide shortcuts: This was not applicable in our design. It could be evaluated for future iterations.
8. Good error message: This was not included in the current software build. It could be evaluated for future iterations.
9. Prevent errors: Error prevention was considered during the design phases.
10. The 10th heuristic: provide help and documentation: This was not included in the current software build. It could be evaluated for future iterations.
Figure 1 – Initial Interface Design Sketch
Figure 2 – Initial Mock-up Interface Design for the project.
Figure 3 - First HTML Page
Figure 4 – Second HTML Page
Figure 5 – Third HTML Page
Figure 6 – Fourth HTML Page
Figure 7 – HTML Page Edit
Figure 8 – Revised HTML Page
Figure 9 – Final Servlet/HTML Interface
Project Contributions
All five members of the team contributed to the success of the project. We originally met as a group in order to brainstorm project alternatives and to pick the project design and objectives. The key contributions of the individual team members where:
Roughing out design: All
Project report: Regis and Don
Coding:
HTML layout: Hiroki, Terri, Wendy
Put on server for team review of mockup: Hiroki, Terri, Wendy
Java code for array: Don
Servlet coding: Hiroki, Terri, Wendy
Presentation: Regis