Göm menyn

TDDD60 Interaktiva System

Uppgift 2 Del B Detaljfas: Prototyp


I denna deluppgift ska ni levandegöra gränssnittsflödet genom att implementera det i en prototyp. Notera att prototypen behöver vara färdig till lektionstillfället i Uppgift 2 C (pilottest), se Schema och Deadlines.

Förberedelser

  1. Läs på om uppgifter för användartest s 212-213.
  2. Titta på introduktionen till Figma som finns i kursens Lisam-rum och kör länkade tutorials.
    Tips: om ni googlar andra tutorials eller tips, kolla om funktionerna som används är avgiftsbelagda innan ni tittar på dem. Kolla också vilken version av Figma som används, en stor uppdatering gjordes i maj 2025.
  3. Om du inte redan gjort det, läs introduktionen till GenderMag och studera personorna Abi och Tim

Instruktioner

  1. (I grupp) I FigJam, skissa upp olika variationer på interaktionselement (knappar, menyer, informationsfält, layouter osv) och diskutera hur de ska vara för att motsvara ert slutliga gränssnittsflöde. Ta hänsyn till storlek på detaljer och träffytor mm så att även en person med defekt syn och motorik kan hantera ert system utan problem.
  2. (I grupp) I Figjam, utforska några olika färgscheman och välj ett som fungerar bra med er grafiska profil och som har tillräcklig kontrast så att även en synskadad person kan urskilja detaljer. Välj ett.
  3. Gör mallar för skärmar och interaktionselement som behövs i ert gränssnittsflöde från det ni valde ovan.
  4. (I grupp) Gör uppgifter för användartest (testuppgifter) av era användningsuppgifter och storyboard från Uppgift 1 så att ni vet vilka data som ska visas i er prototyp.
  5. (I grupp) Dela upp ert gränssnittsflöde i lika många delar som gruppmedlemmar, notera att varje gruppmedlem ska implementera minst en egen skärm.
  6. (Individuellt med avstämningar i grupp) Implementera din del av gränssnittsflödet i Figma. För varje skärm du skapar, pröva minst två olika varianter och värdera dem med plus-minus-listor. Alternativt, dela upp funktionalitet mellan olika skärmar och värdera. Ta hänsyn både till allmänna gränssnittsdesign-principer och er grafiska profil.
    Tips 1: Stäm av ofta så att allt passar och fungerar ihop. Notera om ni har likadana element på era skärmar och använd då samma komponent i den utsträckning det är praktiskt.
    Tips 2: Tänk på att det är en prototyp ni implementerar, inte det slutliga systemet: fejka (hårdkoda) så att den fungerar med just era testuppgifter (man ska t.ex. inte kunna söka på något annat än det som sägs i testuppgiften).
    Tips 3: En nackdel med att använda Figmas AIgenereringsverktyg är att den prototyp som genereras är mycket svår att redigera när man väl får slut på prompter. Ni kommer att behöva redigera den för att åtgärda de problem ni upptäcker i användartestet.

Redovisning

Redovisningen för denna uppgift består av en individuell inlämning. Gör skärmdumpar av de skärmar och komponenter i prototypen som du utvecklat och skapa ett dokument med följande innehåll:

  1. En beskrivninv av användningsuppgiften illustrerad med de valda skärmarna och förklaring av hur man kommer mellan dem. Var noga med att ge bilderna figurnummer och använd dem då skärmen diskuteras. Lägg också figurerna så nära i texten som möjligt.
  2. En kort text (max 200 ord) där du presenterar de alternativa skärmar du gjort, värderingen av dem och motiverar värderingen av alternativen för respektive skärm (använd figurummer och referenser till designprinciper).
  3. En kort text (max 200 ord) om hur du tagit hänsyn till personer med olika problemlösningsstrategi och olika informationsbehov (jfr GenderMags personor Tim och Abi) i din design.
Spara dokumentet i pdf-format och ge filen namnet liuID_Prototyp.pdf där du byter liuID mot ditt eget liuID. Se till att bilderna får tillräcklig upplösning för att tydas men max filstorlek är 2GB. Lämna in dokumentetl i Lisam, inlämningen "Uppgift 1B".

Denna individuella inlämning bedöms på en skala från 1-3 enligt följande kriterier:

  1. Visad förmåga till variation i detaljdesign.
  2. Visad förståelse av gränssnittsdesignprinciper.
  3. Visad förståelse för användare med olika informationsbehov.


Sidansvarig: Eva L. Ragnemalm
Senast uppdaterad: 2026-01-15