You've come trough a lot of use-case driven analysis. Now you're going to look some of aspects of system analysis. They are traceable to use cases, and both are extremly important to the final product. Graphical User Interfaces (GUIs) determine system usability. Let's dive into GUI desing process.
Some General Principles of GUI Design
User interface design, equals parts art and science, draws upon the vision of the graphic artist, the findings of the human factors researcher, and the intuitions of the potential user. Some general principles in GUI design are:
1. | Understand what the user has to do. User interface designers typically perform a task analysis to understand the nature of the user's work. Our use case analysis roughly corresponds to this. |
2. | Make the user feel in control of the interaction. Always include the capability for the user to cancel an interaction after it's started. |
3. | Give the user multiple ways to accomplish each interface-related action (like closing a window or a file) and forgive user errors gracefully. |
4. | Because of cultural influences, our eyes are drawn to the upper-left corner of a screen. Put the highest priority information there. |
5. | Take advantage of spatial relationships. Screen components that are related should appear near one another, perhaps with a box around them. |
6. | Emphasize readability and understanding. Use active voice to communicate ideas and concepts. |
7. | Limit the number of colors you use. Limit that number severely. Too many colors will distract the user from the task at hand. |
8. | If you're thinking of using color to denote meaning, remember it's not always easy for a user to see an association between a color and a meaning. |
9. | As is the case with the color, limit your use of fonts. Avoid italics and ornate fonts. |
10. | Try to keep components (like the buttons and list boxes) the same size as much as possible. If you use different-size components, a multiplicity of colors, and a variety of fonts, you'll create a patchwork that GUI specialists call a clown-pants design. |
11. | Left-align components and data fields - line them up according to their left-side edges. This minimizes eye movements when the user has to scan the screen. |
12. | When the user has to read and process information and then click a button, put the buttons in a column to the right of the information or in a row below and to the right of the information. This is consistent with the natural tendency to read left to right. If one of the buttons is a default button, highlight it and make it the first button in the set. |
The GUI JAD Session
For this session, you recruit potential users of the system. For the Digital Library we'd recruit members, lenders and data entry clerks. The users' participation in the session is a two-part affair. In the first part, they derive the user interface screens. In the second, they approve prototypes generated by the development team.
How the users derive the screens? The facilitator suggests a use case to strat from, and the users discuss ways to implement that use case via the system. When they're ready to start talking at the level of a specific screen, the users work with paper mockups. The facilitator provides a large sheet of easel paper in landscape view to represent the screen. Post-is note stickies represent the GUI components. The users' task is to work as a group to position the components appropriately.
When they reach agreement on which components should be on a screen and where those components should be located, development team members create prototype screens. As they work, they use appropriate GUI principles. Then, they present those screens on computers, and the users make any necessary modifications.
It's
your turn to draw out the users' screens. Let your imagination and GUI principles guide
you when constructing these screen shots. To make your work easier a set of UML diagrams
for the member, lender and data entry clerk screens are given to you. Look at these
diagrams and draw out necessary screen shots. DataEntry clerk's diagrams are too large and
complex, and if you want you may draw out these screen shots or not.
The UML state diagram for the Member interface |
The UML composite diagram for the Member screen hierarchy |
The UML state diagram for high-level screen flow in the Employee interface |
The UML composite diagram for the Employee-Lender screen hierarchy |