HCI-text Skriftlig examination

Människa-datorinteraktion, DVC002 17 Januari 2002 HCI-text Skriftlig examination Del 1. Grupp A Johan Bergsten, mda00jbe@student.bth.se Stefan Höglund, mda00sho@student.bth.se

Innehållsförteckning : Innehållsförteckning :...2 Introduktion till HCI...3 Inledning...3 Designmönster...4 Användning av designmönster...5 Direct Manipulation...5 Övriga designmönster...9 Metaforer...11 Reflektion på designmönster...11 Källförteckning...13 2

Introduktion till HCI Human Computer Interaction, HCI är ett ämne som berör design, utvärdering och implementation av interaktiva datorsystem för mänskligt användade. Stort fokus ligger på användaren och aktiviteter kring denne. Idag tillverkars många produkter som människor använder i sitt liv, men hur användbara är de? Då en produkt tillverkas tänker utvecklaren oftast inte på användaren. Personerna som utvecklar produkten är tekniska experter på sitt område och tycker däför att deras produkter är enkla och användbara för alla. Så är dock sällan fallet. Hur svårt är det inte att progra mmera videon för inspelning eller att installera ett nytt program på datorn? Speciellt svårt blir det om det är första gången man gör det. Interaktionsdesign (Eng. Interaction Design) är ett multidisciplint ämne inom HCI som för olika kategorier utvecklare och designers närmare varandra och närmare användaren, vilket resulterar i användbara och enkla produkter. Inledning Under hösten har vi arbetat med olika övningar, där har vi bl.a. studerat färdig kod och manipulerat den för att ändra i ett grafiskt användargrä nssnitt. En del av kursfokus ligger på laborationer där vi har lärt oss om designmönster och hur vi kan använda oss av dem för att designa så användbara applikationer som möjligt. Genom att praktisera de nya kunskaperna och samtidigt reflektera över dem skapar vi god förståelse för designmönster. Vi vill med denna text reflektera över vad vi lärt oss och hur vi har använt oss av kunskaperna i vår slutliga laboration. Vi ska lyfta fram olika designmönster och diskutera varför de är viktiga i designen av en användbar applikation. Vi kommer att styrka argument med hjälp av andra källor inom HCI-området. Ett annat område vi vill behandla är informationsinsamlig och kravformulering. Dessa är centrala ämnen i MDAutbildningen och vi vill därför ge dessa extra utrymme i vår HCI-text. I kursen 3

objektorienterad systemutveckling introducerades vi till begreppet krav och kravspecifikation (Eng. requirements). Vi vill i texten undersöka hur kravbegreppen i HCI och objektorienterad systemutveckling hänger ihop, om de kompletterar varandra eller om de konkurrerar med varandra. Designmönster I HCI-kursen introducerades vi till designmönster. Designmönstren ger riktlinjer för hur användbara användargränssnitt designas. De hjälper designern att designa program som känns familjära för användaren. En designer som känner till designmönstren har stor nytta av det. Designmönstren ger universellt användbara riktlinjer för användargränssnittsdesign som alltid är bra att ha i bakhuvudet under designarbetet. Men hur viktiga är designmönstren? Vilket är viktigast? Dessa är några frågor vi ska försöka besvara efter att vi presenterat de mönster vi tycker är grundläggande och de mönster vi har använt oss av i våra laborationer. Use elements that are familiar to the user in the GUI. (Grand, 1999) Vid kursens första laborationstillfälle tilldelades vi ett kompendium om designmöster. I vår första laboration beskrev och identifierade vi följande designmöster: Selection, Direct Manipulation, Window Per Task och Form. Dessa designmöster kommer vi att beskriva i texten nedan. I vår andra laboration, där vi designade och implementerade ett eget program, fick vi chansen att själva tillämpa designmöster. Exempel på hur vi implementerade designmönster i laboration 2 följer i texten nedan. De möster vi inte har använt oss av beskriver vi endast kortfattat i texten p.g.a. det begränsade utrymmet. De fyra designmönster vi valt att fokusera på är de designmönster vi tror är vanligast. 4

Användning av designmönster Direct Manipulation 2 Direct Manipulation låter användare interagera med ett objekt genom att manipulera en representation av objektet. I figur 1 nedan utgörs objektet av en tabell (1) och objektrepresentationen av en slider (2). Genom att dra slidern i sidled manipulerar användaren storleken på tabellcellerna i realtid. 1 Figur1. SwingSet, TableView. Fördelen med Direct Manipulation är att användaren ser på en gång hur objektet förändras. Användaren slipper då att hålla en mental modell av objektet t.ex. genom att gå in på en annan sida för att se hur objektet har påverkats. Tack vare Direct Manipulation blir det enkelt för användaren att avgöra om utgången av manipulationen var den önskvärda. 3 Form Designmöstret Form (Sv. Formulär) låter användaren skriva in strukturerad data som enskilda bitar av information i ett användargränssnitt. Då användaren väljer att registrera en ny media (Figur 2) visas ett formulärfönster (3) i användargränssnittets högra hälft. Datan ska här registreras som enskilda informationsbitar på ett strukturerat 4 Figur 2. Media Register, Registrera ny video. 5

sätt. Användaren vet vilken information som ska skrivas in eftersom varje textfält har en tydlig rubrik. Längst ner på formulärssidan finns en Spara -knapp (4) som användaren trycker på då all information är inskriven. Den fugerar som en bekräftelse, från användargränssnittets sida, på att registeringen är klar. Förbättringar som skulle gjort formulärsidan ännu bättre hade varit en markering av vilken information som är obligatorisk och ett meddelande till användaren om denne försöker skriva in felaktig information t.ex. text i ett fältet avsett för publiceringsår. Ett annat exempel på designmönstret Form är hur vi använde det i laboration två. I laborationen skapade vi applikationen Telefonbok. Vid användning av applikationen guidar designmönstret användaren genom registreringen av en ny kontakt i telefonboken (Figur 3). Uppgiften utföres uppifrån och ner och slutar med att användaren registrerar informationen genom att trycka på knappen Register längst ner i förnstrets vänstra hörn. Användaren känner igen sig tack vare designmönstret som gör funktionen Figur 3. Telfonbok, Registrera ny person. användbar. Då användaren känner igen sig undviks frustration och uppgiften blir enkel att utföra. Interfaces should be designed to be simple, perceptually salient and elegant and to adhere to usability design principles, well-thought-out graphic design principles and ergonomic guidelines (e.g. Mullet and Sano, 1996) 6

Selection Selection låter användaren interagera med användargränssnittet genom att göra val från en lista. Exemplet från SwingSet2 Table Demo är en sk flat presentation där alla val visas på en gång. Användaren får en enkel översikt av de möjliga val hon eller han kan göra. Det är även en Singel selection där användaren endast kan markera ett val i listan. 5. I figur 4 specificerar användaren data med hjälp av drop down -menyn (5). Användargränssnittet vet i Figur 4. SwingSet, TableView. förväg vilka möjliga val användaren kan göra. Användaren behöver inte skriva in någon data, utan specificerar datan genom sitt val. Användaren tycker att det är lättare att välja data från en lista än att specificera den själv, vilket i sin tur gör det lätt för en nybörjare att guida sig själv genom användargränssnittet och göra val. Window Per Task Window Per Task innebär att användargränssnittet ska ha separata fönster för varje sammanhängande uppgift användaren ska utföra. All information som krävs för att utföra uppgiften ska finnas i fönstret. Användargränssnittet gör det möjligt att byta mellan olika fönster och på så vis koordinera arbetsuppgifter. Figur 5. SwingSet, TableView. Figur 5 visar ett exempel på Window Per Task. Under fliken Table Demo (6), kan användaren registrera personers intressen. Under fliken Source Code kan 6 7

användaren läsa applikationens källkod. Uppgifterna användaren utför under respektive flik är vitt skilda, det är därför rätt att dela upp dem i var sitt fönster enligt designmöstret Window Per Task. Fördelen med detta mönster är att användaren behöver bara koncentrera sig på ett fönster och när hon är klar med fönstret kan hon enkelt gå vidare. Ett annat exempel på designmönstret Window Per Task är implementerat i vår laboration 2, Telefonbok. Då användaren klickar på knappen ny öppnas ett nytt fönster med ett formulär där personuppgifter ska fyllas i. Då användaren trycker på knappen Register stängs fönstret och den nya kontakten presenteras i huvudfönstret. Många användare förväntar sig att program ska fungera på ett visst sätt. Det ska vara lätt att Figur 6. Telfonbok, Registrera ny person. förstå och lära sig använda det. Vi har lärt oss detta genom åren som MDA-studenter och även Preece med flera understryker hur viktigt det är sin bok Interaction Design (Preece, 2002). The way an interface is designed can greatly affect how well people can perceive, attend, learn and remember how to carry out their tasks. (Preece, 2002) 8

Övriga designmönster Interaction Style Detta mönster hjälper designern att välja det primära sätt på vilket användaren ska interagera med ett fönster. Interaction Style är ett meta-mönster som stödjer val av dominerande interaktionsstil enligt designmönstren Selection, Form, Direct Manipulation och Conversational Text. Explorable Interfaces Explorable Interfaces är ett designmönster som tillåter användaren att bli förlåten i sitt användande. Detta t.ex. genom att användaren ges möjligheten gå tillbaka till tidigare beslut eller ändra och göra om. T.ex. finns det i Microsoft Word en ångra-knapp (7) där användaren kan ångra en handling och nå ett tidigare stadium i arbetsprocessen. På engelska kallas funktionen undo. Figur 7. Microsoft Word 7. Conversational Text Designa ett användargränssnittet som accepterar kommandon i form av text. Detta mönster är inget vi har arbetat med, så vi har väldigt lite erfarenhet av det. Limited Selectio n Size Vid implementation av Selection, se till att undvika att inte visa mera än ett antal begränsade val för tillfället. Relaterade designmöster är Selection. Ephemeral Feedback Förser användare med återkoppling om statusen på deras arbete utan att störa användaren i det naturliga arbetsflödet. Exempel är en progress meter. 9

Disabled Irrelevant Things Disabled Irrelevant Things innebär att designern gömmer eller sätter element i användargränssnittet som inte är relavanta i det aktuella tillståndet ur funktion. Ett exempel på Disabled Irrelevant Things från laboration 2 ( Telefonboken ) visas i figur 8. Här syns en liten del av den tabbade panel som användaren använder för att bläddra bland kontakterna i telefonboken, sorterade på efternamn. Endast tabbar som innehåller kontakter är påkopplade (Eng. enabled). De tomma sidorna är ju inte intressanta och är därför frånkopplade (Eng. Disabled). På detta sätt har vi gjort applikationen mera lättanvänd. Step-by-Step Instructions Step-by-Step Instructions leder användaren genom uppgiften genom att användargränssnittet talar om för användaren hur denne ska utföra en uppgift, istället för att användaren talar om för användargränssnittet vad som ska utföras. Detta kan vara ett väldigt bra designmönster att använda då en användare t.ex. ska installera ett nytt program på sin dator. Fig. 8, Lab 2 Telefonboken Tomma tabbar är frånkopplade. Supplementary Window Detta designmönster är känt eftersom det brukar implementeras genom dialogfönster. Mönstret visar ett tilläggsfönster till huvudfönstret. Syftet med detta fönster är att visa användaren att t.ex. någonting är fel eller att man försöker öppna fil som inte finns. Dialogfönstret poppar då upp och informerar om vad som inträffat. Ett exempel på detta implementerade vi i vår applikation Telefonboken (laboration 2) se figur 9. Fig. 9, Exempel på Supplementary window från lab. 2 Telefonboken. 10

Metaforer Många av designmönstren bygger på att designern skapar metaforer av verkliga objekt (Preece, 2002, kapitel 2.4). Det kan vara metaforer i form av utseende eller egenskaper. Microsoft Windows är fullt av metaforer som representerar verkliga objekt. T.ex. papperskorgen, skribordet och dokument. Objekt representeras ofta genom ikoner som kan manipuleras. Metaforerna är mycket avändbara eftersom de hjälper användaren att orientera sig samt förstå och lära sig hur objekt ska användas. Ett exempel på hur metaforer kan hjälpa användare är vid utskrift av ett dokument. Genom att dra dokumentikonen (som representerar ett dokument) och släppa den på skrivarikonen (som representerar skrivaren) så skrivs dokumentet ut. Ett exempel på hur metaforer används i designmönster är designmönstret Form (Sv. Formulär). Designmönstret ger riktlinjer för hur användaren ska registrera strukturerad data som enskilda bitar av information i ett användargränssnitt. Här används formulärmetaforen för att användaren ska känna igen sig och förtså hur uppgiften ska lösas. Form innebär att textfälten i användargränssnittet utformas som ett formulär där användaren registrerar information. Reflektion på designmönster Designmönster är bra både för designern och för användaren. En designer som känner till designmönstren har nytta av detta i designen av grafiska användargränssnitt. Genom ha designmönstren i bakhuvudet, tänka tillbaka på dem och implementera så många som möjligt av dem i designen, så skapar designern mer användbara applikationer. För oss var det nytt att använda designmöster i applikationsdesign. Genom laborationerna har vi fått god förståelse för nyttan med designmönster. Det var en utmaning att i laboration två försöka implementera så många designmönster som möjligt. Vi ville ju skapa en så användbar prototyp som möjligt eftersom den skulle utvärderas av en annan laborationsgrupp (och oss själva) då den var klar. Vi tycker också att designmönstren har 11

gett oss en bättre bild av användare n och vad användaren förväntar sig av en applikation. Designmönstren skapar tillsammans en standard för användargränssnittsdesign. Ju fler designers som känner till och implementerar designmöntren, desto fler användare borde bli nöjda med deras applikationer. På så vis skapas fler användbara applikationer. 12

Källförteckning Robertson, James & Susanne: Volere Requirements Specification Template Edition 8. http://www.volere.co.uk. 2001. Larman, Craig. Applying UML And Patterns: An Introduction to Object-Oriented Analysis and Design. Prentice Hall. 1998. Kyhlbäck, Hans. Föreläsning i HCI på BHT: MDI och Standard, krav och testning Blekinge Tekniska Högskola. Den 21 november 2002. Grand, Mark. Patters in Java: Volume 2. Wiley. 1999 Preece, Rogers, Sharp. Interaction Design Beyond human-computer interaction. Wiley 2002. 13