Design och konstruktion av grafiska gränssnitt

Transkript

1 Design och konstruktion av grafiska gränssnitt Olof Torgersson Interaktionsdesign Tillämpad informationsteknologi Chalmers/GU Idag Kursutvärdering Organizing content Tidwell kap 2 Menyer verktygsfält Doing things Tidwell kap 6 Enkät för projekt! 1

2 Kursutvärdering Behöver representanter för kursutvärdering Tidigare resultat Kursen ok Typiska klagomål Mycket i slutet Mer programmering än väntat Justeringar Se till att det finns jobb från dag 1 Understryka behovet av att börja direkt Mer handledning av projekt Organisera innehåll Tidwell kap 2 Har pratat om användare och designprocess Organisera innehåll nästa steg Informationsarktektur Delar Logisk kategorisering utan gränssnittstankar Kategorier av innehåll Grupper av verktyg Indelning i olika sidor/paneler/fönster 2

3 Struktur Dags att börja organisera i fönster/kontroller Först övergripande ansats 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? Några vanliga Multiple Windows Tiled Panes One-Window paging De två första tillåter mycket mer frihet för användaren Är detta bra eller dåligt? 3

4 Enskild sida Varje enskild sida gör en av Visa upp en sak Karta, bok, film, spel. Visa en lista av saker Tillhandahålla verktyg för att skapa ngt Underlätta en enskild uppgift Diverse mönster för varje grupp Kan fungera som utgångspunkt för design Visa upp en sak 4

5 Visa upp en lista Verktyg för att skapa något 5

6 Underlätta en uppgift Mönster Tidwell: kapitel som fokuserar på olika saker inom GUI-design Inledning med allmän teori Ett flertal designmönster Designmönster 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 6

7 ZooKeeper Mönster Center stage Progress indicator Button group 7

8 Feature Search and Browse Feature Search and Browse Vad 3 element på huvudsida: feature, sökruta, lista att bläddra i När Man har långa listor som passar för att söka och bläddra. Vill erbjuda något direkt Varför Mycket vanligt. Söka och bläddra kompletterar varandra väl. Hur Sökruta längst upp. Feature center stage. Lista nära feature. Se till att feature visar intressant innehåll 8

9 Exempel Wizard 9

10 Wizard Vad Led användaren steg för steg i given ordning När Flertal steg, användaren behöver hjälp och är villig att överlåta kontroll Varför Underlätta genom att dela i flera steg Hur Dela upp informationen Navigation Karta Wizard 10

11 Alternative Views Vad Låt användaren välja mellan flera olika vyer som är signifikant olika När Applikationer som visar upp någon form av strukturerat innehåll som kan ses på olika sätt Varför En vy räcker inte för att fungera bra för allt som behövs. Genom att skifta synvinkel ges fler möjligheter och mer/annan information. Hur 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. Exempel 11

12 Canvas Plus Palette Exempel 12

13 Many Workspaces Many Workspaces Vad Använd flera tabbar/fönster på toppnivå så användaren kan ha flera sidor/projekt/filer/.. öppna samtidigt När Program där man betraktar/arbetar med någon slags innehåll Varför Folk multitaskar, underlättar därför byte fram o tillbaka Hur Tabbar Flera fönster Flera kolumner/paneler i ett fönster 13

14 Exempel Läs också Dashboard Multi-Level Help Följande kan läsas kursivt News Stream Picture Manager Settings Editor 14

15 Egna paneler i NetBeans Properties Dra ut på designen Behöver kompilera först CardLayout Controller Lite kodning (f3demo) MENYER OCH TOOLBARS 15

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

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

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

19 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å 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 A visual guide to Layout Managers 19

20 BorderLayout BoxLayout 20

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

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

23 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 ButtonTestAbsolute AbsoluteLayout Designade knappar Ingen kod krävs Demo f4demo1 Designad panel med properties Annan LayoutManager Lägger till många paneler med kod Exit på svenska 23

24 Actions and Commands DOING THINGS Doing Things Tidwell kapitel 6 Pratat om organisation, struktur, lite layout etc Nu något om att göra saker Inte så mycket nytt 24

25 Vad man har att jobba med Knappar Enkla och tydliga Bör grupperas meningsfullt Menyrader Huvudsakligen desktop-program Ger en karta över alla funktioner Verkar på både hela programmet och enskilda objekt Pop-up-menyer Högerklick Verkar på enskilda objekt Drop-down-menyer Inte så bra för actions eftersom de vanligen används för att sätta tillstånd forts Verktygsfält Pratat om Om de har ikoner ska dessa vara meningsfulla Länkar Mest på webben Har börjat synas i desktop-applikationer också Kan implementeras som en knapp utan ikon med understruken text Trenden att använda knappar för actions, länkar för innehåll Action panels Eller task panels I princip menyer som alltid syns Exempel senare 25

26 forts Dubbelklick Tolkas oftast som öppna Eller gör vad det nu är man brukar göra med en sån här Keyboard actions Talat om Ha shortcuts och mnemonics där det förväntas Drag-and-drop Flytta eller gör något med detta Kontextberoende och kräver viss programmering En hel massa kontroller 26

27 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 Ett glas affordance är att dricka Glaset inbjuder till att dricka En bolls att kasta den Bollen inbjuder till att kasta Vissa handtag att man ska dra andra att man ska trycka Affordance existerar oberoende av om någon ser det Det finns inbyggt i objektet Affordance o 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 Man uppfattar affordances som inte finns Dvs 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 det man uppfattar ska hända 27

28 Fundera Fundera över affordances som inte funkar Dvs saker som gör något annat än man tror Gärna GUI-exempel 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 28

29 Button Groups Button Groups Vad Placera relaterade actions ihop i en grupp av knappar typiskt alignade horisontellt eller vertikalt. Skapa flera grupper om det är mer än 3-4 st När Man presentera ett litet antal actions som hör ihop logiskt. Typexempel OK, Cancel, Apply etc Varför Gruppen gör GUI:t enklare att förstå genom att gruppen står fram som en enhet. Principer som proximity och similarity förstärker. Hur Använd verb eller verbfraser som titlar, gruppera och låta alla knappar ha samma storlek. Knapparna placeras till höger om det de verkar på ( ibland nedanför, men då gärna längst ner). 29

30 Exempel forts 30

31 Action Panel Action Panel Vad Som komplement till menyer visa ett antal relaterade actions på en panel med rik visuell design som alltid är synlig När Man behöver visa många actions, fler än vad som ryms i en Button Group. Att bara ha dem i en meny eller pop-up-meny gör dem inte tillräckligt synliga. Det är inte ont om skärmutrymme. Varför Synlighet och presentation. En action-panel är logiskt sett en meny, men har en helt annan synlighet. Det finns också större utrymme för design. Kan ses som ett exempel på koncept importerat från webben. Hur Avsätt en del av GUI:t för action-panelen. Typiskt vid sidan. Inte för långt bort från det den påverkar. Låt panelen vara dynamisk så att den bara visa aktuella actions, sen får man hitta på en presentation 31

32 Exempel Prominent Done Button 32

33 Prominent Done Button Vad Placera knappen som markerar slutet på en transaktion i slutet av GUI:ts visuella flöde. Gör den stor och ha en bra text När Närhelst man behöver en knapp som OK, Skicka etc. Mer generellt använd det för att avsluta varje steg i en process som att handla on-line 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. 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. Exempel 33

34 Hoover Tools Progress Indicator Cancelability Läs också Att göra Läs kap 2 och 6 i Tidwell Läs text om menyer och verktygsfält Känna till olika layoutmangers Jobba med labben 34