Human-Computer Interaction IST 5885

IST 385 HCI *Administrative ItemsGroup information finalized and posted, group page createdStart working on your group project proposal

Tentative course schedule posted on the blackboard

Project proposal due on Feb 12Description of the project Client and client expectations Expected deliverables How do you expect to get access to the users? Brief timeline: requirements gathering, prototyping, evaluation

IST 385 HCI

Exercises Missouris S&Ts website follows similar structure for different pages, which design principle is it following?When you search a travel website for a specific itinerary, it constantly updates on how many options have been searched. What design principle is it? A trashcan is used to delete files. In Mac, it was used for ejecting a disc. What design principles did it violate?

IST 385 HCI *

IST 385 HCI

What design principles were applied in this design?

IST 385 HCI *

IST 385 HCI

What goes on in the mind?

*

**Why do we need to understand users?What humans are good at and bad at Inform the design of technologyExtend human capabilities Compensate for their weakness

**Attention http://www.youtube.com/watch?v=vJG698U2Mvo Selecting things to concentrate on from the mass around us, at a point in timeAttention is selective Competition for attention theory Focus on information that is relevant to what we are doing

**Lets look at some websites www.google.com www.cnn.com/www.mst.edu

**AttentionDepend on GoalsInformation presentation, such as Size of the objectDistance to the salient objectGraphics help to form overall impression (Tractinsky and Meyer, 1995)

*www.id-book.comMultitasking and attention

*www.id-book.comMultitasking and attention Is it possible to perform multiple tasks without one or more of them being detrimentally affected?Ophir et al (2009) compared heavy vs light multi-taskersHeavy multi-taskers were more prone to being distracted than those who infrequently multitask heavy multi-taskers are easily distracted and find it difficult to filter irrelevant information

**Design implications for attentionMake information salient when it needs attending to

Use techniques that make things stand out like colour, ordering, spacing, underlining, sequencing and animation

Avoid cluttering the interface

Avoid using too much because the software allows it

**PerceptionHow information is acquired from the world and transformed into experiencesComplex process that involves other cognitive processesVision is most dominant

Design implicationsDesign representations that are readily perceivable, e.g.Text should be legibleIcons should be easy to distinguish and readBordering and spacing are effective visual ways of grouping information to make it easier to perceive and locate items

IST 385 HCI *

IST 385 HCI

**Which is easiest to read and why?What is the time?What is the time?What is the time?

What is the time?

What is the time?

**Pick Non-adjacent Colors on the Hue Circle

*

**Color SensitivityRetina has photopigmentsmainly reds (64%) & very few blues (4%)Center of retina (high acuity) has no blue conesdisappearance of small blue objects you fixate onhttp://newopticalillusions.blogspot.com/2009/11/blue-dot-disappering-optical-illusion.html Dont rely on blue for text or small objects!

*

**Color Sensitivity (cont.)As we ageSensitivity to blue is even more reducedFluid between lens and retina absorbs more lightperceive a lower level of brightnessImplications?Older users need brighter colors

*

**Color Deficiency Example

**Trouble discriminating colorsbesets about 9% of populationTwo major typesDifferent photopigment responsereduces capability to discern small color differencesparticularly those of low brightnessRed-green deficiency is best knownlack of either green or red photopigment ?cant discriminate colors dependent on Red & Green

Color Deficiency (also known as color blindness)

*

**Color GuidelinesAvoid simultaneous display of highly saturated, spectrally extreme colorsOpponent colors go well togetherBut be careful with red-green combination Avoid pure blue for text, lines, & small shapesblue makes a fine background coloravoid adjacent colors that differ only in blue Avoid single-color distinctionsmixtures of colors should differ in 2 or 3 colorse.g., 2 colors shouldnt differ only by amount of redhelps color-deficient users

*

Processing in memoryEncoding is first stage of memorydetermines which information is attended to in the environment and how it is interpreted

The more attention paid to somethingThe more it is processed in terms of thinking about it and comparing it with other knowledgeThe more likely it is to be remembered

For example, when learning about HCI, it is much better to reflect upon it, carry out exercises, have discussions with others about it, and write notes than just passively read a book, listen to a lecture or watch a video about it

*

Context is importantAn example:You are on a train and someone comes up to you and says hello. You dont recognize him for a few moments but then realize it is one of your neighbours. You are only used to seeing your neighbour in the hallway of your apartment block and seeing him out of context makes him difficult to recognize initially

Context affects the extent to which information can be subsequently retrieved Sometimes it can be difficult for people to recall information that was encoded in a different context

*

**Some exercise on memory 3, 1, 6, 19, 0, 4, 8, 37, 14, 97, 2

Cat, house, paper, laugh, people, red, yes, shadow, broom, rain, plant, lamp

Hot chocolate, ice cream, banana split, rock music, online shopping, tree fern, laser printer, cold rain, fluffy duckling

**MemoryWe dont remember everything - involves filtering and processingGeorge Millers theory (1956) of how much information people can rememberWorking memory (short-term memory) has small capacity (7 2 chunks)

5733414418 vs. (573) 341-4418DECIBMGMC vs. DEC IBM GMC

**What some designers get up toPresent only 7 options on a menuDisplay only 7 icons on a tool barHave no more than 7 bullets in a listPlace only 7 items on a pull down menuPlace only 7 tabs on the top of a website pageBut this is wrong? Why?

**Recognition over RecallRecallinfo reproduced from memoryRecognitionpresentation of info provides knowledge that info has been seen beforeeasier because of cues to retrieval

*

**Discrimination PrincipleRetrieval of information is determined by knowledge that exist in memory relative to retrieval cuesPeople are very good at remembering visual cues about thingse.g., the color of items, the location of objects and marks on an object They find it more difficult to learn and remember arbitrary material e.g., birthdays and phone numbers

**MemoryInterferencetwo strong cues in working memorylink to different chunks in long term memory

*

**Simple ExperimentVolunteerStart saying colors you see in list of wordswhen slide comes upas fast as you canSay done when finishedEveryone else time it

*

PaperHomeBackSchedulePageChange**

*

**Simple ExperimentDo it againSay done when finished

*

BlueRedBlackWhiteGreenYellow**

*

**Design implications for memory Do not overload users memory with complicated procedures for carrying out tasks Design interface that promote recognition rather than recallUse menus, icons, objects etc. Help user to encode information E.g, color, flagging, time stamping etc.

*

*

*

*

*

*

*

*

*

*

*

*

*

*