TENTAMEN: Design och konstruktion av grafiska gränssnitt DAT215 - lösningsförslag DAG: 8 mars, 2010 TID: 8.30 12.30 SAL: V-huset Ansvarig: Olof Torgersson, tel. 772 54 06. Institutionen för data- och informationsteknik. Resultat: Anslås senast 24 mars, 2010 Hjälpmedel: 1 A4 (2 sidor) med valfria anteckningar. Texten skall vara läsbar utan hjälpmedel. Betygsgränser: 3:a 24p, 4:a 36p, 5:a 48p, maximalt 60p. Iakttag följande: Skriv tydligt (oläsligt = fel)!! item Uppgifterna är inte ordnade efter svårighetsgrad. Börja varje ny (del)uppgift på ett nytt blad. Läs igenom hela tentan och förbered eventuella frågor. Alla svar skall motiveras väl och ej vara onödigt komplicerade! LYCKA TILL!
Uppgift 1: Förklara följande begrepp och försök också för varje begrepp förklara vilken inverkan det har på gränssnittsdesign, dvs saker man bör tänka på. (a) (b) (c) (d) Affordance Ett objekts affordance kan sägas vara vad ett objekt utstrålar att man kan göra med det, eller vilka handlingar det inbjuder till. Affordance uppfattas direkt av hjärnan utan medvetet tankearbete. T ex så har ett glas en affordance är att dricka ur det, en boll har affordance att kasta, en trappa inbjuder till att gå upp/ner osv. Affordance är en egenskap som är inbyggd i objektet och finns vare sig nån tittar på det eller inte. Vid GUI-design är det viktigt att objekt i gränssnittet har en affordance som visar vad det ska användas till. En knapp t ex inbjuder till att trycka, dess affordance är att man ska trycka på den, en sliders affordance är att dra. Problem uppkommer om objekt har affordance/inbjuder till något som man inte kan göra, eller om det finns saker man kan göra, men ingen affordance som inbjuder till att man kan göra det. Serif och Sans serif Serif och Sans serif betecknar 2 olika familjer/kategorier av typsnitt. Seriftypsnitt har små krokar på bokstäverna som sans-serif saknar. Vanligtvis anses fonter med serifer enklare att läsa i stora textmassor då krokarna bidrar till att skapa en bild eller ett flöde som gör texten lättare att uppfatta. Vid design av grafiska gränssnitt bör man dock tänka på att undvika att använda serifer i små storlekar då de små krokarna inte kan återges bra med den begränsade upplösning som en skärma har. Mental models Begreppet mental model eller conceptual model syftar i detta sammanhang på den bild användaren har av hur ett program fungerar. Detta inkluderar även hur man tänker om den domän programmet berör. Vid design bör man tänka på att designa programmet så det som visas (presented model) ligger så när användarens sätt att tänka som möjligt. Om man inte gör det blir programmet vanligen onödigt svårt och krångligt att förstå. Preattentive variable Med preattentive variables menas visuella saker/fenomen som uppfattas direkt av vårt perceptionssystem utan medvetet tänkande. Exempel på detta är färg, form, storlek, positionering och orientering. Vid GUI-design är det bra att känna till dessa begrepp så att man kan dra nytta av dem t ex för att direkt dra användarens uppmärksamhet till ett objekt som har en avvikande färg, eller göra saker viktigare genom att låta dem vara större. Eftersom dessa variabler uppfattas direkt utan medvetet processande så 1
kan man också bespara användarna mentalt arbete genom att utnyttja preattentive variables. (8p) Uppgift 2: Du har fått till uppgift att designa meny-systemet till en enkel HTML-editor som ditt företag tänker distribuera gratis för att få fler kunder till sina riktiga produkter. Efter diverse funderingar har kravspecifikationen fastställts till att omfatta följande funktioner (ordnade i bokstavsordning): Avsluta programmet Gömma verktygsfältet Göra aktuell text till fetstil Göra aktuell text till kursiv stil Infoga tagg Klippa ut Klistra in Kopiera Lägga till en bild Lägga till en tabell Minska textstorleken Skapa ett nytt (HTML-)dokument Spara aktuellt dokument Spara aktuellt dokument under ett nytt namn Skriva ut aktuellt dokument Stänga aktuellt dokument Ångra senaste handling Visa dokumentet som kod Visa dokumentet i designläge Visa programmets hjälpfönster Visa programmets om-dialog Visa verktygsfältet Öppna ett existerande dokument Öka textstorleken Skapa ett menysystem med de givna funktionerna. Designen skall följa rådande konventioner för hur menyer utformas. Om andra konventioner än Coopers används så skall detta anges i svaret. Se figur 1, 2 och 3. Kommentar: bilderna är gjorda på en Mac. På Windows/Linux används CTRL för kortkommandon. I menyalternativet Öka storlek borde + vara ett bättre tecken än det som används nu. (7p) 2
Figur 1: Svar uppgift 2 - Huvudmeny Figur 2: Svar uppgift 2 - Arkiv, Redigera och Visa Uppgift 3: Betrakta användargränssnitten i figur 4, 5 och 6. Uppgiften är att identifera designmönster som används. Det går att hitta minst 10 användningar av designmönster från Tidwell i de givna skärmbilderna. Svara genom att skissa av bilderna och peka ut var ett designmönster används och vilket det är. Observera att det inte måste vara så att 10 olika designmönster finns utan ett och samma mönster kan återkomma flera gånger. Det kan dock också vara så att man kan hitta 10 olika designmönster. Det går att hitta många mönster, en del mer långsökta än andra. Nedan följer en uppräkning på ett tillräckligt antal ganska självklara mönster. I figur 4 kan man minst hitta Two-panel selector Right/left alignment Button groups I figur 5 kan man minst hitta Structured format Sequence map Button groups Progress indicator I figur 6 kan man minst hitta Center stage Input prompt Illustrated choices 3
Figur 3: Svar uppgift 2 - Infoga, Format och Hjälp Titled sections Closable panels Action panel Andra rimliga mönster godkänns. Svar utan skiss ger inte full poäng. Figur 4: Vilka mönster finns i kontakthanteraren? (7p) Uppgift 4: Utvecklarna av imat, DAT215 AB, har funderat mycket på hur de ska kunna förstå om deras design verkligen är rätt för användarna. Efter mycket funderande har de bestämt sig för att (i) göra en test med cognitive walkthrough av imatprototypen, (ii) göra en kontrollerad laboratoriestudie för att testa fontstorlek och bakgrundsfärg och (iii) göra något efter att applikationen släppts för att kolla upp hur det funkar. Hjälp DAT215 AB genom att (a) Förklara vad en cognitive walkthrough är, hur den genomförs och i vilka sammanhang metoden är användbar. 4
Figur 5: Finns det några mönster i Windows-installationen? Figur 6: Vilka mönster finns i gränssnittet? 5
(b) Cognitive walkthrough är en expertutvärderingsmetod för gränssnitt. Med detta menas att utvärdering utförs av experter utan inblandning av faktiska användare. Namnet kommer från att man går igenom ett användargränssnitt steg för steg och testar hur det fungerar. Metoden kräver att det finns någon slags prototyp att testa på. Detta innebär att den är användbar under hela utvecklingsprocessen så fort man kommit så långt att det finns något man kan testa. Huvudinriktningen på metoden kan sägas vara att undersöka om man kan lära sig att använda ett program genom att utforska det. För att göra en cognitive walkthrough behövs: Någon slags prototyp En beskriving av uppgifterna testaren ska utföra En fullständig lista av de steg som krävs för att utföra varje uppgift. I denna anges dels vad användaren gör och vad systemet svarar Info om vilka användarna är och vad testarna kan anta att de kan För varje uppgift går man sedan igenom listan av steg som måste göras och svarar för vart och ett på följande 4 frågor: Motsvarar handlingen användarens mål i den givna situationen? Kommer användarna att se att handlingen som ska utföras finns tillgänglig? När användaren hittat rätt handling, kommer de att veta att det är den de behöver? När handligen utförts kommer användaren förstå den feedback som ges? Det är viktigt att genomgången stöds av ett formulär och att resultaten granskas ordentligt. Redogöra för hur man kan designa ett experiment för att testa om svart text på vit bakgrund är bättre än blå text på orange bakgrund. Redogörelsen bör innefatta begrepp som hypotes, deltagare, variabler och experimentdesign. Svaret nedan bygger på antagandet att med bättre menas funktionellt bättre inte vilket användarna tycker är snyggast. Tester av denna kan göras med ett sk controlled experiment (9.4.2). I denna typ av tester skapar man ett experiment utifrån vilket man hoppas kunna fastställa statistiskt att något gäller. Det man vill visa kallas för hypotes. I detta fall är den rimliga hypotesen att svart text på vit bakgrund fungerar bättre än blå text på orange bakgrund (baserat på hur vår perception fungerar). Hypotesen testas genom att ett antal försökspersoner, deltagare, utför en given uppgift och att resultaten från detta analyseras. För att utföra experimentet skapar man 2 designer där allt är likadant förutom färgen på texten. Det kan t ex vara ett antal sidor med text att läsa. 6
(c) Vid utformning av experiment talar man om dependent (beroende) och independent (oberoende) variabler. En oberoende variabel är något man ändrar för att skapa olika betingelser. I detta fall färg och bakgrund på texten. Beroende variabler är det man mäter i experimentet, det man vill se hur det ändras när oberoende variabler justeras. I detta fall vill man mäta hur bra man läser texten. Det kan då vara lämpligt att mäta t ex hastighet och/eller antal fel. Slutligen behövs en experimentdesign. Det finns två huvudtyper within groups design och between groups design. I en within groups design utför alla deltagare experimentet under samtliga villkor, i detta fall testar båda färguppsättningarna. I en between groups design testar olika grupperna de olika varianterna. I båda fallen behövs minst 10 testare för varje fall. Problemet med en within groups design är att man kan ha problem med inlärning som påverkar resultatet. Problemet med en between groups design är att man behöver fler deltagare och att man kan ha problem med att man inte vet hur lika deltagarna i olika grupper är. När man låtit alla deltagare utföra testerna och samlat in data måste den analyseras. Man kan då t ex titta på om det går att hitta en statistiskt säker skillnad på tiden det tar att läsa text med de olika färguppsättningarna. Föreslå, namnge och beskriv 2 olika metoder som kan användas för att utvärdera imat ned hjälp av verkliga användare efter att programmet släppts på marknaden. Eftersom det handlar om att utvärdera imat efter med riktiga användare efter att det släppts på marknaden är det olika former av fältstudier som är aktuella. En ofta använd metod är Think-aloud. I denna får användaren att utföra olika uppgifter i programmet. Man ber sedan användaren att tänka högt under utförandet, beskriva vad man gör och varför etc. Testaren ska bara observera och anteckna vad som sker. Metoden är enkel och kan ge värdefulla insikter om programmet. Den är dock subjektiv och det kan också vara så att själva beskrivandet påverkar hur man faktiskt gör saker. En annan metod kan vara någon slags frågeteknik, dvs intervjuer eller frågeformulär. Vid intervjuer är det viktigt att man har planerat frågor i förväg så att det finns en tanke och struktur i intervjuerna. Ofta använder man sk semi-structured interviews där man har ett antal förbestämda frågor, men också möjlighet att följa upp med följdfrågor och sidospår om intressanta saker dyker upp. Fördelen med intervjuer (jämfört med enkäter) är att de kan anpassas till situationen och ger möjlighet att utforska frågor på djupet. Nackdelar är att det är subjektivt och tidskrävande. Andra metoder som tas upp i den utdelade texten om evaluering och passar i situationen är förstås giltiga svar. (7p) Uppgift 5: Cooper talar om Flow och Excise. Förklara dessa begrepp och ge minst 3 exempel på vad man kan göra för att underlätta flow och 3 exempel på vad 7
man kan göra för att undvika excise. För full poäng krävs att exemplen förklaras i viss utsträckning, det räcker inte att bara nämna ett problem eller en lösning. För full poäng bör svaret bygga på innehållet i Coopers text och inte vara fria reflektioner med anknytning till begreppen. Flow och excise är två begrepp med klar koppling till varandra som båda handlar om att program ska vara smidiga och enkla att använda utan onödigt krångel. Med flow avses att tillstånd av avskärming och produktivitet där man är väldigt inne i det man gör, helt fokuserad och inte speciellt medveten om omgivningen. Detta tillstånd kan uppnås då man jobbar med väldesignade program. Det är dock lätt att få användaren att komma ur sitt flow med störande moment i interaktionen mellan program och användare. Två viktiga grundpelare för flow är less is more och transparens. Med de första menas ju mindre desto bättre och med det senare att programmet i sig inte ska ta upp uppmärksamhet utan denna ska kunna ägnas åt det man håller på med. Cooper presenterar sedan ett antal riktlinjer för att förbättra flow t ex Follow users mental models - för att kunna designa för användarna måste man förstå hur de tänker Keep tools close at hand - ha det man behöver lätt åtkomligt i verktygsfält och paneler, måste man börja leta bryts flow Design for the probable; provide for the possible - designa för de vanliga användningsfallen, skilj på vad som är möjligt och troligt och designa efter det. Med excise avses att program beskattar sina användare med kognitiv (psykisk) eller fysisk ansträngning varje gång de används (själva ordet excise kan är ett ord för vissa typer av skatt). Excsise är saker användaren måste göra för att uppnå sitt mål, men som egentligen inte bidrar till det. Man måste göra saker för programmets skull inte för sin egen. Cooper gör också en skillnad på pure excise, dvs saker man måste göra som ingen någonsin behöver och saker som är excise för vissa användare men inte för andra. Som exempel på excise kan nämnas Visual excise - att gränssnittet är så visuellt belamrat att det krävs en massa arbte för användaren att hitta och förstå vad man ska göra Navigation - i alla fall där man kan undvika att navigera till ett ny fönster eller en ny dialog så är navigation excise. Cooper ger sedan riktlinjer för hur navigation kan förbättras Stopping the proceedings - se till att det inte finns onödiga eller dåligt designade dialoger som poppar upp och tvingar användaren till att avbryta det man gör (8p) 8
Uppgift 6: Beskriv nedanstående designmönster för grafiska gränssnitt. Beskrivningen bör följa modellen, vad, när, hur och varför, men det är inte ett absolut krav. Illustrera varje exempel med en representativ skiss som visar exemplet i användning. (a) (b) (c) (d) (71) input hints (63) cascading lists (45) action panel (22) global navigation Se Tidwell eller föreläsningsanteckningar. En mängd text motsvarande den på föreläsningsanteckningar är ok. Lösningar utan skiss ger inte full poäng. (8p) Uppgift 7: Du har engagerat dig i utvecklingen av en ny open-source browser med fokus på dess användargränssnitt. Genom diskussion med andra medlemmar i projektet har du kommit fram till att ditt första bidrag får bli att förbättra gränssnittet för programmets panel med olika inställningar. Tyvärr har den tidigare utvecklaren av gränssnittet, se figur 7, mest designat genom att sammanfoga olika element från inställningspanelerna i Safari och Firefox så det finns en del att göra. Figur 7: Inställningspanel som behöver designas om 9
Skapa en ny design med samma funktioner som i figur 7. Alla funktioner ska finnas med, men de kan organiseras och presenteras på valfritt sätt. För full poäng krävs att eventuella designmönster som återfinns i den nya designen identifieras och pekas ut. Tips: ta inte den gamla designen som utgångspunkt utan försök göra en ny som är bättre med samma funktionalitet. Se figur 8, 9, 10 och 11. Det finns naturligtvis ett oändligt antal möjliga svar. För full poäng krävs dock att man delat upp inställningarna på flera paneler och att lämpliga kontroller används. Kontrollerna bör också vara prydligt organiserade. Det är exempelvis inte bra med ett textfält där man skriver ja/nej som i ursprungsdesignens design för om programmet alltid ska fråga var filer sparas. Några designmönster som används är card stack, titled sections, right/left alignment och fill-in-the-blanks. Figur 8: Svar uppgift 7 - Allmänna inställningar (8p) Uppgift 8: Designa användargränssnittet till en personlig reseplanerare. Den personliga reseplaneraren skall vara riktad mot affärsresenärer som vill ha ett enkelt och effektivt sätt att sköta sin reseplanering från en applikation istället för att leta runt på olika sajter efter buss, flyg, hotell osv. Reseplaneraren måste minst kunna göra följande Låta användaren ange dag och tid för resa Låta användaren påverka om resan ska ske med buss/tåg/flyg Låta användaren välja mellan alternativ reseplaneraren föreslår Låta användaren välja hotell och hur länge man vill stanna 10
Figur 9: Svar uppgift 7 - Innehåll Komma ihåg all information om användaren mellan körningar Låta användaren redigera informationen om sig själv. Programmet skall designas som en liten desktop-applikation med transient posture. Svara med ett antal skisser som visar applikationens design och förklarande kommentarer där det behövs. För full poäng krävs att designmönster som används identifieras. (7p) 11
Figur 10: Svar uppgift 7 - Inställningar för flikar Figur 11: Svar uppgift 7 - Inställningar för säkerhet 12