1 / 54

Balancing Function and Fashion in UI Design

Explore advanced guidelines and ideas for balancing function and fashion in user interface design. Learn about error messages, non-anthropomorphic design, display design, web page design, window design, and color considerations.

cgeorges
Télécharger la présentation

Balancing Function and Fashion in UI Design

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. UNIT-4 BalancingFunctionandFashion

  2. BalancingFunctionandFashion Moreadvancedguidelines,ideas: ● • Errormessages • Non-anthropomorphicdesign • Displaydesign • Webpagedesign • Windowdesign • Colour

  3. ErrorMessages ErrormessagesshouldbeconsideredintheoveralldesignoftheUI,notanafterthought ● • “Hallofshame”websitesexistforreallypoorerrormessages • Consistency(perhapsacrossmultipleapplications) • Errormessagesmayhavetobewrittenbymultipleauthors ● ● ● – Ifthisisthecase,whatsystemisinplacetoinsuresomesortofconsistency? Solution:guidelinesdocument ●

  4. ErrorMessageIssues Aprogramerrorideallycanberesolvedthroughsomecorrectiveaction(s) ● Thereforetheerrormessageshouldhelpleadtheusertothecorrectiveaction(s) Universalusability ● ● Languagetranslationaffordedbyseparatinghelp\errortextfromthepresentationofhelp\error ● e.g.Keepingerrormessagesinfilesondiskratherthancodedintotheprogramitself Problems:tooobscure,hostile,littleassistance – ● ● e.g.IllegalErrorECx012CDE123C

  5. ErrorMessageIssues ● • Poorerrorscancause:anxiety,stress,reduceconfidencewithinterface,frustration • Whataresomereasonserrorsoccur? ● UserslackknowledgePoorunderstandingAccidentalslips ● ● ● Suspicionsaboutwhyanerroroccurredcanguidedesigndecisions ● Incorrectpassword?Mostlikelyjustaccidentalslip. Fileaccessdenial?Maybeuserdoesn'tunderstand. ● ●

  6. ErrorMessageIssues ErrormessageoptimizationcanbeaneasywaytoimproveUI ● Trackfrequencyoferrors,respondaccordingly... ● Modifyerrorhandlingprocedures,improvedocumentation,onlinehelp... Empiricaldatacanbegatheredtotestdecisions – ● Basesforpreparingerrormessages: ● SpecificityPositivetoneUser-centredstyle Appropriatephysicalformat ● ● ● ●

  7. Specificity Toogeneral... ● Howtoknowwhathasgonewrong? ● Toospecific\simple... ● Howtofixwhathasgonewrong? ● Example:form-fillininterfacewithmanyfields ● Veryannoyingifallfieldsmustbere-typedforanerrorinonefield Worseyetifthefieldwithanerrorisnotspecified ● ● Giveconcisebutmeaningfulfeedbackonwhatiswrong,howtofix ●

  8. Constructiveguidanceandpositivetone Positivetone ● Don'tusehostileterms... ● FatalAbort CatastrophicSevereIllegal – – – – – Eventhesewords,whichmaytechnicallybe“true”,westillwanttoavoidwhenpossible... ● InvalidBadError – – –

  9. Constructiveguidanceandpositivetone Howto“beconstructive”though? ● • Dependentonknowinguserintentions...Hardtoknowuserintentions • Solution:presentuserwithlistofpossibleactionsbasedonpossibleintentions,allowthemtodecide ● ● ● Correcterrorsautomatically? ● Takesawayincentivetoself-correct Errorcorrectionalmostbecomespartofthe“syntax”oftheprogramitselfinthiscase Isthisdesirable?Dependsonsituation... ● ● ● Keepinmind:mostdesirableisstilltopreventerrors –

  10. User-centredphrasing Allowuserscontrolovererrormessageinformation ● Differentlevelsofexplanation ● Novice,intermediate,expertTechnicalvs.Non-technical – – Differenttypesofinformation ● Descriptionofissues,examples,resolution – Integrateonlinehelpintotheerrormessages ● Allowaccesstocontext-sensitivehelpaspartoftheerrormessage ●

  11. Appropriatephysicalformat Upper-caseonlyerrormessages? ● Reallyonlyappropriateiftheerrormessageisveryserious,andbrief IncludingerrorcodeslikeCExFE23DA? ● ● Notreallyusefulformostconsumer-facingsoftware Maybemoreusefulforacompilererror,canactasareference Ifincludedatall,errorcodesshouldbe: ● ● ● Attheendoftheerrormessage Accessedthrougha“moreinformation”button,orsimilarUIelement – –

  12. Appropriatephysicalformat Wheretodisplayerrormessage? ● Nearproblemitself Inaspotspecificforerrormessages ● ● e.g.Displaybottom – Audiblenotificationthatanerrorhasoccurred? ● e.g.bell,buzzingnoise,etc. CanhelpensurethatusersdoobservetheerrorButcanalsobeannoying... Mayalsocauseembarrassmentfortheusersifothersarenearby,adistraction ● ● ● ● What'sthefirstthingyoudowhenyouslipontheice? –

  13. Error-messageguidelines Designprocessguidelines ● IncreaseattentiontomessagedesignEstablishqualitycontrol DevelopguidelinesCarryoutusabilitytests Recordthefrequencyofoccurrenceforeachmessage ● ● ● ● ●

  14. Error-messageguidelines End-productguidelines ● Beasspecificandpreciseaspossible.Determinenecessary,relevanterrormessages. Beconstructive.Indicatewhattheuserneedstodo.Useapositivetone.Avidcondemnation.Becourteous Chooseuser-centredphrasing.Stateproblem,cause,solution. Considermultiplelevelsofmessages.Statebrief,sufficientinformationtoassistwithcorrectiveaction. Maintainconsistentgrammaticalforms,terminologyandabbreviations. Maintainconsistentvisualformatandplacement. – – – – – – –

  15. Non-anthropomorphicDesign Anthropomorphic ● Havinghumancharacteristics ● Idea:modelHuman-ComputerInteractionbasedonHuman-HumanInteraction Lotsandlotsofcontroversyhere! ● ● Attributingqualitiessuchasintelligence,emotion,freewilltoacomputeraredeceptive,misleading ● Whenthisdeceptioninevitablybecomesuncoveredaslimitationsarereached,usersrealizeorfeeltheyhavebeenbetrayed Modelofcomputerisobfuscatedandhidden – –

  16. Non-anthropomorphicDesign Morecontroversy... ● Computersareoperatedvspeoplehaveidentity,autonomy ● Mayblamecomputerforerror Study:24of29computersciencestudentsfeltthatcomputerscan“haveintentions”(Friedman,1995) – – Distracting,anxietyproducing ● It'sjustafantasythatcomputerisa“friend” Anxietyabouthowtobesociallyappropriate,orhowtokeepthis“friend”happy Unlikeatool-likeinterface,suchasamap – – –

  17. Non-anthropomorphicDesign Historically,anthropomorphicdesignshavenotfairedverywell... ● TillietheTellerHarveyWallbanker BOB(BankofBaltimore) Talkingcarsfromthe1980s...Ananova ● ● ● ● ● Advocatesofanthropomorphicdesignoftensuggestthatsuchinterfaceswouldbebestsuitedtoeducation,sales,therapy,entertainment ●

  18. Non-anthropomorphicDesign Designissue:pronounusage ● Anthropomorphicadvocatesbelieveusing“I”or“you”willmakeaninterface“morefriendly” ● Increasedsubjectivesatisfaction? – Inpractice:canslowdownperformance,canbecomeannoyingorsilly ●

  19. Non-anthropomorphicDesign Simulatednaturallanguageinterfacestudy(BrennanandOhaeri,1994) ● Travel-reservationtask Simulatednatural-languageinterface “I”,“you”or“neutral”refereedtoasanthropomorphic,fluent,telegraphic Poor:IwillbookaflighttoNewYorkwhenyouhitEnter.Better:YoucanbookaflighttoNewYorkwhenyouhitEnter. Better:TobookaflighttoNewYork,pressenter. Participantsdidn'tfindtheanthropomorphicversiontobeanymoreintelligent Butperformancesuffered... ● ● ● ● ●

  20. Non-anthropomorphicDesign Whataboutanthropomorphicdesignforchildren'seducationalsoftware? ● Cartooncharacters ● Animated PointingatUIobjects,givingadviceandencouragement – – e.g.ReaderRabbit Someuserstudiessupportthisview(Mayer,2009) ● ●

  21. Non-anthropomorphicDesign Whataboutforadultproductivitysoftware? ● MicrosoftBOB Meanttobeaninterfacefornon-technicalusersReplacedProgramManagerwithhomeanalogy ● ● ● roomsinahousetogroupfeatures,furniture,decorationsandiconsforfunctionality,applications Usersfounditpatronizing – ● “Goodjobsofar,Kevin” – Failure ● InTimeMagazine'slistof50WorstInventions,CNET.comworstproductofthedecade –

  22. Non-anthropomorphicDesign Whataboutforinstructional,educationaloronlinehelpmaterialtargetedatadults? ● Usevideoclipsofactualhumanbeing ● e.g.Asanintrotothesoftware – Supportusercontrol ● ProvideoptionstoviewdifferentvideoclipsAllowthemtorepeatvideoclips Allowthemtodecidewhentomoveon – – – Othersituations? ● Japaneseeldercarerobots Muchresearch,hopeof$40billionindustryby2025 ● ●

  23. Non-anthropomorphicguidelines ● • Becautiousinpresentingcomputersaspeople,eitherwithsynthesizedorcartooncharacters • Designcomprehensible,predictable,anduser-controlledinterfaces • Useappropriatehumansforaudioorvideointroductionsorguides • Usecartooncharactersingamesorchildren'ssoftware,butavoidthemelsewhere • Provideuser-centredoverviewsfororientationandclosure ● ● ● ●

  24. Non-anthropomorphicguidelines ● • Donotuse“I”whenthecomputerrespondstohumanactions • Use“you”toguideusers,orjuststatefacts ●

  25. DataDisplayDesign Displayofdataisacomplexissue... ● • Empiricaldatasuggestsvisualaestheticshasstrongimpactonsubjectivesatisfaction • Condenseddata,orspreadout? SmithandMosier(1986) 162guidelinesfordatadisplay ● ● ● ● Condensedcanbebetter,particularlyforexperts ● Problem:timespentscanningfordata ● e.g.Nursestudy,searchtimesdroppedbyhalffordenselypackedone-screendatadisplayvs.Threescreen –

  26. DataDisplayGuidelines Samplefrom162guidelinesofSmithandMosier(1986) ● Ensurethatanydataauserneeds,atanystepinatransactionsequence,areavailablefordisplay Useshort,simplesentences. Displaydatatousersindirectlyusableforms;donotrequirethatusersconvertdisplayeddata Left-justifycolumnsofalphabeticdatatopermitrapidscanning Labeleachpageinamultipageddisplaytoshowitsrelationtoothers ... ● ● ● ● ● ●

  27. WebPageDesign TopTenMistakesofweb-basedpresentationofinformation(Tullis,2005) ● • BuryinginformationtoodeepinawebsiteOverloadingpageswithtoomuchmaterialProvidingawkwardorconfusingnavigation • PuttinginformationinunexpectedplacesonthepageNotmakinglinksobviousandclear • Presentinginformationinbadtables • MakingtextsosmallthatmanyuserscannotreaditUsingbadforms • Hiding(ornotproviding)featuresthatcouldhelpusers – – – – – – – – –

  28. WebPageDesign Webdesigncanbebroken-downintolevels(Tullis,2004) ● Site-levelissues ● IssuesthroughoutentirewebsiteNavigation DepthvsbreadthofwebsiteUseofframes – – – – Page-levelissues ● Tables,Graphs,FormsPagelayoutPresentationoflinks – – –

  29. WebPageDesign Webdesigncanbebroken-downintolevels(Tullis,2004) ● “special”information ● SitemapsSearchfunctionsUserassistanceFeedback – – – – Providesterminology,separationofconcerns ●

  30. WebPageDesign Commercialdesiretoimprovesatisfaction,performancewithwebsites ● • Raceexistedtocreatecoolestdesigns,attention-grabbinglayouts • Marketresearchersaimedtohaveusersstaylonger,buymoreproducts ● ● Designtrade-offwithincreaseddownloadtimes,especiallyintheeraofdial-upmodems WebbyAwards – ● Conjecturesbasedonanalysisofwinningpages(IvoryandHearst,2002) e.g.Averagelinktextshouldbekeptto2-3words ● ●

  31. WebPageDesign Goodapproach:usertaskfocused ● Analyzetasksequences,frequenciesLayoutpageaccordingtothisdata e.g.Top-to-bottommovementthroughdisplaymoreefficientthanhavingtomovearoundtoptobottomalloverthescreen Goalistominimizevisualscanningtime,movementtime ● ● ● ● Also... ● Guidelinesdocumentsarenumerous ●

  32. WebPageDesign Webpagedesignguidelinesdocumentexamples ● • TheJavaLookandFeelDesignGuidelines(Sun,2001) • Sun'sWebDesignGuide(Sun,2008) • TheWorldWideWebConsortium'sWebAccessibilityInitiative(WAI,2008) • TheWebStyleGuide(LynchandHorton,2008) ● ● ● ●

  33. WindowDesign • Overview • For many tasks it is required to deal with multiple documents, windows, forms • Problem: There is a limit of how many of such documents etc. can be displayed simultaneously • Goal: Offer sufficient information and flexibility to accomplish the task while reducing window housekeeping actions and minimizing distracting clutter • This leads to users being able to complete their task more rapidly and most likely with fewer mistakes

  34. WindowDesign • More concrete • How to coordinate multiple windows? • Synchronized scrolling: One scrollbar (window 1) is connected to another scrollbar (window 2); enables, for instance, simultaneous document review • Hierarchical browsing (e.g., Windows Explorer) • Opening/closing of dependent windows • Saving/opening of window state • Image Browsing • Good example: Google Maps!

  35. Colour Benefitsofusingcolour ● • VariouscoloursaresoothingorstrikingtotheeyeColourcanimproveanuninterestingdisplay • Colourfacilitatessubtlediscriminationincomplexdisplays • Acolourcodecanemphasizethelogicalorganizationofinformation • Certaincolourscandrawattentiontowarnings • Colourcodingcanevokemoreemotionalreactionsofjoy,excitement,fearoranger ● ● ● ● ● ●

  36. Colour Dangersofusingcolour ● • Colourpairingsmaycauseproblems • Colourfidelitymaydegradeonotherhardware • Printingorconversiontoothermediamaybeaproblem ● ● ●

  37. ColourGuidelines Usecolourconservatively ● • Toomanydifferentcolourscanconfusenoviceusers • Recognizethepowerofcolourasacodingtechnique Toomuchcolourcanconfuseormisdirectusers ● Limitthenumberofcolours ● ● ● Colourincreasesrecognitionspeedformanytasks ● Ensurethatcolourcodingsupportsthetask ● e.g.Wrongdataishighlightedforsearchtask ●

  38. ColourGuidelines Havecolourcodingappearwithminimalusereffort ● Colourcodingshouldingeneralbeautomaticwhenusersperformatask Placecolourcodingunderusercontrol ● ● Usersshouldstillbeabletoturnoffcolourcoding ● Designformonochromefirst ● Layoutdatainalogicalmannerfirst,beforecolouring(universalusability,black\whitemonitors,colourblindusers) ●

  39. ColourGuidelines Considertheneedsofcolour-deficientusers ● Readability,universalusabilityissue ● Usecolourtohelpinformatting ● Usefulfordenselypackeddisplays ● Beconsistentincolourcoding ● Someerrormessagesinred?Thendon'tuseyellowforothers! Bealerttocommonexpectationsaboutcolourcodes ● ● e.g.Red–danger,stop,etc. ●

  40. ColourGuidelines Bealerttoproblemswithcolourpairings ● e.g.Redonbluedisplays ● Usecolourchangestoindicatestatuschanges ● Canbeanattention-gettingmethod ● Usecolouringraphicdisplaysforgreaterinformationdensity ● e.g.Graphswithmultipleplots ●

  41. Quality of Service

  42. Quality of Service • Introduction • 1960s: mathematical computation association with computation time • World wide web: means graphics, & network congestion effect response time • Time is precious • Lengthy or unexpected system response time can produce: • Frustration • Annoyance • Eventual anger • Speedy and quickly done work can result in users: • learning less • reading with lower comprehension • making more ill-considered decisions • committing more data-entry errors

  43. Models of response-time impacts • Response time • The number of seconds it takes from the moment users initiate an activity until the computer presents results on the display • User think time • The number of seconds the user thinks before entering the next action

  44. Models of response-time impacts • Designers of response times and display rates in HCI must consider: • complex interaction of technical feasibility • cost • task complexity • user expectations • speed of task performance • error rates • error handling procedures • Overall majority of users prefer rapid interactions • Lengthy response times (15 seconds) are detrimental to productivity • Rapid response times (1 second or less) are preferable, but can increase errors for complex tasks

  45. Models of response-time impacts • Display Rate • Alphanumeric displays: The speed in characters per second at which characters appear for the user to read • World Wide Web Applications: Display rate may be limited by network transmission speed or server performance • Reading textual information from a screen is a challenging cognitive and perceptual task • Users relax when the screen fills instantly- beyond a speed where someone may feel compelled to keep up • Cognitive human performance would be useful for: • making predictions • designing systems • formulating management policies

  46. Tune World Wide Web applications to improve performance Designers can optimize web pages to reduce byte counts and numbers of files or provide previews of materials available in digital libraries or archives to help reduce the number of queries and accesses to the network

  47. Models of response-time impacts Limitations of short-term and working memory • Any cognitive model must emerge from an understanding of human problem-solving abilities • Magic number seven - plus or minus two • The average person can rapidly recognize seven chunks of information at a time • This information can be held for 15 to 30 seconds in short-term memory • Size of the chunks depends on the person' s familiarity with the material • Short-term memory and working memory are used in conjunction for processing information and problem solving • Short-term memory processes perceptual input • Working memory generates and implements solutions • People learn to cope with complex problems by developing higher-level concepts using several lower-level concepts brought together into a single chunk • Short term and working memory are highly volatile • Disruptions cause loss of memory • Delays require that memory be refreshed

  48. Models of response-time impacts Source of errors • Solutions to problems must be recorded to memory or implemented • Chance of error increases when solutions are recorded • When using an interactive computer system users may formulate plans and have to wait for execution time of each step • Long (1976) found unskilled and skilled typists worked more slowly and made more errors with longer response times • For a given user and task, there is a preferred response time Conditions for optimum problem solving • Longer response time causes uneasiness in the user because the penalty for error increases • Shorter response time may cause the user to fail to comprehend the presented materials • Progress indicators shorten perceived elapsed time and heighten satisfaction: • graphical indicators • blinking messages • numeric seconds left for completion

  49. Models of response-time impacts Conditions for optimum problem solving (cont.) • Rapid task performance, low error rates, and high satisfaction can come from: • Users have adequate knowledge of the objects and actions necessary for the problem-solving task • The solution plan can be carries out without delays • Distractions are eliminated • User anxiety is low • There is feedback about progress toward solution • Errors can be avoided or handled easily • Other conjectures in choosing the optimum interaction speed • Novices may exhibit better performance with slower response time • Novices prefer to work at slower speeds • With little penalty for an error, users prefer to work more quickly • When the task is familiar and easily comprehended, users prefer more rapid action • If users have experienced rapid performance previously, they will expect in future situations

  50. Expectations and attitudes • Related design issues may clarify the question of acceptable response time • E.g. how long before hearing a dial-tone • Two-second limit (Miller, 1968) appropriate for many tasks • But users have adapted a working style and expectation based on responses within a fraction of a second • People can detect 8% changes in a 2-4 second response time Response-time choke • A system is slowed down when the load is light and potential performance high • Makes the response time more uniform over time and across users, avoiding expectations that can’t always be met Response time across web sites varies It effects user interest and quality assessment Three things influence response-time: • Previous experiences • The individual's tolerance for delays • Task complexity

More Related