8/10/2019 HCI-unit 1

1/43

The Importance

of the UserInterface

Unit -1

8/10/2019 HCI-unit 1

2/43

The amount of programming code devoted to the userinterface now exceeds 50 percent

8/10/2019 HCI-unit 1

3/43

Defining the User Interface

User interface design is a subset of a field of studycalled human-computer interaction

(HCI)

Definition of HCI: Human-computer interaction is the study, planning, anddesign of how people and computers work together so that a persons needs aresatisfied in the most effective way.

Definition of USER INTERFACE :user interface is the part of a computer andits software that people can see, hear,touch, talk to, or otherwise understand or

direct

8/10/2019 HCI-unit 1

4/43

HCI designers must consider avariety of factors

What people want and expect ?

What physical limitations and abilities people possess ?

How their perceptual and information processing systems work

?

What people find enjoyable and attractive ?

Technical characteristics and limitations of the computerhardware and software must also be considered.

8/10/2019 HCI-unit 1

5/43

What is User interface ?

A S/W or H/W through which we ( user ) isinteracting ..

8/10/2019 HCI-unit 1

6/43

Components of user interface

Two components

1) Input.

2) Output.

Input : how a person communicates his/her needs to the computer.

Examples:-keyboard, mouse,trackball, ones finger (for touch-sensitivescreens), and ones voice (for spoken instructions)

Output : how the computer conveys the results of its computations andrequirements to the user

Examples : Printers, display screens, sound

The use of the human senses of smell and touchoutput in interface designstill remain largely unexplored.

8/10/2019 HCI-unit 1

7/43

The Importance of Good Design

8/10/2019 HCI-unit 1

8/43

Why we produce systems that areinefficient & confusing ?

1. We dont care?

2. We dont possess common sense?

3. We dont have the time?

4. We still dont know what really makes gooddesign?

8/10/2019 HCI-unit 1

9/43

History of screen design

8/10/2019 HCI-unit 1

10/43

communication modes

Moments & GestureSpoken Language

Written Language

Type writer

Text styles using keyboards

Question and Answer

Menu Selection,

Function Key Selection and Form Fill-In.

voice and handwriting

8/10/2019 HCI-unit 1

11/43

Introduction to Graphical userinterface

1970s, Research at Xeroxs Palo Alto Research Centerprovided an alternative to the typewriter,

Primary HCI method mouse - pointing and selecting

Ivan Sutherland at the Massachusetts Institute of Technology

(MIT) is given credit for first introducing graphics with his

Sketchpad programin 1963

8/10/2019 HCI-unit 1

12/43

1973 Pioneered at the Xerox Palo Alto Research Center.

First to pull together all the elements of the modernGUI.

8/10/2019 HCI-unit 1

13/43

8/10/2019 HCI-unit 1

14/43

Apple Computer introduced the Apple Lisa (pictured),

their first commercial personal computer with a graphical user interface and a computermouse.

It had 1 MB of RAM, and was priced at US $9,995

1983 Apple introduces the Lisa.

8/10/2019 HCI-unit 1

15/43

1984 Apple introduces the Macintosh.

1984 Apple Macintosh, first popular GUI computer:

8/10/2019 HCI-unit 1

16/43

1984 Mac GUI:

8/10/2019 HCI-unit 1

17/43

Screenshot of the included MacPaint

8/10/2019 HCI-unit 1

18/43

1985 Microsoft Windows 1.0 released.

8/10/2019 HCI-unit 1

19/43

Windows 1.0

1993 Mi ft Wi d NT l d

8/10/2019 HCI-unit 1

20/43

1993 Microsoft Windows NT released.

8/10/2019 HCI-unit 1

21/43

1995 Microsoft Windows 95 released.

8/10/2019 HCI-unit 1

22/43

OS/2 Warp 4 1996

8/10/2019 HCI-unit 1

23/43

PC Konfiguration:

OS/2 Warp release4.0 (rev. 9.023,

original version

1994)

OS/2 Warp release 4.5

(rev. 14.096c_W4, incl.updates up to 2003)

AMD Athlon XP2600+

without extendedfeatures

supports MTRRmanagement

1024 MByte RAM 64 MByte recognized complete utilizable

Seagate 80 GByte and120 GByte harddiskdrive

not utilizable, PIOmode

complete utilizable,DMA mode

Geforce 4-TI-4200

Graphiccard

640x480 with 16

colours

up to 1600x1200 with 16

Mio. colours

Soundblaster 512 PCI

soundcard not utilizable complete utilizableELSA Microlink 56K

Modemcomplete utilizable complete utilizable

1997 Apple releases the Mac OS 8

8/10/2019 HCI-unit 1

24/43

1997 Apple releases the Mac OS 8.

8/10/2019 HCI-unit 1

25/43

1998 Microsoft introduces Windows 98.

8/10/2019 HCI-unit 1

26/43

1999 Apple releases Mac OS X Server.A UNIX-based OS.

2000 Microsoft Windows 2000 released

8/10/2019 HCI-unit 1

27/43

2000 Microsoft Windows 2000released.Microsoft Windows ME released

2001 Mi ft Wi d XP

8/10/2019 HCI-unit 1

28/43

2001 Microsoft Windows XPreleased

Introduced in 2006

8/10/2019 HCI-unit 1

29/43

Introduced in 2009

Introduced in 2012

8/10/2019 HCI-unit 1

30/43

8/10/2019 HCI-unit 1

31/43

The Blossoming of the

World Wide Web

1945 Hypertext concept presented by Vannear Bush.

8/10/2019 HCI-unit 1

32/43

yp p p y

MIT scientist

"memory" and "index" called memex

1960 J. C. R. Licklider of MIT proposes a global network of computers.

computers where people "will set thegoals, formulate the hypotheses,determine the criteria, and performthe evaluation."

8/10/2019 HCI-unit 1

33/43

Seeds of the Internet were planted in the early 1960s

J. C. R. Licklider of MIT proposed a global network of computers in1962

1969 the Internet, then known as ARPANET, was brought online,connecting the computers at four major universities.

1974, Bolt, Beranek and Newman released Telenet.

Through the late 1970s and into the 1980s, the common language ofall Internet computers, TCP/IP, was created

1982 the term Internet was coined.

1962 Design and development begins on network called ARPANET

8/10/2019 HCI-unit 1

34/43

8/10/2019 HCI-unit 1

35/43

8/10/2019 HCI-unit 1

36/43

8/10/2019 HCI-unit 1

37/43

1982 The term Internet is coined.

Gopher

8/10/2019 HCI-unit 1

38/43

Gopher offers downloadable files with some

content description to make it easier to find the file you need

8/10/2019 HCI-unit 1

39/43

A Brief History of Screen Design

8/10/2019 HCI-unit 1

40/43

Figure 1.1 A 1970s screen.

8/10/2019 HCI-unit 1

41/43

Figure 1.2 A 1980s screen.

8/10/2019 HCI-unit 1

42/43

Figure 1.3 A 1990s and beyond screen.

8/10/2019 HCI-unit 1

43/43

In the 1990s, our knowledge concerning what makes effectivescreen design continued to expand