TENTAMEN: Design och konstruktion av grafiska gränssnitt DAT215/TIG091 DAG: 5 mars, 2012 TID: 8.30 12.30 SAL: Hörsalsvägen Ansvarig: Olof Torgersson, tel. 772 54 06. Institutionen för tillämpad informationsteknologi. Resultat: Anslås senast 23 mars, 2012 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å. (c) (d) Affordance Deferred Choices Excise Visual Hierarchy (8p) Uppgift 2: 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. I varje figur kan man dock inte få poäng för att peka ut samma designmönster mer än 2 gånger. Avdrag görs för felaktigt utsatta mönster enligt skalan 2-3 fel -1 p, 4-5 fel -2p osv. (7p) Figur 1: Vilka mönster finns i dialogen? 1
Figur 2: Använder itunes några mönster? Figur 3: Vilka mönster finns i gränssnittet? 2
Uppgift 3: Du har fått till uppgift att designa meny-systemet till en slimmad webbläsare som är tänkt för personer som föredrar enkelhet framför features. Efter diverse funderingar har kravspecifikationen fastställts till att omfatta följande funktioner (ordnade i bokstavsordning): Avsluta programmet Gå framåt Gå till föregående sida Gå till startsida Klipp ut Klistra in Kopiera Lägg till bokmärke för aktuell sida Rensa historiken Skapa en ny flik Skriv ut nuvarande sida Stäng aktuell flik Stäng aktuellt fönster Visa all historik Visa alla bokmärken Visa källkod för aktuell sida Visa nedladdade filer Visa programmets hjälpfönster Visa programmets om-dialog Visa senaste bokmärken Visa verktygsfält Välj föregående flik Välj nästa flik Zooma ut sidan som visas Zooma in sidan som visas Ångra senaste handling Öppna ett nytt fönster 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. (8p) 3
Uppgift 4: DAT215 AB har släppt den första versionen av imat på marknaden men har problem med negativ feedback från användare som inte alls är nöjda med vissa delar av programmet. Främst är det själva utcheckningen man har problem med. Att välja varor går bra, men när det är dags att betala, välja när och hur varornas ska levereras osv så blir användarna förvirrade. Hur fönstret för att genomföra ett köp ser ut visas i figur 4. Figur 4: Mindre optimalt fönster för att genomföra ett köp 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
Uppgift 5: Välj en av uppgifterna a och b och besvara den. Observera att det inte är tillåtet att lämna in svar på båda uppgifterna. Detta ger 0 poäng. Ge en kort (max 1 sida) beskrivning av det grafiska gränssnittets historia. Nämn viktiga milstolpar och varför de haft betydelse för utvecklingen. Förklara begreppet Persona och hur det används i GUI-sammanhang. För full poäng krävs exempel från Cooper på vad en persona kan användas till under designprocessen. (6p) 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 mönstret i användning. (c) Fill-in-the-Blanks Cascading Lists Module Tabs (6p) Uppgift 7: Metoder för utvärdering av gränssnitt kan grovt delas in i två olika huvudgrupper efter vilka som deltar i utvärderingsarbetet. Beroende på de förutsättningar man har får man försöka välja den mest lämpliga metoden i varje specifik situation. Beskriv vilka de två huvudkategorierna är samt när det kan vara lämpligt att välja en metod ur den ena eller andra kategorin. Ge en detaljerad beskrivning av en metod ur varje kategori. Beskrivningen ska innehålla namn på metoden, till vilken huvudkategori den hör samt hur den genomförs. Nämn något om i vilka slags situationer eller vilken del av utvecklingsprocessen metoderna är lämpliga. Förslag på metoder som inte återfinns i kursmaterialet ger inga poäng. (7p) 5
Uppgift 8: Efter framgången med imat satsar DAT215 nu på sin nya produkt, programmet ihyr, där barnfamiljer kan hyra sådant de kan behöva till sina barn. Dessutom kan användare av programmet lägga upp egna saker de inte behöver för uthyrning till andra. Efter mycket funderande har man kommit fram till följande kategorier av produkter som skall finnas i ihyr: Barnkläder Leksaker Cyklar Husdjur I gruppen husdjur har man också definierat följande underkategorier Marsvin Hamstrar Papegojor Undulater Kaniner Ödlor Din uppgift är nu att designa det grafiska gränssnittet till ihyr. Förutom att hitta det objekt man vill hyra ska man kunna Söka efter saker att hyra Få veta vad det kostar Kunna se när objektet är ledigt Få veta minsta och längsta hyrtid (0-24 månader) Se en bild på det man vill hyra Kunna läsa en kortfattad beskrivning av objektet Om man beslutar sig för att hyra ett objekt ska man kunna ange sina uppgifter, dvs minst namn, adress, telefon och kontokortsdetaljer. Det ska också gå att spara dessa uppgifter så man inte behöver ange dem varje gång. När man lägger upp ett objekt för uthyrning måste man ange all den information som visas då man tittar på ett objekt. Då man hyr ett objekt skall det visas en bekräftelse med lämplig information. Svara med ett antal skisser som visar applikationens design och förklaringar där det behövs. Du behöver inte designa för alla kategorier, men man måste kunna hyra kaninen Pelle samt förstå hur det skulle fungera att hyra andra objekt. Du skall också motivera din design. Detta innefattar att förklara lite varför det ser ut som det gör, samt peka ut de designmönster som används och varför. En lösning utan motivering kan ge maximalt 6 poäng. (10p) 6