Transcript Design och konstruktion av grafiska gränssnitt

Design och konstruktion av
grafiska gränssnitt
Peter Börjesson
Interaktionsdesign
Tillämpad informationsteknologi
Chalmers/GU
Idag
• 
• 
Kort kursinfo
Lab info
• 
Föreläsning - Vad utmärker ett bra användargränssnitt?
Om kursen
• 
Design och konstruktion av grafiska gränssnitt
–  Inte i första hand en kurs om gränssnittsprogrammering
–  En kurs om gränssnittsdesign
–  Metoder för att utveckla gränssnitt
•  Studera och förstå användarna
•  Ta fram prototyper
•  Testa och göra om
–  Projekt och labbar i Java
•  Det blir en del programmering också
Läromål
Efter genomgången kurs skall studenterna kunna:
•  Skapa och motivera skisser på ett grafiskt gränssnitt baserat på
en specifik användning och användargrupp
•  Implementera ett gränssnitt genom tillämpning eller expansion
av ett standardbibliotek för grafiska gränssnitt
•  Arbeta iterativt för att skapa lättanvända gränssnitt genom en
växelverkan mellan implementation och användartest
•  Genomföra projekt där uppdelning och koordinering av
arbetsuppgifter mellan medlemmar behövs
•  Utveckla och specificera projektmål successivt allteftersom ett
projekt genomförs
Kurshemsidan
Studentportalen
Kurshemsida
• 
Kurshemsida http://www.ixdcth.se/courses/2015/dat216
–  Se till att kolla den ofta
–  Viktiga deadlines markerade
• 
PingPong http://pingpong.chalmers.se
–  Inlämningar
–  Utskick av viktig info
–  Viktigt med registrering
Ansvariga
• 
Kursansvarig:
–  Olof Torgersson
• 
Lärare:
–  Olof Torgersson [email protected]
–  Armin Nezirevic [email protected]
–  Peter Börjesson [email protected]
• 
Handledare:
–  Hanna Kowalska Elleberg
–  Max Witt
–  Mathias Forssén
Kurslitteratur
• 
• 
• 
Tidwell - Designing Interfaces
(Cooper - About Face)
–  Finns som e-böcker på Chalmers bibliotek
Annat material finns på kurshemsidan
Upplägg
• 
• 
• 
• 
• 
Föreläsningar
Övningar (5st, obligatoriska)
Labbar (2st, obligatoriska)
Projekt
Tenta
• 
• 
Lab, övningar, projekt och tenta krävs för godkänt
Betyg sammanvägning av projekt och tenta
–  Tenta 55% av betyget
–  Lab och övning betygssätts inte (U/G)
Övningar
• 
Syftar till att ge träning i olika delar av designprocessen för
grafiska gränssnitt.
–  Övning 1: Gör om, gör rätt
–  Övning 2: Design för användare i olika stadier
–  Övning 3: iMat skisser
–  Övning 4: iMat pappersprototyp test
–  Övning 5: Cognitive walktrough
• 
Obligatorisk närvaro i salen
–  Missade övningar 1-4 kan tas igen på uppsamlingstillfället 25
februari
–  Missad övning 5 tas igen genom inlämningsuppgift.
Projekt
• 
Presenteras på föreläsningen den 5 februari
• 
Designa och prototypa ett användargränsnitt för
iMat – en online mataffär
• 
Genomförs i grupper av 4 – vi bestämmer grupperna
–  Fyll i enkät
• 
3 delar
–  Design 35%
–  Prototyp 35%
–  Rapport 30%
Tentamen
• 
Salstenta
• 
Hjälpmedel
–  En ”fusklapp” med viktiga begrepp
–  Gjord av oss. Ni får inte göra den själva.
Laborationer
• 
Kursens labbar syftar till att ge träning i att bygga prototyper av
grafiska gränssnitt med hjälp av NetBeans och Java.
–  Laboration 1 - En enkel adressbok
–  Laboration 2 - Receptsökning
• 
Alla laborationer redovisas genom att demonstrera programmet
för en handledare.
Inlämning görs genom pingpong: kod + uppgift
Missade laborationer kan tas igen på uppsamlingstillfället den
11 februari.
• 
• 
Utvecklingsmiljö
• 
Lab och projekt görs med Java + NetBeans samt en
skalapplikation som vi tillhandahåller.
• 
Motiv
–  Java
–  Bra GUI – editor i NetBeans
–  GUI-design kärnan i labbarna
–  Rätt komplexitet
• 
Fritt fram att använda andra utvecklingsmiljöer, men
handledning och instruktioner är riktade mot Netbeans.
–  Krav på använda GUI-editor
NetBeans
Skalapplikationen
• 
ExampleApplication.java
–  Startar upp, avslutar m.m.
• 
ExampleApplicationView – extends JFrame
–  Jframe och menu finns
–  Redo att börja skapa med GUI-editor
•  initComponents()
•  Rör aldrig denna
• 
Properties-filer
–  Alla strängar på samma ställe
–  Bra för att stödja olika språk
Kopplingar
• 
Drar objekt till vyn
–  Lämpliga variabler skapas
–  Ändra namnen
–  Kan kopplas till Properties-fil
• 
Events
–  Tomma metoder
private void buttonPressed(java.awt.event.ActionEvent evt) {
// TODO add your handling code here:
}
Arkitektur – Lab 1
• 
En form av MVC
–  Model-View-Presenter
–  Controller (Presenter) har referenser till både model och view
–  Samordnar kommunikation åt båda hållen
–  Model och Presenter/Controller finns klara
Arbetsmetod i kursen
• 
Gör saker nu!
–  http://ixdcth.se/courses/2015/dat216/attgorapervecka
• 
Projekt andra halvan
–  Kommer inte hinna tenta-plugga i slutet
Att göra (1/2)
• 
Registrera er på kursen!
–  Viktigt att få tillgång till pingpong
• 
Kolla läsanvisningar under resurser på hemsidan
–  Läs GUI-historia
–  Läs preface i Tidwell
–  Läs om Flow och Excise ur boken About Face av Alan
Cooper
• 
Gör övning 1 på onsdag
Att göra (2/2)
• 
Lab 1 ska göras denna veckan
–  Börja idag med förberedelser
–  Ha koll på verktyg före onsdag
–  Lab onsdag och fredag ska räcka
–  Kan göras hemma, men ska redovisas för handledare