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

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 2

3. 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

4. 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

5. Why is Software Design important ?5

6. 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

7. What is the software architecture?7

8. 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

9. Quality & Design 9

10. 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

11. 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

12. 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

13. 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

14. 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

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

16. 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

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

18. Summary
Quality & Design 18

19. 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

20. Quality & Design 20

21. 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

22. 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

23. 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. 23

24. 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

25. 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. 25

26. Interaction Styles: Form Fill-in
Disadvantages
Consumes screen space.
Usually sets the scene for rigid formalization of the business processes. 26

27. 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). 27

28. 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. 28

29. Interaction Styles: Direct Manipulation
Windows file explorer- files are dragged and dropped 29

30. 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. 30

31. 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

32. 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. 32

33. Design phases
Summary: 33

34. 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

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

36. 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.

37. 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.