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 Projekt Kapitel 7 i Tidwell Kapitel 6 nästa gång 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 Projekt Start idag Sista inlämningsdag för rapport 18 mars Betygsgrundande Design 35% Prototyp 35% Rapport 30% Grupper finns på hemsidan Uppgift Designa och prototypa en online-mataffär 2

2011-02-07 Målgrupp Äldre personer som har svårt att komma ut och handla själva!"#$%&'$#(()#%*%+,-,%'./'(./0$1./$%!"#$%&'()(*+%+(,-../0'1/%&-.2$/$-( ( %!"#$%&'$#(()#%*+%$#%,,%-+%./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@% (#/223%()0%0<C14.39% % Q<+"3%1-.%=$3%$#%RSG%H*+/%5-%3)+.$3%=*+%!"#$%2)+B%0$#%#"%0-(3$%@/#%-8/%2"((%'418$3%@/#%3ED8$+%*+%C)224.3% 0$=%(4#%+"11/3)+9%:/#(%2/+#2/+#%@/+%345(/3%@)#)0%)0%)#14#$%(@)554#.B%'418$3%8*##(%()0%$#%2+/%1<(#4#.% A<+%@)#)09%!"#$%3ED8$+%=$3%8*##(%5-14314./+$%)D@%2$8'*0/+$%/33%(@)55/%@$00/B%*#%/33%2$@<'/%.-%"3% 0$=%(4#%+"11/3)+%)D@%2$@<'/%)+)/%(4.%A<+%(4#/%8)#3/83$+%@/#%@/+%4%(4#%('/+3/%51-#2)89%!"#$%&'()$(*+(,-(.$&/(%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( 3)/*+(%&4()$(8.+/;(G*+0'4(!"#$%&'(30$(&(0??)$*+('./(A2+(*+(0??&'=A(21(2+8&+*M'A255&+/(2=A()$(+B?&:*+(5.( %*440;(E?4*$'21(2+8&+*9*408+&+/0$+0(A0$(/.44('.(9$0(A&44&88'('*$(A2+(?$01(*124(044(0+3)+%0(*+(2+8&+*M 'A25;(!"#$%&'()$(8.+/'B+4(2=A(A0$('3.$4(044('*(?#$('1.:+0550$(5.(':)$1*+;(!2+(3*4(2?40'4(&+4*(30%(10+(':0( /#$0(+)$(%*4(A2550$(?$01(*44(?*81*%%*80+%*J(%.(A2+(4B=:*$(044(%*4()$(?#$(8&4*(&+?2$104&2+(5.(%*1;( Resurser Backend Färdigt sortiment 3

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

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. Deadlines Utvecklingen sker i 2 iterationer Framtagande av pappersprototyp Framtagande av mjukvaruprototyp Tider att tänka på Torsdag 10/2 maila kort rapport om arbetsplaner, se hemsidan Fredag 11/2 - möjlighet till handledning på labbtiden. Onsdag 16/2 - test av pappersprototyp på övningstiden. Det ska alltså finnas en färdig pappersprototyp då som kan testas. Fredag 18/2 - inlämning av designförslag via mail till dat215.2011 [] gmail.com Läsvecka 8 demo och användartest av prototypen. Fredag 18/3 - inlämning av projektrapport Det tillkommer möjlighet till handledning under arbetets gång 5

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 Avslutningsvis Räkna inte med att detta går att genomföra på schemalagd tid Har man inte jobbat 22 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? 6

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 GETTING INPUT FROM USERS 7

Allmänt Design bör ta hänsyn till alignment, grouping etc för att skapa ett harmoniskt och förståeligt intryck För val av specifika kontroller kan uppställningen i Tidwells bok vara nyttig En av flera? Flera av flera? Tal i intervall? Sen finns det några principer till Principer Se till att användarna förstår vad som efterfrågas och varför Använd språk som är anpassat till användarna Om det är en massa information förklara varför den behövs Använd tooltips för t ex knappar som används för input Om det går ställ inte frågan alls Detta är samma som Cooper säger Man kanske avbryter flow Det kanske går att gissa eller fylla i ett standardvärde för att minska arbete 8

Principer, forts Kunskap i världen är mer korrekt än kunskap i huvudet Går det att erbjuda en lista att välja från så gör det Kan man ha en visuell presentation så använd den Måste man ha ett visst format, visa det tydligt Se upp för direktmappningar från implementationsmodellen Glöm inte användarens mentala modell Data i implementationen kanske inte passar Designa först mappa mot implementationen sen Användartesta Gäller för allt Ofta räcker det med ett ganska litet antal personer (typ 5) Principer, forts Valet av kontroll påverkar vad användaren förväntar sig så välj rätt Radiobox flervalsalternativ Textfält kort öppet svar Ge inte möjlighet att skriva fel T ex 15 när bara 1-10 är tillåtet Få aldrig användaren att känna sig dum 9

Välja kontroll Boken tar upp ett stort antal möjliga kontroller för olika situationer Kontroller för att välja en av två möjliga Kontroller för att välja N objekt där N är litet Kontroller för att välja N objekt i godtycklig ordning Kontroll för att skriva en rad text Läs tillräckligt för att ha god uppfattning om möjligheter sen kan man slå upp i en designsituation Faktorer att ta hänsyn till Tillgängligt utrymme Platskraven varierar mycket mellan olika kontroller Användarnas allmänna datorkunskap Textfält förståeligt för alla Dubbelslider eller lista med flervalsmöjlighet mycket svårare Användarnas domänkunskap Vet man att bara vissa intervall är tillåtna så måste man inte designa lika noga Det kanske är mindre viktigt att bara ha givna alternativ att välja mellan Men det blir lätt fel även om man är kunnig 10

forts Förväntningar från andra program The applications that are easy to use are designed to be familiar Bold/Italic/Underline vanligt som butcons, radioknappaer blir konstigt Dvs man måste kunna sin verktygslåda Tillgänglig teknik Alla plattformar har inte samma kontroller Web begränsad iphone specialdesignade 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 11

(68) forgiving format (68) forgiving format Vad Tillåt användaren skriva lite vad som helst och låt sedan programmet tolka det intelligent När Programmet efterfrågar data som kan skrivas på många olika sätt, blandningar av format, tecken, stora/små bokstäver etc Varför Användaren vill bara få något gjort utan att fundera på format det blir helt enkelt mycket enklare Hur Se Vad. Sen måste man se till att det går att förutse tillräckligt bra vad användaren kan tänkas skriva så att det går att tolka 12

Exempel (69) structured format 13

(69) structured format Vad Använd flera textfält istället för ett för att visa strukturen på data När Inmatning av med ett givet och känt format. T ex kreditkortsnummer. Funkar inte om det kan finnas variation. Varför Strukturen visar för användaren vad som ska matas in Hur Använd ett antal textfält som motsvarar strukturen. Dessa bör inte vara längre än vad som behövs. När användaren matat in allt i ett fält flyttas man automatiskt till nästa. Exempel 14

forts bra? (70) fill-in-the-blanks 15

(70) fill-in-the-blanks Vad Ordna en eller flera inputkontroller i en fras, där inmatning innebär att man fyller i hål i frasen. När Man ska mata in något och detta blir tydligare och snyggare än vanliga label/inputarrangemeng. Varför Metoden är självförklarande. Användare klarar intuitivt av att fylla i hål i fraser. Tydligare än en massa förklaringar. Hur Jobba ordentligt med frasen. Mönstret funkar bäst med textfält, dropdowns o dyl som passar bra in i en text visuellt. Exempel 16

(71) input hints (71) input hints Vad Placera en text eller ett exempel bredvid ett inmatningsfält för att visa hur det ska användas När Det är inte helt självklart hur vad man ska skriva i ett fält och man vill inte skriva en lång förklarande label Varför Användarna slipper gissa. Vet man vad det ska stå behöver man inte kolla på input-hinten Hur Placera en kort text under eller bredvid inmatningsfältet. Det kan vara bra att använda en mindre font än för fältets label 17

Exempel forts bra? 18

(75) illustrated choices (75) illustrated choices Vad Använd bilder istället för ord för att visa tillgängliga val När Användaren skall välja mellan ett antal objekt som skiljer sig visuellt Varför En bild säger mer än tusen ord + det blir snyggare Hur Visa bilder som motsvarar vad användaren får. Tekniken kan användas i bl a menyer, listor, knappar, tabeller osv. 19

Exempel (77) good defaults 20

(77) good defaults Vad När det är möjligt fyll i sannolika värden i förväg När I alla fall när man begär in information från användaren. Speciellt då det finns sannolika svar, eller då det är troligt att systemet vet vad som borde vara mest lämpligt. Varför Minskar användarens arbete. Kan också göra det mycket enklare om användaren är osäker och bara behöver bekräfta systemets val. Hur Ange default-värden för textfält, comboboxar etc. Kan göras dynamiskt eller statiskt. Var noggrann med att inte fylla i värden som sannolikt måste ändras. Exempel 21

forts (78) same-page error messages 22

(78) same-page error messages Vad Placera felmeddelanden direkt på inmatningssidan. Placera ett meddelande överst och helst också nära de faktiska felen När Designen tillåter att man faktiskt kan skriva fel eller utelämna information. Gör det så enkelt som möjligt att rätta till när det inträffar. Varför Den traditionella metoden är att slänga upp en dialogruta med ett felmeddelande (ofta modal). När man stängt den är informationen borta Bättre med information i kontext Hur Se Vad. Om felmeddelandena finns vid felet behöver man inte leta och fundera. Exempel 23

Läs också Hela kapitlet RELEVANTA SWING- KOMPONENTER 24

JLabel Visa info för användare Unselectable Bild Text Bild + text HTML Ritar inte sin bakgrund setopaque(true) JButton Standard action-grej Kan konfigureras på olika sätt Mnemonics Icons Text Borders 25

JToggleButton On/Off Oberoende Grupperade JCheckBox & JRadioButton Välkända 26

JList Ett sätt att välja något Kan ha flera olika selection-varianter JListModel och JListSelectionModel Icke-statiska ger ofta behova av att anpassa modellen Single-selection i labben? Kod för att ordna och sortera finns i lab1backend JComboBox Redigerbara och icke-redigerbara Tar lite plats Kan användas i toolbars Ha inte för många items! Vanligt T ex JList bättre Eller filtrering Data från modell 27

JTextField Mata in en rad text actionperformed vid retur Varianter JFormattedTextField JPasswordTextField Relaterade JSpinner JComboBox JSlider & JSpinner Input av data med begränsningar 28

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 Getting input Forgiving format, structured format. 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 http://java.sun.com/docs/books/tutorial/uiswing/misc/action.html Läsa Cooper om menyer och verktygsfält Läsa kapitel 4 & 5 i Tidwell Kan hoppa över 39, 40, 52 & 53 tills vidare Läsa kapitel 7 i Tidwell Nästa gång: showing complex data (kap 6), flow och pappersprototypning 29