Design och konstruktion av grafiska gränssnitt

Transkript

1 Design och konstruktion av grafiska gränssnitt Olof Torgersson Interaktionsdesign Data- och informationsteknik Chalmers/GU 1

2 Idag Organisera innehåll forts, Getting round Swing Application Framework & Actions Kod bakom lab 1 Kursutvärdering mm Till kursutvärderingen behövs några frivilliga Vem? Första möte på måndag efter föreläsningen? Det går inte att anmäla sig till tentan, men det ska finnas plats till alla Lab 2 börjar inte denna veckan. Läs och repetera istället 2

3 Interaktionsdesignspraxis Fastställ behov och krav loop Utveckla alternativa designförslag Bygg interaktiva prototyper för kommunikation and analys Utvärdera designen baserat på prototyperna end loop 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 Först lite organisera innehåll 3

4 (15) one-window drilldown Vad Visa alla applikationens vyer/sidor i samma fönster. När man väljer ett alternativ byts hela ytan ut mot den nya sidan. När Programmet består av många olika sidor (organiserade linjärt eller hierarkiskt) att navigera genom och man har en liten skärm eller det blir enklare för användarna på detta sätt. Varför Enkelt. Allting finns på en skärm. Alla vet hur man navigerar på webben som funkar på detta sätt. Hur Organisera innehållet i lagom stora delar. Förse dessa med lämpliga navigationskontroller. Se till att man kan komma tillbaka. Andra mönster som Breadcrumbs kan vara till hjälp. Exempel 4

5 (16) alternative views (16) alternative views Vad Låt användaren välja mellan flera olika vyer som är signifikant olika När Applikationer som visar upp någon form av strukturerat innehåll som kan ses på olika sätt Varför En vy räcker inte för att fungera bra för allt som behövs. Genom att skifta synvinkel ges fler möjligheter och mer/annan information. Hur Designa speciella vyer för scenarios som inte fungerar bra med standardvyn. Visa dessa istället för standardvyn. Placera en switch för att byta vyer på något lämpligt ställe. 5

6 Exempel (14) canvas + palette (18) extras on demand Läs också 6

7 GETTING AROUND Navigera Enkel tumregel Ju mindre navigation desto bättre Få fönster Allt man behöver tillhands Analogi gå in i nytt rum Ta in all information som finns bakom dörren Undvika djupa gångar Många rum att ta in och man ska tillbaka också Försök alltid eliminera onödiga steg Före Under Efter designprocessen 7

8 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 Minimera navigation Next lite mönster när man ändå måste navigera (21) Clear entry points 8

9 (21) clear entry points Vad Ha bara några få ingångar till programmet. Gör dessa uppgiftsorienterade och tydliga När (Uppgiftsbaserade) program som används sällan. Om uppgiften är uppenbar kan det bara vara ett irriterande extrasteg Varför När man startar ett program kan man mötas av ett komplicerat GUI med massor av möjligheter där det inte är uppenbart vad man ska göra. Hjälp användaren förbi detta steg. Hur Visa ett antal tydliga dörrar när programmet startar. Därifrån går man vidare till det man ska göra. Dörrarna kan vara ikoner, text etc, men de ska kunna förstås av förstagångsanvändare Exempel 9

10 forts (22) global navigation 10

11 (22) global navigation Vad Använd en liten del av varje sida/skärm till att visa en uppsättning knappar/länkar som leder till programmets olika delar När Mer komplicerade applikationer med ett antal olika avdelningar och verktyg där man kan vilja byta mellan dessa. Det finns tillräckligt med utrymme (sovereign) Varför På webben är detta vanligt och kan förväntas av användare. Det kan också vara användbart i vanliga applikationer och ger användaren en översikt och hjälp att utforska. Hur Organisera först upp innehållet. Det kan inte finnas för många olika delar. Designa en navigeringspanel som är samma överallt och som finns på samma ställe. Markera var man är nu tydligt. Exempel 11

12 (26) sequence map (26) sequence-map Vad Visa på varje sida i en sekvens en karta över alla steg, med markering för var man är nu. När Man har en applikation där ett antal olika steg ska gås igenom. Navigationen är huvudsakligen linjär. Varför Ge en bild både av vad man klarat av och hur mycket det finns kvar. Ge en känsla av sammanhang. Hur Placera en liten karta när någon kant (över, under, vänster ) på samma ställe överallt. Visa tydligt var man är nu och vilka delar man redan besökt. 12

13 (26) exempel (27) breadcrumbs 13

14 (27) breadcrumbs Vad Visa på alla sidor i en hierarkiskt ordnad applikation en karta över alla överliggande sidor ända upp till huvudsidan När Användarna navigerar runt, vanligen kombinerat med onewindow drilldown. Kan kombineras med sökning Varför Hjälper användaren att förstå var han/hon är. Spåret ger en bild av en del av applikationen. Fungerar även om man inte navigerat dit. Hur Placera en sekvens av text eller bilder nära toppen på sidan som visar vägen från toppen till nuvarande sida. Man kan typiskt navigera till vilken sida som helst i sekvensen direkt genom att klicka. Exempel 14

15 (29) color-coded sections (22) color-coded sections Vad Använd färg för visa vilken del av en applikation en sida hör till När Applikationen består av många sidor/skärmar som kan grupperas logiskt i olika enheter. Varför Fungerar som en markör/skylt för var man är. Kan göras subtilt eller övertydligt. Håller också ihop delarna. Ytterligare en navigationsindikator som övriga. Hur Ha något element som byter färg för de olika sektionerna. Bakgrund är ofta för markant. Bättre nån ram, dekoration el dyl. Fungerar kanske inte för färgblinda. 15

16 (29) exempel Läs också (24) pyramid (31) escape hatch 16

17 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 Minimera navigation Navigationsmönster clear entry points, global navigation Summan av detta saker att utgå från i en top-down process Mer kommer SWING APPLICATION FRAMEWORK 17

18 Program är lika Alla program har gemensamma delar Starta Ladda GUI Avsluta Dumt att koda detta om och om igen Applikationsramverk istället Swing Application Framework.NET Cocoa Swing Application Framework Avsett för mindre och medelstora program Hjälper till med: Application life-cycle startup, shutdown Stöd för att hantera resurser strängar, bilder, färger, fonter Stöd för Actions, inklusive actions som körs i bakgrunden Persistent state sparar fönsterstorlekar etc Det finns andra mycket mer fullständiga ramverk NetBeans platform Eclipse platform. NetBeans ger extra stöd med en projektmall för SingleFrameApplication Detta används i labben 18

19 Översikt Life-cycle public class AddressBookApp extends SingleFrameApplication launch sköts av SingleFrameApplication, anropas av main initialize optional startup NetBeans-mallen skapar huvudfönstret. ready - optional exit anropas av SingleFrameApplication när fönstret stängs. shutdown här placerar man kod som ska utföras innan programmet stängs ner Görs i labben 19

20 Förhindra protected void startup() { show(new DesktopApplication3View(this)); addexitlistener(new ExitListener() { public boolean canexit(eventobject e) { boolean boktoexit = false; Component source = (Component) e.getsource(); boktoexit = JOptionPane.showConfirmDialog(source, Vill du verkligen avsluta?") == JOptionPane.YES_OPTION; return boktoexit; public void willexit(eventobject event) { ); Resurser Sköts på det stora hela av NetBeans Exempel från labben ResourceMap resourcemap = AddressBookApp.getApplication().getContext(). getresourcemap(getclass()); ImageIcon frameicon = resourcemap.getimageicon("frame.icon"); this.getframe().seticonimage(frameicon.getimage()); Actions är ytterligare en feature men först något om Actions i Java 20

21 Actions - vad & varför? Ofta har man t ex både en meny och en knapp i ett verktysfält som göra samma sak De har samma actionperformed Kanske samma text Samma tooltip Samma ikon Ska vara enablade och disablade samtidigt etc Det blir mycket duplicerad kod Ett Action object samlar allt på samma ställe, sen amenu.setaction(action) abutton.setaction(action) Hjälp Interface Action Klass AbstractAction Det enda man behöver implementera är metoden actionperformed i en subklass till AbstractAction Action leftaction = new LeftAction(); button = new JButton(leftAction) menuitem = new JMenuItem(leftAction); leftaction.setenabled(false); 21

22 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 och resten med public void new() { // do something public void new(actionevent evt) { // do something 22

23 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 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; 23

24 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; 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()); textfield.settext(c.get ()); 24

25 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(); 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 Nästa gång Fler designmönster Lite mer Swing 25