CSC450 Software Engineering Devon M. Simmonds University of North Carolina, Wilmington User Interface Design 1

Requirements Analysis Software Design – bridging the gap between requirements & Implementation Requirements Analysis Software Design Implementation Testing Deployment Evolution Systems Engineering In this lecture we will provide an introduction to user interface design: Definition of user interface Human factors in user interface design UI design principles UI design issues Interaction styles Summary 2

Requirements Analysis Software Design – bridging the gap between requirements & Implementation Requirements Analysis Software Design Implementation Testing Deployment Evolution Systems Engineering In this lecture we will provide an introduction to user interface design: Definition of user interface Human factors in user interface design UI design principles UI design issues Interaction styles Summary 3

What is a User Interface? The aggregate of means by which users interact with a particular machine, device or computer program. A user interface provides means of: Input, allowing the users to manipulate a system Output, allowing the system to produce the effects of the users' manipulation. wikipedia.org 4

Why is Software Design important ? 5

Requirements Analysis Software Design – bridging the gap between requirements & Implementation Requirements Analysis Software Design Implementation Testing Deployment Evolution Systems Engineering In this lecture we will provide an introduction to user interface design: Definition of user interface Human factors in user interface design UI design principles UI design issues Interaction styles Summary 6

What is the software architecture? 7

Requirements Analysis Software Design – bridging the gap between requirements & Implementation Requirements Analysis Software Design Implementation Testing Deployment Evolution Systems Engineering In this lecture we will provide an introduction to user interface design: Definition of user interface Human factors in user interface design UI design principles UI design issues Interaction styles Summary 8

Quality & Design 9

Usability vs. Utility Does the system provide the raw capabilities to allow the user to achieve their goal? This is utility or functionality. Does the system allow the user to learn and to use the raw capabilities easily? This is usability. Both utility and usability are essential They must be measured in the context of particular types of users. 10

Aspects of usability Usability can be divided into separate aspects: Learnability The speed with which a new user can become proficient with the system. Efficiency of use How fast an expert user can do their work. Error handling The extent to which it prevents the user from making errors, detects errors, and helps to correct errors. Acceptability. The extent to which users like the system. 11

Usability Principles 1. Do not rely only on usability guidelines – always test with users. Usability guidelines have exceptions; you can only be confident that a UI is good if you test it successfully with users. 2: Base UI designs on users’ tasks. Perform use case analysis to structure the UI. 3: Ensure that the sequences of actions to achieve a task are as simple as possible. Reduce the amount of reading and manipulation the user has to do. Ensure the user does not have to navigate anywhere to do subsequent steps of a task. 12

Usability Principles 4: Ensure that the user always knows what he or she can and should do next. Ensure that the user can see what commands are available and are not available. Make the most important commands stand out. 5: Provide good feedback including effective error messages. Inform users of the progress of operations and of their location as they navigate. When something goes wrong explain the situation in adequate detail and help the user to resolve the problem. 13

Usability Principles 6: Ensure that the user can always get out, go back or undo an action. Ensure that all operations can be undone. Ensure it is easy to navigate back to where the user came from. 7: Ensure that response time is adequate. Users are very sensitive to slow response time They compare your system to others. Keep response time less than a second for most operations. Warn users of longer delays and inform them of progress. 14

Usability Principles 8: Ensure that the UI’s appearance is uncluttered. Avoid displaying too much information. Organize the information effectively. 15

Usability Principles 9: Consider the needs of different groups of users. Accommodate people from different locales and people with disabilities. Ensure that the system is usable by both beginners and experts. 10: Provide all necessary help. Organize help well. Integrate help with the application. Ensure that the help is accurate. 16

Usability Principles 11. Be consistent. Use similar layouts and graphic designs throughout your application. Follow look-and-feel standards. Consider mimicking other applications. 17

Summary Quality & Design 18

Requirements Analysis Software Design – bridging the gap between requirements & Implementation Requirements Analysis Software Design Implementation Testing Deployment Evolution Systems Engineering In this lecture we will provide an introduction to user interface design: Definition of user interface Human factors in user interface design UI design principles UI design issues Interaction styles Summary 19

Quality & Design 20

Requirements Analysis Software Design – bridging the gap between requirements & Implementation Requirements Analysis Software Design Implementation Testing Deployment Evolution Systems Engineering In this lecture we will provide an introduction to user interface design: Definition of user interface Human factors in user interface design UI design principles UI design issues Interaction styles Summary 21

Interaction Styles Command language Form fill-in Menu selection E.g. the DOS command prompt Form fill-in Menu selection A set of options Direct manipulation Of the object of interest Natural language 22

Interaction Styles: Command language Advantages Flexible. Appeals to expert users. Supports creation of user-defined "scripts" or macros. Is suitable for interacting with networked computers. http://www.interaction-design.org/encyclopedia/interaction_styles.html.20 23

Interaction Styles: Command language Disadvantages Retention of commands is generally very poor. Learnability of commands is very poor. Error rates are high. Error messages and assistance are hard to provide. Not suitable for non-expert users. 24 http://www.interaction-design.org/encyclopedia/interaction_styles.html

Interaction Styles: Form Fill-in Advantages Simplifies data entry. Shortens learning in that the fields are predefined and need only be 'recognized'. Guides the user via the predefined rules. http://www.interaction-design.org/encyclopedia/interaction_styles.html 25

Interaction Styles: Form Fill-in Disadvantages Consumes screen space. Usually sets the scene for rigid formalization of the business processes. http://www.interaction-design.org/encyclopedia/interaction_styles.html 26

Interaction Styles: Menu Selection Advantages Ideal for novice or intermittent users. Can appeal to expert users if display and selection mechanisms are rapid and if appropriate "shortcuts" are implemented. Affords exploration (users can "look around" in the menus for the appropriate command, unlike having to remember the name of a command and its spelling when using command language.) Structures decision making. Allows easy support of error handling as the user's input does not have to be parsed (as with command language). http://www.interaction-design.org/encyclopedia/interaction_styles.html 27

Interaction Styles: Menu Selection Disadvantages Too many menus may lead to information overload or complexity of discouraging proportions. May be slow for frequent users. May not be suited for small graphic displays. http://www.interaction-design.org/encyclopedia/interaction_styles.html 28

Interaction Styles: Direct Manipulation Windows file explorer- files are dragged and dropped 29 http://www.interaction-design.org/encyclopedia/interaction_styles.html

Interaction Styles: Direct Manipulation Characteristics Visibility of the object of interest. Rapid, reversible, incremental actions. Replacement of complex command language syntax by direct manipulation of the object of interest. http://www.interaction-design.org/encyclopedia/interaction_styles.html 30

Interaction Styles: Direct Manipulation Advantages Visually presents task concepts. Easy to learn. Errors can be avoided more easily. Encourages exploration. High subjective satisfaction. Recognition memory (as opposed to cued or free recall memory) 31 http://www.interaction-design.org/encyclopedia/interaction_styles.html

Interaction Styles: Direct Manipulation Disadvantages May be more difficult to programme. Not suitable for small graphic displays. Spatial and visual representation is not always preferable. Metaphors can be misleading since the “the essence of metaphor is understanding and experiencing one kind of thing in terms of another” Compact notations may better suit expert users. http://www.interaction-design.org/encyclopedia/interaction_styles.html 32

Design phases Summary: 33

Requirements Analysis Lecture Summary Requirements Analysis Software Design Implementation Testing Deployment Evolution Systems Engineering In this lecture an introduction to user interface design was presented: Definition of user interface Human factors in user interface design UI design principles UI design issues Interaction styles 34

The End Qu es ti ons? ______________________ Devon M. Simmonds Computer Science Department University of North Carolina Wilmington _____________________________________________________________

Completing the Software Design Update requirements models Create design models Architectural model, class diagrams, sequence diagrams, state machines Update use cases Prepare design document Review the design within your group. Design presentations / report due.

Design Evaluation/Review Criteria These items pertain to the general design as well as to each design artifact, e.g., the architectural model. Traceability to requirements. Minimize the intellectual distance between software and real-world problem. Uniformity and integration. Structured to accommodate change. Reviewed to minimize conceptual (semantic) errors – omissions, ambiguity, inconsistencies). Modularity – good separation of concerns Coupling – module interconnection minimized Cohesion – high cohesion  greater functional independence.