2 The Task-Centered Design Process figure out who's going to use the system to do whatchoose representative tasks for task-centered designplagiarizerough out a designthink about itcreate a mock-up or prototypetest it with usersiteratebuild ittrack itchange it
3 Overview Prototyping and construction Conceptual design Physical designTool support
4 Two guidelines for design 1. Provide a good conceptual modelallows user to predict the effects of our actionsproblem:designer’s conceptual model communicated to user through system image:appearance, written instructions, system behaviour through interaction,transfer, idioms and stereotypesif system image does not make model clear and consistent, user will develop wrong conceptual model
5 Two guidelines for design (continued) 2. Make things visiblerelations between user’s intentions, required actions, and results aresensiblenon arbitrarymeaningfulvisible affordances, mappings, and constraintsuse visible cultural idiomsreminds person of what can be done and how to do it
6 Prototyping and construction What is a prototype?Why prototype?Different kinds of prototyping low fidelity high fidelityCompromises in prototyping vertical horizontalConstruction
7 What is a prototype?In other design fields a prototype is a small-scale model:a miniature car a miniature building or town
8 What is a prototype?In interaction design it can be (among other things):a series of screen sketches a storyboard, i.e. a cartoon-like series of scenes a Powerpoint slide show a video simulating the use of a system a lump of wood (e.g. iphone) a cardboard mock-up a piece of software with limited functionality written in the target language or in another language
9 Why prototype?Evaluation and feedback are central to interaction designStakeholders can see, hold, interact with a prototype more easily than a document or a drawingTeam members can communicate effectivelyYou can test out ideas for yourselfIt encourages reflection: very important aspect of designPrototypes answer questions, and support designers in choosing between alternatives
10 What to prototype? Technical issues Work flow, task design Screen layouts and information displayDifficult, controversial, critical areas
11 Low-fidelity Prototyping Uses a medium which is unlike the final medium, e.g. paper, cardboardIs quick, cheap and easily changedExamples: sketches of screens, task sequences, etc ‘Post-it’ notes storyboards ‘Wizard-of-Oz’
14 StoryboardsOften used with scenarios, bringing more detail, and a chance to role playIt is a series of sketches showing how a user might progress through a task using the deviceUsed early in design
15 Sketching Sketching is important to low-fidelity prototyping Don’t be inhibited about drawing ability. Practice simple symbols
16 Using index cards Index cards (3 X 5 inches) Each card represents one screenOften used in website development
17 ‘Wizard-of-Oz’ prototyping The user thinks they are interacting with a computer, but a developer is responding to output rather than the system.Usually done early in design to understand users’ expectationsWhat is ‘wrong’ with this approach?User>Blurb blurb>Do this>Why?
18 High-fidelity prototyping Uses materials that you would expect to be in the final product.Prototype looks more like the final system than a low-fidelity version.For a high-fidelity software prototype common environments include Macromedia Director, Visual Basic, and Smalltalk.Danger that users think they have a full system…….see compromises
19 Compromises in prototyping All prototypes involve compromisesFor software-based prototyping maybe there is a slow response? sketchy icons? limited functionality?Two common types of compromise‘horizontal’: provide a wide range of functions, but with little detail‘vertical’: provide a lot of detail for only a few functionsCompromises in prototypes mustn’t be ignored. Product needs engineering
20 ConstructionTaking the prototypes (or learning from them) and creating a wholeQuality must be attended to: usability (of course), reliability, robustness, maintainability, integrity, portability, efficiency, etcProduct must be engineeredEvolutionary prototyping‘Throw-away’ prototyping
21 Conceptual design: from requirements to design Transform user requirements/needs into a conceptual model“a description of the proposed system in terms of a set of integrated ideas and concepts about what it should do, behave and look like, that will be understandable by the users in the manner intended”Don’t move to a solution too quickly. Iterate, iterate, iterateConsider alternatives: prototyping helps
22 Three perspectives for a conceptual model Which interaction mode?How the user invokes actionsActivity-based: instructing, conversing, manipulating and navigating, exploring and browsing.Object-based: structured around real-world objects
23 Three perspectives for a conceptual model Which interaction paradigm?desktop paradigm, with WIMP interface (windows, icons, menus and pointers),ubiquitous computingpervasive computingwearable computingmobile devices and so on.Is there a suitable metaphor?(contd)….
24 Is there a suitable metaphor? Interface metaphors combine familiar knowledge with new knowledge in a way that will help the user understand the product.Three steps: understand functionality, identify potential problem areas, generate metaphorsEvaluate metaphors:How much structure does it provide?How much is relevant to the problem?Is it easy to represent?Will the audience understand it?How extensible is it?
25 Interface metaphorsInterface designed to be similar to a physical entity but also has own propertiese.g. desktop metaphor, web portalsCan be based on activity, object or a combination of bothExploit user’s familiar knowledge, helping them to understand ‘the unfamiliar’Conjures up the essence of the unfamiliar activity, enabling users to leverage of this to understand more aspects of the unfamiliar functionality
26 Benefits of interface metaphors Makes learning new systems easierHelps users understand the underlying conceptual modelCan be very innovative and enable the realm of computers and their applications to be made more accessible to a greater diversity of users
27 Problems with interface metaphors Break conventional and cultural rulese.g. recycle bin placed on desktopCan constrain designers in the way they conceptualize a problem spaceConflict with design principlesForces users to only understand the system in terms of the metaphorDesigners can inadvertently use bad existing designs and transfer the bad parts overLimits designers’ imagination in coming up with new conceptual models
34 Expanding the conceptual model What functions will the product perform?What will the product do and what will the human do (task allocation)?How are the functions related to each other?sequential or parallel?categorisations, e.g. all actions related to telephone memory storageWhat information needs to be available?What data is required to perform the task?How is this data to be transformed by the system?
35 Physical design: getting concrete Considers more concrete, detailed issues of designing the interfaceIteration between physical and conceptual designGuidelines for physical designNielsen’s heuristicsCooper’s About Face 2.0Styles guides: commercial, corporatedecide ‘look and feel’ for youwidgets prescribed, e.g. icons, toolbar
36 Alan Cooper’s Excise Traps Don’t force the user to go to another window to perform a function that affects this windowDon’t force the user to remember where he put things in the hierarchical file systemDon’t force the user to resize windows unnecessarilyDon’t force the user to move windowsDon’t force the user to reenter personal settings
37 Cooper’s Excise TrapsDon’t force the user the fill fields to satisfy some arbitrary measure of completenessDon’t force the user to ask permission to make changes.Don’t ask the user to confirm his actions.Don’t let the user’s actions result in an error.
38 Direct manipulation Drag and drop files Direct manipulation captures the idea of “direct manipulation of the object of interest” (Shneiderman 1983: p. 57), which means that objects of interest are represented as distinguishable objects in the UI and are manipulated in a direct fashion.Characteristics:Visibility of the object of interest.Rapid, reversible, incremental actions.Replacement of complex command language syntax by direct manipulation of the object of interest.Drag and drop files
39 One of the earliest commercially available direct manipulation interfaces was MacPaint
40 Direct Manipulation Advantages Visually presents task concepts. Easy to learn.Errors can be avoided more easily.Encourages exploration.High subjective satisfaction.Recognition memory (as opposed to cued or free recall memory) DisadvantagesMay be more difficult to program.Not suitable for small graphic displays.Spatial and visual representation is not always preferable.Metaphors can be misleading since the “the essence of metaphor is understanding and experiencing one kind of thing in terms of another” (Lakoff and Johnson 1983: p. 5), which, by definition, makes a metaphor different from what it represents or points to.Compact notations may better suit expert users.
41 “Don’t Mode me in” UNIX ‘vi’ is an example of “evil” modes same actions have different meanings depending on context‘edit’ replaces your file with ‘t’Paint programs are a good example of “good” modes.Modes are visible
42 Rules for modes Use modes consistently Do not initiate modes unexpectedlyMake modes visibleMake it easy to escape modes… without consequences.
43 Physical design: getting concrete Different kinds of widget (dialog boxes, toolbars, icons, menus etc)menu designicon designscreen designinformation display
44 Icon design Good icon design is difficult Meaning of icons is cultural and context sensitiveSome tips:always draw on existing traditions or standardsconcrete objects or things are easier to represent than actionsFrom clip art, what do these mean to you?
45 Screen design Two aspects: How to split across screens moving around within and between screenshow much interaction per screen?Individual screen designwhite space: balance between enough information/interaction and claritygrouping items together: separation with boxes? lines? colors?
46 Screen design: individual screen design Draw user attention to salient point, e.g. colour, motion, boxingAnimation is very powerful but can be distractingGood organization helps: grouping, physical proximityTrade off between sparse population and overcrowding
47 Principles of Visual interface design Avoid visual noise and clutterUse contrast, similarity, and layering to distinguish and organize elementsProvide visual structure and flow at each level of organizationUse cohesive, consistent, and contextually appropriate imageryIntegrate style and function comprehensively and purposefullyAlan Cooper, Robert M. Reimann. About Face 2.0: The Essentials of Interaction Design. Page 227.
48 Organization of Screen Elements BalanceSymmetryRegularityPredictabilitySequentialityEconomyUnityProportionSimplicityGroupings
49 BalanceEqual weight of screen elementsLeft to right, top to bottom
54 RegularityCreate standard and consistent spacing on horizontal and vertical alignment points
55 Regularity Left column processed - 2 right columns noted as same Location & size of each object processed
56 PredictabilityPut things in predictable locations on the screen
57 Predictable Spontaneous Icon File Edit View Insert Window Help Kung FooSearch for MoviesCancelOKEnter Keywords:GrasshopperOld blind guyPredictableIconFile Edit View Insert Window HelpKung FooSearch for MoviesCancelOKEnter Keywords:GrasshopperOld blind guySpontaneous
58 Predictability User expects title & menu bar on top of screen Visual scene needs to be completely processed - objects not in expected placesIconSearch for MoviesFile Edit View Insert Window HelpEnter Keywords:Kung FooGrasshopperOld blind guyOKCancelOKIconEnter Keywords:Kung FooGrasshopperOld blind guyFile Edit View Insert Window HelpSearch for MoviesCancel
59 Sequentiality Guide the eye through the task in an obvious way The Eye is attracted to:bright elements over less brightIsolated elements over groupedgraphics before textcolor before monochromesaturated vs. less saturated colorsdark areas before lightbig vs. small elementsunusual shapes over usual ones
60 Screen design: splitting functions across screens Task analysis as a starting pointEach screen contains a single simple step?Frustration if too many simple screensKeep information available: multiple screens open at once
66 ProportionCreate groupings of data or text by using aesthetically pleasing proportions
67 Pleasing Proportions Square - 1:1 Square Root of 2 - 1:1.414 Golden Triangle - 1:1.618Square Root of 3 - 1:1.732Double Square - 1:2
68 Simplicity Minimize the number of aligned points Use only a few columns to display screen elementsCombine elements to minimize the number of screen objectsWithin limits of clarity
69 Simplicity Only four alignments need to be processed A total of nine alignments need to be processedMembership FormName:Dues:Address:Pubs:City:Total:State:Zip:OKCancelMembership FormName:Address:Pubs:City:Total:State:OKZip:Cancel
70 Size::Preserve Proportions % of original height % of original widthSimpleSize:Uniformity:Height:Width:Preserve Proportions % of original % of originalComplex
71 GroupingsUse visual arrangements to provide functional groupings of screen elementsAlign elements in a groupEvenly space elements in a groupProvide separation between groupsUse additional group elements sparinglycolor & borders add complexity
72 Simple Grouping Similar elements aligned vertically Vertical distance between similar objects smallMembership FormName:Address:City:State:Zip:Dues:Pubs:Total:OKCancel
73 Boxed Grouping Boxes add additional complexity to form Spatial arrangement adequateMembership FormName:Dues:Address:Pubs:City:Total:State:Zip:OKCancel
75 Alignment Grids and the User’s Logical Path Align labels. Labels for controls stacked vertically should be aligned with each other; left-justification is easier for users to scan than right justification, although the latter may look visually cleaner-if the input forms are the same size. (Otherwise, you get a Christmas tree, ragged-edge effect on the left and right.)Align within a set of controls. A related group of check boxes, radio buttons, or text fields should be aligned according to a regular grid.Align across controls. Aligned controls (as described previously) that are grouped together with other aligned controls should all follow the same grid.Follow a regular grid structure for larger-scale element groups, panes, and screens, as well as for smaller grouping of controls.Alan Cooper, Robert M. Reimann. About Face 2.0: The Essentials of Interaction Design. (Wiley, 2003). Page 230.
78 Functions of Widgets Selecting options and commands Entering and editing data valuesDisplaying data
79 Kinds of Widgets Buttons Text entry/read-only Selection Combination entry/selectionSpecialized or customPresentation
80 Design issuesLabels and graphicsLayout and organizationActivation
81 Labels and Graphics Use labels and captions OKUse labels and captionsUse standard names when appropriateUse regular system fontClearly tie the text to the controlMaintain consistent heights and widthsUse common shapes (mostly rectangles)Pick icons that map to the actionsSupplement icons with text descriptions
82 Layout and Organization Provide adequate spacingLimit the number of controls on one screenKeep related controls togetherUse visual enclosure of groups where appropriate
83 Aligning list boxesAlign list boxes vertically rather than horizontally.Horizontally aligned list boxes are more difficult for the user to use, as the controls cannot be scanned easily.
85 Activation Provide keyboard equivalents Provide feedback for actions Control activationMovement among controls within a screenProvide feedback for actionsGray out unavailable choices
86 Buttons Initiates an action Always visible to activate a command (an alternate to menu choice or command line entry).to display another window or menu selectionAlways visibleprovides convenient access to frequently-used commandsstandard shapes and screen location for similar commands.Logical organization
87 Microsoft’s Button Types ButtonsTypesCommand buttons -- text as labelsBar buttons (menu buttons)-- graphics and/or text as labelsRadio buttonsNextMicrosoft’s Button Types
88 Which one is better? Plan Choice: Plan Choice Plan Choice: Limited BasicSuperiorPremiumPlan ChoicePlan Choice:LimitedLimitedBasicBasicSuperiorSuperiorPremiumPremium
89 Button Design Issues Labels Shapes and Graphics Location and layout OrganizationActivation
90 Buttons -- labels Use standard button labels when available Provide meaningful action descriptionUse regular system fontunless for some special purposesCenter the label textProvide consistency across all screens
91 Buttons --shape and graphics Use rectangular shape whatever possibleMaintain consistent button heights and widthsDesign graphics/icons that have natural mapping to the actionsEnhanced graphics with text description
92 Buttons -- Organization Maintain consistency in button locations across screens and windowsprovide adequate spacing between buttons and other screen controlsRestrict the number of buttons on one screenFollow standardsKeep related buttons together
93 Buttons -- Activation Consider different actions for mouse enter/exit .. mouse down/up/Consider keyboard equivalents for actionsProvide feedback for actionshighlight the button when the button is selectedGray out unavailable choices.
94 Text Entry/Read-Only Controls Text boxesEditable/read-only (fields vs. labels)single line/multiple linesfixed size/resizablefixed length/variable lengthsvisual box/non-visual boxscrollable /non-scrollablePropertiesbackground/foreground colorssizes/fonts/styles of textalignments
95 Text Box Design Provide descriptive caption Logical arrangement of multiple fieldsConsider the cursor movement from one field to another.Provide large enough boxes for fixed-length dataSelect reasonable fonts/sizes/colorsDesign highlight to attract attention
96 Selection Controls Present all options or choices on the screen Radio ButtonsCheck BoxesPalettesList BoxesCombo BoxesDrop-Down/Pop-UpSingle Selection/Multiple Selection?
97 Selection Design Choice Description Organization Activation Meaningful and clear description for the value or effects of the choiceUse single line of text whenever possibleOrganizationMeaningful order of choicesConsider adding a enclosure boxActivationProvide visual feedbackProvide default values
98 List Box or Combo Box? List box Combo box unlimited number of choices possible multiple choicesconsumes screen spacecan be set to different sizeeasy to see the choicesCombo boxunlimited number of choiceshighlight the selectionconserves screen spaceExtra step to display all the choices
101 Presentation Controls Provide additional information to screen elementsTooltipsa small popup window attached to an objectshows only when the mouse moves over the objectStatic Text Fields -- labelsGroup BoxesCombined controls in one boxProgress Indicators