TENTAMEN: Design och konstruktion av grafiska gränssnitt DAT215 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)!! 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 Serif och Sans serif Mental models Preattentive variable (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. 1
Uppgift 3: Betrakta användargränssnitten i figur 1, 2 och 3. 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. Figur 1: Vilka mönster finns i kontakthanteraren? 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) (b) (c) Förklara vad en cognitive walkthrough är, hur den genomförs och i vilka sammanhang metoden är användbar. 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. 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. 2
Figur 2: Finns det några mönster i Windows-installationen? Figur 3: Vilka mönster finns i gränssnittet? 3
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 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. (8p) 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 (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 4, mest designat genom att sammanfoga olika element från inställningspanelerna i Safari och Firefox så det finns en del att göra. Skapa en ny design med samma funktioner som i figur 4. 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. (8p) 4
Figur 4: Inställningspanel som behöver designas om 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 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. 5