Design och konstruktion av grafiska gränssnitt

Transkript

1 Design och konstruktion av grafiska gränssnitt Olof Torgersson Interaktionsdesign Tillämpad informationsteknologi Chalmers/GU 1

2 Idag Organisera innehåll forts, Getting round Lite demo 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

3 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 (16) alternative views 3

4 (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. Exempel 4

5 (14) canvas + palette (18) extras on demand Läs också Demo Knappar Många paneler Exit på svenska 5

6 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 6

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

8 (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 8

9 forts (22) global navigation 9

10 (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 10

11 (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ära 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. 11

12 (26) exempel (27) breadcrumbs 12

13 (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 13

14 (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. 14

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

16 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 Lab 1 Vanliga problem Sparar inte när man byter direkt Tar inte bort text/visar annat kort vid delete Kan välja flera, men bara ta bort en Sätter inte markören vid ny kontakt Borde vara låst Varna vid ta bort Kan inte sätta svensk text på Exit 16

17 ACTIONS 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) 17

18 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); 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); } } 18

19 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 } Demo Actions 19

20 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. MVC 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; 20

21 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 ()); 21

22 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 Personas, 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 22