Presentation on theme: "Balancing Function and Fashion (Shneiderman and Plaisant, Ch"— Presentation transcript:
1 from http://wps.aw.com/aw_shneider_dtui_11, 12 Balancing Function and Fashion (Shneiderman and Plaisant, Ch. 11 and 12)from 12
2 Overview “Balancing Function and Fashion” Explication of interface “style” not easy – but, Shneiderman tries …Recall, Lynch and Horton remark – style emergesStyle in interfaces – vs. style of interfaceWhat and whyStyle and “look and feel”Design decisions influence style:Error messagesAnthropomorphic designDisplay designWindow designColorFrom “User Manuals, Online Help, and Tutorials”Reading from screen vs. reading from text
3 Introduction - Balancing Function & Fashion Interface design, both graphics and interaction, not yet “high art” (Shneiderman, p.434)Architecture and fashion are old, interfaces are notBut, not too sure how far analogy goes …Computer interface design is “young”Only recently (10-20 years) driven by extreme entrepeneural and style forcesMaybe better, consider that interface design is about software engineering, usability, etc.Recall, early discussionsE.g., engineering (with explicit resource constraints)Yet, there is style ….And it elements can be examinedWhere “style” results from the set of decisions made about graphics design, type of interaction form, wording selected, etc., that are madeRecall, guidelines constrain, etc.
4 Style in Web Page and Sites Very similar stylesBut differences in these computer siteHere, for web pages and sites, much is “page design” and “information architecture” design
5 First, GUI (WIMP) “Look and Feel” Lots of things user can interact with:Main WIMP componentswindows, menus, iconsButtonsDialogue boxesPalettes…Collectively known as widgets“Window gadgets”In sum:appearance + behavior = look and feel
6 Style and “Look and Feel” Gui “look and feel”appearance + behavior = look and feelFor web sites – style, as used by L&H and others, is element of “look and feel”
7 User Experience, Style, and Success Again, “balancing function and fashion” has to do with style and “look and feel”These are design elements, but important in interface designUser experiences play a critical role in influencing software acceptanceDesign needs to be “comprehensible, predictable, and controllable”Users like that …Conversational messages have their limitsInformation layout is importantMultiwindow coordinationLarge, fast, high-resolution color displays have potential …Shneiderman examines, as elements of style:Error messagesNonanthropomorphic designDisplay designWindow designColor
8 Error MessagesError message are one interface element creating “style”E.g., “Try closing other windows and restarting program.” vs. “Core Dump”Recall how often mentioned in heuristics, e.g., Shneiderman, NielsenPrompts, advisory messages, system responses (including error messages) contribute to system satisfaction - usabilityError messages or diagnostic warnings is criticalEspecially when dealing with novicesOften easy and effective way to improve systemShneiderman suggests 5 elements of error messages:SpecificityConstructive guidancePositive toneUser-centered styleAppropriate physical format
9 Error Messages 1. Specificity Not too general - Provide guidanceExamples: Poor:Better: SYNTAX ERRORUnmatched left parenthesisILLEGAL ENTRY Type first letter: Send, Read, or Drop INVALID DATA Days range from 1 to 31 BAD FILE NAME File names must begin with a letter
10 Error Messages 2. Constructive Guidance 2. Constructive guidance and positive toneShould indicate what users should do to correct problemHostile messages using violent terminology can disturb non-technical users:FATAL ERROR, RUN ABORTEDCATASTROPHIC ERROR: LOGGED WITH OPERATORNegative terms such as ILLEGAL, ERROR, INVALID, BAD should be eliminated or used infrequentlyExamples: PoorBetter Run-Time error ‘ (800405): Method ‘Private Profile String’ of object ‘System’ failed.Virtual memory space consumed. Close some programs and retry.Resource Conflict Bus: 00 Device: 03 Function: 01 Remove your compact flash card and restart Network connection refused. Your password was not recognized. Please retype. Bad date. Drop-off date must come after pickup date.
11 Error Messages 3. User-centered 3. User-centered phrasingSuggests user controls the interfaceInitiating action, rather than just responding to systemUser should have control over amount of information system providese.g. screen tips; help button for context-sensitive help or extensive online user manualE.g., telephone company:“We’re sorry, but we are unable to complete your call as dialed. Please hang up, check your number, or consult the operator for assistance”, versus“Illegal telephone number. Call aborted. Error number 583-2R6.9. Consult your user manual for further information.”
12 Error Messages 4. Appropriate Format 4. Appropriate physical formatExamples:Use uppercase-only messages for brief, serious warningsAvoid code numbers; if required, include at end of messageConsider best location of messages.E.g. Could be:near where problem aroseplaced in consistent position on bottom of screennear to, but not obscuring relevant informationAudio signals useful, but can be embarrassing - place under user control
13 Error Messages 5. Effective Messages 5. Development of effective messagesShould be evaluated by several people and tested with suitable participantsMessages should appear in user manuals and be given high visibilityOr, contextual helpUsers may remember the one time when they had difficulties with a computer system rather than the 20 times when everything went wellRecommendations for developing effective messages:1. Increase attention to message design2. Establish quality control3. Develop guidelinesHave a positive toneBe specific and address the problem in the user's termsPlace the users in control of the situationHave a neat, consistent, and comprehensible format4. Carry out usability test5. Collect user performance data
14 Anthropomorphic Design Anthropomorphism:“An interpretation of what is not human or personal in terms of human or personal characteristics”More simply: “Ascribing human characteristics to non-human things”Snheiderman:“Children accept human-like references and qualities for almost any object, from Humpty-Dumpty to Tootle the Train. Adults reserve anthropomorphic reference for objects of special attraction, such as cars, ships, or computers.”Anthropomorphic computer interfaces:Benign:Star Trek variants, …Malevolent:HAL in 2001: A Space OdysseyContemporary (forthcoming):
15 Anthropomorphic Design Anthropomorphism“An interpretation of what is not human or personal in terms of human or personal characteristics”More simply: “Ascribing human characteristics to non-human things”Snheiderman:“Children accept human-like references and qualities for almost any object, from Humpty-Dumpty to Tootle the Train. Adults reserve anthropomorphic reference for objects of special attraction, such as cars, ships, or computers.”Anthropomorphic computer interfaces:Benign:Star Trek variants, …Malevolent:HAL in 2001: A Space OdysseyContemporary (forthcoming):So, there are arguments against:
16 Anthropomorphic Design Concerns (Shneiderman):Attributions of intelligence, autonomy, free will, etc. can deceive, confuse, and mislead usersImportant to clarify differences between people and computersUsers and designers must accept responsibility for misuse of computersAlthough attractive to some people, an anthropomorphic interface can produce anxiety in others:Computers can make people feel dumbComputers should be transparent and support concentrating on the task in handLocus of controlAnthropomorphic interfaces may distract usersClippey was intended to provide help suggestionsAmused some, but annoyed manyDisruptive interferenceLacked appropriate emotional expressionsWhy Ananova at all?News reader
17 Anthropomorphic Design (cont.) Advocates of anthropomorphic interfaces suggest that they may be most useful as:Teachers?Salespeople?Therapists?Entertainment figures?An alternative design …Present (real) human through prerecorded audio or videoGuidelines (Shneiderman):Be cautious in presenting computers as people.Design comprehensible, predictable, and controllable interfaces.Use appropriate humans for introductions or guides.Use cartoon characters in games or children’s software, but usually not elsewhereProvide user-centered overviews for orientation and closure.Do not use 'I' pronouns when the computer responds to human actions.Use "you" to guide users, or just state facts.
18 Display Design Display design Narrowly stated: Key component in perception of system usabilityIncludes aesthetics and functionalityE.g., clutter vs. clean Yahoo vs. Google(and maybe do something about IE toolbar, too)Screen graphics, graphic design, element positioning, etc.Narrowly stated:“Effective display designs must provide all necessary data in proper sequence to carry out task”
19 Display Design Display design Narrowly stated: Key component in perception of system usabilityIncludes aesthetics and functionalityE.g., clutter vs. clean Yahoo vs. Google(and maybe do something about IE toolbar, too)Screen graphics, graphic design, element positioning, etc.Narrowly stated:“Effective display designs must provide all necessary data in proper sequence to carry out task”
20 Display Design Principles Mullet and Sano's categories of design principles – schema for understanding:Elegance and Simplicity:unity, refinement and fitnessScale, Contrast, and Proportion:clarity, harmony, activity, and restraintOrganization and Visual Structure:grouping, hierarchy, relationship, and balanceModule and Program:focus, flexibility, and consistent applicationImage and Representation:immediacy, generality, cohesiveness, and characterizationStyle:distinctiveness, integrity, comprehensiveness, appropriateness
21 FYI - Display Design – Data Display Samples from 162 data-display guidelines from Smith and Mosier (1986)If you need to …More detail in Shneiderman
22 FYI - Display Design - Data Display (cont.) Field layoutBlank spaces and separate lines can distinguish fields.Names in chronological order, alignment of dates, familiar date separators.Labels are helpful for all but frequent users.Distinguish labels from data with case, boldfacing, etc.If boxes are available they can be used to make a more appealing display, but they consume screen space.Specify the date format for international audiencesOther coding categories – background shading, color, and graphic iconsEmpirical resultsstructured form superior to narrative formimproving data labels, clustering related information, using appropriate indentation and underlining, aligning numeric values, and eliminating extraneous characters improves performanceperformance times improve with fewer, denser displays for expert usersscreen contents should contain only task-relevant informationconsistent location, structure, and terminology across displays importantsequences of displays should be similar throughout the system for similar tasks
23 Display Design - Display-complexity Metrics Although knowledge of the users’ tasks and abilities is key to designing effective screen displays, objective and automatable metrics of screen complexity are attractive aidsTullis (1997) developed four task-independent metrics for alphanumeric displays:(next slide)1. Overall Density2. Local Density3. Grouping4. Layout Complexity
24 Display Design - Complexity Metrics – Tullis (Quick Look) Task-independent metrics for alphanumeric displays:1. Overall DensityNumber of filled character spaces as a percentage of total spaces available2. Local DensityAverage number of filled character spaces in a five-degree visual angle around each character, expressed as percentage of available spaces in the circles and weighted by distance from the character3. Grouping(1) Number of groups of “connected” characters, where a connection is any pair of characters separated by less than twice the mean of the distances between each character and its nearest neighbor(2) Average visual angle subtended by groups and weighted by the number of characters in the group4. Layout ComplexityComplexity, as defined in information theory, of the distribution of horizontal and vertical distances of each label and data item from a standard point on the display
25 FYI - Display Design - Complexity Metrics - Sears Sears (1993) developed task-dependent metricCalled layout appropriateness to assess whether spatial layout is in harmony with users’ tasksFocuses on how user moves through elements of the display when performing taskOptimal layout minimizes visual scanningHowever, may conflict with expectations about placement of fields, etc.In figure, solid most frequent
26 Window Design General Considerations Users need to consult multiple sources rapidlyMust minimally disrupt user's taskWith large displays, eye-head movement and visibility are problemsWith small displays, windows too small to be effectiveMultiple window display strategy often appropriateMove among relatively independent subtasksNeed to offer users sufficient information and flexibility to accomplish task, while reducing window housekeeping actions, distracting clutter, eye-head movementopening, closing, moving, changing sizetime spent manipulating windows instead of on taskCan apply direct-manipulation strategy to windows
27 Window Design Coordinate Windows Coordinating multiple windowsShneiderman - Next generation of window managers?Coordinate windowsWindows appear, change contents, and close as a direct result of user actions in the task domain
28 Window Design Coordinate Windows Coordinating multiple windowsShneiderman - Next generation of window managers?Coordinate windowsWindows appear, change contents, and close as a direct result of user actions in the task domainSuch sequences of actions can be established by designers, or by users with end-user programming toolsA careful study of user tasks can lead to task-specific coordinations based on sequences of actionsImportant coordinations:Synchronized scrollingHierarchical browsingE.g., opening toc in sidebar has contents in mainOpening/closing of dependent windowsSaving/opening of window state
29 Window Design MS Task Gallery Microsoft research projectA window managerDesign Premise3D virtual environments can more effectively engage spatial cognition and perceptionGoalsTask ManagementSimultaneous Document ComparisonFeatures3D GraphicsAbility to host any 2-D Windows Application without any change.
30 Window Design MS Task Gallery “Palette” of windows3D navigationWindow controlsMove Bring Ordered Loose Add to Maximize CloseForward Stack Stack Selection
31 FYI - Window Design – Image Browsing (more in Information Visualization) Like hierarchical browsingWork with large imagesDetail + ContextOverview in one window (context), detail in another (focus)Field of view box in the overviewPanning in the detail view, changes the field of view boxMatched aspect ratios between field of view box and the detail viewZoom factors: 5-30Larger suggests an intermediate view is neededSemantic zoomingSide by side placement, versus fisheye viewThe design of image browsers should be governed by the users’ tasks, which can be classified as follows:Image generationOpen-ended explorationDiagnosticsNavigationMonitoring
32 FYI – Win. Design - Personal Role Management Role centered design emphasizes users’ tasks, rather than the applications and documentsVision statementWhat you’re doing and usingSet of peopleTask hierarchyScheduleSet of documentsThe requirements for personal role management include:Support a unified framework for information organization according to users' rolesProvide a visual, spatial layout that matches tasksSupport multi-window actions for fast arrangement of informationSupport information access with partial knowledge of its nominal, spatial, temporal, and visual attributes and relationships to other pieces of information.Allow fast switching and resumption among rolesFree user's cognitive resources to work on task domain actions rather than interface domain actions.Use screen space efficiently and productively for tasks.
33 FYI – Win. Design - Personal Role Management Figure 5: An illustration of later implementation of a University Professor role manager prototyped with Elastic Windows. This professor is advisor to a number of graduate students in a number of research projects (3 recent ones and 5 earlier projects are represented here). He teaches two courses this semester at the university (CMSC 434 and 828S), is industry liaison to three companies, and has personal duties.
34 Color Color a key component in style Color can: “Soothe or strike the eye”Add accents to an uninteresting displayFacilitate subtle discrim. in complex displaysEmphasize logical organization of informationDraw attention to warningsEvoke string emotional reactions of joy, excitement, fear, or angerDesign principles and guidelines have long existed for graphics design and broader useE.g., red for danger, yellow for cautionIn general adopted for user interface designColor can be misused, or, as a design element, done poorlyUse with understanding and restraint(similarly with animation,
35 FYI - Color Guidelines Basic guidelines (Shneiderman): Use color conservativelyLimit the number of colorsRecognize the power of color as a coding techniqueEnsure that color coding supports the taskHave color coding appear with minimal user effortPlace color coding under user controlDesign for monochrome firstConsider the needs of color-deficient userUse color to help in formattingBe consistent in color codingBe alert to common expectations about color codesBe alert to problems with color pairingsUse color changes to indicate status changesUse color in graphic displays for greater information density
37 Introduction - User Manuals, Online Help, and Tutorials “In learning about computer systems many people experience anxiety, frustration, and disappointment.”ShneidermanEven though increasing attention is being paid to improving interface design, complex systems can still benefit both paper and online helpAccording to ShneidermanWe’ll take a really quick look at some issues …Forms of paper user manuals – each has its utility:Install manualBrief getting-started notesIntroductory tutorialThorough tutorialDetailed reference manualQuick reference cardConversation manual
38 Introduction - User Manuals, Online Help, and Tutorials Forms of online materials:Online manualOnline helpContext-sensitive helpOnline tutorialAnimated demonstrationGuidesFAQsOnline communities, newsgroups, listservers, , chat, and instant messagingAgain, both paper and online usefulConsider use of documentation and the user’s goal:User’s Goal: Paper:Online:I want to buy itSales brochure, fact sheetAnimated demonstrationI want to learn itTutorial Manual, tutorial, guide, animated demonstrationI want to use itUser manual Manual, help, context-sensitive helpI want to solve a problemFAQ Help, FAQ, online community
39 Paper versus Online Manuals Reasons to have online manuals:Physical advantagesNavigation featuresInteractive servicesEconomic advantagesBut, advantages can be compromised by potentially negative side effectsDisplays may not be as readable as paper manualsEach display may contain substantially less information than a sheet of paperScreen display, in general, has advantages and disadvantagesUser interface of online help systems may be novel and confusing to novicesPossibly, yet another interface …Extra mental effort required for navigating through many screens may interfere with concentration and learning, and annotation can be difficultSplitting display between work and help or tutorial windows reduces the space for work displaysSmall devices such as cell phones do not have enough display space to provide online help
40 Reading from Paper vs. Displays Empirically,15% to 30% slower task times for comprehension or proofreading of text on computer displays, compared to on paperPotential Disadvantages in Reading from DisplaysPoor fonts, especially on low resolution displaysLow contrast between characters and the backgroundFuzzy character boundariesEmitted light from displays may be more difficult to read by than reflected light from paperGlare may be greater on displaysScreen flicker can be a problemCurved display surface may be problemSmall displays require more frequent page turningReading distance can be greater than for paperDisplays are fixed in placeDisplay placement may be too high for comfortable readingLayout and formatting problemsReduced hand and body motions with displays as compared to paper may be fatiguingRigid posture for displays may also be fatiguingUnfamiliarity of displays and the anxiety that the image may disappear can increase stress
41 Reading from Paper vs. Displays The heatmaps from the eyetracking study. Red indicates the area where the userlooked most, yellow indicates fewer views, and blue indicates the fewest views.Gray is used for areas that were not viewed. The image on the left is from an articlein the “About us” section of a corporate web site, the center image is a productpage on an e-commerce web site, and the image on the right is from a searchengine results page (Jakob Nielson).
42 Shaping the Content of Manuals Traditionally, training and reference material often written by junior member of development teammanuals were often poorly writtenwere not suited to the background of the userswere delayed or incompletewere not tested adequatelyThe benefits of well-designed manuals include shorter learning times, better user performance, increased user satisfaction, and few calls for supportThe “active user paradox”:Users’ eagerness to conduct meaningful activities often stops them from spending time “just” learning, and therefore their skills remain mediocreApplicable to all task in fact …
43 Example – Electronic Analog to Paper Powerpoint – Automated table of contents analog to paper manual
44 Shaping the Content of Manuals Minimal manuals encourage active involvement with hands-on experiencesCarroll's guided exploration:choose an action-oriented approachanchor the tool in the task domainsupport error recognition and recoverysupport reading to do, study, and locateShow numerous well-chosen screen prints that demonstrate typical uses (predictive model)Components of well designed manuals:Table of contents and index requiredGlossaries for clarifying technical termsAppendices for error messages
48 Use of OAI Model to Design Manuals (See Figures 13.4,5,6)Introductory tutorialtask training firstlearn the hierarchy of objects, from high level down to the atomicrecognize the range of high-level intentions down to specific action stepslearn about the interface representationsstart with familiar objects and actionslink these concepts to high-level interface objects and actionsshow syntax needed to accomplish each taskConversion manualusers knowledgeable about task domain, but unfamiliar with specific softwareneed presentation showing relationship between metaphors and already known plans and the new ones required by the new softwareQuick referenceuser knowledgeable about task and interface objects and actionsneeds details to convert their plans into detailed actionsSample sessions for giving portrait of system features and interaction stylesFlow diagrams provide visual overviews that orients users to transitions from one activity to another
49 (Basic) Organization and Writing Style Precise statement of educational objectivesPresent concepts in a logical sequence with increasing order of difficultyEnsure that each concept is used in subsequent sectionsAvoid forward referencesConstruct sections with approximately equal amounts of new materialNeed sufficient examples and complete sample sessionsChoice of words and phrases importantStyle guides for organizations attempt to ensure consistency and high qualityWriting style should match users' reading ability
50 Online Help Kearsley's guidelines for online help systems: Make system easy to access and easy to return fromMake help as specific as possibleCollect data to determine what help is neededGive users as much control as possible over the help systemMake help messages accurate and completeDo not use help to compensate for poor interface design
51 Online Manuals, 1 Online Manuals: Reproduction of printed manuals onlinepaper page layouts may not convert welldealing with figures problematicattractive if users have large enough display (full page)close match between printed and online versions usefulEnhanced by special online featuresstring searchmultiple indicesmultiple tables of contentstables of figureselectronic bookmarkselectronic annotationshypertext traversalautomatic history keeping
52 Online Manuals, 2 Online Manuals (cont.) Most effective if manuals redesigned to fit electronic medium to take advantage ofmultiple windowstext highlightingcolorsoundanimationstring search with relevance feedbackProperly designed table of contents that can remain visible to side of text page vitalNovices need tutorialsIntermittent knowledgeable users can handle concise descriptions of interface syntax and semanticsKeyword lists improved by clustering into meaningful categories
53 Online Help Online Help Context-sensitive help Traditionally, little information about how to assemble actions to perform tasksUsers expect to be able to search the full text of online documentsExpanding and contracting table of contents can be combined with searchThe online help and support center for Microsoft Windows XP contains articles/topics and search optionsAn answer wizard can respond to natural language requestsContext-sensitive helpUser-controlled, interactive object helpSmall pop-up boxDedicated portion of the displayIntelligent help:Users’ interaction history, a model of user population, and a representation of their tasks to make assumptions about what users wantDevelopment of intelligent help systems face serious usability challengesClippeyHybrid approachesInitiative is shared between the user and systemUnobtrusive advice from system, but requires space
56 Online Tutorials Online tutorials Does not have to keep shifting attention between screen and manualPractices skills to use systemCan work alone at an individual pace and without the embarrassment of mistakes made in front of othersStart-up tips
57 Online Demonstrations and Guides Demonstration systemsDistributed on disk, CD-ROM, or over InternetDesigned to attract potential usersTypically show off system features using animation, color graphics, sound, etc.User-interface requirements are tocapture and maintain user interestconvey informationbuild positive product imageTypical controlsautomatic or manual pacinglength of demonstration (short versus in-depth)stop, replay, skipA screen capture animation is easy to produce with standard tools such as CamtasiaGames often have a 30 second demonstrationGuidesAudio and video recording of human guides or cartoon figures to lead users through informationGUIDES 3.0 projectAudio tours of art galleriesAudio or video lectures may be played on a computer or a separate systemVideo Professor
58 Online Communities for User Assistance Help networks usingsent to designated help desk or staff personsent to general list within organizationusers must publicly expose their lack of knowledgerisk of getting incorrect adviceCommunal approach means low cost for software maintenanceMicrosoft and others actively encourages itFrequently asked questions (FAQ) lists for newcomers