1

SYS366

User Interface Theory & Design

2

User Interface

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

To the user, the interface is the system

3

User Interface Design 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.

4

User Interface Design 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

5

User Interface Design 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

6

Fields Contributing to Study of HCI

7

User Interface Design 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

8

User Interface Design 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

9

User Interface Design 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

10

User Interface Design 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)

11

User Interface Design The Analyst must take into

consideration everything the user comes into contact with while using the system: Physically Perceptually Conceptually

12

User Interface Design

13

User Interface Design Physical

What the user actually touches to use the system: the keyboard, mouse, touch screen, light pen, reference manuals, printed documentation, data-entry forms

14

User Interface Design 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

15

User Interface Design 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

16

User Interface Design 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

17

User Interface Design Several types of user interfaces:

Menus Query Data Entry Reports

Detail Summary Bill payments Account statements

18

User Interface Design Method of accessing user

interfaces: Keyboard Mouse Arrow Keys Function Keys Ctl or Alt button in combination with a

keyboard key

19

User Interface Design Navigate using

mouse or arrow Keys in this “desk top”

20

User Interface Design Navigate using

mouse or buttons on this web“order form”

21

User Interface Design Navigate through

a paper-based interface

22

User Interface Design Navigate using menus on this “web page”

23

User Interface Design Navigate using a

Mouse and linkingOn the drill downreport

24

User Interface Design Graphical

document

25

User Interface Design 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

26

User-Centered Design

Focus early on the users and their work

Evaluate designs to ensure usability

Use iterative development

27

Dialogue/Dialog Charts A formal method of designing and

representing Dialogues/Dialogs

28

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

29

Documenting Dialogue/Dialogs

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

30

Storyboard for DownTown Videos Rent Videos Dialogue/Dialog

31

Storyboard for DownTown Videos Rent Videos Dialogue/Dialog

32

Dialogue/Dialog Documentation with UML

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

33

Designing Dialogues/Dialogs

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

34

Sequence

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

and environmental characteristics

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

36

Dialogue/Dialog Chart Symbols

open DialogCharts.zip from web page and see:

Dialogue1.doc

37

Example: Customer Information System

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

38

Dialogue/Dialog between a user and the Customer Information System

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

39

Dialogue/Dialog Chart

open DialogCharts.zip from web page and see:

Dialogue2.doc

40

Documenting Dialogue/Dialog Designs

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

41

Overall Menu Hierarchy

42

Eight Golden Rules for Interactive Interface Design