Göm menyn

729G44 Gränssnittsdesign

Uppgift 3 Prototyp: Visuell utformning och tänka-högt-protokoll

Uppgiften examinerar att studenten kan motivera gränssnittsdesign och göra prototypning av gränssnitt och kvalitativa användbarhetstest; särskilt:

  • Beskriva och motivera gränssnittsdesign i termer av gränssnittsriktlinjer och designmönster.
  • Använda enklare prototypningsverktyg för att konstruera datorbaserade gränssnittsprototyper
  • Planera, utföra och rapportera kvalitativa och formativa användbarhetstest.

Steg för steg

  1. Arbeta vidare på den design du skissat fram i INL2 genom med fokus på den visuella utformningen,
  2. Rita upp gränssnittet i ett ritverktyg. Vissa av nedanstående gränssnittsprototypningsverktyg har också bra ritverktyg, men inte alla. Andra vanliga verktyg för att rita gränssnitt är Sketch (för Mac) och Photoshop. Men även OmniGraffle och LucidChart är vanliga.
  3. Motivera designbeslut med explicita referenser till riktlinjer från kapitel 5, 7 och 11 Tidwell (2011), samt eventuellt kapitel 5 i Arvola (2014).
  4. Bygg en interaktiv datorprototyp (se kapitel 5 i Arvola (2014) eller kapitel 11 i Preece, m.fl.(2016)) i Axure, Atomic, eller Adobe Experience Design CC. Du kan välja ett annat prototypningsverktyg om du behöver det för att stödja den typer av interaktioner som du vill testa och demonstrera. Om du använder Atomic så ska du tala om det för kursansvarig lärare så att du kan få testkontot utökat. Axure har studentlicenser och det finns installerat i PC-PUL.
  5. Testa prototypen med två användare i ett tänka-högt-test (kapitel 4 i Arvola (2014); kapitel 7, 13-14 i Preece m.fl. (2016)).
  6. Skriv en kort rapport på användartestet (max 2500 ord exklusive bilagor) med referenslista och lägg en beskrivning av prototypen som bilaga (med skärmbilder och referenser till principer och designmönster). Utgå från denna mall, för att få en bild om hur du presenterar metod/procedur och resultat, men anpassa den efter egna behov (ta t.ex. bort deras logotyper och liknande, och lägg till referenslista och bilaga med prototypbeskrivning).

Bedömning

För G-nivå ska du:

  • Skriftligen i en rapport redogöra för ett tänka-högt-test av din prototyp med två användare
  • Skriftligen i en bilaga till rapporten redovisa prototypen med skärmbilder
  • Skriftligen i en bilaga till testrapporten redogöra för hur du tillämpar och överväger grundläggande principer och designmönster i den visuella utformningen av ditt användargränssnitt
  • Muntligen demonstrera hur du använder verktyg för att konstruera en enkel datorbaserad gränssnittsprototyp som sträcker sig över åtminstone 10 skärmbilder/tillstånd
  • Referera tydligt och korrekt till Tidwell (2011) samt Arvola (2014) eller Preece m.fl. (2016), så att det tydlig framgår att du läst och förstått den litteratur som anvisas i denna uppgift. Referenser ska skrivas i enlighet med AOPA-systemet men inkludera sidhänvisning vid varje referens i brödtexten.

För VG-nivå ska den skriftliga rapporten därutöver:

  • Ha välmotiverade val av designmönster,
  • Redogöra för en välutvecklad prototyp i termer av funktionalitet, interaktion, informationsinnehåll och visuella utformning som sträcker sig åtminstone över 20 skärmbilder/tillstånd.

  • Vara välskriven.

Omfattning och redovisning

Tidsbudgetera och lägg in 60 arbetstimmar inklusive rapportskrivning och läsning i din kalender under vecka 43-45 (inklusive schemalagd tid). Demo-session på prototyperna är kort: fem minuter per person.

Inlämnad fil ska ha filnamn enligt följande format: liu-ID_inl3_729G44. Filformat kan vara doc, docx, rtf, eller pdf.

Deadline: Rapport skickas in senast 10/11 (kl. 17:15) via matar63.liu snabel-a analys.urkund.se. Prototyp demonstreras vid anvisad session vecka 45.

Återkopplingsformer: Skriftligen på rapport och muntligen på demo av prototyp.

Undervisningstillfällen

Då slides från föreläsningar uppdateras till årets kursomgång markeras det med ordet "Ny".

Informationsgrafik och visuell utformning
Datorprototyper och formativ utvärdering
Ha Grupphandledning 1 timme per grupp om 10 studenter.
Re Demonstration av prototyp 2 timmar per grupp om 10 studenter.

Tips! Sätt alltid upp en grid för din layout. Använd och tweaka färdiga gränssnittsmallar och färdiga ikon-typsnitt. Googla lite så hittar du mer. Se till att skapa genomtänkta färgscheman med t.ex. Adobe Kuler. Använd få kulörer.

Vissa prototypningsverktyg har färdiga mallar som går att lägga till. Är du beredd att betala så är Keynotopia ett bra inköp med livstidsuppdatering för framtida operativsystemsversioner.


Sidansvarig: Mattias Arvola
Senast uppdaterad: 2017-09-06