TNM040 Kommunika3on och användargränssni< HT2015, FÖ3 TNM040 HT2015. Bra överblick. h<p:// anvandbarhet/metoder

Transkript

1 TNM040 Kommunika3on och användargränssni< HT2015, FÖ3 Bra överblick h<p:// anvandbarhet/metoder 1

2 Bra överblick Bra överblick h<p:// 2

3 c c Konceptuell design Den konceptuella designen ska visa vad och i vilken ordning informa3on ska presenteras, men den kan även visa naviga3on. 3

4 Konceptuell design När den konceptuella designen är färdig kan den se ut så här: Nu syns vilken informa3on som ska matas in och i vilken ordning. Här är informa3onen uppdelad i olika informa3onsmängder, inte på olika sidor. Dessa informa3onsmängder kan senare hamna på samma sida eller flera olika. Interak3onsdesign Interak3onsdesignen visar var och hur informa3onen presenteras. E< första förslag kan se ut så här. 4

5 Interak3onsdesign E< senare förslag/färdigt kan se ut så här. PersonuppgiVer och adressuppgiver presenteras i det nya förslaget 3llsammans (på samma sida). Vissa fält har anpassats 3ll den informa3on de ska innehålla, se 3ll exempel fältet postnummer. Fältet postort kan inte redigeras. Informa3onen i fältet hämtas automa3skt u3från det inmatade postnumret. Detaljerad design I den detaljerade designen försöker man visa hur den slutgil3ga sidan kommer a< se ut. I den detaljerade designen visas färg, font, placering av objekt etc. 5

6 Cat- app En applika3on som gör a< ka<ens ägare slipper dåligt samvete för a< ka<en inte kan komma in. Cat- app Scenario 1 Nina bor i e< hus på landet och har två ka<er som får gå ut och in genom en ka<lucka. Nu är problemet a< fler än hennes två ka<er använder sig av luckan och det leder 3ll vissa problem. 6

7 Cat- app Scenario 1 Nina bor i e< hus på landet och har två ka<er som får gå ut och in genom en ka<lucka. Nu är problemet a< fler än hennes två ka<er använder sig av luckan och det leder 3ll vissa problem. Nina vill nu ha möjligheten a< styra öppe`derna för luckan själv och bara öppna den när hon vet a< en av hennes två ka<er ska in. Hon vill få något sorts meddelande när en ka< är utanför, kunna se a< det är någon av hennes och då kunna öppna luckan. 7

8 Cat- app Cat- app Scenario 2 Peter bor i lägenhet och har en ka< som får vara ute ibland. Problemet är a< Peter aldrig vet när ka<en vill in och grannar har klagat på a< den stackars ka<en si<er ute i regn och kyla utan a< komma in. Peter tycker givetvis synd om ka<en han också.men ännu mer synd om den blir det om den inte får gå ut alls. Peter skulle vilja veta när ka<en är utanför dörren så a< han eller någon annan kan släppa in den. 8

9 Cat- app Cat- app Användarhistorier (5-10 min) Som en roll, vill jag göra något så a< jag uppnår något. 9

10 Cat- app Konceptuell design (10 min) Den konceptuella designen ska visa vad (informa3on) som ska presenteras och i vilken ordning. Olika informa3onsmängder kan här vara på samma sida. Kan även visa naviga3on. Cat- app Interak@onsdesign (10 min) Interak3onsdesignen visar var och hur informa3onen presenteras och hur den ska hanteras. 10

11 Cat- app Detaljerad design (5 min) I den detaljerade designen försöker man visa hur den slutgil3ga sidan kommer a< se ut och fungera. I den detaljerade designen visas färger, fonter, exakt placering av objekt etc. 11

12 Grunder i sidlayout Visuell hierarki Det vik3gaste innehållet ska synas/s3cka ut mest, och det minst vik3ga ska synas minst. En bra visuell hierarki visar omedelbart: Hur vik3ga olika element på en sida är Rela3onen mellan dem Tidwell (2011). Designing interfaces. 12

13 Visuellt flöde Guidar läsaren från det ena elementet 3ll det andra Kontrollerar hur informa3on uppfa<as och i vilken ordning Vik3ga element betonas, och innehåll organiseras på e< sä< som är logiskt och förutsägbart Bra design och och e< genomtänkt visuellt flöde vägleder användarna och gör deras upplevelse enklare och roligare Grunder i sidlayout Visuell hierarki En bra visuell hierarki visar omedelbart: Hur vik3ga olika element på en sida är Rela3onen mellan dem Densitet Mängd element vs bakgrund, fets3l etc. Bakgrundsfärg Kontrast drar 3ll sig uppmärksamhet (svart/vi< är stark) Placering och storlek En större del (text), i mi<en av en sida drar uppmärksamheten 3ll si< innehåll (jämför ar3kel, blogginlägg). En liten remsa text längst ned å andra sidan ber om a< ignoreras jag är bara en sidfot Rytm Listor, rutnät, rubriker, white space kan skapa en visuell rytm som fångar uppmärksamheten och styr/leder användaren Tidwell (2011). Designing interfaces. 13

14 14

15 Vi läser inte när vi undersöker e< gränssni< vi scannar, letar ever ord, objekt etc. som fångar vår uppmärksamhet. Vi har ovast e< mål Vi vet a< vi inte behöver läsa allt Vi är bra på det 15

16 Skillnad mellan vad som sägs och vad som uppfa<as. Krug, S. (2014), Don t make me think, p

17 Kontrast gör a< ögat dras 3ll något specifikt och kan uppfa<a vik3g informa3on. Färg Fä Storlek Nyans Färg Färg Den mest vik3ga informa3onen ska s3cka ut som den mest framträdande (visuellt). En stor del av ytan används för a< visa ganska lite produk3nforma3on. E< steg som måste genomföras innan köp syns dåligt och kan lä< missas. Knapparna har samma visuella tyngd. 17

18 Vik3gt Med för hög densitet eller för dålig kontrast kan vik3g informa3on försvinna bland annat innehåll. Kom ihåg användares primära uppgiv/mål! Gör informa3onen som behövs för a< ulöra en uppgiv extremt lä< a< se/hi<a. Figur och grund Hur objekt avbildas mot en bakgrund Om något uppfa<as som en figur (objekt i fokus) eller som bakgrund. 18

19 Grunder i sidlayout Visuell hierarki En bra visuell hierarki visar omedelbart: Hur vik3ga olika element på en sida är Rela@onen mellan dem Isolering innebär åtskillnad, gör a< något s3cker ut. Tidwell (2011). Designing interfaces. Isolering 19

20 Grunder i sidlayout Visuell hierarki En bra visuell hierarki visar omedelbart: Hur vik3ga olika element på en sida är Rela@onen mellan dem Isolering innebär åtskillnad, gör a< något s3cker ut. Grupperade element verkar höra ihop. har du några element av samma typ och du vill a< betraktaren ska tycka a< de är lika intressanta, a< de hör ihop, ge dem samma (dis3nkta) grafiska u<ryck. Tidwell (2011). Designing interfaces. Tidwell. (2001). Designing Interfaces, p

21 Tidwell. (2001). Designing Interfaces, p 135. Gestaltlagar Generella lagar för hur vårt visuella system fungerar och hur vi tolkar informa3on Kan tyckas enkla men deras effekt kan ha stor inverkan på användarupplevelsen 21

22 Konstruk3vism Enligt den här skolan är percep3on en ak3v process. Vad vi ser är inte en kopia av ngt: snarare en modell konstruerad av det visuella systemet genom transforma3on, förstoring, förvrängning och borlall av informa3on. Vad vi ser är konstruerat både från informa3on i omgivningen och från erfarenhet (3digare lagrad kunskap). 22

23 23