TENTAMEN: Design och konstruktion av grafiska gränssnitt DAT215

Transkript

1 TENTAMEN: Design och konstruktion av grafiska gränssnitt DAT215 DAG: 14 mars, 2011 TID: SAL: Hörsalsvägen Ansvarig: Olof Torgersson, tel Institutionen för tillämpad informationsteknologi. Resultat: Anslås senast 31 mars, 2011 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!

2 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) Posture Self-referential design Represented model Visual flow (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. 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

3 Figur 2: Använder Google Earth några mönster? Figur 3: Vilka mönster finns i gränssnittet? 2

4 Uppgift 3: IT-företaget DAT215 utvecklar Java-program. Idag använder företaget utvecklingsmiljön NetBeans när de utvecklar. Utvecklarna är dock inte alls nöjda med NetBeans och DAT215 har bestämt sig för att utveckla sin egen utvecklingsmiljö, både för att använda inom företaget och för att kunna sälja vidare. Hittills har en av företagets programmerare suttit och skissat på olika designförslag men de är inte alls bra och du har nu kallats in för att kunna tillföra lite nya idéer till projektet. De första sakerna att titta på är programmets hantering av inställningar och dess menysystem. En av de skärmar som programmeraren har skissat på är den inställningsvy som finns i figur 4. Denna vy har dock sina brister och DAT215 vill att du ska förbättra den. Ge dem en skiss på en ny vy med samma funktionalitet som den gamla, du måste dock ändra på hur valen organiseras och presenteras. För full poäng krävs att eventuella designmönster som återfinns i den nya designen identifieras och pekas ut. (8p) Figur 4: Inställningspanel som behöver designas om DAT215 har lyckats identifiera vilka funktioner som ska finnas i programmets menyer, men de har ingen aning om hur de ska grupperas och behöver din hjälp. De har inte heller någon direkt koll på vad som ska stå på menyerna eller andra saker man bör tänka på som kortkommandon. Här är listan med menyval i bokstavsordning (observera att vissa har en parantes och i den står den engelska motsvarigheten): 3

5 Autoindrag (auto indent) Autokomplettera kod Avsluta programmet Bygg aktuellt projekt Ersätt Generera getters Generera setters Genererera javadoc Gör om (redo) Klippa ut Klistra in Kopiera Kör aktuellt projekt Ordna importer (fix imports) Skapa en ny fil Skapa ett nytt projekt Spara aktuellt dokument Stäng aktuellt objekt Sök Visa i designläge Visa i kodläge Visa programmets hjälpfönster Visa programmets om-dialog Visa radnummer Ångra senaste handling Öppna en fil Öppna ett projekt 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. (7p) Uppgift 4: 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 vad Cooper menar med Flow i GUI-sammanhang. Nämn något man bör tänka på vid design och ge 2 exempel på designmönster i Tidwell som kan bidra till ökad flow i program. För full poäng krävs en motivering till varför designmönstren är relevanta och att de går att koppla till Coopers principer för flow. (6p) 4

6 Uppgift 5: 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) (d) (15) one-window drilldown (63) cascading lists (35) card stack (21) clear entry points (8p) Uppgift 6: 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) Uppgift 7: Designa användargränssnittet till ett litet program, Bildfixaren, som kan användas för att redigera en godtycklig mängd bilder på samma sätt. Svara med ett antal skisser som visar programmets design och förklarande kommentarer där det behövs. Med Bildfixaren ska användaren kunna: Välja vilka bilder som ska redigeras. Välja hur de valda bilderna ska redigeras. Genomföra redigeringarna Nedan följer en lista med de transformationer Bildfixaren tillåter användaren att göra på en mängd valda bilder och vilka inparametrar dessa tar. (1) Skala bilder: När man ska skala sina bilder ska användaren kunna välja om bilderna ska skalas relativt (med en procentsats) eller absolut (genom att man matar in en ny bredd och en ny höjd). (2) Komprimering: Om bilderna ska komprimeras ska ett tal mellan 0 och 10 specificeras. Där 10 i det här fallet betyder att bilderna inte kommer komprimeras någonting och 0 att de kommer komprimeras så mycket som möjligt. (3) Skapa svartvita bilder: Detta val tar inga inparametrar. 5

7 (4) Rotera: Man kan rotera bilderna 90 grader med- eller moturs, eller 180 grader (5) Spegelvända: Man kan spegelvända bilderna antingen horisontellt eller vertikalt. (6) Kontrast: Användaren kan välja att antingen minska eller öka kontrasten. De nuvarande bilderna har noll i kontrast, och användaren kan ange ett nytt värde mellan -100 och 100. Om du väljer att låta användaren välja filer med hjälp av standard öppnadialogrutan så behöver du inte visa hur den ser ut utan det räcker att det går att komma åt den via GUI:t. Du behöver inte heller bry dig om namngivningen av filerna som genereras För att få upp till 4 poäng så räcker det att ditt GUI klarar av grundproblematiken, men för att få maxpoäng så måste du analysera målanvändarna och ta med funktionalitet som inte explicit står i uppgiften och motivera den. Användare att designa mot Bengt är en amatörfotograf som har behov av att kunna göra lite enklare efterredigeringar. T.ex. så händer det att han märker att han haft lite fel inställning på sin kamera och skulle behöva öka kontrasten något. Ibland händer det också att en grupp bilder han har tagit tar alldeles för stor plats och att han skulle behöva komprimera dem från till exempel 100 till 50 MB. Anna använder Bildfixaren professionellt i sitt jobb som administratör för en webbsida. Hon använder programmet ett par gånger per dag och hon har en del olika standardredigeringar som hon utför ganska ofta, t.ex. så genererar hon svartvita thumbnails med samma storlek ett par gånger i veckan. (9p) 6