Design och konstruktion av
grafiska gränssnitt
Peter Börjesson
peter.borjesson@ait.gu.se
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
