Chapter 1 Human Computer Interaction & Graphical User Interface

Chapter content
Definition and background of HCI User Interface Concept User Interface Generation Background of GUI Philosophy of GUI

Imagine the future

Tell your imagination about the scenario? Would you like to have an experience to shopping on the wall?
And use your mobile smart device to pay.

QR Code Shopping at the Subway Station

This virtual grocery store with products labelled with QR (Quick Response) Codes in a subway station in Seoul, South Korea was the origin of the QR Code shopping walls that are beginning to appear in bus shelters and stations everywhere.

Definition of HCI

Human-computer interaction is a discipline concerned with the design , evaluation and implementation of interactive computing systems for human use and with the study of major phenomena surrounding them.
ACM SIGCHI Curricula for Human-Computer Interaction

Background of HCI
From a computer science perspective, the focus is on interaction and specifically on interaction between one or more humans and one or more computational machines. Human-computer interaction is concerned with: the joint performance of tasks by humans and machines; the structure of communication between human and machine; human capabilities to use machines (including the learn ability of interfaces); algorithms and programming of the interface itself;

engineering concerns that arise in designing and building interfaces;

the process of specification, design, and implementation of interfaces; and design trade-offs.

General
Engineering

HCI
Design

Science

General

Computer Science

human factors

Ergonomics

industrial engineering

operating systems

cognitive psychology

computer graphics

HCI

systems part of computer science

User Interface Concepts

User interface = a requirement for end users domain. Conceptual design is the explicit construction of the ideas or concepts that a user needs to learn about what a product is, what it can do, and how it is intended to be used.

It may also address what a product is not, what it can't do, and how it is not intended to be used.
Conceptual design is done from the user's point of view. ALWAYS THINK FROM THE USER SIDE!!!

Conceptual design process

Define and prioritize measureable objectives and constraints

Define a central concept

Describe user roles and their requirement

Synthesize a user interface model Evaluate result against the objective

Design the users task model

Design the users object model

Conceptual design
There are two ways of creating conceptual designs: implicitly and explicitly. Implicit conceptual design happens when everyone believes there is an understanding of and agreement on the concepts underlying a design but no one writes them down or discusses them openly. Explicit conceptual design involves adopting the user's point of view and defining in a systematic way the concepts users will need to learn to use the product effectively.
Cited from: http://www.interfaceconcepts.com/concept.htm

Implicit conceptual design

Implicit rules: Malfunction, No one expects to press a On button, but the result is Off.

Explicit conceptual design

Logic way : iPhone outlook design: Elegant, Easy of use, Networking, Communication, Small size

Good GUI 1.Group elements together

2.Think of primary and secondary actions 3.HIERARCHY! 4.Use familiar symbols (think of desktop

metaphor)
5.KEEP CONSISTENT! 6.Scalability and flexibility 7.The user must feel comfortable: you need a

clear sense of home, always allow undo, always

make an easy way out, progress bars 8.The interface and task always belong to the USER!

User Interface Generation

Find out more on this issue on Internet. Share your findings with your classmates

Background of GUI
Graphical User Interface (GUI) pronounced GOO-EE. Different application with consistent set of intuitive user-interface components, GUI allows user to spend less time trying to remember which keystroke sequences perform what function and spend more time using the program effectively.

LOOK & FEEL!!

EXAMPLE : Mozilla Firefox The design parts can be grouped and itemized by functions.

Philosophy of GUI ???

Find out more on this issue on Internet. Share your findings with your classmates

Philosophy of GUI
Consistent

Powerful

Helpful

Userfriendly

Robust

Another GUI Principles

Aesthetically pleasing Familiarity Flexibility

Clarity

Efficiency

Forgiveness

Compatibility

Directness

Predictabil ity

Trade-offs

Comprehensibili ty

Control

Recovery

Transparency

Configurability

Consistency

Responsiveness

Simplicity

Another GUI Principles

1. Aesthetically pleasing Provide visual appeal by following these presentation and graphic design principles:

Provide meaningful contrast between screen elements.

Create groupings. Align screen elements and groups. Provide three dimensional representation

Use colors and graphics effectively and simply.

2. Clarity The interface should be visually, conceptually and linguistically clear, including:

Visual elements
Functions Metaphors Words and text

Another GUI Principles

3. Compatibility
Provide compatibility with the following: The user

The task and job

The product Adopt the users perspective

4. Comprehensibility
A system should be easily understood and learned. A user should know the following: What to do What to look at When to do it Where to do it Why to do it How to do it The flow of actions, responses, visual preparations and information should be in a sensible order that is easy to recollect and place in context.

Another GUI Principles

5. Configurability Permit easy personalization, configuration and reconfiguration of settings.

Enhances a sense of control

Encourages an active role in understanding 6. Consistency A system should look, act, and operate the same throughput. Similar components should: Have a similar look Have similar uses. Operate similarly

The same action should always yield the same result.

The function of the elements should not change The position of standard elements should not change.

Another GUI Principles

7. Control The user must control the interaction. Actions should result from explicit user requests Actions should be performed quickly Actions should be capable of interruption or termination The user should be never interrupted for errors The context maintained must be from the perspective of the user. The means to achieve goals should be flexible and compatible with the users skills, experiences, habits and preferences. Avoid modes since they constrain the actions available to the user. Permit the user to customize aspects of the interface, while always providing a proper set of defaults. 8. Directness Provide direct ways to accomplish tasks Available alternatives should be visible,

The effect of actions on objects should be visible.

Another GUI Principles

9. Efficiency Minimize eye and hand movements, and other control actions. Transitions between various system controls should flow easily and freely. Navigation paths should be as short as possible. Eye movement through a screen should be obvious and sequential.

Anticipate the users wants and needs whenever possible.

10. Familiarity Employ familiar concepts and use a language that is familiar to the user. Keep the interface natural, mimicking the users behavior patterns. Use real world metaphors.

Another GUI Principles

11. Flexibility A system must be flexible to the different needs of its users, enabling a level and type of performance based upon:

Each users knowledge and skills.

Each users experience. Each users personal preference Each users habits The conditions at that moment 12. Forgiveness Tolerate and forgive common and unavoidable human errors Prevent errors from occurring whenever possible. Protect against possible catastrophic errors. When an error does occur, provide constructive messages.

Another GUI Principles

13. Predictability The users should be able to anticipate the natural progression of the task.

Provide distinct and recognizable screen elements

Provide cues to the result of an action to be performed All expectations should be fulfilled uniformly and completely. 14. Recovery A system should permit: Commands or actions to be abolished or reversed. Immediate return to a certain point if difficulties arise. Ensure that user never lose their work as a result of An error on their part Hardware, Software or communication problems.

Another GUI Principles

15. Responsiveness
The system must rapidly respond to the users requests. Provide immediate acknowledgement for all user actions
Visual
Textual Auditory

16. Simplicity
Provide as simple an interface as possible
Provide defaults Minimize screen alignment points. Make common actions simple at the expense of uncommon actions being made harder. Provide uniformity and consistency Ways to provide simplicity:
1. Present common and necessary functions first. 2. Prominently feature important functions, 3. Hide more sophisticated and less frequently used functions

Another GUI Principles

17. Transparency Permit the user to focus on the task or job, without concern for the mechanics of the interface.

Workings and reminders of workings inside the computer should be invisible to the user.
18. Trade-offs

Final design will be based on a series of trade-offs balancing often-conflicting design principles Peoples requirements always take precedence over technical requirements

Further readings:
http://en.wikipedia.org/wiki/HumanComputer_Interaction http://sigchi.org/cdg/cdg2.html http://www.interfaceconcepts.com/concept.htm http://www.deitel.com/books/vcppnethtp1/vcpphtp1_12 .pdf http://www.isii.com/ http://en.wikibooks.org/wiki/GUI_Design_Principles