Slide 1

TH6204Advanced User InterfaceTopic 2Design and Usability Principlestsmeriam@ukm.edu.my; nsa@ukm.edu.myUsability GoalsEffective to useEfficient to useSafe to useHave good utilityEasy to learnEasy to remember how to use

tsmeriam@ukm.edu.my; nsa@ukm.edu.myEffectivenessRefers to how good a product is at doing what it is supposed to doQuestion :Is the product capable of allowing people to learn, carry out their work efficiently, access the information they need, or buy the goods they want?tsmeriam@ukm.edu.my; nsa@ukm.edu.myEfficiencyRefers to the way a product supports users in carrying out their work their taskQuestion:Once users learn have learned how to use a product to carry out their tasks, can they sustain a high level of productivity?tsmeriam@ukm.edu.my; nsa@ukm.edu.mySafetyInvolves protecting the user from dangerous condition and undesirable situationsQuestion:What is the range of errors that are possible using the product and what measures are there to permit users to recover easily from them?tsmeriam@ukm.edu.my; nsa@ukm.edu.myUtilityRefers to the extent to which the product provides the right kind of functionality so that users can do what they need or want to do.Question:Does the product provide an appropriate set of functions that will enable users to carry out all their tasks in the way they want to do them?tsmeriam@ukm.edu.my; nsa@ukm.edu.myLearnabilityRefers to how easy a system is to learn to useQuestion:Is it possible for the user to work out how to use the product by exploring the interface and trying out certain actions?tsmeriam@ukm.edu.my; nsa@ukm.edu.myMemorabilityRefers to how easy a product is to remember how to use, once learnedQuestion:What kinds of interface support have been provided to help users remember how to carry out tasks, especially for products and operations they use infrequently?tsmeriam@ukm.edu.my; nsa@ukm.edu.myUser experience goalssatisfying aesthetically pleasingenjoyable supportive of creativityengaging supportive of creativitypleasurable rewardingexciting funentertaining provocativehelpful surprisingmotivating enhancing sociabilityemotionally fulfilling challenging

boring annoyingfrustrating cutseytsmeriam@ukm.edu.my; nsa@ukm.edu.myBackground Theoriestsmeriam@ukm.edu.my; nsa@ukm.edu.myBackground TheoriesHuman MemoryHuman Processor Model Motor Behaviour ModelMental ModelNormans Interaction Model

tsmeriam@ukm.edu.my; nsa@ukm.edu.myHuman MemoryEncoding is first stage of memorydetermines which information is attended to in the environment and how it is interpretedThe more attention paid to something, and the more it is processed in terms of thinking about it and comparing it with other knowledge the more likely it is to be rememberedtsmeriam@ukm.edu.my; nsa@ukm.edu.myHuman Memorytsmeriam@ukm.edu.my; nsa@ukm.edu.mySensory memory

Short-term memory or working memory

Long-term memoryAttentionRehearsalHuman Memory - retrievingrecall information reproduced from memory can be assisted by cues, e.g. categories, imageryrecognitioninformation gives knowledge that it has been seen beforeless complex than recall - information is provided as cuetsmeriam@ukm.edu.my; nsa@ukm.edu.myMemory and ContextContext affects the extent to which information can be subsequently retrievedSometimes it can be difficult for people to recall information that was encoded in a different contexttsmeriam@ukm.edu.my; nsa@ukm.edu.myMemory and ContextExample:You are on a train and someone comes up to you and says hello. You dont recognise him for a few moment but then realise 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 recognise initiallytsmeriam@ukm.edu.my; nsa@ukm.edu.myMillers 7 + 2 Theory (1956)Short-term memory (STM) capacity is limited by the number of chunks or meaningful units of informationExample of chunks:0, 1, 7, 6, 7, 6, 9, 1, 5, 3 10 chunkspile, gate, road, pump, bell, lime 6 chunksThere is an apple on the table ??Based on experiments by George Miller (1965), STM can only store 7+2 chunks

tsmeriam@ukm.edu.my; nsa@ukm.edu.myWhat 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 page But this is wrong! Why?

tsmeriam@ukm.edu.my; nsa@ukm.edu.myWhy?Inappropriate application of the theoryPeople can scan lists of bullets, tabs, menu items for the one they wantThey dont have to recall them from memory having only briefly heard or seen themSometimes a small number of items is goodBut depends on task and available screen estate

tsmeriam@ukm.edu.my; nsa@ukm.edu.myHuman Processor Model (Card et al, 1983)tsmeriam@ukm.edu.my; nsa@ukm.edu.my

Human Information Processing Systemtsmeriam@ukm.edu.my; nsa@ukm.edu.myReceptors(perception)Effectors(motor actions)ProcessorLong-Term MemoryHumanInformationprocessorExternal worldReceptors(perception)Effectors(motor actions)ProcessorWorking MemoryMotor Behaviour Model Fitts LawFitts' Law describes the movement time to hit a screen target as:Mt = a + b log2(D/S + 1)where:Mt is time to move the hand to a target a and b are empirically determined constantsD is Distance between hand and targetS is Size of targettargets as large as possible distances as small as possibletsmeriam@ukm.edu.my; nsa@ukm.edu.myMotor Behaviour Model Fitts LawThe bigger the target, the quicker it is to reach itinterfaces that have big buttons are easier to use than interfaces with lots of tiny buttons crammed togetherThe most quickly accessed target are the four corners of a screen (due to thepinningaction)Fitts law was used to predict expert text entry rates on a 12-key Nokia mobile phonetsmeriam@ukm.edu.my; nsa@ukm.edu.myMental Modeltsmeriam@ukm.edu.my; nsa@ukm.edu.my

Mental ModelCraik (1943) described mental models as internal constructions of some aspect of the external world enabling predictions to be madeInvolves unconscious and conscious processes, where images and analogies are activatedDeep versus shallow models (e.g. how to drive a car and how it works)tsmeriam@ukm.edu.my; nsa@ukm.edu.myMental ModelUsers develop an understanding of a system through learning and using itKnowledge is often described as a mental modelHow to use the system (what to do next)What to do with unfamiliar systems or unexpected situations (how the system works)People make inferences using mental models of how to carry out tasks

tsmeriam@ukm.edu.my; nsa@ukm.edu.myErroneous Mental Model Many people have erroneous mental models (Kempton, 1996)tsmeriam@ukm.edu.my; nsa@ukm.edu.myErroneous Mental Model You arrive home from being out all night, starving hungry. You look in the fridge and find all that is left is an uncooked pizza. The instructions on the packet say heat the oven to 375oF and then place the pizza in the oven for 20 minutes. Your oven is electric. How do you heat up?Do you turn it up to the specified temperature, or higher ?

tsmeriam@ukm.edu.my; nsa@ukm.edu.myErroneous Mental Model Why?General valve theory, where more is more principle is generalised to different settings (e.g. gas pedal, gas cooker, tap, radio volume)Thermostats based on model of on-off switch modelElectric ovens work like a thermostat when the switch is on, it keeps heating at a constant speed until the desired temperature set is reached, at which point it stops heatingTurning the heat up higher will not warm it up any quickerThe pizza might burn if the oven is too hottsmeriam@ukm.edu.my; nsa@ukm.edu.myErroneous Mental Model Same is often true for understanding how interactive devices and computers work:Poor, often incomplete, easily confusable, based on inappropriate analogies and superstition (Norman, 1983)e.g. elevators and pedestrian crossings - lot of people hit the button at least twiceWhy? Think it will make the lights change faster or ensure the elevator arrives!tsmeriam@ukm.edu.my; nsa@ukm.edu.myNormans Interaction ModelSeven stagesuser establishes the goalformulates intentionspecifies actions at interfaceexecutes actionperceives system stateinterprets system stateevaluates system state with respect to goalNormans model concentrates on users view of the interfacetsmeriam@ukm.edu.my; nsa@ukm.edu.myexecution/evaluation loopuser establishes the goalformulates intentionspecifies actions at interfaceexecutes actionperceives system stateinterprets system stateevaluates system state with respect to goal

tsmeriam@ukm.edu.my; nsa@ukm.edu.mysystemevaluationexecutiongoalexecution/evaluation loopuser establishes the goalformulates intentionspecifies actions at interfaceexecutes actionperceives system stateinterprets system stateevaluates system state with respect to goal

tsmeriam@ukm.edu.my; nsa@ukm.edu.mysystemevaluationexecutiongoalexecution/evaluation loopuser establishes the goalformulates intentionspecifies actions at interfaceexecutes actionperceives system stateinterprets system stateevaluates system state with respect to goal

tsmeriam@ukm.edu.my; nsa@ukm.edu.mysystemevaluationexecutiongoalexecution/evaluation loopuser establishes the goalformulates intentionspecifies actions at interfaceexecutes actionperceives system stateinterprets system stateevaluates system state with respect to goal

tsmeriam@ukm.edu.my; nsa@ukm.edu.mysystemevaluationexecutiongoalHow realistic?Human activity does not proceed in such an orderly and sequential mannerMore usual for stages to be missed, repeated or out of order Do not always have a clear goal in mind but react to the worldTheory is only approximation of what happens and is greatly simplifiedHelp designers think about how to help users monitor their actionstsmeriam@ukm.edu.my; nsa@ukm.edu.myThe gulfsThe gulfs explicate the gaps that exist between the user and the interface The gulf of execution the distance from the user to the physical system while the second one users formulation of actions actions allowed by the system The gulf of evaluation the distance from the physical system to the user users expectation of changed system state actual presentation of this stateNeed to bridge the gulfs in order to reduce the cognitive effort required to perform a tasktsmeriam@ukm.edu.my; nsa@ukm.edu.myBridging the gulfstsmeriam@ukm.edu.my; nsa@ukm.edu.my

Figure 3.838Design Principlestsmeriam@ukm.edu.my; nsa@ukm.edu.myDesign PrinciplesForm follows functionVisibilityMappingFeedbackAffordanceForgivenessConstraintsConsistencyMinimalismtsmeriam@ukm.edu.my; nsa@ukm.edu.myForm Follows FunctionAn objects or entitys form (shape or appearance) emerges from its purpose or reason for beingShape follows function, not function follows shapeEg. Passenger jetsPassenger jets the shape is designed to flyDoor knobs/handles to be held and turnCups to be held and contain liquidChairs

tsmeriam@ukm.edu.my; nsa@ukm.edu.myVisibilityDescribes how easily the user can find the functions that the program or website offersExamples of poor visibility:Function is accessible only from a single screen/pageUser has to remember the exact path to that screen/pageToo many elements are presented to the user at once

tsmeriam@ukm.edu.my; nsa@ukm.edu.myVisibilityThis is a control panel for an elevator

How does it work?

Push a button for the floor you want?

Nothing happens. Push any other button? Still nothing. What do you need to do?

It is not visible as to what to do!

tsmeriam@ukm.edu.my; nsa@ukm.edu.my

Visibilityyou need to insert your room card in the slot by the buttons to get the elevator to work!

How would you make this action more visible?

make the card reader more obvious provide an auditory message, that says what to do (which language?) provide a big label next to the card reader that flashes when someone enters

make relevant parts visible make what has to be done obvioustsmeriam@ukm.edu.my; nsa@ukm.edu.my

VisibilityWhat do I do if I am wearing black?Invisible automatic controls can make it more difficult to use

tsmeriam@ukm.edu.my; nsa@ukm.edu.my

VisibilitySome designers try to ease visibility problems by limiting views of menus to most-often used items / recently selectedUsers are confused with the changes solving one visibility problem can cause anotherEg. Tab control A tab control should only contain one row of tabstsmeriam@ukm.edu.my; nsa@ukm.edu.my

Visibilitytsmeriam@ukm.edu.my; nsa@ukm.edu.my

Visibilitytsmeriam@ukm.edu.my; nsa@ukm.edu.myMappingThe relationship between a control, the thing it affects, and the outcome that results when the control is operatedEg. Kitchen stove, Eg. Buttons that clearly and simply indicate their function iconsSometimes the icon chosen can seem sillyControls that require text labels to convey meaning of them indicate poor mapping combination of icons and labels offers the best combination of claritytsmeriam@ukm.edu.my; nsa@ukm.edu.myMappingPoor mapping

Good mappingtsmeriam@ukm.edu.my; nsa@ukm.edu.my

FeedbackSending information back to the user about what has been doneIncludes sound, highlighting, animation and combinations of these

e.g. when screen button clicked on provides sound or red highlight feedback:tsmeriam@ukm.edu.my; nsa@ukm.edu.my

ccclichhk

Feedbacktsmeriam@ukm.edu.my; nsa@ukm.edu.myAffordanceDescribes the perceived function of an object based on our cultural understanding of that objectRefers to an attribute of an object that allows people to know how to use ite.g. a mouse button invites pushing, a door handle affords pullingA well-designed control gives clues about its purposeEg.: different shapes of door knobs indicate different ways to operate themtsmeriam@ukm.edu.my; nsa@ukm.edu.myPerceived AffordanceInterfaces are virtual and do not have affordances like physical objectsNorman argues it does not make sense to talk about interfaces in terms of real affordances Instead interfaces are better conceptualized as perceived affordancesLearned conventions of arbitrary mappings between action and effect at the interfaceSome mappings are better than otherstsmeriam@ukm.edu.my; nsa@ukm.edu.myAffordancePhysical affordances: How do the following physical objects afford? Are they obvious?

tsmeriam@ukm.edu.my; nsa@ukm.edu.my

AffordanceVirtual affordancesHow do the following screen objects afford?What if you were a novice user?Would you know what to do with them?tsmeriam@ukm.edu.my; nsa@ukm.edu.my

Forgivenesstsmeriam@ukm.edu.my; nsa@ukm.edu.my

To err is human . But I forgive you .ForgivenessSoftware should be designed to help keep users from making serious mistakes, and help them recover from the mistakes they makeEg:Auto-saving documentsPalm combines the features of computers and paper & pencil

tsmeriam@ukm.edu.my; nsa@ukm.edu.myConstraintsRestricting the possible actions that can be performedHelps prevent user from selecting incorrect optionsPhysical objects can be designed to constrain thingsExamples:only one way you can insert a key into a lockVertical and horizontal scroll bartsmeriam@ukm.edu.my; nsa@ukm.edu.myConsistencyDesign interfaces to have similar operations and use similar elements for similar tasksFor example:always use ctrl key plus first initial of the command for an operation ctrl+C, ctrl+S, ctrl+OMain benefit is consistent interfaces are easier to learn and usetsmeriam@ukm.edu.my; nsa@ukm.edu.myWhen consistency breaks downWhat happens if there is more than one command starting with the same letter?e.g. save, spelling, select, styleHave to find other initials or combinations of keys, thereby breaking the consistency rulee.g. ctrl+S, ctrl+Sp, ctrl+shift+LIncreases learning burden on user, making them more prone to errorstsmeriam@ukm.edu.my; nsa@ukm.edu.myInternal and external consistencyInternal consistency refers to designing operations to behave the same within an applicationDifficult to achieve with complex interfacesExternal consistency refers to designing operations, interfaces, etc., to be the same across applications and devicesVery rarely the case, based on different designers preferencetsmeriam@ukm.edu.my; nsa@ukm.edu.myInternal and external consistencyA case of external inconsistency

tsmeriam@ukm.edu.my; nsa@ukm.edu.my12345678978912345600(a) phones, remote controls(b) calculators, computer keypadsMinimalismA deliberate reduction in complexity for users benefitEg:Minimise the number of clicksReduce the amount of distance the mouse must move to access the most often-used controlsReduce decorative embellishmentstsmeriam@ukm.edu.my; nsa@ukm.edu.myDuelling PrinciplesDesign principles often conflict with one anotherConsider the needs of the user firstEg. Visibility vs minimalismVisibility keep all controls visible on the same pageMinimalism only display most frequently used controls

tsmeriam@ukm.edu.my; nsa@ukm.edu.myUsability Principlestsmeriam@ukm.edu.my; nsa@ukm.edu.myPrinciples to Support UsabilityCan be divided into 3 categoriesLearnabilityFlexibilityRobustnesstsmeriam@ukm.edu.my; nsa@ukm.edu.myPrinciples of learnabilitythe ease with which new users can begin effective interaction and achieve maximal performance

Synthesizability PredictabilityFamiliarityGeneralizabilityConsistency

tsmeriam@ukm.edu.my; nsa@ukm.edu.mySynthesizability LearnabilityUsers ability to assess the consequences of previous interactions in order to formulate a model of behaviour of the systemImportant for building correct mental modelEg. Copying a file from into another directorytsmeriam@ukm.edu.my; nsa@ukm.edu.myPredictability LearnabilityUsers ability to determine the effect of future interactions with the system (using the mental model built)Deals with users ability to:Determine the effect of operation on the systemKnow which operations can be performed

tsmeriam@ukm.edu.my; nsa@ukm.edu.myFamiliarity LearnabilityMeasures the correlation between the users existing knowledge and the knowledge required for effective interactionUsers first impression of the systemSupported by:Affordance Metaphor

tsmeriam@ukm.edu.my; nsa@ukm.edu.myMetaphorA description of a certain new concept or understanding based on existing knowledge of a similar concept or understandingAn analogy Represented visually or verballyExamples of metaphors in user interface:Desktop for operating environmentTravel for browsing web documents tsmeriam@ukm.edu.my; nsa@ukm.edu.my

Desktop Metaphortsmeriam@ukm.edu.my; nsa@ukm.edu.myAnalogy of file management and office tasks, which is represented visually like a table top in the office, which contains: folders documents in folders recycle bin for unused documentsfolderRecycle binDigital SkeuomorphsSkeuomorph - "a physical ornament or design on an object made to resemble another material or techniqueit makes it easier for those familiar with the original device to use the digital emulation and that it is visually appealingEg.Audio processing software packagesNote-taking utilitiesDocument collectionstsmeriam@ukm.edu.my; nsa@ukm.edu.myDigital SkeuomorphsContacts in iOS 6tsmeriam@ukm.edu.my; nsa@ukm.edu.my

Digital SkeuomorphsiBooks in iOS 6tsmeriam@ukm.edu.my; nsa@ukm.edu.my

Digital SkeuomorphsNotes in iOS 6tsmeriam@ukm.edu.my; nsa@ukm.edu.my

Arguments Against Skeuomorphismskeuomorphic interface elements use metaphors that are more difficult to operate and take up more screen space than standard interface elements breaks operating system interface design standards causes an inconsistent look and feel between applicationstsmeriam@ukm.edu.my; nsa@ukm.edu.myConsistency LearnabilityLikeness in input/output behaviour arising from similar situations or task objectivesIncrease users comfort, allowing them to focus on their work rather than the interfaceAspects:Controls and contents Same location and look (fonts and shapes/symbols)Softwares operationLanguage (terms, instructions, commands)tsmeriam@ukm.edu.my; nsa@ukm.edu.myGeneralizability LearnabilityAllow users extend their specific interaction knowledge to new situations that are similar by previously not encounteredCan be seen as consistencyEg. (within application)Drawing a circle as a constrained form of ellipse drawing a square as a constrained form of rectangleEg. (across application)Cut/paste/copy operations in multi-windowing systemstsmeriam@ukm.edu.my; nsa@ukm.edu.myPrinciples of flexibilitythe multiplicity of ways in which the user and system exchange information

Dialog InitiativeMulti-threadingTask MigratabilitySubstitutivityCustomizability

tsmeriam@ukm.edu.my; nsa@ukm.edu.myDialog Initiative FlexibilityAllowing the user freedom from artificial constraints on the input dialog imposed by the systemSystem-driven vs. user-drivenUser-driven users are entirely free to initiate any desired communicationSystem-driven needed for safety reasons or during critical tasks:Eg: during installationstsmeriam@ukm.edu.my; nsa@ukm.edu.myMultithreading Flexibilityability of system to support user interaction for more than one task at a timeconcurrent vs. interleaving; multimodalityEg:To open a window, the user can choose between a double click on an icon, a keyboard shortcut, or menu open windowOverlapping tasks on a windowing system

tsmeriam@ukm.edu.my; nsa@ukm.edu.myTask Migratability FlexibilityAbility to pass control for the execution of a given task so that it becomes either internalised by the user or the system or shared between them Control of executions can be transferred between users and systemEg. Spell-checkerComputer can check words automaticallyUsers can distinguish between correct and unintentional duplications or error

tsmeriam@ukm.edu.my; nsa@ukm.edu.mySubstitutivity Flexibilityallowing equivalent values to be substituted for each otherEg. To set margin for a letter, you can either :input the value explicitly, eg. 6.5 Or, you can put a fraction, eg. 2/3, which is equivalent to the range of (8.5 6.5 inches)In a spreadsheet program, the values in the cells produced by calculation of the program (output) can be used as input values for other calculations

tsmeriam@ukm.edu.my; nsa@ukm.edu.myCustomizability Flexibilitymodifiability of the user interface by user (adaptability) or system (adaptivity)Adaptability users ability to adjust the format of I/O (very limited)Eg.: Position of buttons, redefine command namesAdaptivity automatic customization of the user interface by the system, based on observed repetitions of the sequenceEg.: suggestions of words or phrases

tsmeriam@ukm.edu.my; nsa@ukm.edu.myPrinciples of robustnessthe level of support provided to the user in determining successful achievement and assessment of goals

ObservabilityRecoverabilityResponsivenessTask conformance

tsmeriam@ukm.edu.my; nsa@ukm.edu.myObservability Robustnessability of user to evaluate the internal state of the system from its perceivable representationRelates to operation visibility

tsmeriam@ukm.edu.my; nsa@ukm.edu.myRecoverability Robustnessability of user to take corrective action once an error has been recognizedforward/backward recoveryForward recovery acceptance of the current state and negotiation from that state towards the desired stateBackward recovery an attempt to undo the effect of previous interactionEg: undo when users mistyped

tsmeriam@ukm.edu.my; nsa@ukm.edu.myResponsiveness Robustnessmeasures the rate of communication between the user and the system response timeFavourable response time:Instant user perceives the system reactions immediateStable duration for identical or similar actions does not vary muchEg : pull-down menus are expected to pop up instantaneously as soon as a mouse button is pressed

tsmeriam@ukm.edu.my; nsa@ukm.edu.myTask Conformance Robustnessdegree to which system services support all of the user's tasks the user wishes to perform and in the way the user understands themDeals with task completeness and task adequacyTask completeness the coverageTask adequacy users understanding of the tasks

tsmeriam@ukm.edu.my; nsa@ukm.edu.my