Design och konstruktion av grafiska gränssnitt

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

Idag Lite av varje LayoutManagers Sista Tidwell Backend projekt (Små skärmar) Tenta 55% av betyget Hjälpmedel 1 A4 (2 sidor) med egna anteckningar skrivna för hand eller på dator Innehåll (kort version) Allt som gåtts igenom på kursen Tidwell förutom kap 8 Utdelat material (mer kommer) Föreläsningar Att läsa förutom boken Cooper Implementation Models and Mental Models Cooper Platform and Posture Cooper Orchestration and Flow Cooper Eliminating Excise Cooper Menus Cooper Toolbars Dessutom tillkommer GUI-historia, länk finns på hemsidan under resurser Cooper några sidor om personas Text om utvärdering 2

Tidwell Hela boken förutom kapitel 8 Alla kapitelintron ska läsa då de innehåller sammanfattande kunskap kring det område som behandlas i kapitlet Läs Preface också Kapitel 1 Kunna sammanfatta o exemplifiera 1, 2, 3, 4, 5, 7,8,11 Känna igen/känna till 6,9,10,12 Kapitel 2 Kunna sammanfatta o exemplifiera 13, 15, 16 Känna igen/känna till 14, 17, 18 Tidwell Kapitel 3 Kunna sammanfatta o exemplifiera 21, 22, 26, 27, 29 Känna igen/känna till 23, 24, 25, 31 Kapitel 4 Kunna sammanfatta o exemplifiera 32, 33, 34, 35, 38, 43 Känna igen/känna till 36, 37, 41, 42 Kapitel 5 Kunna sammanfatta o exemplifiera 44, 45, 46 Känna igen/känna till 49, 50 3

Tidwell Kapitel 6 Kunna sammanfatta o exemplifiera 59, 60, 63, 64 Känna igen/känna till 54, 61, 62 (56) Kapitel 7 Kunna sammanfatta o exemplifiera 68, 69, 70, 71, 77 Känna igen/känna till 71, 72, 74, 75, 76, 78 Kapitel 9 Kunna sammanfatta o exemplifiera 89 Känna igen/känna till 88, (90, 93) Vad har vi? Användarstudier, mentala modeller, personas Platform & Posture kategorier intermediate, expert, novice Organisera innehåll - lista objekt, handlingar,,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 Ett antal olika sätt att utföra handlingar och affordances Button groups, action panel Shneidermans och Nielsens principer Flow, Showing complex data Cascading lists, row striping Getting input from user En massa kontroller, Structured format, input hints Eliminating excise tips/regler för att undvika krångel Making it look good (färger etc) och lite om non-desktop Summan av detta saker att utgå från i en top-down process 4

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 Föreläsningen nästa torsdag kommer att ta upp utvärdering Layout Managers NetBeans använder som standard Free Design-layout manager Bra för att designa GUI:n med editor Man kan använda andra layout-managers Kan vara bra i vissa situationer Nämner vilka 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 5

BorderLayout BoxLayout 6

CardLayout Visat förut Användbart för att byta panel Tabbed Panes kan vara ett alternativ Vilket som är lämpligt beror på sammanhang FlowLayout Standardlayout i Swingkomponenter om man inte anger något 7

GridBagLayout Avancerad layout för handkodning GridLayout Bestämt antal rader och kolumner av lika stora komponenter 8

Storlek & Tomrum Free Layout placera saker där de ska vara och hoppas på det bästa Storlek Man kan sätt preferred, max och minstorlek Layout-managers måste inte bry sig om detta Mellanrum Kan sättas i vissa Layoutmanagers inte i andra Osynliga komponenter som tar plats Se using BoxLayout 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 MAKING IT LOOK GOOD 9

Typografi Vilket/vilka typsnitt man använder spelar också roll för vilket intryck man ger Sans-serif Serif Sans-serif ofta bättre i små storlekar på datorskärm forts ANVÄNDA INTE TEXT MED BARA STORA BOKSTÄVER EFTERSOM DET ÄR SVÅRARE ATT LÄSA Undantag kan vara vissa rubriker Undvik kursiv text eller fonter med mycket ornament eftersom de är svårare att läsa 10-12 ord per kolumn är ungefär lagom för att behålla läsbarhet (10 + siffror) Låt kortare textstycken vara vänsterjusterade GUI-kits och guidelines har vanligen rekommenderade fonter och fontstorlekar 10

Exempel Text skriven med en font och sen kan man jämföra med intrycket som en annan font ger (Arial) Text skriven med en font och sen kan man jämföra med intrycket som en annan font ger (Didot) Text skriven med en font och sen kan man jämföra med intrycket som en annan font ger (Verdana) Text skriven med en font och sen kan man jämföra med intrycket som en annan font ger (Comic Sans MS) Text skriven med en font och sen kan man jämföra med intrycket som en annan font ger (Goudy old style) forts Text skriven med en font och sen kan man jämföra med intrycket som en annan font ger (Chalkboard) Text skriven med en font och sen kan man jämföra med intrycket som en annan font ger (Georgia) Text skriven med en font och sen kan man jämföra med intrycket som en annan font ger (Bank Gothic) Text skriven med en font och sen kan man jämföra med intrycket som en annan font ger (Courier) Text skriven med en font och sen kan man jämföra med intrycket som en annan font ger (Lucida Grande) 11

Rymd, vinklar o textur Hur mycket man stoppar in på en sida spelar roll Alltför mycket kan vara stressande (visual excise) Å andra sidan kan det vara hemtrevligt Träning/omdöme Vinklar o kurvor Lagom är bäst typ Ha inte alltför många olika formelement Textur När man ska täcka en yta ser ofta någon slags textur bättre ut än bara att fylla med en färg Typiskt icke-markanta saker gjorda av små variationer Bilder Kan vara effektivt, men finns i desktop-gui:n mest när de har en funktion (ikoner) Desktop-GUI:n Desktop-GUI:n ofta hårt styrda av design-guidelines Speciellt nyttoprogram Man kan dock profilera sig genom att göra egna grejer Exempel Bakgrunder Visat hur man kan göra en JPanel med bild som bakgrund Färger och fonter Går att styra, bara man har en tanke bakom Kanter I Java kan man styra kanter på en massa sätt http://java.sun.com/docs/books/tutorial/uiswing/components/border.html Bilder Visat hur man kan göra knappar helt byggda av bilder Träd, listor mm kan också justeras med bilder 12

(32) visual framework (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 13

Exempel forts 14

(88) deep background (88) deep background Vad Placera en bild i bakgrunden som ger intryck av att finnas bakom övriga gränssnittselement När Man har en layout med ett antal distinkta GUI-element som inte är särskilt överbefolkad och vill att det ska vara intressantare än med vanlig vit/grå bakgrund Varför Lyckas man göra en bakgrund som ser ut att finnas bakom så kan det vara snyggt helt enkelt Hur Lite överkurs. Boken talar om soft focus, color gradients, depth cues och no strong focal points 15

Exempel (89) few hues, many values 16

(89) few hues, many values Vad Välj en, två eller max 3 huvudkulörer (hues). Skapa en färgpalett genom att ha olika varianter av dessa När Man skapar en färgpalett och vill undvika ett splittrat intryck, men ha någon slags karaktär Varför Alltför många färger, speciellt klara och mättade gör lätt GUI:t överlastat och stökigt. Färgerna slåss om användarens uppmärksamhet. Hur Välj ett par färger (svart o vitt räknas inte) Sen kan man ha ett stort antal inom dessa färger om det krävs. Verktyg som visats kan vara användbara för detta. Exempel 17

IMAT-BACKEND Grunder IMatDataHandler Singleton IMatDataHandler.getInstance() Facade Samlad ingång till bakomliggande funktioner Grundläggande funktionalitet Ladda/spara data Komma åt produkter Komma åt Customer, CreditCard, User Komma åt ShoppingCart Komma åt orderhistorik Ta fram bilder Hantera favoriter 18

Grunder, forts Customer, CreditCard, User getcustomer getcreditcard getuser Enkla klasser Ger ett objekt av varje, mer behövs inte Innehåll sparas Anropa shutdown() när programmet avslutas ShoppingCart getshoppingcart() Tillståndet sparas Lite metoder för att lägga till/ta bort innehåll addshoppingcartlistener Kan lägga till en lyssnare som meddelas när kundvagnen ändras Implementera ShoppingCartListener shoppingcartchanged 19

ShoppingItem Produkt + mängd Bra för att lägga till 3st eller 4,5 kilo av något till kundvagnen Konstruktor för 1 produkt och för produkt + mängd ShoppingItem(Product product, double amount) Product Behållare med namn, pris, kategori, enhet etc för produkter Skapas automatiskt när backenden läser in data Varje produkt har ett unikt id ProductCategory Enumeration med de kategorier som finns som default Javadoc ger översättning för vissa 20

Hitta produkter IMatDataHandler har ett antal metoder för att plocka fram produkter List<Product>findProducts(String s) Produkter med matchande namn List<Product>getProducts() Alla produkter List<Product>getProducts(ProductCategory pc) Alla produkter i en viss kategori Product getproduct(int idnbr) Produkt med ett visst id-nummer Order Motsvarar en beställning IMatDataHandlern skapar automatiskt ett Order-objekt när man gör en beställning placeorder() placeorder(boolean clearcart) Alla ordrar som gjorts sparas automatiskt och läses in vid omstart För att göra orderhistorik behöver man alltså bara hantera hur ordrar visas upp 21

Mer IMatDataHandlern tillhandahåller godtyckligt skalade bilder för produkter getimageicon(product p) getimageicon(product p, Dimension d) getimageicon(product p, int width, int height) Dessa går bra att sätta som bilder på knappar, labels etc seticon För den som vill ha favoriter så stöds det Arkitektur API Frågor? Arkitektur Ha flera forms i implementationen! Ingen arkitektur Extralager ovanpå IMatDataHandler Extralager + central controller/presenter Extralager + flera controller/presenter Inget extralager flera controller/presenter Extralager på central director + flera controller/presenter 22

Demo Non-desktop Vanliga datorer bara en liten del av allt som har ett GUI Mobiler Mikrovågsugnar Displayer i bilar Bankomater Informationskiosker Biljettautomater ipod/ipad etc Kylskåp 23

Några tips Tänk inte på produkten som en dator Designar man en ugn/mediaspelare/infotainment så gäller andra förväntningar Försök inte trycka in ett förminskat standard-gui Integrera mjuk- och hårdvarudesign ipod succé tack vare integrering av hårdvara o mjukvara iphone samma sak Egentligen samma sak som att inte tänk på produkten som en dator forts Låt kontext driva design Användare o deras situation alltid viktig Ännu mer här Vanliga GUI:n har rätt mycket givet Man sitter vid en skärm Har troligen mus o tangentbord Non-desktop Handdator Informationskiosk Avancerad ugn System i bil Helt olika förutsättningar 24

forts Begränsa användning av olika modes T ex verktygspaletter som ger olika modes Avgränsa väl Handdatorer som försöker vara allt har ingen historia av framgång Ofta bättre göra få saker bra än många dåligt Satellit till desktop-program kan vara användbart koncept Balansera navigation och diplaytäthet Vanligen liten skärm Man måste jobba med avvägning mellan hur mycket som kan synas på en sida och att flera sidor leder till mer navigation forts Minimera inmatningskomplexitet Typiskt inget tangentbord Även bästa varianter fippliga i jämförelse Viktiga att minimera och förenkla inmatning så mycket som möjligt 25

Handenheter Fundera på hur enheten kommer att hållas och bäras Här behövs modeller av enheten och scenarios för hur den ska användas Det är stor skillnad på en enhet för lagerföring och en fjärrkontroll för TV Bestäm tidigt om applikationen ska stödja enhands eller tvåhandsoperationer Här behövs användningsscenarion Finns det vissa sammanhang där det är ok att 2 händer krävs forts Bestäm om applikationen ska vara stand-alone eller satellit Stand-alone fristående Satellit extragrej till desktopapplikation itunes Man kan lämna avancerade operationer till den mer lämpade desktopapplikationen Handenheten reduceras till det som verkligen behövs mobilt Undvik flera fönster och dialoger På små skärmar är det typiskt ingen plats för mer än en skärm åt gången Dela upp i lämpliga delar och ordna bra navigation lösningen 26

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 (15) one-window drilldown 27

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

(23) hub and spoke (23) hub and spoke Vad Isolera de olika delarna i mini-applikationer. Alla med en väg in från huvudsidan och en väg ut till huvudsidan När GUI:t innehåller flera olika väl avgränsade uppgifter. Använd huband-spoke om man vanligen inte navigerar direkt mellan olika saker. Typiskt för små skärmar i kombination med one-window drilldown Varför Man reducerar navigationsmöjligheterna och förenklar därmed både GUI och navigation. Det är också ganska enkelt att lägga till nya saker i den centrala hubben Hur Dela upp innehållet i ett antal miniapplikationer. Var och en kan designas som det är bäst. Se till att alla är åtkomliga från en central hub 29

Exempel Vad har vi? Användarstudier, mentala modeller, personas Platform & Posture kategorier intermediate, expert, novice Organisera innehåll - lista objekt, handlingar,,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 Ett antal olika sätt att utföra handlingar och affordances Button groups, action panel Shneidermans och Nielsens principer Flow, Showing complex data Cascading lists, row striping Getting input from user En massa kontroller, Structured format, input hints Eliminating excise tips/regler för att undvika krångel Making it look good (färger etc) och lite om non-desktop Summan av detta saker att utgå från i en top-down process 30