Design och konstruktion av grafiska gränssnitt Peter Börjesson [email protected] Projekt • Enkät, lämna in • Projektintro torsdag 4/2 Kursrepresentanter • Lista finns på kurshemsidan • Kursrepresntant GU • Möte på måndag 12.30 Idag • • • • • • Vad är ett mönster? Organisera innehåll (Tidwell kap. 2, Organizing Content) Menyer och verktygsfält (Cooper, kap. 22, Menus och kap. 23, Toolbars) (Kapitel 18, Designing for desktop i 4th edtion) LayoutManagers / LayoutPane Kodexempel Göra saker (Tidwell kap. 6, Doing Things) Vad är ett designmönster? Vad är ett designmönster? • Designmönster – Mönster är förslag på fungerande lösningar – Måste anpassas efter situationen – Innebär val som måste motiveras Vad är ett designmönster? • Designmönster – Mönster är förslag på fungerande lösningar – Måste anpassas efter situationen – Innebär val som måste motiveras • Nytta Vad är ett designmönster? • Designmönster – Mönster är förslag på fungerande lösningar – Måste anpassas efter situationen – Innebär val som måste motiveras • Nytta – Kan man många mönster ä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 Vad är ett designmönster? • Kapitel som fokuserar på olika saker inom GUI-­design – Inledning med allmän teori – Ett flertal designmönster • Läsanvisningar – Kunna sammanfatta och exemplifiera (Kunna ge en kortare beskrivning, liknande de som visas på föreläsningar och kunna illustrera mönstret med en skiss). – Känna igen / känna till (Kunna peka ut mönstret om det finns tex. på en bild av ett gränssnitt). Organisera innehåll Tidwell – Kapitel 2 • Har pratat om användare och designprocess • Hur ska gränssnittet organiseras? – Information Architecture • Kan hjälpa att fundera på data och vad som ska göras med den – Logisk kategorisering utan gränssnittstankar • Vilka objekt ska visas för användaren? • Hur är de kategoriserade och ordnade? • Vad vill användaren göra med dem? – Indelning i olika sidor/paneler/fönster Struktur • • Organisera i fönster och kontroller – Ett fönster? – Flera fönster? – Ett fönster som byter sidor? – Flera paneler i ett fönster? – Alla på en gång? Inget enkelt svar – Användning/användare styr • Vad är man van vid? • Behöver man jobba med annat samtidigt • Vilka delar måste finnas tillgängliga på samma gång? • Posture •… Posture • Transient posture – Applikationer som används kort tid för små uppgifter – Färre funktioner, enklare och tydligare • Byta låt, kolla väder, hitta en fil Posture Enskild sida • Varje enskild sida gör i huvudsak en av följande: – Visa upp en sak – Visa en lista av saker – Tillhandahålla verktyg för att skapa något – Genomföra en uppgift • Ofta kombinationer av ovanstående • Mönster för varje grupp – Kan fungera som utgångspunkt för design Visa upp en sak Visa upp en sak Visa upp en lista Visa upp en lista Verktyg för att skapa något Verktyg för att skapa något Genomföra en uppgift Genomföra en uppgift Mönster Organizing Content – Kapitel 2 • • • • • Feature, Search and Browse Wizard Alternative Views Canvas Plus Palette Many Workspaces • • • • • Multi-­Level Help Picture Manager News Stream Dashboard Settings Editor Feature, Search and Browse Feature Search and Browse Vad? Tre element på sidan: • En huvudartikel (feature) • En sökruta • En lista med saker att bläddra i När? Man har långa listor som passar för att söka och bläddra och samtidigt vill erbjuda något direkt för att ”fånga” användaren. Varför? Väldigt vanligt mönster som finns överallt. Söka och bläddra kompletterar varandra bra samtidigt som sidan blir mer engagerande med en feature. Hur? • • • Feature i Center Stage (kap 4) Sökruta som är lätt att hitta Lista nära feature som är lätt att hitta. Feature, Search and Browse Feature, Search and Browse Feature, Search and Browse Feature, Search and Browse Wizard Wizard Vad? När? Led användaren genom gränssnittet Lång och komplicerad uppgift där för att utföra en uppgift steg för steg användaren behöver hjälp och är i en bestämd ordning beredd att släppa kontrollen. Varför? Gör en komplicerad uppgift lättare genom att dela in den i flera steg. Hur? • • • Dela upp information Navigation Karta Wizard Wizard Wizard Alternative Views Alternative Views Vad? Låt användaren välja mellan flera olika vyer som är väsentligt olika När? Applikationer som visar upp någon form av strukturerat innehåll som kan ses på olika sätt Varför? Hur? En vy räcker inte för att fungera bra för allt som behövs. Genom att ”byta lins” ges fler möjligheter och mer/annan information. 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. Alternative Views Alternative Views Alternative Views Alternative Views Alternative Views Alternative Views Alternative Views Alternative Views Canvas Plus Palette Canvas Plus Palette Vad? När? En tom canvas tillsammans med en Applikationer som innehåller en palett med ikoner. Användaren grafisk editor, man skapar nya klickar på paletten för att skapa objekt i något virtuellt utrymme. objekt på canvasen. Varför? Beprövad och väldigt vanlig design med bra mappning till verkliga objekt. Hur? En stor tom yta visas för användaren och runtom visas paletter med ikoner. Canvas Plus Palette Canvas Plus Palette Canvas Plus Palette Many Workspaces Many Workspaces Vad? När? Använd flera tabbar/fönster på Applikationer med innehåll som toppnivå så användaren kan ha flera antingen betraktas och arbetas sidor/projekt/filer/.. öppna samtidigt. med. Låt om möjligt användaren placera dom sida vid sida Varför? Folk multitaskar, de avbryter en sak och börjar med en annan. Websidor behöver oftast inte implementera detta mönster Hur? • Tabbar • Flera fönster • Flera kolumner eller paneler i ett Jämförelser sida vid sida kan hjälpa fönster användaren. Many Workspaces Many Workspaces Läs också Organizing Content – Kapitel 2 • • • • • Feature, Search and Browse Wizard Alternative Views Canvas Plus Palette Many Workspaces • • • • • Multi-­Level Help Picture Manager News Stream Dashboard Settings Editor Menyer och Toolbars Cooper 3rd ed. – Kapitel 22 & 23 Cooper 4th ed. – Kapitel 18 Menyer och Toolbars Cooper 3rd ed. – Kapitel 22 & 23 Cooper 4th ed. – Kapitel 18 • • • Är två vanliga sätt att utföra handlingar Saker händer direkt eller en dialogruta visas. De kompletterar varandra • • Menyer är äldre än grafiska gränssnitt Toolbars slog igenom ungefär 1989 Menyer • Fungerar som en karta över alla funktioner i programmet – Vad kan jag göra? – Vad kan jag inte göra? • • • • Nånting Nånting … Nånting Nånting > • Bör inte ha mer än 1 nivå – Behövs mer kan man visa en dialog • • • • • Menyer Namn – Tillräckligt långa – Beskrivande Kortkommando / Accelerators – Ctrl-­S – Se till att de som förväntas finns – Följ standards Mnemonics / Access keys – (Alt + F + S) = File -­> Save – Gör komplett Ikon – Koppla samman knapp i toolbar och meny Disabled items 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å Standardmenyer • De vanligaste menyerna ungefär samma på vanliga plattformar – Kolla specifika guidelines om man designar för viss plattform • Window/Fönster – Arrangera om fönster eller dokument (Krävs fler än ett för att vara nödvändig) • Help/Hjälp – Om programnamn – Olika hjälpalternativ – Cooper förespråkar ett alternativ Shortcuts/Genvägar Andra vanliga menyer • View/Visa ( Mac: Innehåll ) – Hur man betraktar innehåll och data – kontroll av verktygsfält etc. vad som ska synas • Insert/Infoga – Infoga nya saker i ett dokument, tabeller, bilder, ljud,… Andra vanliga menyer • Format/Format – Formattering, typ font, stil, storlek, justering • Tools/Verktyg – Större kraftfulla funktioner, t ex • Stavningskontroll • Hard-­hat items – Funktioner som bara är för power-­users • Använd de konventioner som finns i guidelines för enskilda items Exempel Toolbars • Ger erfarna användare snabb åtkomst till vanliga funktioner – Menyer är en karta över alla funktioner • Använder icon buttons – Ikon + Button • Ofta anpassnings-­ och flyttbara – Dialoger + dockning • Skilj logiska grupper med en separator Toolbars • Ingen text, ha alltid tooltip • Disabla när de inte gäller – Ta inte bort dom – Detta förvirrar för användaren • Fler kontroller – Combobox – Visa ”state” med hjälp av ikonen – Låta menyer Toolbars The Ribbon • Merge mellan toolbar och menu • Tabbar Sammanfattningsvis Menyer – Använd menyer som en karta över programmet • Inaktivera menyval som inte kan väljas • Var konsekvent med användning av ikoner • Skriv ut accelerators i meny (CTRL-­S) • Skriv ut mnemonics/access keys (File, Save) Toolbars – Snabb tillgång till de viktigaste funktionerna • Mycket funktionalitet på liten yta • Inaktivera val som inte kan väljas • Använd Tooltips • Tänk igenom ikonval Layout Managers • NetBeans GUI editor använder som standard Free Design Layout – Bra för att designa GUI:n med editor • Man kan använda andra Layout Managers – Kan vara bra i vissa situationer – Nämner några som finns • För mer – Using layout managers: http://java.sun.com/docs/books/tutorial/uiswing/layout/using.html – A visual guide to Layout Managers http://java.sun.com/docs/books/tutorial/uiswing/layout/visual.html BorderLayout • • Fem områden;; top, bottom, left, right och center. Allt extra utrymme hamnar i center • Java FX BorderPane BoxLayout • Lägger komponenter på rad eller i kolumn • Java FX Vbox och HBox CardLayout • • Användbart för att byta panel i samma fönster Tabbed Panes kan vara ett alternativ – Vilket som är lämpligt beror på sammanhang • Java FX StackPane FlowLayout • • Standardlayout i JPanel om man inte anger något annat Lägger ut komponenter i rad så länge det finns plats och byter sedan rad • Java FX FlowPane GridLayout • Bestämt antal rader och kolumner av lika stora komponenter • Java FX BoxPane GridBagLayout • • • Avancerad layout för handkodning Grid av celler där varje komponent kan spänna över flera celler Rader kan ha olika höjd, och kolumner olika bredd Storlek & Tomrum • Free Layout – placera saker där de ska vara och hoppas på det bästa • Storlek – Man kan sätta preferred-­, maximum-­ och minimumSize – Layout Managers måste inte bry sig om detta • Mellanrum – Kan sättas i vissa Layoutmanagers inte i andra – Osynliga komponenter som tar plats – Osynliga Borders • Man kan sätta Borders på det mesta • Låter man dem vara ”osynliga” fungerar det som mellanrum • Kan ha vilken storlek som helst Demo Swing • • • • Egen designad panel med properties CardLayout Andra Layouts Borders • Lägger till många paneler med kod Demo FX • • • Egen designad panel CardLayout Andra Layouts • CSS Göra Saker Tidwell – Kapitel 6 • Pratat om att organisera innehåll, struktur och layout. • Nu något om att göra saker, inte så mycket nytt, mycket faller tillbaka på konventioner och standarder. • Finns mycket att göra för att göra gränssnittet lättare att använda, se till att rätt saker är tillgängliga, ge dom rätt namn och beskrivning och gör dom lätta att hitta. Vad man har att jobba med • Knappar – Enkla och tydliga – Bör grupperas meningsfullt • Menyfält – Huvudsakligen desktop-­program – Ger en karta över alla funktioner – Verkar på både hela programmet och enskilda objekt • Popupmeny – Kontextmeny – Högerklick – Verkar på enskilda objekt Vad man har att jobba med • Dropdown-­menyer – Undvik för actions eftersom de vanligen används för att välja saker eller sätta tillstånd • Toolbars – Om de har ikoner ska dessa vara meningsfulla – Innehåller ofta även andra kontroller som comboboxes – Finns även kontuextuella toolbars precis som menyer • Länkar – Mest på webben och nu även mobiler – Har börjat synas i desktop-­applikationer också – Implementeras som en knapp utan ikon med understruken text – Ofta knappar för actions, länkar för innehåll Vad man har att jobba med • Action panels – Task panels – I princip menyer som alltid syns – Exempel senare • Dubbelklick – Oftast: Öppna den här saken – Eller: Gör vad det nu är man brukar göra med en sån här Vad man har att jobba med • Keyboard actions – Talat om – Ha shortcuts och mnemonics där det förväntas • Drag-­and-­drop – Flytta den här dit – Gör något med den här – Kontextberoende • Direkt manipulation En hel massa kontroller Affordance • Ett ord som kan vara bra att känna till i dessa sammanhang • Betyder ungefär vad ett objekt utstrålar att man kan göra med det – Handtag att man ska dra – Panel att man ska trycka • Affordance existerar oberoende av om någon ser det – Det finns inbyggt i objektet Affordance och GUI • • • Människor uppfattar affordance direkt utan mellanliggande tankeprocesser Effekt: GUI-­objekts affordance kan underlätta användning – Knappar inbjuder till att trycka – Sliders till att dra –… Problem? Affordance och GUI • • • • Människor uppfattar affordance direkt utan mellanliggande tankeprocesser Effekt: GUI-­objekts affordance kan underlätta användning – Knappar inbjuder till att trycka – Sliders till att dra –… Problem – Användaren uppfattar affordances som inte finns • Användaren tror att man kan trycka, dra etc. men det går inte – Dåligt designade affordances som inte uppfattas • Dvs man lyckas inte förmedla det man vill Det ska vara tydligt vad man kan göra och vad som kommer att hända när man gör det. Mönster Doing Things – Kapitel 6 • • • Button Groups Action Panel Prominent ”Done” Button • • • Hover Tools Progress Indicator Cancelability Button Groups Button Groups Vad? När? Placera relaterade action i grupper Behöver visa många actions i av knappar som är alignade och gränssnittet och gruppera dessa på visuellt lika. Skapa flera grupper om ett logiskt sätt. fler än 3-­4 st. Cancel, Ok, Apply Varför? Hur? Gruppen gör gränssnittet lättare att förstå eftersom gruppen står fram som en enhet. Använd verb eller verbfraser som titlar, gruppera och låta alla knappar ha samma storlek och utseende. Närhet och likhet viktiga principer Finns det en primär action kan denna stå ut. Button Groups Button Groups Button Groups Action Panel Action Panel Vad? När? Som komplement till menyer visa ett antal relaterade actions på en panel med rik visuell design som alltid är synlig Man behöver visa många actions. Att bara ha dem i en meny eller popup-­meny gör dem inte tillräckligt synliga. Det är inte ont om skärmutrymme. Varför? • Synlighet och presentation • Logisk sett en meny men större synlighet och större frihet för design. Hur? Avsätt en del av gränssnittet för action-­panelen. Oftast vid sidan eller under. Inte för långt bort från det den påverkar. Låt panelen vara dynamisk. Action Panel Action Panel Action Panel Prominent ”Done” Button Prominent ”Done” Button Vad? Placera knappen som markerar slutet på en transaktion i slutet av gränssnitten visuella flöde. Gör den stor och ha en bra beskrivande text. Varför? Ett tydligt sista steg ger användarna en känsla av avslut. De behöver inte fundera på om man är klar eller inte. Det ska vara självklart. När? Man behöver en knapp som OK, Skicka, Fortsätt etc. Mer generellt används det för att avsluta varje steg i en process som att handla online eller fylla i ett formulär. Hur? Använd en knapp som ser ut som en knapp. Det är bättre med text som talar om vad som görs än en ikon. Placera knappen i slutet av sidans visuella flöde och gör den tydlig mot andra komponenter. Prominent ”Done” Button Prominent ”Done” Button Läs också Doing Things – Kapitel 6 • • • Button Groups Action Panel Prominent ”Done” Button • • • Hover Tools Progress Indicator Cancelability Att göra • http://www.ixdcth.se/courses/2016/dat216/attgorapervecka • Läs kapitel 2 och 6 i Tidwell • Läs kapitel 22 och 23 i Cooper (18 i 4th edition) • Känna till olika layoutmangers • Jobba med labb 2