User Interface Theory & Design

Lecture 6a

1

User interface is everything the end user comes into contact with while using the system

To the user, the interface is the system

2

User Interface◦ includes all the communications and instructions

necessary to navigate through a system, to enter input to the system, or to obtain output in the form of screen displays or printed reports.

3

Why is User Interface Design important?◦ The user interface is what the user first sees

when they use a system – this is the ‘system’ to them

◦ If it has been designed well: The users are happy and satisfied with the system It will improve their productivity

◦ If it has not been designed well: it’s Windows

4

The concept behind User Interface Design◦ Human Computer Interaction (HCI) describes the

relationship between computers and the people who use them to perform business-related tasks

5

6

The concept behind User Interface Design◦ User Interface Design needs to be centred around

the user Users are involved throughout the analysis and

design processes to provide input into the interfaces The iterative development cycle helps to facilitate

this

7

Users work with a varied mix of screen or form input, screen or report output and data queries as they perform their day-to-day job functions.

Useful web site to read:◦ IBM’s Ease of Use white paper

Discussion on User Centred Design and design concepts

8

The analyst must consider the following when designing user interfaces:◦ The interaction between the user and the

computer when designing the interface for: Processing the input Processing the output Starting the system Logging onto the system

9

The analyst must consider the following when designing user interfaces:◦ The type of user that is using the system

Is it an expert user? (Someone who has spent considerable time using a computer)

Is it a novice user? (Someone who infrequently uses a computer)

10

The Analyst must take into consideration everything the user comes into contact with while using the system:◦ Physically◦ Perceptually◦ Conceptually

11

12

Physical◦ What the user actually touches to use the system:

the keyboard, mouse, touch screen, light pen, reference manuals, printed documentation, data-entry forms

13

Perceptual◦ What the user sees or hears: flashing messages,

beeps Conceptual

◦ What the user is manipulating with the system◦ How the system is used to complete tasks

14

User interfaces can occur between a user and a screen or between systems

Between a user and a monitor, interfaces can be:◦ Text-based (I.e. AS/400 or mainframe)◦ Command line◦ Graphical User Interface (GUI) – most common

15

Between two systems, interfaces are generally messages that are exchanged ◦ Messages can be passing of actual data values or

passing of parameters that can be set and deciphered for their meaning I.e. if validating a credit card, then a flag can be

passed with the credit card to the Validation ‘routine’ which sets the flag as to whether the validation was successful or not

16

Several types of user interfaces:◦ Menus◦ Query ◦ Data Entry◦ Reports

Detail Summary Bill payments Account statements

17

Method of accessing user interfaces:◦ Keyboard◦ Mouse◦ Arrow Keys◦ Function Keys◦ Ctl or Alt button in combination with a keyboard

key

18

Navigate using mouse or arrow Keys in this “desk top”

19

Navigate using mouse or buttons on this web“order form”

20

Navigate through a paper-based interface

21

Navigate using menus on this “web page”

22

Navigate using a Mouse and linkingOn the drill downreport

23

Graphical document

24

General guidelines:◦ Make interfaces consistent◦ Provide meaningful feedback to users in the

form of warning, informational and error messages

◦ Allow short cuts for experienced users◦ Allow easy reversal of actions◦ Always provide Help throughout online

applications

25

Focus early on the users and their work

Evaluate designs to ensure usability

Use iterative development

26

A formal method of designing and representing Dialogues/Dialogs

27

28

Dialogue/Dialog Expresses that the User and Computer Interact by Sending Messages

Many methods exist for documenting Dialogue/Dialogs◦ Use Case diagrams: the dialogue between the

actor and the use case◦ Written descriptions such as use case

descriptions or scenarios◦ Sketches of screens, i.e. storyboards◦ Dialogue/dialog charts

29

30

Storyboard for DownTown Videos Rent Videos Dialogue/Dialog

31

Storyboard for DownTown Videos Rent Videos Dialogue/Dialog

OO approach provides UML diagrams that are useful for modeling Dialogue/Dialogs in addition to Use case diagrams◦ Sequence diagrams act much as a

Dialogue/Dialog◦ Objects can be added to class diagrams and

interaction diagrams to represent Dialogue/Dialog

32

The process of designing the overall sequences that users follow to interact with an information system

the sequence in which information is displayed to and obtained from the user

33

understanding how the user will interact with the system◦ clear understanding of user, task, technological and

environmental characteristics

34

35

0Main Menu

1Product Management

0

4Purchasing

0

3Sales Management

0

1.1Add New Product

1,1.2

1.2.1Update Product prices

1.2,1

1.2Update Product

1

5Receiving

0Continued

… … …

Denotes continuation

Indicates the number ofthe slide that can be transferred or returned to

Screen identifier

Screen nameDialog Chart Example

open DialogCharts.zip from web page and see:Dialogue1.doc

36

A marketing manager wants sales and marketing personnel to be able to review the year-to-date transaction activity for any customer

37

38

1. Request to view individual customer information

2. Specify the customer of interest

3. Select the year-to-date transaction display

4. Review customer information

5. Exit system

Designs must be done simultaneously with other system activities

Include options such as backup and recovery Overall system structure from standpoint of user

is reflected in menu structures

39

40

Overall Menu Hierarchy

41

Eight Golden Rules for Interactive Interface Design