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 Menyer och verktygsfält Organizing the page Kod bakom lab 1? Observera Text om menyer kommer att dyka upp på hemsidan Dröj inte med lab 2 Kräver sannolikt mer tid än den som finns i schemat Projektstart måndag 7/2 Väldigt viktigt att alla kommer då 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 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

4 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

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

6 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å NetBeans Meny + verktygsfält görs enkelt med GUI-editor och actions 6

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

8 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å När: 1 mars, kl 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å När: 1 mars, kl 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 8

9 Visuell Hierarki 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å När: 1 mars, kl 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 9

10 Visual Flow Ta hänsyn till hur man tenderar att ta in en sida Uppifrån o ner & vänster till höger T ex inte viktiga saker längst ner Jmfr Chalmers hemsida 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å 10

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

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

13 Alla på en gång Sidospår Dagens designproblem Navigeringsexempel i NetBeans Global Sequence Map Color Coded 13

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

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

16 forts (33) center stage 16

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

18 forts (34) titled sections 18

19 (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 innehållet lättare att 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 19

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

21 Exempel forts 21

22 (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ögerkolumnen 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, 22

23 Exempel (43) liquid layout 23

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

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

26 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 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 Labkod 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 Diskutera varianter för lab 2 26

27 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; } 27

28 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 ()); 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(); } 28