HCI

Module Introduction

Agenda

• Introduction• Module• Assessments• Books

• First lecture

About Me

• Name: Jons Slemmer• Office: 8201• Email: jons@zy.cdut.edu.cn• Office Hours:

• By appointment only

Rules

• Be on time• Bring your stuff

(Pen, papers, folder, brain)• Habits of effective learners• Have fun

Module Hours

• Credits: 15• Contact Hours: 36

• Lectures 12• Seminars 24

• Independent study hours: 114• Directed/independent study 84• Preparation for assessments 30

• Total learning hours: 150

What is “HCI”

Two assessments at end of semester

• Group Coursework (50%)

• Individual Class test (50%)

What is “HCI”

Textbooks:

• Designing the User Interface Strategies (Shneiderman et al.)

• Interaction Design Beyond Human-Computer Interaction (Preece et al.)

Timetable

Every week:

• 1 hour lecture• 2 hour practical

Learning outcomes

Week 1

• Module Admin• Student Website• Assessment

• Basic Concepts:• Interfaces, GUIs, Prototyping• Interaction styles• Usability, usability factors• Designing an interface• Problems with designing interfaces• User-Centred Design

Exercise: Research

• Research meaning of• Prototype• Interface

• What do they mean together?

5 minutes

End

14

Definition: Prototype

• A prototype is an early sample, model, or version of a product built to test an idea or process

• If you try to build something you learn from it

15

16

17

18

Prototyping

Prototyping

19

Definition: Interface

• A point where two systems, things or organizations meet and interact

• Who can give me an example?

20

Interfaces

Interfaces

21

Definition: User Interface (UI)

• The way how the user and a computer system interact, in particular the use of input devices and software

* http://agilemodeling.com/artifacts/uiPrototype.htm

22

23

24

25

26

Definition: Graphical User Interface (GUI)

• a visual way of interacting with a computerusing items such as windows, icons, and menus, used by most modern operating systems.

GUI OR NO GUI ?

GUI OR NO GUI ?

Features of a GUI

• Windows - each window identified with a task• WIMP interface (windows, icons, menus,

pointers)• User interface objects (interaction objects)• Direct manipulation also known as• WYSIWYG (What You See Is What You Get)

• Metaphors

Why Use GUIs?

• The human brain can understand, remember, and recall graphical information better than text

• Gives a feeling of being in control of the application– Instant visual feedback– GUIs support many instances of direct

manipulation• Reduces learning time (compared to text-

based interfaces)

Other Interaction Styles – apart from GUIs• Hypertext – as on the Web but moving towards GUIs• Menus – ATM machines, telephone voice menus• Touchscreen – smart phones• Command line – powerful direct access to system• functionality

• Natural Language – restricted domains (possibly with speech input) only where the user is likely to use a small range of words and want a small range of information

• e.g. voicemail, Siri, telephone menus• Virtual reality – Second Life, other games

Why study HCI? Why does it matter?

• Example: door handles

Usability

• Good design makes things easier to use.– if something is easy to use, it has good usability

• Good usability– prevents errors– allows tasks to be accomplished faster, more

effectively, more enjoyably, and more safely– requires less training, and less memory load– is comfortable to use, and lets the user feel more

in control– is commercially more profitable

Usability factorsUsability can be classified using guiding principles and heuristics concerning factors like these:

• Efficiency: speed of performance• Simplicity: incidence of errors• Satisfaction: eg ability to recover from errors• Learnability: ease in learning the system• Memorability: ease of retention of learned skills• Personalisation: ability to customise• Effectiveness: Ease with which users can achieve

tasks

Usability factors

• Question: which factor would be less important for an application like a calendar, which is used daily? How could personalisation be applied in a travel planner?

HCI Design should include and support

• learning by exploration• representation of the user’s conceptual objects

as identifiable objects at the interface• continuous visual feedback• prevention of invalid option selection• input validation and default substitution• shortcuts for the experienced user• context sensitive help• little knowledge needed of the underlying

system

Problems Faced in DesigningInterfaces• Many standard systems design methods e.g. UML,

DFDs do not model the user interface. Indeed the waterfall method only seeks user input at the end.

• Designers are forced into a particular look and feel by the tools they use

• It is difficult to describe a dynamic screen layout• It is difficult to find out what the user wants before

you start the design• User and system developer are often talking different

languages• It is difficult for a developer to imagine how a

user is going to find an interface to use

Four Principles of User-CentredDesign

1. Early and continual focus on users

2. Integrated Design

3. Early and continual user testing

4. Iterative Design

1. Early and continual focus onusers• Define a major group of potential users (if you

can)• Talk to them about good and bad points of their

present job and/or system.• Watch them doing their present job.• Ask them to think aloud as they work.• Try their jobs (if possible)• Do a formal task analysis• Develop testable behavioural goals for proposed

systems.

2. Integrated Design

• Usability should be a project goal.

– ie usability should be integrated into the development process

– there should be some one in the project team specifically in charge of managing usability.

• Design includes:– user interface– user and other manuals– installation, maintenance– functionality– system reliability

3. Early and Continual User Testing (1)

• Preliminary informal sketches of user scenarios

• Start user manual early

• Simulations of functions

• Mock-ups of the interface eg via Pencil, Balsamiq

• Early demonstrations

• Invite early comments from lots of people on all aspects

3. Early and Continual User Testing (2)• Formal prototype user testing• Compare results to established behavioural

targets

• Let motivated people try to find bugs in the system

• Do follow-up studies• Include data logging programs in the system

(More on usability testing later in semester)

4. Iterative Design

• Key requirements:

• Identification of required changes– see 1. to 3.

• An ability to make the changes– importance of good software tools

• A willingness to make changes– importance of managing for change

Reasons for using User-Centred Design

• It takes the ‘unknown’ out of the design, you can see exactly how users will use it• – e.g. when designing communication and

discourse you can see exactly how the user interacts with it.

• It improves the usability of the system

The Communications Problem

• Users and analysts often do not use the same language.

• Person agreeing the design may not be in touch with the end users.

• Users may find it difficult to deal with abstractions• It is difficult to communicate the dynamic nature of

a system with static diagrams.• An interactive model might help clarify user

requirements and help iron out misunderstandings at an early stage, so...

Useful tool: Prototyping

• Enables a designer to create an examinable model. Prototypes can be used at– Requirements definition phase

– Design phase• Runnable prototypes can be simulations of all

or part of the overall design• Non-runnable prototypes can be paper based

or computer based

Homework

• Self-reading-test: Chapter 1 (Interaction Design Beyond HCI)

• Review Assessment document

• Create groups (4 people max.)