Bra överblick. Bra överblick. Bra överblick h<p:// Konceptuell design

Storlek: px

Starta visningen från sidan:

Download "Bra överblick. Bra överblick. Bra överblick h<p://www.usabilitynet.org/tools/methods.htm. Konceptuell design"

Per-Olof Åberg
för 8 år sedan
Visningar:

1 TNM040 Kommunika3on och användargränssni< HT2015, FÖ3 Bra överblick h<p:// anvandbarhet/metoder Bra överblick Bra överblick h<p:// Konceptuell design c c Den konceptuella designen ska visa vad och i vilken ordning informa3on ska presenteras, men den kan även visa naviga3on. 1

2 Konceptuell design När den konceptuella designen är färdig kan den se ut så här: Interak3onsdesign Interak3onsdesignen visar var och hur informa3onen presenteras. E< första förslag kan 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 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. En applika3on som gör a< ka<ens ägare slipper dåligt samvete för a< ka<en inte kan komma in. 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. 2

3 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. 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. Användarhistorier (5-10 min) Som en roll, vill jag göra något så a< jag uppnår något. 3

4 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. Interak@onsdesign (10 min) Interak3onsdesignen visar var och hur informa3onen presenteras och hur den ska hanteras. 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. 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. 4

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

6 Skillnad mellan vad som sägs och vad som uppfa<as. Krug, S. (2014), Don t make me think, p 29. Kontrast gör a< ögat dras 3ll något specifikt och kan uppfa<a vik3g informa3on. Den mest vik3ga informa3onen ska s3cka ut som den mest framträdande (visuellt). Färg Fä Storlek Nyans Färg Färg 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. 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< ujö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. 6

7 Grunder i sidlayout Isolering 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. 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 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 Tidwell. (2001). Designing Interfaces, p

8 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 borjall av informa3on. Vad vi ser är konstruerat både från informa3on i omgivningen och från erfarenhet (3digare lagrad kunskap). 8

Relevanta dokument

15-09- 14. TNM040 Kommunika3on och användargränssni< HT2015, FÖ3 TNM040 HT2015. Bra överblick. h<p://www.usabilitypartners.se/om- anvandbarhet/metoder

15-09- 14. TNM040 Kommunika3on och användargränssni< HT2015, FÖ3 TNM040 HT2015. Bra överblick. h<p://www.usabilitypartners.se/om- anvandbarhet/metoder TNM040 Kommunika3on och användargränssni< HT2015, FÖ3 Bra överblick h