Design och konstruktion av grafiska gränssnitt
Olof Torgersson
Interaktionsdesign Tillämpad informationsteknologi
Chalmers/GU
Idag
•
Läsanvisningar–
Finns på kurshemsidan under resurser–
Kommer att förklaras mer senare•
Kursutvärdering•
Om användare•
Swings GUI-komponenterKursutvärdering
•
Behöver 2 representanter till kursutvärderingsprocessen•
Resultat förra året–
< 20% svarade–
Kursen ok–
Studentrepresentanter tyckte att kursen påverkat deras syn på GUI:n–
Mer programmering än väntat•
Åtgärd – talar om detta tydligare–
Mycket att göra i slutet, lite i början•
Åtgärd 1 – läs från början•
Åtgärd 2 – lab 1 startar första dagen•
Åtgärd 3 – kommer att styra upp projektet merUpplägg
•
Föreläsningar•
Obligatoriska övningar, onsdag 9.00 - 11.45•
Labbar–
Utförs i par•
Projekt–
Utförs i grupp om 4•
Tenta•
Betyg sammanvägning av projekt och tenta–
Lab och övning inget betyg bara G•
Alla moment måste genomförasInteraktionsdesignspraxis
•
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 loopInteraction Designer
•
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ärderingsmetoderCourse
1 Graphical Interfaces
Physical Computing
2 Design Methods Ubiquitous Computing
3 Analysis Methods Interaction Design Project
4
Human Centred Design
Material
•
The applications that are easy to use are designed to be familiar–
Tidwell xiii•
Viktigt för framgång–
Känna användarna–
Kunna sina GUI-idiom–
Kunna sin verktygslåda•
Swing–
Kunna sina mönster•
Tidwell (kursboken)Användare och mål
•
Lär känna användarna för de är inte (som) du•
GUI:t designar konversationen mellan människan och program•
Användning har ett mål–
Köpa en resa–
Skriva en uppsats–
Få underhållning–
Samverka socialt–
Sköta affärer–
Hålla sig uppdaterad–
…Användares egenskaper
•
Gamla?•
Unga?•
Nyfikna?•
Trötta•
Kunniga?•
Envetna?•
Tvingade?•
Bakgrund?•
Expert?•
Nybörjare?•
Enda säkra–
Olika och ofta perpetual intermediateTyper av applikationer
•
Nybörjare, tillfälliga användare–
Informationskiosker–
Inköp on-line–
Försäljningsautomater–
Installeringswizards–
…•
Experter–
Photoshop–
NetBeans–
Sys-adminverktyg–
World of warcraft–
…•
Väldigt olika förutsättningarforts
•
Varken eller, dvs mittimellan–
Office–
E-post-program–
Webbläsare–
Mobilapplikationer–
…Många program hamnar i denna kategori.
Måste välja baserat på användare och deras mål.
Lära känna användarna
•
Basen för all interaktionsdesign•
Samma person har inte samma mål med olika program•
Typiska saker att undersöka–
Användarnas mål med att använda mjukvaran–
De speciella uppgifter de utför för att uppfylla målen–
Vokabulär de använder för att beskriva vad de gör–
Hur bra de är på att använda liknande program–
Deras attityder till det de ska utföra–
…Några metoder
•
Direktobservation–
Observera och tala med användarna på plats.–
Intervjuer–
Ger sammanhang.•
Enkäter–
Mycket information.–
Missar direktkommunikationsinformation–
Översikt över det man faktiskt frågar om•
Personas–
Sammanställning av viktigaste egenskaperna i en fiktiv personOm boken
•
Ett antal kapitel som fokuserar på olika saker inom GUI-design–
Inledning med allmän teori–
Ett flertal designmönster•
Om designmönster–
Mönster är förslag på fungerande lösningar–
Måste anpassas efter situationen•
Nytta–
Kan man många är chansen större att man hittar något lämpligt för en given situation–
Ger en vokabulär för att diskutera design–
Studera/reflektera kring program man använder–
Är beprövadeNågra mönster
Eller snarare allmänna egenskaper relaterade till användare som är önskvärda i princip alla program
•
(1) Safe Exploration–
Kunna trycka runt utan oönskade effekter–
Inte bara allvarliga utan även enkla irritationsmoment•
(2) Instant Gratification–
Belöna användarna–
Gör första stegen enkla (visa rätt dokument/skärm)–
Inga störande inledande registreringsformulär, förklaringar, reklamskärmar etc•
Tar bort fokusforts
•
(3) Satisficing–
Satisfying+sufficing–
Typ bra nog. Väljer hellre bra nog än att lära sig ordentligt•
Stöd utforskande, var tydlig•
(4) Changes in Midstream–
Man ändrar sig eller kommer in på ett sidospår–
Stöd detta•
Global navigation•
Komma ihåg tidigare angivna värden•
…forts
•
(5) Deffered Choices–
Tvinga inte användarna fylla i massa information för tidigt•
Registreringsformulär•
Tonart, tempo, title – innan man börjat–
Ge möjlighet att komplettera senare•
(7) Habituation–
That gesture works everywhere else; why doesn’t it work here too?–
Man måste som designer kunna konventioner–
Ctrl-A, Ctrl-X, Ctrl-S•
Emacs vs Wordforts
•
(8) Spatial Memory–
Flytta inte runt saker–
Ha knappar etc där de förväntas–
Egen konfigurering kan vara bra•
(11) Keyboard Only–
Kan förväntas–
Swing har omfattande stöd för detta–
Tabba runt–
Mnemonics–
…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 komponenterUI 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å kurshemsidanMera 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 synasSwing-klasser
JApplet JButton JCheckBox JCheckBoxMenuIte
m
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
