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

CSC450CSC450

1

Devon M. SimmondsUniversity of North Carolina, Wilmington

CSC450Software

Engineering

User Interface Design

CSC450CSC450

2

Software Design – bridging the gap between requirements & Implementation

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

Requirements Analysis

Software Design

Implementation

TestingDeploymentEvolution

Systems Engineering

CSC450CSC450

3





Software Design

Implementation


Systems Engineering

CSC450CSC450

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

http://en.wikipedia.org/wiki/Input

http://en.wikipedia.org/wiki/Output

CSC450CSC450

5

Why is Software Design important ?

CSC450CSC450

6





Software Design

Implementation


Systems Engineering

CSC450CSC450

7

What is the software architecture?

CSC450CSC450

8





Software Design

Implementation


Systems Engineering

CSC450CSC450

9

Quality & Design

CSC450CSC450

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.

CSC450CSC450

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.

CSC450CSC450

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.

CSC450CSC450

13


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.

CSC450CSC450

14


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.

CSC450CSC450

15


8: Ensure that the UI’s appearance is uncluttered. Avoid displaying too much

information. Organize the information effectively.

CSC450CSC450

16


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.

CSC450CSC450

17


11. Be consistent. Use similar layouts and graphic

designs throughout your application. Follow look-and-feel standards. Consider mimicking other

applications.

CSC450CSC450

18

Quality & DesignSummary

CSC450CSC450

19





Software Design

Implementation


Systems Engineering

CSC450CSC450

20

Quality & Design

CSC450CSC450

21





Software Design

Implementation


Systems Engineering

CSC450CSC450

22

Interaction Styles Command language

E.g. the DOS command prompt Form fill-in Menu selection

A set of options Direct manipulation

Of the object of interest Natural language

CSC450CSC450

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.

http://www.interaction-design.org/encyclopedia/interaction_styles.html.20

http://www.interaction-design.org/encyclopedia/interaction_styles.html.20

CSC450CSC450

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.

http://www.interaction-design.org/encyclopedia/interaction_styles.html

CSC450CSC450

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.


CSC450CSC450

26

Interaction Styles: Form Fill-in

Disadvantages Consumes screen

space. Usually sets the scene

for rigid formalization of the business processes.


CSC450CSC450

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


CSC450CSC450

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.


CSC450CSC450

29

Interaction Styles: Direct Manipulation


Windows file explorer- files are dragged and dropped

CSC450CSC450

30


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

CSC450CSC450

31


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)http://www.interaction-design.org/encyclopedia/interaction_styles.html

CSC450CSC450

32


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.


CSC450CSC450

33

Design phasesSummary:

CSC450CSC450

34

Lecture Summary

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


Software Design

Implementation


Systems Engineering

CSC450CSC450

35

______________________Devon M. Simmonds

Computer Science Department

University of North Carolina Wilmington

_____________________________________________________________

Qu es ti ons?

The End

CSC450CSC450

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.

CSC450CSC450

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.

Documents

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