Design och konstruktion av grafiska gränssnitt Olof Torgersson Interaktionsdesign Tillämpad informationsteknologi Chalmers/GU Sjuk Kortföreläsning Idag Torsdag intro till projekt Kom då! 1
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 2
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 Menyer Beståndsdelar Namn Tillräckligt långa i slutet kompletterande dialog Spara som Kortkommando Ctrl-C Se till att de som förväntas finns Mnemonic Komplett Ikon Koppla samman knapp o meny Disable 3
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 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 4
Exempel 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å 5
NetBeans Meny + verktygsfält görs enkelt med GUI-editor och actions Layout of page elements ORGANIZING THE PAGE 6
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 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å 22 37 55. När: 1 mars, kl 19.00. 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 7
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å 22 37 55. När: 1 mars, kl 19.00. 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! 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å 22 37 55. När: 1 mars, kl 19.00. 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
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 Övre vänstra hörnet Start kolla nästan vad som helst 9
Tomrum Både sidan och verktygsfält i webbläsaren Tomrum 10
Gruppering osv 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 11
Ställen öga dras till Ha inte många Starkare till svagare Focal Points 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å 12
Proximity Saker som är nära varandra uppfattas som att de hör ihop Placera saker som hör ihop nära varandra Similarity Saker som har samma form, färg, storlek eller orientering, uppfattas som att de hör ihop 13
Continuity Vi vill forma linjer och kurvor som skapas genom sammanslagning av mindre enheter Kan man hitta linjer blir det snyggare Closure Vi grupperar saker i enkla slutna former som rektanglar även om de inte finns explicit representerade. Grupper uppfattas som slutna enheter. Måste inte göras med boxar kan bli för mycket 14
Alla på en gång 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
Visual Framework 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 16
2012-01-30 Exempel forts 17
Center Stage 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 18
2012-01-30 Exempel forts 19
Grid of Equals Grid of Equals 20
Grid of Equals Vad Arrangera innehåll i ett rutnät. Varje element är designat enligt samma mall. När Sidan innehåller många objekt med liknande innehåll och vikt Varför Rutnät som ger varje objekt samma utrymme understryker att de är likvärdiga. Ser snyggt och prydligt ut Hur Designa varje element. Typiskt inte bara som ren text utan bilder, rubriker etc. Skapa ett rutnät med en eller flera rader Exempel 21
Titled Sections 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 22
Exempel Module Tabs 23
Module Tabs 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 Exempel 24
forts Right/Left Alignment 25
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, Exempel 26
Liquid Layout 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. 27
Exempel Accordion Collabsible Panels Movable Panels Responsive Disclosure Responsive Enabling Diagonal Balance Läs också 28
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 Att göra Gör klart lab 2 Läsa Kapitel 4 i Tidwell Cooper om Menyer 29