HUMAN COMPUTER INTERACTION B.TECH III YR II SEMESTER(TERM 08-09) UNIT 1 PPT SLIDES TEXT BOOKS: The essential guide to user interface design, Wilbert O Galitz, Wiley DreamaTech. Designing the user interface. 3rd Edition Ben Shneidermann , Pearson Education Asia.
No. of slides: 34
INDEX UNIT 1 PPT SLIDES S.NO. 1
TOPIC
Introduction
LECTURE NO. PPTSLIDES L1
L1.1TO L1.8
Importance of user Interface 2
Importance of good design
L2
L2.1 TO L2.4
3
Benefits of good design
L3
L3.1 TO L3.8
4
History of Screen design
L4
L4.1 TO L4.10
5
REVISION
L5
Human±computer interacti nteraction (HCI), alternativ alternatively ely man±machi man±machine interacti nteraction (MMI) or computer± or computer± human interacti nteraction (CH (CHI) is the study of i of interacti nteraction between people (user s) and computer s.
lecture 1 slide 1
With
today's today's technology and tools, tools, and our mot our motiv ivat atiion
to create really effectiv effective e and usable interfaces nterfaces and screens, creens, why do we conti continue to produce systems tems that are ineff icient and confusi confusing ng or , at wor st, ju just plai plain unus unusable? Is it it becaus because: 1.
We
don't care?
2.
We
don't poss posse ess common sens ense?
3.
We
don't hav have the time?
4.
We
still don't know what really mak makes good desi design? gn?
lecture 1 slide 2
Def inition
"
Human-computer interacti nteraction is a disc iscipli pline concerned
with the desi design gn,, evaluati aluation and implementati mplementat ion of interactiv nteractive e computi computing systems tems for human for human use and with the study of ma of ma jor jor phenomena phenomena surroundi urrounding them." them."
lecture 1 slide 3
oals Goals A basi basic c goal of H of HCI is ± to improv mprove the interact nteractiion ons s between user s and computer s ± by maki making ng computer s more usable and receptiv receptive e to the user's er's needs. needs.
A long term goal of H of HCI is ± to desi design gn systems tems that minimize ize the barr ier between er between the human's human's cogni cognitive ive model of what of what they want ± to accomplis accomplish h and the computer's computer's under standi tanding of the of the user's er's task task
lecture 1 slide 4
Why
is HCI important? important?
User-centered User-centered desi design gn is getti getting a cruci crucial role! It is getti getting more important today to increas ncrease competi competitivene iveness ss via via HCI stud studiies (Norman (Norman,, 1990) 1990) High-cos gh-cost e-trans e-transformati formation investments tments User User s los lose time with badly desi designed gned products products and ser vice vices s User User s even give ive up using sing bad interface ±
Ineffectiv neffective e allocati allocation of re of res sources ources
lecture 1 slide 5
Def ining the User User IInterface User User iinterface, nterface, desi design gn is a subs ubset of a of a f ield of s of study called human-computer interaction (HCI).
Human-computer interacti nteraction is the study, tudy, planni planning, ng, and desi design gn of how of how people and computer s wor k together s together so that a per son's on's needs needs are satis atisf f ied in the mos most effectiv effective e way. way. HCI desi designer gner s mus must consi consider der a a var iety of factor of factor s: ± what people want and expect, expect, physi physical cal limitati tations ons and abi abilities people poss posse ess, ± how informati nformation processi processing ng systems tems wor k, k, ± what people f ind en joyable joyable and attractiv attractive e. ± Techni echnical character ist istics and limitati tations ons of the of the computer hardware computer hardware slide 6 and software mus must als also belecture consi con1sidered dered. .
The user interface is t ± the part of a software that people can see, of a computer and computer and its software ee, hear , touch, touch, talk talk to, to, or otherw or otherwis ise e under stand or d or direct. rect.
The user interface has has essent ssentiially two components component s: input and output. output. nput is I nput
how a per son communi communicates cates his / her need her needs s to the
computer . ± Some common input components components are the keyboard, eyboard , mous mouse, track trackball, ball, one's one's f inger , and one's one's vo voice. ce.
utput is O utput
how the computer conv conveys eys the res results ults of i of its
computati computat ions ons and re-qui re-quirements rements to the user . ± Today, oday, the mos most common computer output computer output mechanis mechanism m is the display isplay screen, creen, followed by mechanis mechanism ms that tak take adv advantage of a of a ities:1 vslide per son's on's audi auditory ca-pabi ca-pabillecture oice ound. 7 and sound.
The use of the of the human sens enses of s of smell and touch output in interface desi design gn still remai remain largely unexplored. unexplored .
Proper i roper interface desi design gn will provi provide de a mix of well-de of well-desi signed gned input and output mech-anis mech-anism ms that satis atisfy fy the user's er's needs, needs, capabi capabilities, and limitati tations ons in in the mos most effectiv effective e way possi possible ble..
The bes best interface is one that it not noti noticed, ced, one that permi permits the user to er to focus focus on the informati nformation and task task at hand, hand, not the mechanis mechanism ms used to pres present the in-formati n-formation and perform the task. task.
back bac k
lecture 1 slide 8
The Importance of Good Design sign With
today's today's technology and tools, tools, and our mot our motiv ivat atiion to
create really effectiv effective e and us-able interfaces nterfaces and screens, creens, why do we conti continue to produce systems tems that are ineff icient and confusi confusing ng or , at wor st, ju just plai plain unus unusable? Is it it becaus because: We
don't care?
We
don't poss posse ess common sens ense?
We
don't hav have the time?
We
still don't know what really mak makes good desi design? gn? lecture 2 slide 1
But
we nev never seem to hav have time to f ind out what mak makes
good de-si de-sign gn,, nor to nor to properly apply it. After After all, all, many of u of us hav have other th other thiings ngs to do in addi addition to desi design gniing interfaces nterfaces and screens. creens. So we tak take our be our bes st shot given iven the wor kload and time cons constrai traints nts impo impos sed upon us. The The res result, ult, too often, often, is woefully inadequate. nadequate. Interface and screen desi design gn were really a matter of com-mon sens ense, we dev developer s would hav have been produci producing almost identical screens creens for repre for repres senti enting the real world. world. lecture 2 slide 2
Exam xample bad bad de design signs s ± Closed Closed door door with with complete wood wood ± sugg sugges esti tion on : gla glass doo door r
lecture 2 slide 3
The Importance of the User IInterface of the User A well-desi well-designed gned interface and screen is terr ibly important to our u our user s. s. It It is thei their w r window to view view the capabi capabilities of the system. tem. It is als also the vehi ehicle through wh whiich many cr itical tasks tasks are pres presented. ented. The Thes se tasks tasks often hav have a direct impact on an organiz organizat atiion's on's relati relations ons with its cus customer s, s, and its prof itabi tability. ty. A screen' screen's s layout and appearance affect a per son in a var iety of way of ways. s. If If they they are con-fusi con-fusing ng and ineff icient, ent, people will hav have greater d greater diff iculty in doi doing thei their jobs obs and will mak make more mista istak kes. Poor de oor desi sign gn may even chas chase some people away from a system permanently. permanently. It It can als also lead to aggrav aggravati ation, on, frus frustrati tration, on, and increas ncreased stress tress.
back bac k lecture 2 slide 4
The Benef its of Good Design sign Poor clar oor clar ity forced screen user s to spend one extra second per s per screen. creen. ± Almos lmost one addi additional year would be requi required to process process all screens. creens. ± Twenty extra seconds econds in in screen usage time adds adds an addi additional 14 per son year s.
The benef its of a of a well desi designed gned screen hav have als also been under exper imental scruti crutiny for many for many year s. s. ± One res researcher , for example for example,, attempted to improv mprove screen clar ity and readabi readability by maki making ng screens creens less less crowded. crowded. ± Separate items, tems, wh whiich had been combi combined on the same display isplay line to cons conser ve space, pace, were placed on separate lines nes in instead. tead. ± The res result screen user s were about 20 percent more productiv productive e w ith the less less crowded ver sion sion..
lecture 3 slide 1
Proper formatt roper formattiing of i of informati nformation on screens creens does does hav have a sign signiif icant posi posittive ive effect on performance. performance. ± In recent year s, s, the productivi productivity ty benef its of well-de of well-desi signed gned Web pages pages hav have als also been scruti crutinized ized..
Trai raining cos costs are lowered becaus because trai training time is reduced support line cos costs are lowered becaus because fewer a fewer assist ssist calls calls are necess necessary ary.. employee satis atisfact factiion is increa increas sed becaus because aggrav aggravati ation and frus frustrati tration are reduced. reduced. Ulti ltimately, mately, that an organiz organizat atiion's on's cus cus-tomer s benef it becaus because of the of the improv mproved ser vice vice they receiv receive e. lecture 3 slide 2
Identi dentifyi fying and res resolvi olving ng problems problems dur ing the desi design gn and dev development process process als also has has sign signiif icant economi economic benef its How many screens creens are used each day in our technolog our technologiical world? How many screens creens are used each day in your organiz organizat atiion? Thous housands ands? Mill Milliions ons? Imagi vings. s. Proper Proper s screen desi magine the possi possible ble saving design gn might als also, of cour of cour se, lower the lower the cos costs of replacof replac-iing "brok broken" en" PCs.
lecture 3 slide 3
A Br ief H ef History istory of the of the Human-C Human-Computer Interface The need for people for people to communi communicate with each other has has exis existed ted since since we f ir st walk walked upon this this planet. planet. The lowes lowest and mos most common lev level of communi communicati cation modes modes we share are mov movements ements and ges gestures. tures. Movements ements and ges gestures tures are language- independent, ndependent , that is, they permi permit people who do not speak peak the same language to deal with one another . The next higher lev level, el, in in terms terms of univ univer er sali ality and complexi complexity, ty, is spok poken language. language . Most people can speak peak one language, language, some some two or more or more.. A spok poken language is a very eff icient mode of commun of communiicati cation if both parti parties to the communi communicati cation under stand it. lecture 3 slide 4
At the thi third and highes ghest lev level of complex of complexiity is wr itten language. language. While mos most people speak, peak, not all can wr ite. te. But
for tho for thos se who can, can, wr iting is st still nowhere near as
eff icient a means means .of .of commun communiicati cation as spea speaki king ng.. In modem times, mes, we hav have the typewr iter , another s another step upward in communi communicati cation complexi complexity. ty. Sign Signiif icantly fewer people fewer people type than wr ite. te. (While a practi practiced typis typistt can f ind typi typing fas faster and more eff icient than handwr iting, ng, the unski unskilled lled may not f ind this this the cas case.) Spok poken language, language, howev however , is st still more eff icient than typi typing, ng, regardless regardless'' of typ of typiing skill skill lev level. el. lecture 3 slide 5
Through its f ir st few decades, decades, a computer's computer's abi ability to deal with human communi communicati cation was was in inver sely related to what was was eas easy for people for people to do. do.
The computer demanded r igid, typed input through a keyboard; people res responded slowly using sing this this devi device ce and with varyi arying degrees degrees of ski of skill ll..
The human-computer dialog reflected the computer's computer's preferences, preferences, consis consistting of one of one style or a or a combi combinati nation of styles tyles using sing keyboards, eyboards, commonly referred to as Command Language, anguage, Que Ques stion and Answer , Menu Menu selecti election, on, Funct Functiion Key Selecti election, on, and Form FillFill-IIn. lecture 3 slide 6
Throughout the computer's computer's history istory,, desi designer gner s hav have been dev developi eloping, ng, with varyi arying degrees degrees of s of success, uccess, other human-computer interacti nteraction methods methods that uti utilize ize more general, general, wides despread, pread, and easi easier-toer-to-IIearn capabi capabilities: voice and handwr iting. ng.
Systems tems that recogniz recognize e human speech and handwr iting now exis existt, although they still lack lack the univ univer er sali ality and r ichness chness of typed of typed input. nput.
lecture 3 slide 7
Introducti ntroduction of the of the Graphi raphical User User IInterface The Xerox systems, tems, Altu Altus s and STAR, introduced introduced the mous mouse and poi pointi nting and selecti electing as the pr imary human-computer communi communicati cation method. method. The user simply simply poi pointed at the screen, creen, using sing the mous mouse as an intermedi ntermediary. ary. Thes hese systems tems als also introduced the graphi graphical user i er interface as we know it a new concept was was born, born, rev revoluti olutionizi onizing ng the human-computer interface. nterface.
back bac k lecture 3 slide 8
A Br ief H ef History istory of S of Screen Design sign While
dev developer s hav have been desi design gniing screens creens since since a
cathode ray tube display isplay was was f ir st attached to a computer , more wides despread interes nterest in the appli applicati cation of good of good desi design gn pr inci nciples ples to screens creens did not begi begin to emerge unti until the early 1970s, 1970s, when IBM in-troduced in-troduced its 3270 cathode ray tube text-bas text-based termi terminal. nal.
A 1970s 1970s screen screen often res resembled the one pictured in Figure Figure 1.1. It It usually consis consisted ted of many of many f ields elds (more (more than are illus llustrated here) here) with very crypti cryptic and often uni unintelli ntelligible capti captions. ons.
lecture 4 slide 1
A Br ief History istory of S of Screen Design sign It was was visually visually cluttered, cluttered, and often poss posse essed ssed a command f ield that challenged the user to er to remember what had to be keyed into it. Ambi mbiguous guous mess message ages s often requi required referral to a manual to interpret. nterpret. Effectiv ffectively ely using sing this this kind kind of s of screen requi required a great deal of pract of practiice and pati patience. ence. Most early screens creens were mono-chromati mono-chromat ic, typi typically pres presenti enting green text on black black back backgrounds. grounds.
lecture 4 slide 2
TDX95210 TDX95210
THE CAR RENTAL COMPANY
10 /11 /11 /16 /16 10:25
NAME TEL RO _________________ ______________________ ____________________ PU D ___________ ENTRY ERROR
RD C RT M PD ________ _________ _________ __________ XX465628996 XX465628996Q. Q.997 997
COMMAND
Figure Figure 1.1 A 1970s 1970s screen screen..
lecture 4 slide 3
At the turn of the of the decade gui guideli delines nes for text-ba for text-bas sed screen desi design gn were f inally made widely available and many screens creens began to tak take on a much less less cluttered look look through concepts concepts such such as groupi grouping and ali alignment of elements, elements, as illu illus s-trated in Figure Figure 1.2.
User User memory was was supported supported by provi provid ding clear and meani meaningful f ield capti captions ons and by list isting commands commands on the screen, creen, and enabli enabling them to be appli applied, ed, through functi function keys. eys. Me Message ssages s als also became clearer .
lecture 4 slide 4
Thes hese screens creens were not enti entirely clutter-free, clutter-free, howev however . Instructi tructions ons and remi reminder s to the user had to be inscr ibed on the screen in the form of prompt of prompts s or complet or completiion aids such as the codes codes PR and Sc.
Not all 1980s 1980s screen screens s look looked like ike this, this, howev however . In In the 1980s, 1980s, 1970s 1970s-type screens creens were still bei being desi designed gned,, and many still resi reside de in systems tems today. today.
lecture 4 slide 5
THE CAR RENTAL COMPANY RENTER» Name: _______________________ Telephone: ___________________ LOCATION» Office: _______________________ Pick-up Date:__________________ Return Date: __________________ AUTOMOBIL» Class: ______(PR. ST. FU. MD. CO. SC) Rate: _____________________________ Miles per Day:______________________ The maximum allowed miles per day is 150. Enter Fl-Help F3-Exit F12=Cancel
Figure Figure lecture 1.2 A 1980s screen. 4 slide 6
The adv advent of graph of graphiics yielded another m another miles lestone in the evoluti olution of s of screen desi design gn,, as illu illus strated in Figure Figure 1.3. While some basi basic c "desi design gn pr inci nciples ples did not change, change, group-i group-ings ngs and ali alignment, gnment, for example for example,, border s were made available to visually visually enhance groupi groupings, ngs, and buttons buttons and menus menus for i for implementi mplementing commands commands replaced functi function keys. eys.
lecture 4 slide 7
lecture 4 slide 8
Multi ultiple properti properties of element of elements s were als also provi provided ded,, includi ncluding many different font size sizes and styles, tyles, line thi thickness nesse es, and color s. s. The entry f ield was supplemented by a multi was supplemented multitude of other of other kind kinds s of control of controls, s, includ includiing list ist boxes, boxes, drop-down combi combinati nation boxes, boxes, sp spin boxes, boxes, and so forth. forth. Thes hese new controls controls were much more effectiv effective e in sup-porti up-porting a per son's on's memory, memory, now simply simply allowi allowing for selecti election from a list ist instead of requ of requiir ing a remembered key entry. entry. lecture 4 slide 9
Completi ompletion aids disappeared isappeared from screens, creens, replaced by one of the of the new list isting controls. controls. Screen Screens s could als also be simpl simpliif ied, ed, the much more powerful computer s bei being able to qui quickly pres present a new screen. creen. In the 1990s, 1990s, our k our knowledge concerni concerning what mak makes effectiv effective e screen desi design gn conti contin-ued to expand. expand. Coupled Coupled with ever-i er-improvi mproving ng technology, technology, the res result was was even greater improv mprovements ements in in the user-computer screen interface as the new century dawned. dawned.
lecture 4 slide 10
END OF UNIT 1
REVISION
