Case 3

Enterprise User Interface design and Prototyping

Home Town Bank’s IT team manager has contacted your management and requested a prototype of the proposed user interface. Such a prototype is expected to only use use static data (not interact with the server or database) and have a limited execution flow. It is not expected that the full interface should be prototyped but the key interface components for the key application functionality is to be shown. Being wise, experienced, and intelligent, you decide to follow the detailed use case diagrams that were created and approved previously as the prototype for the UI is created. You also realize that the prototype needs to be well done as it and the detailed use case diagrams will drive a great deal of the remaining development.

HTB’s sales department is eager to see what they will be promoting when the application goes live and needs to begin planning publicity campaigns. They will do this based on the prototype that your team will provide.

Your management has asked you as Senior Engineer and Team Lead to oversee this process and communicate directly with HTB’s IT staff and sales department.

To aid your team in creation of the prototype pages, management has provided your team with HTMLTyper to speed your experimentation with layouts, color schemes, and content.

Return and Report

Come prepared to discuss:

• DOM (Document Object Model) for HTML
• DHTML
• What is AJAX?
• What is the XmlHttpRequestObject and what opportunities does it give an engineer?
• What is a callback function?
• What is asynchronous communication? What is synchronous communication?
• What is a danger if AJAX is used synchronously?

Design

1. Create a User Interface Design Standards document for your team
2. Create a story board illustrating the navigation of the Home Town Bank web site

Implementation

1. Create a prototype interface for Home Town Bank based on your story board design. Include the following pages in the prototype:
   • A home page with a login
   • A main page (after the user authenticates to the system) with links to all of the major use cases defined in your high level use case diagram,
   • Pages for each of the use cases that your team will be implementing.
2. The interface must abide by your User Interface Design Standards document
3. Use Dynamic HTML and/or AJAX for all interacitivity

Suggested Resources

1. Dynamic HTML Tutorial
2. DHTML Definition
3. DHTML Tutorial and Examples
4. CSS Reference
5. Ajax XMLHTTPRequestObject
6. Ajax Tutorial
7. Ajax Security
8. Cross-site scripting
9. User Interface Design Tips, Techniques, and Principles
10. Web Style Guide
11. Human Computer Interaction Bibliograpy – Development Resources
12. HTMLTyper
13. JavaScript Reference