Design och konstruktion av grafiska gränssnitt

Design och konstruktion av grafiska gränssnitt Olof Torgersson Interaktionsdesign Tillämpad informationsteknologi Chalmers/GU Några gyllene regler Doing Things Projektintro Idag Övningarna start 9.00 Vi bokför sena ankomster 1

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 Vad har vi? Användarstudier Mentala modeller, Personas Platform & Posture sovereign, transient Typiska kategorier intermediate, expert, novice Organisera innehåll Informationsarkitektur Minimera navigation Navigationsmönster clear entry points, global navigation Visuell hierarki, grouping & alignment visual framework, titled sections, module tabs Summan av detta saker att utgå från i en top-down process Mer kommer 2

NÅGRA HCI-BEGREPP 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 3

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. 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. 4

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. Jakob Nielsens heuristics Jakob Nielsen välkänd usability-guru, se www.useit.com 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. 5

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

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

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 8

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 9

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 10

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 11

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 Button Groups 12

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 13

forts Action Panel 14

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 15

Prominent Done Button 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. 16

Exempel Hoover Tools Progress Indicator Cancelability Läs också 17

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

Programmeringstips Knappar och paneler av bilder Exempel baserat på boken Swing Hacks Men åtminstone knappar byggda av bilder är vanligt Word för Mac 19

Projekt Start idag Sista inlämningsdag för rapport 10 mars Betygsgrundande Design 35% Prototyp 35% Rapport 30% Grupper finns på hemsidan Uppgift Designa och prototypa en online-mataffär Målgrupp Äldre personer som har svårt att komma ut och handla själva!"#$%&'$#(()#%*%+,-,%'./'(./0$1./$% %!"#$%&'$#(()#%*+%$#%,,%-+%./00/1%'/+'(/+2$3/+$%()0% '/+43%5$#(4)#*+%($#%67%-+%34112/8/9%:/#%2)+%4%;<3$2)+.%'4=% >)+3$=/1/%?)+.%4%(4#%1*.$#@$3%0$=%(4#%A+"B%=*+%@/#%3+4'(% '*1=4.3%2+/9%:/#(%2/+#2/+#%@/+%2<+C/3%/#'*#=/%A/D$2))8% )D@%@/#%'411%.*+#/%@*#./%0$=%4%3$8#48$#%)D@%@-11/%8)#3/83% 0$=%=$09%?E'*++%*+%4#3$%!"#$(%=/3)+8"#(8/5$+%A"113% "3'$D81/#=$%0$#%@/#%8/#%<55#/%F)+=%)D@%.-%4#%5-% GA3)#21/=$39%HE14.$#%@/+%@/#(%2/+#2/+#%@C*153%@)#)0% +$.4(3+$+/%$33%8)#3)%5-%A/D$2))89%!"#$%*+%4#3$%(-%A/041C*+% 0$=%/55148/34)#$+%)D@%D)00"#434$(%)D@%421/#=%+-8/+%@/#% (84D8/%0$==$1/#=$#%3411%(4.%(C*1'9%:/#%(3<+%(4.%5-%/11/% /55148/34)#$+%()0%A4##(%5-%A/D$2))8B%$A3$+()0%@/#%3ED8$+% =$%*+%+$="#=/#3/9%I$3%214+%A<+%0ED8$3%4#A)+0/34)#%A<+% @)#)0%)D@%421/#=%.$+%@/#%"55%5-%/33%A<+(<8/%A<+(3-%)D@% (3*#.$+%/'%=/3)+#9% % I/./+#/%2<+C/+%34=4.3%A<+%!"#$B%$A3$+()0%@/#%A)+3A/+/#=$% *+%'/#%'4=%'/+'$3(%34=$+9%J-%A<+04==/.$#%A<+(<8$+%!"#$%/33% (E(($1(*33/%(4.%0$=%5$#(4)#*+(/834'43$3$+B%#*+%=$3%*+% 3411.*#.14.39%I$3%A4##(%$33%D/AK%5-%3)+.$3%=*+%@/#%2)+B%()0%@/#%3+*AA/+%(4#/%5$#(4)#*+('*##$+9%L3/#A<+% D/AK$3%A4##(%=$3%$#%2)"1$51/#%()0%=$%2+"8/+%(5$1/%5-9%MA3$+%0/3D@$+#/%2+"8/+%=$%.+411/%#*+%'*=+$3%3411-3$+B% )D@%!"#$%.411/+%/33%'/+/%.+4110*(3/+$9%H*+%@/#%@/+%34=%)D@%(".B%(-%.-+%@/#%3411%#*+0/(3$%G?;N)02"=%A<+%/33% 3455/%5-%@*(3/+9%O,P%*+%@/#(%(5*##4#.%4%14'$39%L#=$+%-+$3%(5/+/+%!"#$%4@)5%5$#./+%(-%@/#%)D@%@/#(%A+"% 8/#%-8/%3411%=$+/(%()00/+(3"./%4%Q1$#9%I*+%2+"8/+%=$%51)D8/%3+/338/#3/+$11$+%)D@%21-2*+%4%#/3"+$#B%()0%=$% 3ED8$+%*+%.4'/#=$%)D@%+)AE1139% %!"#$(%(3<+(3/%4#3+$(($%*+%(1*83A)+(8#4#.%)D@%@/#%2+"8/+%.-%3411%24214)3$8$3%A<+%/33%.<+/%=$33/9%:/#(%<#(8/#% *+%/33%8/+31*../%@$1/%(4#%(1*83%()0%@/#%C)22/3%5-%($#%@/#%21$'%5$#(4)#*+9%&/8$+%(8/%A"#.$+/%$#14.3%+"34#B% ()0%=$3%'/+%5-%'/+'$3%#*+%@/#%C)22/=$%=*+9%I$3%(8/%.-%(04=4.3B%4#3"434'3%)D@%'/+/%$#8$13%/33%@433/%3411%=$3% '4834./(3$9%G'/#D$+/=$%A"#834)#$+%*+%4#3$%'4834.3%A<+%!"#$B%@/#%'411%2/+/%A-%(4#/%(/8$+%.C)+=/%(-%(04=4.3%)D@%!"#$%&'()(*+%+(,-../0'1/%&-.2$/$-( (!"#$%&'()$(*+(,-(.$&/(%01('21(30$&4(5*+'&2+)$('*+(67(.$( 4&8890:0;(!"#$%&'(92$(*+'01(&(*+(3&880(&(<088*9)=:(&(>#4*92$/!*++*'(10+(/&=:(92$4(?#$(@(.$('*%0+(2=A(A2+(4B=:*$(044( AC'*4(98&3&4(3)8%&/4(4214(*?4*$(A0+'(92$4/.+/;(D++0+(!"#$%&'(98*3(5*+'&2+)$("2990%*(A2+('21( 1*880+'40%'8)$0$&++0(&+21('0110(21$.%*;(( ( E?4*$('&+(10+'(92$4/.+/(A0$(A2+(0:4&34("29904(?#$(044( 9&9*A.880(2=A(3.$%0('&+(:2+40:4(1*%('&+0(90$+(2=A( 90$+90$+;(E44(03(A*++*'(90$+(92$(&(FGH(2=A(!"#$%&'(A0$( 8)$4('&/(0+3)+%0(G:B5*(?#$(044(A.880(:2+40:4*+;(I*440( 4B=:*$(A2+()$(?&??&/4(2=A(A2+(C55':0440$(044(A2+(:0+(9.%*(5$040(2=A('*('&+0(90$+(2=A(90$+90$+(4$24'( 03'4.+%*4;(!"#$%&'(A0$(%*''C421(':0??04(?0=*922:J(2=A(A2+(A0$(+B8&/*+(/$04C8*$04('&44(90$+90$+'(?#%*8'*%0/(%)$;(!"#$%&'(A0$(+B8&/*+(8)$4('&/(044(9*4080($):+&+/0$(2+8&+*J(3&8:*4(A2+(4B=:*$()$(9*:3)14(2=A( '1&%&/4;(( G21(1*880+'40%&*8)$0$&++0(:21(!"#$%&'(&(:2+40:4(1*%(%042$*$(+)$(A2+(C+%*$3&'0%*(&($)44'403+&+/(2=A( 0+3)+%+&+/(03(K2$%;(!2+(:0+(#55+0(2=A('4)+/0(+*$(5$2/$01J('#:0(2=A('50$0(?&8*$;(F55%04*$&+/0$(2=A( &+'408804&2+(A0$(0884&%(':280+'(DLM'*$3&=*(':#44J('.(A2+(3*4(&+4*(AC$(10+(':C88*(C55%04*$0(*+(+B(3*$'&2+(03( *44(5$2/$01;( ( I0/*+(9#$"0$(1*%(044(!"#$%&'(30:+0$($C+4(-J('21(A2+(0884&%(A0$(/"2$4J(?#$(044(:2:0(4*;(NC+4(6OP7O(9#$"0$( A*++*'(?032$&4'A2Q(RI0BS'(2?(2C$(8&3*'R('21(A2+(?#8"4('.(8)+/*(A2+(:0+(1&++0';(T.(*?4*$1&%%0/*+(?#$'#:*$(A2+(40('&/(*+(5$21*+0%(&(':2/'21$.%*4(1*%(*+(3)+&++0(&('0110(.8%*$J(?#$(044('*%0+(A0(*+(?&:050C'(1*%(1*$(4*(2=A(:0:2$;(<3)88*+(9$C:0$(03$C+%0'(1*%(044(:2880('&+(?0=*922:(2=A(':B5*(?#$(044( :C++0(+.('&+0(01*$&:0+':0('8):4&+/0$;( (!"#$%&'()$(*+(1B=:*4(4.812%&/(1)++&':0J(1*+(:80$0$(&+4*(03(2+#%&/(&+?2$104&2+('.'21(525MC5'J('501( 2=A(98&+:0+%*(0+&104&2+*$;(H44(A0+%80(A0$(98&3&4(*+("299&/(9#$%0(?#$(!"#$%&'J(*?4*$'21(A2+(&+4*(A0$( :#$:2$4(2=A(A*++*'(10+('21(9$C:0%*(:#$0(A0$(/.44(92$4;(I*4('8&4*$(5.(:$255*+(044(9)$0(4C+/0(30$2$(2=A( 20

Resurser Backend Färdigt sortiment Krav Applikationen ska vara designad för den givna användargruppen Funktioner som ska finnas Användarna ska kunna ange sina uppgifter inklusive adress och betalningssätt och att dessa sparas tills nästa gång man använder programmet. Man ska kunna välja varor att köpa ur affärens sortiment. Man ska kunna genomföra ett köp av de valda varorna. Programmet ska kunna visa en historik över tidigare inköp. 21

Extensions Man kan förstås ha fler funktioner, t ex Att man kan spara och återanvända inköpslistor Att man kan markera produkter ur sortimentet som favoriter och sedan få fram dessa Att man kan välja bort ointressanta produkter så att de inte visas nästa gång man ska handla Backend API:t presenteras senare för att undvika implementationstänk. Features man kan förvänta sig inkluderar Spara användaruppgifter Lista alla produkter Lista olika slags urval av produkter Söka bland produkter Plocka fram bilder som visar produkter En varukorg där man kan lägga valda produkter Sparande av utförda inköp. Backenden vet ingenting om GUI:t utan hanterar bara data. 22

Deadlines etc Utvecklingen sker i 2 iterationer Framtagande av pappersprototyp Framtagande av mjukvaruprototyp Tider att tänka på onsdag 8/2 maila kort rapport om arbetsplaner, se hemsidan Fredag 10/2 handledning på labbtiden. Onsdag 15/2 - test av pappersprototyp på övningstiden. Det ska alltså finnas en färdig pappersprototyp då som kan testas. Fredag 17/2 visa slutgiltig design på labbtiden Läsvecka 7 demo och användartest av prototypen. Lördag10/3 - inlämning av projektrapport Det tillkommer möjlighet till handledning under arbetets gång Att tänka på Läs hela texten om projektet på hemsidan Glöm inte att designa för givna personas Kan vara bra med en primary persona Rekapitulera vad som gåtts igenom i kursen och ta med det i designprocessen Snart gått igenom hela boken Diskutera hur ni ska jobba skolan, hemma etc? Arbetsroller kan vara bra t ex Projektledare Designansvarig Mjukvaruansvarig Grafikansvarig Rapportansvarig 23

Avslutningsvis Räkna inte med att detta går att genomföra på schemalagd tid Har man inte jobbat 25 timmar/vecka hittills så är det dags nu Har man inte läst ordentligt kan det bli mer Mer om rapporten kommer vid ett senare tillfälle Enjoy! Frågor? Att göra Gör klart lab 2 Börja med projekt Analysera uppgiften Informationsarkitektur Visual framework Skissa Läsa Kapitel 6 i Tidwell 24