Design och konstruktion av grafiska gränssnitt

Transkript

1 Design och konstruktion av grafiska gränssnitt Armin Nezirevic Peter Börjesson Interaktionsdesign Tillämpad informationsteknologi Chalmers/GU

2 Idag Vad utmärker ett bra användargränssnitt? Kort kursinfo Lab info

3 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 användarna Ta fram prototyper Testa och göra om Projekt och labbar i Java Det blir en del programmering också

4 Om kursen Kurshemsida Se till att kolla den ofta Viktiga deadlines markerade Kurs

5 Kurslitteratur Tidwell Designing Interfaces och Cooper About Face finns som e-böcker på Chalmers bibliotek html

6 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

7 Upplägg Föreläsningar Obligatoriska övningar närvaro är obligatoriskt Obligatoriska labbar Utförs i par fritt val Projekt Utförs i grupp om 4 inte fritt val 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 (G/IG)

8 Ö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 Missade övningar kan tas igen på uppsamlingstillfället 5 mars.

9 Projekt Presenteras på föreläsningen den 3 februari Andra delen av kursen Designa och prototypa ett användargränsnitt imat en online mataffär Genomförs i grupper av 4 vi bestämmer grupperna 3 delar Design 35% Prototyp 35% Rapport 30%

10 Tentamen Hjälpmedel tenta En fusklapp med viktiga begrepp Gjord av oss. Ni får inte göra det själva.

11 Arbetsmetod Gör saker nu! Projekt andra halvan Kommer inte hinna tenta-plugga i slutet

12 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 addressbok Laboration 2 - Receptsökning Alla laborationer redovisas genom att demonstrera programmet för en handledare. Inlämning görs genom att skicka koden till kurs Missade laborationer kan tas igen på uppsamlingstillfället den 12 februari.

13 Lab Lab & projekt görs med Java och Netbeans Byggde tidigare på Swing Application Framework Applikationsramverk Färdigt applikationsskal Delar som är samma för alla program.net Cocoa (Touch) Android Swing Application Framework Netbeans IDE med GUI-editor

14 Utvecklingsmiljö Lab och projekt görs med NetBeans och en skalapplikation som vi tillhandahåller.

15 Utvecklingsmiljö Lab och projekt görs med NetBeans och en skalapplikation som vi tillhandahåller. Motiv Java Bra GUI editor i NetBeans GUI design kärnan Rätt komplexitet

16 NetBeans - Demo

17 Skalapplikationen ExampleApplication.java Startar upp, avslutar m.m. ExampleApplicationView extends JFrame Jframe och menu finns Redo att börja skapa med GUI-editor initcomponenents() Rör aldrig denna Properties-filer Alla strängar på samma ställe Bra för att stödja olika språk

18 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:

19 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

20 Att göra 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

21 Att göra 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 Deadline måndag för inskickade filer