Design och konstruktion av grafiska gränssnitt Olof Torgersson Interaktionsdesign Tillämpad informationsteknologi Chalmers/GU Litekursinfo Kort GUI-historia Swings komponenter Idag Tidwell Designing Interfaces och Cooper About Face finns som e-böcker på Chalmers bibliotek 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
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 4
GUI-HISTORIA 1984 5
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 6
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) 7
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 8
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 9
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 Apple Lisa 10
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 Ex Desktop GUI skapades för kontor hur hade det kunnat se ut annars? Skrivbord Mappar Dokumenthantering 11
1983 Första GUI för IBM PC Försvann Visi On Windows 1985 Största skillnad menyer på varje fönster Tiled windows från början 12
Windows 2.0 1987 Apple stämde MS för look and feel Andra Det fanns en del andra system under 80-talet NextSTEP 1988, Unix + snyggt GUI. Max OS X:s bas 13
Microsofts första riktiga GUI Oerhörda säljsiffror Task bar Visuella element från NextSTEP Windows 95 14
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? Ett försök till något annat 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 16
2 VISUELLA TRENDER Skeumorphism A skeuomorph /ˈskjuːəәmɔrf/ [skyoo-uh-mawrf], or skeuomorphism (Greek: skeuos, σκεῦος vessel or tool, morphê, µορφή shape), is a design element of a product that imitates design elements that were functionally necessary in the original product design, but which have become ornamental in the new design. 17
Apple Trend Nämns t ex i ios guidelines Silly or nice? http://skeu.it Bra? 18
2013-01-24 Minimalism Windows 8 sätter trenden Platta rutor grejen Exempel 19
2013-01-24 Exempel Non GUI 20
2013-01-24 Non GUI Materialkunskap GUI:n byggs upp av komponenter Givna användningsområden Fel förvirrar 21
Java Swing Designat för att kunna bygga riktiga GUI:n Innehåller de flesta vanligt förekommande gränssnittskomponenterna Dessa är byggstenar Måste veta vilka som finns och vad de passar till Använda dem så det som förväntas Windows, Linux, Mac har ungefär samma komponenter Plattformsoberoende Kan köras på Windows, Linux, Mac Olika utseende Delvis olika förväntade beteenden Hur funkar det? Plattformar har olika Look & Feel Windows l&f Aqua l&f Eller samma Java Swing på alla plattformar Metal l&f Nimbus l&f Exempel MedView archetype Viewer 22
Välja l&f För riktiga program behöver man välja l&f System Java (Metal) System når typiskt inte ända fram Finns diverse tredjepartsalternativ för att komma närmare Troligen bästa för hemanvändare etc Java ser fel ut på alla plattformar Funkar för affärssystem etc Ett dominerande program Byta i NetBeans Application.lookAndFeel = javax.swing.plaf.metal.metallookandfeel UI Guidelines Alla plattformar har User Interface Guidelines Swing också Använda dessa eller plattformsguidelines? Del av GUI-designerns verktygslåda Hjälp med detaljer snarare än interaktionsdesign Behövs för riktiga applikationer Länkar finns på kurshemsidan 23
Mera Swing MVC nämns ofta Swing snarare Separable Model View-Controller ihop Model för sig Man kan byta look&feel utan att påverka modellen Man kan byta modell utan att påverka look&feel För enkla komponenter som JButton behöver man inte bry sig om modellen Motsatsen gäller för t ex JTree, JTable En applikation kan ha en MVC-modell ändå Components & Containers De block GUI:s byggs av Går igenom alla snabbt Sen anses man känna till dessa När man ska designa måste man veta vad som finns Inkluderar vissa saker från Swing UI Guidelines Alla Containers är Components Components kontroller Containers behållare för Components En Component måste finnas i en Container för att synas 24
Swing-klasser JApplet JButton JCheckBox JCheckBoxMenuItem JColorChooser JComboBox JComponent JDesktopPane JDialog JEditorPane JFileChooser JFormattedTextField JFrame JInternalFrame JLabel JLayeredPane JList JMenu JMenuBar JMenuItem JOptionPane JPanel JPasswordField JPopupMenu JProgressBar JRadioButton JRadioButtonMenuIt em JRootPane JScrollBar JScrollPane JSeparator JSlider JSpinner JSplitPane JTabbedPane JTable JTextArea JTextField JTextPane JTogglebutton JToolBar JToolTip JTree JViewport JWindow Visuellt 25
Visuellt 2 Top-Level Containers JFrame JApplet JWindow Jdialog Containers JPanel Används för att gruppera andra components JRootPane 26
JFrame Applikationers huvudfönster Menyrad Ofta toolbar Rekommenderad titel Dokumentnamn Programnamn Swing Application Framework FrameView Sekundära fönster Ingen menyrad JDialog Rekommenderad titel Beskrivande namn optional programnamn 27
JMenuBar Menyrad- hanteras bra av NetBeans Några guidelines Använd bara ett ord i varje menytitel Använd välkända/standardbegrepp (Arkiv) Inkludera mnemonics Använd inte för sekundära fönster JMenu Hanteras bra av NetBeans Ha inte samma namn på någon flera ggr Undvik mer än en nivå Leta igenom ska gå fort 28
JMenuItem Enskilda objekten i en meny Ha inte samma namn på något item som på menyn Undvik flera nivåer Kan ha ikoner. Hjälper användare att komma ihåg vad toolbarbuttons gör Kortkommandon Allt kan göras i NetBeans utan kod JSeparator Huvudsakligen för att gruppera menu-items 29
JCheckBoxMenuItem Använd sparsamt Syns bara när menyn är framme Bättre än toggle-menyer Menyer som byter text JRadioButtonMenuItem 1-av-flera-val Använd JSeparator ovanför/nedanför för att visa vilka som hör ihop 30
Kallas vanligen kontextmeny Alla vet nog hur det funkar JPopupMenu Aldrig huvudmetoden att utföra en handling! JToolBar För vanligt förekommanden kommandon Förekommer både med och utan labels Det man kan göra ska alltid finnas med i programmets menyer Förse alla knappar med tooltips 31
ORGANISERA INNEHÅLL JScrollPane För något som inte får plats Listor, tabeller, textdokument placeras typiskt i scrollpanes Automatiskt i NetBeans Standard visa bara vid behov Rekommenderas Horisontella tveksamma för t ex text 32
JPanel Allmän container för att organisera saker Här en röd med ett par blå i Bygga upp GUI hierarktiskt Behövs för allt utom de enklaste GUI I NetBeans blir det väldigt svårt att få önskade placeringar om man inte bygger upp med flera paneler Dela upp i justerbara ytor Horisontellt eller vertikalt Kan nästas Kan styra fördelning weight Kan ha snabb-knappar onetouchexpandable JSplitPane 33
JTabbedPane Mycket info på liten yta Relaterat men utan inbördes kopplingar Kan göras i NetBeans Inte fler än att en rad räcker Headline capitalization Tool tips JLayeredPane Flera lager på varandra Se Swing Tutorial Öppnar möjligheter snarare än att vara standardkomponent 34
Properties Alla Swing-komponenter har mängder av properties Kan sättas i NetBeans Experimentera Demo JTabbedPane JButton JLayeredPane Bilder i NetBeans (L&F) VISA INFO 35
JLabel Visa info för användare Unselectable Bild Text Bild + text HTML Ritar inte sin bakgrund som standard setopaque(true) Property i NetBeans JToolTip Behöver man inte programmera direkt Ofta bra för användaren Stödjer utforskande Vet man trycker man innan de visas acomponent.settooltiptext( En text ); Alla komponenter Property i NetBeans 36
JProgressBar Om man blockerar interaktion under en tidsperiod bör man alltid visa en progressbar och erbjuda möjlighet att avbryta BASIC CONTROLS 37
Standard action-grej Kan konfigureras på olika sätt Mnemonics Icons Text Borders JButton On/Off Oberoende Grupperade JToggleButton 38
JCheckBox & JRadioButton Välkända Enval/flerval JList Ett sätt att välja något Kan ha flera olika selection-varianter JListModel och JListSelectionModel Icke-statiska ger ofta behov av att anpassa modellen Single-selection i labben? Kod för att ordna och sortera finns i lab1backend Hanterar listans model 39
JComboBox Redigerbara och icke-redigerbara Tar lite plats Kan användas i toolbars Ha inte för många items! Vanligt T ex JList bättre Eller filtrering Data från modell Mata in en rad text actionperformed vid retur Varianter JFormattedTextField JPasswordTextField Relaterade JSpinner JComboBox JTextField 40
Flera rader oformatterad text En rad JTextField Placeras ofta i en JScrollPane JTextArea JSlider & JSpinner Input av data med begränsningar 41
KOMPLEXA JTree Strukturerad data Kan anpassas på många sätt Kräver ofta justerad kod/modell Inte för datorovana 42
JTable Tabellformad data Anpassningsbar Modell JEditorPane & JTextPane Formatterad text Kräver sin egen genomgång 43
Komponent man kan placera varsomhelst Stöd för dialog JColorChoser Open Save Bibliotek eller inte Filtyper JFileChooser 44
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 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 45
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 Läsa igenom text om Flow och Excise Känna till samtliga Swing-komponenter Göra klart lab 1 Börja lab 2 om man vill Designförslag ska godkännas Fredag, måndag, onsdag 46