Design och konstruktion av grafiska gränssnitt

Transkript

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

2 Idag Lite av varje Doing things Golden rules Heuristics Intro usability Tenta 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 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 2

3 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 Actions and Commands DOING THINGS 3

4 Doing Things Pratat om organisation, struktur, lite layout etc Nu något om att göra saker Inte så mycket nytt 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 4

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

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

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

8 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 (44) button groups 8

9 (44) 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). Exempel 9

10 forts (45) action panel 10

11 (45) 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 (sovereign). 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 Exempel 11

12 (46) prominent done button (46) prominent done button Vad Placera knappen som markerar slutet på en transaktion i slutet av GUI:ts visual flow. 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. Bra design bygger på visuella principer som diskuterats. 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 visual flow. 12

13 Exempel Look & Feel i Java Java plattformsoberoende Kan köras på olika system Olika system har olika utseende Separerar View-Controller och Model Man kan byta utseende Varje system har sin speciella Look & Feel Kan också köra med Javas egen L&F på alla system 13

14 NetBeans-exempel Action panel Tabell Resize Look & Feel Application.lookAndFeel = system javax.swing.plaf.metal.metallookandfeel com.sun.java.swing.plaf.nimbus.nimbuslookandfeel Kan även sättas med kod Programmeringstips Knappar och paneler av bilder Exempel baserat på boken Swing Hacks Men åtminstone knappar byggda av bilder är vanligt 14

15 Word för Mac NÅGRA HCI-BEGREPP 15

16 Shneidermans gyllene regler Syfte: samla ihop en användbar mängd principer som kan tillämpas i de flesta sammanhang. Lite allmänbildning att känna till Bra att ha i bakhuvudet Låter självklara, men man kan kolla om man uppfyller dem (1) Strive for consistency. Försök alltid vara konsekvent, använd samma terminologi överallt, använd konsekventa färger, former, fonter, designmönster etc (2) Cater to universal usability Försök ta hänsyn till användarnas olikheter inklusive kompetens och eventuella funktionshinder forts 8 gyllene regler (3) Offer informative feedback För varje sak användaren gör ska systemet ge feedback. För vanliga och mindre saker kan den vara mindre markant, för ovanliga och större mer tydlig (4) Design dialogs to yield closure Följder av handlingar ska designas med en början, mitt och slut. Tydlig feedback vid avslut gör att användarna kan spänna av och veta att de är klara (och börja förbereda sig för nästa handling). T ex så för e-handelssajter användaren från val av produkter till checkout med en tydlig bekräftelsedialog som avslutar transaktionen. 16

17 forts 8 gyllene regler (5) Prevent errors Så långt det är möjligt designa systemet så att användaren inte kan göra fel. T ex disabla olämpliga menyval, tillåt inte text i sifferfält, välj från dropdowns istället för att skriva etc. Om man gör fel ska det vara enkelt att korrigera felet och man ska inte behöva ge all information igen. Felaktiga handlingar bör lämna systemets tillstånd oförändrat. (6) Permit easy reversal of actions Så långt det är möjligt ska det alltid gå att reversera handlingar. Detta lugnar användarna då de vet att de går att ordna misstag och uppmuntrar därför till utforskande. Forts 8 gyllene regler (7) Support internal locus of control Erfarna användare vill känna att de har kontroll över GUI:t och att det svarar på deras handlingar. De vill inte ha överraskningar i form av oväntade beteenden och irriteras över långa inmatningar, svårighet att hitta information och att inte kunna uppnå önskat resultat. (8) Reduce short-term memory load Människans korttidsminne kan hålla typ 7+-2 saker. Detta är inte mycket. Därför måste man t ex se till att man inte måste hålla saker i minnet från en sida till en annan. 17

18 Irriterande program Exempel Fundera på om ni har några liknande erfarenheter Kort intro till användbarhet Oftast vill man att ens produkter ska ha hög användbarhet Det finns ett antal standardfaktorer man tittar på Sen undersöker man produkten utifrån dessa Usability a product should be Effective to use (effectiveness) Efficient to use (efficiency) Safe to use (safety) Having good utility (utility) Easy to learn (learnability) Easy to remember (memorability) Vi återkommer till detta 18

19 Jakob Nielsens heuristics Jakob Nielsen välkänd usability-guru, se Detta är en annan uppsättning principer det är allmänbildning att ha hört talas om. Tänkta bl a för att kunna användas i utvärdering Fungerar också som designprinciper Visibility of system status Systemet ska alltid hålla användaren informerad om vad som sker Match between system and real world Systemet ska alltid följa användarens modell och termer istället systemmodell och terminologi. Följ real-world conventions. User control and freedom Användare väljer ofta fel väg och behöver nödutgång för att komma tillbaka enkelt. Stöd undo och redo. Nielsens heuristics, forts Consistency and standards Man ska inte behöva fundera på om saker betyder vad de brukar. Följ platformskonventioner. Error prevention Ännu bättre än felhantering är att se till att inga problem uppstår. Leta efter problemsituationer och begär konfirmation för farliga handlingar Recognition rather than recall Minimera användarens minnesbelastning genom att visa det som kan utföras. Man ska inte behöva komma ihåg saker från en dialog till en annan. Instruktioner ska vara synliga eller lättåtkomliga när det behövs. 19

20 Nielsens heuristics, forts Flexibility and efficiency of use Shortcuts o accelarators kan ofta snabba upp interaktionen för erfarna användare. Erbjud möjlighet att anpassa vanliga actions. Aesthetic and minimalist design Dialoger ska inte innehålla information som är irrelevant eller sällan behövs. Varje bit onödig information slåss om uppmärksamhet med den relevanta informationen och minskar dess synlighet Nielsens heuristics, forts Help users recognize, diagnose and recover from errors Felmeddelanden ska uttryckas på vanligt språk (inga felkoder), tala om precis vad problemet är och föreslå en konstruktiv lösning Help and documentation Även om det är bäst om systemet kan användas utan hjälp så kan den behövas. Hjälp ska vara lätt att nå, lätt att söka i, fokuserad på användarens uppgift, lista konkreta stega att göra och inte vara för stor. 20

21 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 Ett antal olika sätt att utföra handlingar och affordances Button groups, action panel Shneidermans och Nielsens principer Summan av detta saker att utgå från i en top-down process Att göra Känna till alla Swing-komponenter, Swing-tutorial på nätet bra Läsa Preface och kapitel 1 i Tidwell Läsa kapitel 2 i Tidwell Kan hoppa över mönster 19 & 20 Läsa Cooper om Personas, Mental Models & Posture Läsa kapitel 3 i Tidwell Kan hoppa över mönster 23, 25 & 30 tills vidare Förstå Actions Läsa Cooper om menyer och verktygsfält Läsa kapitel 4 i Tidwell Kan hoppa över 39, 40 tills vidare Läsa kapitel 5 i Tidwell Kan hoppa över 52 & 53 tills vidare Nästa gång: projekt, fler designmönster och/eller lite mer Swing 21