Design och konstruktion av grafiska gränssnitt Olof Torgersson Interaktionsdesign Data- och informationsteknik Chalmers/GU 1
Idag Menyer och verktygsfält Swing Application Framework & Actions Organizing the page Kod bakom lab 1? 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 2
MENYER OCH TOOLBARS Menyer & Toolbars Två vanliga sätt att utföra handlingar Kompletterar varandra Menyer äldre än GUI Toolbars slog igenom typ 1989 I princip 2 handlingar Något sker direkt En dialogruta visas 3
Menyer Fungerar som en karta över alla funktioner i programmet Man kan vandra runt och få en uppfattning om vad som finns Bör inte ha mer än 1 nivå Behövs mer kan man visa en dialog Beståndsdelar Namn Tillräckligt långa Kortkommando Ctrl-C Se till att de som förväntas finns Mnemonic Komplett Ikon Koppla samman knapp o meny Disable Standardmenyer De vanligaste menyerna ungefär samma på vanliga plattformar Kolla specifika guidelines om man designar för viss plattform File/Arkiv Öppna stänga etc Överväg Document, Song istället för File Edit/Redigera Cut, Copy, Paste etc. Ibland behövs en Format-meny också Window/Fönster Arrangera om fönster (krävs fler än ett för att bli intressant) Help/Hjälp Om programnamn Olika hjälpalternativ Cooper förespråkar ett alternativ Shortcuts/Genvägar 4
Andra vanliga menyer View/Visa ( Mac: Innehåll ) Hur man betraktar innehåll/data kontroll av toolbars etc, dvs vilka delar som syns Insert/Infoga Infoga nya saker i ett dokument, tabeller, bilder, ljud, Format/Format Formattering, typ font, stil, storlek, justering Tools/Verktyg Större kraftfulla funktioner, t ex Stavning, synonymer, brevguiden Hard-hat items Funktioner som bara är för power-users Använd de konventioner som finns i guidelines för enskilda items Toolbars Antagande alla vet vad det är + pratat om det förut Använder butcons kombination av icon och button Ger erfarna användare snabb åtkomst till vanliga funktioner Meny karta över alla funktioner Skilj logiska grupper med en separator Ha alltid tooltip Disabla när de inte gäller Kan innehålla menyer mm också 5
SWING ACTIONS Swing Actions Re-cap samlar egenskaper vanliga i menyer och knappar i ett objekt Action Smart t ex i program där meny och toolbar gör samma sak Väldigt vanligt Hanterar enable/disable för anslutna objekt Egenskaper actionperformed Text Tooltip Ikon Kortkommando Mnemonic 6
Exempel leftaction = new LeftAction("Go left", anicon, "This is the left button.", new Integer(KeyEvent.VK_L)); class LeftAction extends AbstractAction { public LeftAction(String text, ImageIcon icon, String desc, Integer mnemonic { super(text, icon); putvalue(short_description, desc); putvalue(mnemonic_key, mnemonic); public void actionperformed(actionevent e) { displayresult("action for first button/menu item", e); NetBeans & SAF Swing Application Framework ger extra stöd. Tagga med @Action och resten med editor @Action public void new() { // do something alt @Action public void new(actionevent evt) { // do something 7
Åtkomst Alla actions placeras i en ActionMap Denna kan man komma åt via ApplicationContext Sen kan man hitta individuella actions Namnet samma som action-metoden @Action public void newcontact() { Action med namn newcontact actions = getcontext().getactionmap(getclass(), this); newcontactaction = actions.get( newcontact ) newcontactaction.setenabled(presenter.cancreatecontact()); Demo 8
Layout of page elements ORGANIZING THE PAGE Vad har vi? Användarstudier Mentala modeller, Personas Platform & Posture sovereign, transient Typiska kategorier intermediate, expert, novice Organisera innehåll Lista objekt, handlingar, verktyg, kategorier Tiled panes, single windows Mönster two-panel selector, one-window drilldown Minimera navigation Navigationsmönster clear entry points, global navigation Summan av detta saker att utgå från i en top-down process Härnäst Organizing the page 9
Visuell Hierarki Det viktigaste ska vara mest markant Det minst viktiga minst markant Layouten ska spegla informationens innehåll Du är bjuden till Kalles stora födelsedagskalas! Kom klädd som du tycker passar bäst för tillfället. Barn är välkomna. Middag serveras, om du vill ta med mat ring Beata på 22 37 55. När: 1 mars, kl 19.00. Var: Kalles hus. Om du behöver vägbeskrivning så ring gärna och fråga. Meddela om du kan komma eller inte till Beata senast 1 februari. Vi ses! Förbättra med lite tomrum Du är bjuden till Visuell Hierarki Kalles stora födelsedagskalas! Kom klädd som du tycker passar bäst för tillfället. Barn är välkomna. Middag serveras, om du vill ta med mat ring Beata på 22 37 55. När: 1 mars, kl 19.00. Var: Kalles hus. Om du behöver vägbeskrivning så ring gärna och fråga. Meddela om du kan komma eller inte till Beata senast 1 februari. Vi ses! 10
Du är bjuden till Visuell Hierarki Kalles stora födelsedagskalas! Kom klädd som du tycker passar bäst för tillfället. Barn är välkomna. Middag serveras, om du vill ta med mat ring Beata på 22 37 55. När: 1 mars, kl 19.00. Var: Kalles hus. Om du behöver vägbeskrivning så ring gärna och fråga. Meddela om du kan komma eller inte till Beata senast 1 februari. Vi ses! Några faktorer Övre vänstra hörnet Tomrum Kontrasterande fonter Kontrasterande förgrund/bakgrundsfärg Positionering Justering/alignment Indentering Det som är indenterat alltid mindre viktigt Grupperingar med linjer boxar, staplar etc 11
Visual Flow Ta hänsyn till hur man tenderar att ta in en sida Uppifrån o ner & vänster till höger Focal points ställen öga dras till Ha inte många Starkare till svagare Grouping and Alignment Gestalt-psykologi Det finns vissa funktioner inbyggda i hur vi ser saker Tänker man på dessa så får man bättre GUI:n Hjärnan skapar större delar av mindre Boxar kan hjälpa men bara om layouten är logisk ändå 12
Proximity Saker som är nära varandra uppfattas som att de hör ihop Similarity Saker som har samma form, färg, storlek eller orientering, uppfattas som att de hör ihop 13
Continuity Vi vill forma linjer och kurvor som skapas genom sammanslagning av mindre enheter Closure Vi grupperar saker i enkla slutna former som rektanglar även om de inte finns explicit representerade. Grupper uppfattas som slutna enheter. 14
Alla på en gång Vad har vi? Användarstudier Mentala modeller, Personas Platform & Posture sovereign, transient Typiska kategorier intermediate, expert, novice Organisera innehåll Lista objekt, handlingar, verktyg, kategorier Tiled panes, single windows Mönster two-panel selector, one-window drilldown Minimera navigation Navigationsmönster clear entry points, global navigation Visuell hierarki, grouping & alignment Summan av detta saker att utgå från i en top-down process Några mönster hjälper till 15
Några mönster Allmänt 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övade (32) visual framework 16
(32) visual framework Vad Designa varje sida med samma grundläggande layout, färg, stil. När Applikationer eller sajter med många olika sidor (typ allt). Man vill att det ska sitta ihop Varför Konsistent design av varje sida gör att man känner igen sig och inte behöver anstränga sig lika mycket. Bidrar till branding också. Hur Skapa en genomgående look-and-feel för alla sidor i applikationen Färger, fonter, stil på text Navigation Layout-grid Exempel 17
forts (33) center stage 18
(33) center stage Vad Placera den viktigaste delen i den största delen av fönstret. Placera sekundära verktyg och innehåll runt om i mindre paneler. När Det finns en huvuduppgift som användaren jobbar med, redigera dokument, utföra en uppgift etc. Kan användas i de flesta program och webbsidor. Varför Led direkt användaren till den viktigaste delen av sidan. Sedan är det enklare att ta in vad som finns runtomkring. Hur Center stage-delen bör vara åtminstone dubbelt så bred och hög som något annat. Huvuddelen måste inte vara i mitten, bara den är stor nog Exempel 19
forts (34) titled sections 20
(34) titled sections Vad Skapa olika grupper av innehåll genom att förse dem med en visuellt tydliga titel och sen placera alla på samma sida När Det finns en massa innehåll på en sida och man vill göra det tydligare att förstå genom att gruppera det. Varför Tydliga sektioner gör inehållet lättare at ta in. Visuellt tydliga titlar gör det också enklare att snabbt se det viktigaste. Hur Se först till att få rätt indelning och ge dem bra namn. Sen väljer man representation boxar, titlar med särskilda färger, stor font, avgränsning med tomrum Exempel 21
(35) card stack (35) card stack Vad Placera innehåll på ett antal kort. Placera dem på varandra så bara ett syns. Använd t ex tabbar för att komma åt de olika delarna. När Det finns för mycket material på en sida och det går att göra en uppdelning där det räcker att se en del åt gången. Varför Uppdelningen i olika kort gör att varje enskilt kort kan göras enkelt att hantera. Tabbar är en vanlig konvention för användarna. Hur Dela upp informationen i lämpliga delar. Se till att man inte måste byta fram & tillbaka. Välj lämpliga namn för varje sektion. Välj en presentation t ex tabbar, vänsterkolumn med val 22
Exempel forts 23
(38) right/left alignment (38) right/left alignment Vad Vid design av en 2-kolumners form eller tabell, högerjustera labels i vänsterkolumnen och vänsterjustera objekten i högerkolumen När Design av något där man har en kolumn med text-labels till vänster som leder till objekt till höger Varför Detta ger en mycket tydligare gruppering än om vänsterkolumnen vänsterjusteras pga närhet (proximity). Skapar också en tydlig linje i mitten (continuity). Oftast tydligare o snyggare. Hur Placera vänster- & högerkolumn nära varandra. Det funkar vanligen att vänsterkanten blir ojämn, Överväg att låta objekten i högerkolumnen vara lika breda, 24
Exempel (43) liquid layout 25
(43) liquid layout Vad Anpassa innehållet när sidans storlek ändras så att det tillgängliga utrymmet alltid fylls. När Närhelst man har en sida man kan tänka sig att man vill ändra storlek på, ofta för att kunna se mer information Varför För de flesta program kan man inte förutsäga hur stor yta de kommer att uppta pga olika fönsterstorlekar, andra fönster på skärmen etc. Därför bör programmet anpassa sig elegant. Hur Fundera ut hur fönstret bör anpassas. I center stage är det t ex lämpligt att huvudytan blir större och annat behåller sin storlek. När ytan blir för liten kan man ha scroll-bars. Java har rätt bra stöd. Exempel 26
Läs också 36 closable panels 37 movable panels 41 responsive disclosure 42 responsive enabling Vad har vi? Användarstudier Mentala modeller, Personas Platform & Posture sovereign, transient Typiska kategorier intermediate, expert, novice Organisera innehåll Lista objekt, handlingar, verktyg, kategorier Tiled panes, single windows Mönster two-panel selector, one-window drilldown Minimera navigation Navigationsmönster clear entry points, global navigation Visuell hierarki, grouping & alignment visual framework, titled sections, card stack Summan av detta saker att utgå från i en top-down process Mer kommer 27
Att göra Titta igenom alla Swing-komponenter Veta vad som finns och vad de gör, Swing-tutorial på nätet Läsa Preface och kapitel 1 i Tidwell Läsa kapitel 2 i Tidwell Kan hoppa över mönster 19 & 20 Läsa Cooper om Mental Models & Posture Läsa kapitel 3 i Tidwell Kan hoppa över mönster 23, 25 & 30 tills vidare Förstå Actions http://java.sun.com/docs/books/tutorial/uiswing/misc/action.html Läsa Cooper om menyer och verktygsfält Läsa kapitel 4 i Tidwell Kan hoppa över 39, 40 tills vidare Nästa gång: fler designmönster & lite mer Swing Lab1-kod Lab 1 en slags model-view-presenter Vy-klasser innehåller ett absolut minimum av logik och egen kod Skillnad: presenter har referenser till både modell och vy och synkar dessa. MVD presenteras på en massa olika sätt, även detta Klasser i backend Contact Model Presenter De 2 första vet inget om GUI:t och skulle kunna användas i annat sammanhang 28
Presenter package se.chalmers.cse.dat215.lab1; import javax.swing.jlist; import javax.swing.jtextfield; public class Presenter { private static Presenter instance = null; protected Presenter() { // Exists only to defeat instantiation. model = Model.getInstance(); public static Presenter getinstance() { if (instance == null) { instance = new Presenter(); return instance; forts public void init() { contactslist.setmodel(model.getlistmodel()); contactslist.setselectedindex(0); public void setcontactslist(jlist l) { contactslist = l; public void setnametextfield(jtextfield t) { nametextfield = t; public void setlastnametextfield(jtextfield t) { lastnametextfield = t; 29
forts public void newcontact() { Contact c = model.newcontact(); contactslist.setselectedvalue(c, true); public void contactslistchanged() { if (contactslist.getselectedindex()!= -1) { Contact c = (Contact) contactslist.getselectedvalue(); model.setselectedcontact(c); presentcontact(c); private void presentcontact(contact c) { nametextfield.settext(c.getfirstname()); lastnametextfield.settext(c.getlastname()); phonetextfield.settext(c.getphone()); emailtextfield.settext(c.getemail()); forts public void textfieldfocusgained(java.awt.event.focusevent evt) { JTextField t = (JTextField) evt.getsource(); t.selectall(); public void textfieldfocuslost(java.awt.event.focusevent evt) { JTextField t = (JTextField) evt.getsource(); if (t.equals(nametextfield) t.equals(lastnametextfield)) { nametextfieldfocuslost(evt); else { contactedited(); 30