Chapter 1B GUI

7/29/2019 Chapter 1B GUI

1/30

Chapter 1

Human Computer

Interaction & GraphicalUser Interface


2/30

Chapter content

Definition and background of HCI

User Interface Concept

User Interface Generation

Background of GUI

Philosophy of GUI


3/30

Imagine the future

Tell your imaginationabout the scenario?

Would you like to havean experience toshopping on the wall?

And use your mobilesmart device to pay.


4/30

QR Code Shopping at the

Subway Station This virtual grocery

store with productslabelled with QR (QuickResponse) Codes in asubway station in Seoul,South Korea was theorigin of the QR Codeshopping walls that arebeginning to appear in

bus shelters andstations everywhere.


5/30

Definition of HCI

Human-computer interaction is a discipline concerned

with the design, evaluation and implementation ofinteractive computing systems for human use and withthe study of major phenomena surrounding them.

ACM SIGCHI Curricula for Human-Computer Interaction


6/30

Background of HCI

From a computer science perspective, the focus is on interaction

and specifically on interaction between one or more humans andone or more computational machines.

Human-computer interaction is concerned with:-

the joint performance of tasks by humans and machines;

the structure ofcommunication between human andmachine;

human capabilities to use machines (including the learnability of interfaces);

algorithms and programming of the interface itself;

engineering concerns that arise in designing and buildinginterfaces;

the process of specification, design, and implementation ofinterfaces;

and design trade-offs.


7/30

General

ScienceDesign

Engineering

HCI


8/30

General


9/30

Computer Science

HCIcomputergraphics

operatingsystems

human factorsErgonomics industrial

engineering

cognitivepsychology

systems part ofcomputer science


10/30

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 whata product is, what it can do, and how it is intended tobe used.

It may also address what a product is not, what it can'tdo, 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!!!


11/30

Conceptual design process

Define a centralconcept

Describe user rolesand their requirement

Define and prioritizemeasureable

objectives andconstraints

Design the usersobject model

Design the userstask model

Synthesize a userinterface model

Evaluate resultagainst the objective


12/30

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 onthe concepts underlying a design but no one writes themdown or discusses them openly.

Explicit conceptual design involves adopting the user'spoint of view and defining in a systematic way the

concepts users will need to learn to use the producteffectively.

Cited from: http://www.interfaceconcepts.com/concept.htm

Conceptual design


13/30

Implicit conceptual design

Implicit rules:

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


14/30

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 flexibility7.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!


15/30

User Interface Generation

Find out more on this issue on Internet.

Share your findings with your classmates


16/30

Background of GUI

Graphical User Interface (GUI) pronouncedGOO-EE.

Different application with consistent set ofintuitive user-interface components, GUIallows user to spend less time trying toremember which keystroke sequencesperform what function and spend more time

using the program effectively.

LOOK & FEEL!!


17/30

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


18/30

Philosophy of GUI ???

Find out more on this issue on Internet.

Share your findings with your classmates


19/30

Philosophy of GUI

Consistent

Helpful

RobustUser-

friendly

Powerful


20/30

Another GUI Principles

Aestheticallypleasing

Clarity

Compatibility

Comprehensibility

Configurability Consistency

Control

Directness

Efficiency

Familiarity Flexibility

Forgiveness

Predictability

Recovery

Responsiveness Simplicity

Transparency

Trade-offs


21/30

1. Aesthetically pleasing

Provide visual appeal by following these presentation and graphicdesign 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 linguisticallyclear, including:

Visual elements

Functions

Metaphors

Words and text



22/30

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.



23/30

5. Configurability

Permit easy personalization, configuration and reconfiguration ofsettings.

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.



24/30

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 withthe 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, whilealways 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.



25/30

9. Efficiency

Minimize eye and hand movements, and other control actions.

Transitions between various system controls should flow easilyand 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 tothe user.

Keep the interface natural, mimicking the users behaviorpatterns.

Use real world metaphors.



26/30

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.



27/30

13. Predictability

The users should be able to anticipate the natural progression ofthe 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.



28/30

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 actionsbeing 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



29/30

17. Transparency

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

Workings and reminders of workings inside the computer shouldbe invisible to the user.

18. Trade-offs

Final design will be based on a series of trade-offs balancingoften-conflicting design principles Peoples requirements alwaystake precedence over technical requirements



30/30

Further readings:

http://en.wikipedia.org/wiki/Human-Computer_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

Chapter 1B GUI

Documents

Transcript of Chapter 1B GUI