Design och konstruktion av grafiska gränssnitt Olof Torgersson Interaktionsdesign Tillämpad informationsteknologi Chalmers/GU Idag Kursinfo Kort GUI-historia Människa-datorinteraktion/Interaktionsdesign Lab info Swing Application Framework 1
Om kursen Design och konstruktion av grafiska gränssnitt Inte i första hand en kurs om gränssnittsprogrammering En kurs om gränssnittsdesign Hur ska det funka? Metoder för att utveckla gränssnitt Studera användarna Ta fram prototyper Testa och göra om Java Swing som verktyg Det blir en del programmering också För info kolla kurshemsida Upplägg Föreläsningar Obligatoriska övningar 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 2
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 Arbetstid Studenter på Chalmers har vanligen 50 timmars arbetsvecka Halvfart, dvs 25 timmar/vecka Maximal undervisning Föreläsning 4 timmar Övning 3 timmar Bokad labtid 5 timmar Eget arbete 13 timmar 2 timmar 35 minuter/dag Summa 25 3
Arbetsmetod Gör saker nu! Projekt andra halvan Kommer inte hinna tenta-plugga i slutet Hjälpmedel tenta 1 A4 (2 sidor) med valfria anteckningar Smart att börja skapa dessa nu Mer arbetsmetod Lab 1 ska göras denna veckan Börja idag med förberedelser Ha koll på verktyg före onsdag Lab onsdag o fredag ska räcka Kan göras hemma Läsning GUI-historia Läs och sammanfatta före torsdag 4
Vad är ett GUI Graphical User Interface Typ visuell presentation av "verkligheten", där man interagerar med systemet via knappar/menyer/navigationsverktyg genom att manipulera dessa direkt på skärmen (i motsats till via text ) WIMP Window Icons Menu Pointing device Naturligt? GUI klart dominerande metoden för interaktion med datorer Inlärt begrepp/beteende Några alternativ Tal Gester Fysiska artefakter Skriven konversation Utvecklingen kunde varit annorlunda - film 5
GUI-HISTORIA 1984 6
Sladdkopplingar Hålkort Teleprinter Skärm + kommandon Pre-GUI Douglas Engelbart Född 1925, pionjär för GUI Ville stödja människans intellekt Tänkte sig ett system där man direkt interagerade med en grafisk representation Sökte patent för musen 1967 7
The Mother of All Demos 1968 visade Engelbart och hans team sitt system NLS Interaktion med mus Flera fönster Hyperlänkar Videokonferens Kan ses på internet (länk under resurser) 8
Xerox PARC Grundat 1970 Xerox rädda för papperslösa kontoret Anställde forskare och lät dem göra vad de ville 1973 Xerox Alto Bitmappad display 606x808 Ca 1974 Programmeringsspråk och omgivning Objektorienterat MVC Minneshantering. Smalltalk 9
1981 Alto + Smalltalk Nätverk E-post I princip som idag 17 000 dollar (113 000kr) flopp Xerox Star Mer Xerox Star Några principer Se och peka Uniform design över program What You See Is What You Get 10
Apple Grundat 1976 av Steve Jobs och Steve Wozniak Besökte PARC och lånade idéer Apple Lisa 1983 Som en Mac 10 000 dollar 67 000kr Flopp Observera att GUI skapades för kontor hur hade det sett ut annars? Apple Lisa 11
The Mac En dator för alla 2 495 dollar 16 700kr 9-tums skärm 512 * 384 128k minne Ingen multi-tasking Floppy-drive Reklam Framgång The rest is history 1.32 1983 Första GUI för IBM PC Försvann Visi On 12
Windows 1985 Största skillnad menyer på varje fönster Tiled windows från början Windows 2.0 1987 Apple stämde MS för look and feel 13
2012-01-16 Andra Det fanns en del andra system under 80-talet NextSTEP 1988, Unix + snyggt GUI. Max OS X:s bas 14
Microsofts första riktiga GUI Oerhörda säljsiffror Task bar Visuella element från NextSTEP Windows 95 90+ Många försvann I princip bara Windows och Mac kvar Windows nära slå ut Mac helt Apple tog över Next 1997 (eller tvärtom) 2001 Mac OS X (NextSTEP 5) Unix-bas Viss återhämtning för Mac Egentligen inte mycket nytt sen 80-talet Webb GUI-mässigt kanske ett steg tillbaka initialt Linux? 15
2007- iphone introduktion Stort genomslag för touch-gränssnitt 27 januari 2010 ipad introduktion Stort genomslag för plattor/tablets Element från touch-ui:s återspeglas i desktop OSX Lion 2012 Windows 8 Ett system för allt? PC Plattor Mobile? Windows 8 Metro Ett försök till något annat 16
Aktivitet Ta fram mobiltelefonerna Försök att ställa så att datum och tid uppdateras automatiskt via operatören Funkar det? Försök komma på en feature som funkar dåligt Försök komma på en som funkar bra Diskutera med grannen 17
INTERAKTIONSDESIGN 18
2012-01-16 Genomslag ID överallt 19
Interaction Design Interaction design concerns the design of computer-based products and systems with a focus on their intended use. Interaction Design Chalmers 2006 The design of everything that is both digital and interactive. Moggridge 2007 The shaping of use-oriented qualities of a digital artifact Löwgren Design the imaginative jump from present facts to future possibilities Page 1966 A goal-directed problem-solving activity Archer 1966 The optimum solution to the sum of the true needs of a particular set of circumstances Matchett 1968 20
2012-01-16 Designmaterial 21
2012-01-16 IT som material Några egenskaper Beteende är resultat av att exekvera ett program Förändras över tid Anordning för interaktion Flexibelt Tid - Interaktion 22
Flexibilitet över tid Interaktionsdesignens delar Interaction Design Human Computer Interaction Human Factors Cognitive Science Ergonomics Graphic Design Product Design Digitial Art Computer Science 23
Interaktionsdesignspraxis Fastställ behov och krav loop Utveckla alternativa designförslag Bygg interaktiva prototyper för kommunikation och analys Utvärdera designen baserat på prototyperna end loop Användarcentrerad design Fältstudier Fokusgrupper Cultural Probes Krav 24
2012-01-16 Design Genidesign Designmetoder Verktyg för skapande Brainstorming Classification Six thinking hats Method 635 Material & erfarenhet Prototyping Avgörande för förståelse av interaktion Spatiala and tidsliga aspekter Paper Video Mock-up Hi-fi Hårdvara Mjukvara Fysisk realisering 25
Utvärdering Vad & hur Kvantitativ & kvalitativ Frågeformulär Observation Expertutvärdering Intervju Mätningar Interaction Design Concerns the design of computer-based products and systems with a focus on their intended use Is a multi-disciplinary field Is of growing importance Is a process of Establishing requirements Developing Designs Prototyping Design Proposals Evaluating and iterating 26
Interaktionsdesigner Viktiga färdigheter Arbeta i team Designpraxis och erfarenhet IT-material Vad kan man göra? Interface design Designmetoder Prototyping Skissa Mjukvara Hårdvara (sensors and actuators) Fysiska material Utvärderingsmetoder 1 2 3 Design Methods Graphical Interfaces Aesthetics IxD 4 Social Media Course Prototyping Tangible Interaction Visualization Analysis Methods I den här kursen Allmän process Fastställ behov och krav loop Utveckla alternativa designförslag Bygg interaktiva prototyper för kommunikation och analys Utvärdera designen baserat på prototyperna end loop Kunskap om byggstenar för GUI Swing som verktyg för prototyper Kunskap om användare Kunskap om utvärdering 27
Lab Lab & projekt görs med Swing Application Framework (SAF) och Netbeans Applikationsramverk Färdigt applikationsskal Delar som är samma för alla program.net Cocoa (Touch) Android Swing Application Framework Netbeans IDE med GUI-editor NetBeans - Demo 28
SAF-app App-klass extends SingleFrameApplication Startar upp, avslutar mm startup() shutdown() View-klass extends FrameView Fyller en JFrame som ramverket hanterar Skapas med GUI-editor initcomponenents() Rör aldrig denna Drar objekt till vyn Lämpliga variabler skapas Kan göras lokala Ändra namnen Events Tomma metoder Kopplingar private void buttonpressed(java.awt.event.actionevent evt) { // TODO add your handling code here: } 29
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 Att göra Läsa historia, länkar på hemsida -> resurser Börja med lab 1 Kolla NetBeans Tutorials Labben Fundera på de sämsta GUI:n ni sett och vad problemet var Onsdag Övning obligatorisk Handledd labtid Torsdag föreläsning Huvudsakligen byggstenar, dvs Java Swing 30