TNM040 Kommunika4on och användargränssni= HT2013, FÖ3 Idag Kogni4v psykologi Visuell percep4on Design principer Introduk4on 4ll examina4onsuppgik i kri4sk analys (inlämning v42) Kogni4on Lat. cognoscere A= veta, a= konceptualisera, a= känna igen. En samlingsterm för de mentala processer som handlar om kunskap, tänkande och informa4on. Handlar om vad som sker i hjärnan, de processer som låter oss ta emot, lagra, bearbeta och använda informa4on. Psykologi - milstolpar Andra världskriget tydligt behov av mer kunskap om (det som senare blev) kogni4v psykologi Förstå na=seende (visuell percep4on) Förstå kodade meddelande (problemlösning, språk) Designa varningssignaler (audi4v percep4on) Begränsningar i kapacitet hos piloter (minne, uppmärksamhet) använde bara en bråkdel av 4llgänglig informa4on Kogni4v psykologi Sägs vara både den äldsta och den senaste delen av psykologins historia. Aristoteles gjorde upp lagar om hur vi lär och minns 1956 en egen skola (många studier och ar4klar om problemlösning, uppmärksamhet, minne, språk). 1967 bok som heter "Cogni4ve Psychology" (Neisser). Under senare år - hur man ska förstå människa- datorinterak4on. Kogni4v psykologi Vik4ga processer percep%onsprocesser (bearbeta s4muli från omgivningen: syn, hörsel, känsel, smak, lukt) minnesprocesser (lära sig något ny= = lagra den i minnet, minnas fakta = hämta från minnet) tankeprocesser (resonemang, planering, problemlösning, beslutsfa=ning) språkliga processer (vi tar emot och ger muntlig/skriklig informa4on, kommunika4on mellan människor) 1
Kogni4v psykologi och MDI Bra kunskap om kogni4on gör a= vi kan designa bra gränssni= Vad kan vi förvänta oss av användare av e= system. Hur kan vi göra deras uppgiker så lä=a som möjligt. Förutsäga, iden4fiera och förklara problem som användare har eller kan komma a= utsä=as för. Tillhandahåller metoder för a= skapa gränssni= som förbä=rar användares kapacitet. Relevans Morgondagens civilingenjör är en kommunicerande och socialt kompetent person, med kunskaper och färdigheter inom en mängd olika komple=erande områden. Civilingenjörsförbundet Vad krävs? kunskaper och färdigheter i a= handha produkter, processer och arbetsmiljö med hänsyn 4ll människors förutsä=ningar och behov. Högskoleförordningen 4 frågor Vad är det här? Vad finns det här? Vad kan jag göra här? Varför ska jag vara här och inte någon annanstans? Ska besvaras av varje hemsida. Vid en första anblick, korrekt, utan tvetydigheter och med lite ansträngning. 4 frågor Vad är det här? Vad finns det här? Vad kan jag göra här? Varför ska jag vara här och inte någon annanstans? Ska besvaras av varje hemsida. Vid en första anblick, korrekt, utan tvetydigheter och med lite ansträngning. Gestaltlagar Normans designprinciper Steve Krug, 2006. Don t make me think. A common sense approach to web usability. Steve Krug, 2006. Don t make me think. A common sense approach to web usability. Grunder i sidlayout Visuell hierarki Det vik4gaste innehållet ska synas/s4cka ut mest, och det minst vik4ga ska synas minst. En bra visuell hierarki visar omedelbart: Hur vik4ga olika element på sidan är Rela4onen mellan dem Grunder i sidlayout Visuell hierarki Det vik4gaste innehållet ska synas/s4cka ut mest, och det minst vik4ga ska synas minst. En bra visuell hierarki visar omedelbart: Hur vik%ga olika element på en sida är Rela4onen mellan dem Jennifer Tidwell (2011). Designing interfaces. Jennifer Tidwell (2011). Designing interfaces. 2
2013-09- 24 Grunder i sidlayout Grunder i sidlayout Visuell hierarki Visuell hierarki En bra visuell hierarki visar omedelbart: Hur vik%ga olika element på en sida är En bra visuell hierarki visar omedelbart: Hur vik4ga olika element på en sida är Rela%onen mellan dem Densitet Mängd element vs bakgrund, fets4l Bakgrundsfärg Kontrast drar 4ll sig uppmärksamhet (svart/vi= är stark) Placering och storlek En större del (text), i mi=en av en sida drar uppmärksamheten 4ll si= innehåll (jämför ar4kel, blogginlägg. En liten remsa text längst ned å andra sidan ber om a= ignoreras jag är bara en sidfot Isolering innebär åtskillnad Jennifer Tidwell (2011). Designing interfaces. Gruppererade 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 (dis4nkta) grafiska u=ryck. Jennifer Tidwell (2011). Designing interfaces. Psykologi Gestaltlagar Konstruk4vism - vad vi ser är inte nödvändigtvis sanningen! Konstruk4vism Enligt den här skolan är percep4on en ak4v process. Vad vi ser är konstruerat både från informa4on i omgivningen och från erfarenhet (4digare lagrad kunskap) Vad vi ser är inte en kopia av ngt: snarare en modell konstruerad av det visuella systemet genom transforma4on, förstoring, förvrängning och boroall av informa4on. 3
Exempel på processen. German ad agency Jung von Ma= created this clever and simple print campaign for LEGO en4tled, Imagine. Taking a minimalist approach, the agency used as few Lego pieces as possible to recreate the famous cartoon characters below. Tapping our strong associa4on with colour and vivid imagina4on, many will be able to complete the image in our minds. It s a beau4ful way of reinforcing the essence of the Lego brand and the power of imagina4on. Tidigare kunskap hjälper oss att förstå ofullständig information/tvetydigheter. Användare klickar oka på knappar och länkar utan a= 4=a så noga på dem. Deras uppfa=ning av en display baseras mer på 4digare erfarenhet än av vad som fak4skt står på skärmen. Vi uppfa=ar saker olika beroende på sammanhang. Om vi letar eker ngt men det är placerat på en annan plats än vad som är brukligt, eller om det ser annorlunda ut än det brukar kan vi missa det. Vi letar eker det förväntade på en förväntas plats. Var konsekvent i din design. Följ konven4oner. Getstaltlagar Gestaltpsykologi: hur vi människor tar 4ll oss och tolkar informa4on, hur vi uppfa=ar strukturer och kategoriserar dessa. Har resulterat i e= antal lagar som är vik4ga vid gränssni=sdesign. Vi uppfa=ar objekt som välorganiserade mönster snarare än separat delar. Vi organiserar våra intryck och upplevelser på e= sä= som är enkelt, regelbundet och symmetriskt. Getstaltlagar Figur och bakgrund Hur objekt avbildas mot en bakgrund Uppfa=as som figurer (objekt I fokus) eller som bakgrund. 4
Getstaltlagar Likhetslagen kan enkelt förklaras som a= våra hjärnor automa4skt antar a= liknande symboler hör ihop och därför betraktar dessa som en grupp. Färg, form, storlek, riktning etc. Likhetslagen säger t.ex. a= nedanstående symboler upplevs som lodräta kolumner. Gestaltlagar Getstaltlagar Närhetslagen säger a= symboler som är placerade in4ll varandra upplevs som a= de hör ihop. Enligt närhetslagen bör därför nedanstående symboler upplevs som två grupper med 9 symboler i varje, där varje grupp är indelad i tre undergrupper med tre symboler i varje. Närhetslagen kan alltså uppväga/motverka likhetslagen. Knappar, länkar, rubriker etc bör ha e= konsekvent utseende på hela webbplatsen/i hela systemet för a= den ska ge e= bra intryck och vara lä= a= orientera sig i. Gestaltlagar Interfaces and text presentation Organisatörerna bildar en grupp i övre vänstra hörnet, sponsorerna en annan i nedre högra hörnet. Organisatörernas logos är större vilket visar på a= de är viktgare, även deras placering påverkar intrycket. Det vita emellan förstärker intrycket, även de två trianglarna som finns (och de som inte finns). Find a hotel with a double room for 40 USD. 5
2013-09- 24 Find a hotel with a double room for 27 USD. Närhet ger struktur i e= formulär. Synliga gränser (linjer, ramar etc. kanske inte behövs, bra för a= undvika för mkt element och för a= minska kod). Gestaltagar Slutenhetens lag (konturlagen). Vi letar eker möster vi känner igen, fyller I luckor och skapar former. Texter eller bilder som på något sä= är inslutna tycks höra ihop. De kan vara inslutna av en ram eller en färgad bakgrund. Gestaltagar Gestaltlagar Slutenhetens lag (konturlagen). Vi letar eker möster vi känner igen, fyller I luckor och skapar former. Texter eller bilder som på något sä= är inslutna tycks höra ihop. De kan vara inslutna av en ram eller en färgad bakgrund. Det som sammanförs inom en ram eller en färgad yta uppfa=as som en avgränsad enhet. Använd inneslutningar för a= samla innehåll som hör ihop, är speciellt, t.ex aktuellt just nu. 6
Getstaltlagar Den goda kurvans lag. Element som är arrangerade på en linje eller kurva uppfa=as som relaterade (medans de som inte följer kurvan/linjen hamnar utanför). Allt skrivet språk följer lagen. Linjära arrangemang, ver4kalt eller horisontellt kommunicerar en rela4on. Exempel, brödsmulor. Gestaltlagar Symmetri. Lagen om symmetri innebära= objekt som är symmetriska ser människan som en enhet trots a= objekten är åtskilda från varandra. start publika4oner nyhetsbrev resurser kontakt Menyn kan ses som e= enda objekt trots a= den är uppbyggd av flera enskilda objekt. Känslan av symmetri uppstår genom a= tecknet all4d återkommer med en bestämd regelbundenhet, det vill säga före och eker e= svenskt ord, samt genom a= det all4d är samma avstånd mellan tecknet och orden. Gestaltlagar Symmetri ger e= välordnat och stabilt intryck men det kan också bli lite tråkigt och stelt. Assymetri kan ge e= mer spännande och krakfullt intryck, dock med risk för en upplevelse av obalans. Relevans Kan vara 4ll stor hjälp när det gäller a= uoorma e= lä=använt användargränssni=. Hur man grupperar, placerar och uoormar symboler har stor påverkan på hur man tolkar dessa. Gestaltlagarna är därför bra a= känna 4ll för alla som arbetar med gränssni=sdesign. För a= effek4vt kunna kommunicera, måste designers kunna förutse och styra hur användare kommer a= tolka och använda en viss design. Därför är det vik4gt a= designers förstår psykologi och hur det mänskliga sinnet, i allmänhet, tolkar visuell informa4on. Tyngdpunkten i Gestaltpsykologins teori är idén om "gruppering", eller hur vi tenderar a= tolka visuell informa4on på e= visst sä=. De iden4fierade e= antal "lagar som de ansåg vara medfödda. Trots a= lagarna nu är gamla stämmer de anmärkningsvärt väl in på modern gränssni=sdesign, och perceptuell organisa4on med hjälp av gestaltlagar återfinns på varje hemsida (och de flesta trycksaker). Normans principer Synlighet kan jag se det? Återkoppling vad händer nu? Affordans hur kan jag använda det? Mappning var är jag? Vad kan jag göra? Vart kan jag gå Normans principer En bra design: ökar synligheten ger klar affordans stödjer god mappning ger god feedback Donald Norman. (1998). The design of everyday things 7
Normans principer Affordans Affordance: It Should Be Obvious How a Control Is Used. The system should provide strong clues to the opera4on of things. A bu=on affords pushing, a lever affords pulling, etc. The user should know how to operate a control just by looking at it. Visibility: It Should Be Obvious What a Control Is Used For. If I press this bu=on, what will happen? If I want to unlock the door, which control should I use? A system with good visibility allows the user to easily translate goals into ac4ons. Feedback: It Should Be Obvious When a Control Has Been Used. Once the user has pressed a bu=on, the system should react in a manner that clearly communicates what has just been accomplished. If nothing has happened, this fact should also be obvious. Gör användningen av någon4ng uppenbart. Begreppet innebär i korthet a= e= redskap genom sin design "erbjuder" oss som användare sin funk4on genom a= visa hur det skall användas, utan a= vi ska behöva göra slutledningar om hur vi ska gå 4ll väga. Uppenbarhet, 4llhandahållande har föreslagits av Computer Sweden. Ska signalera, ge ledtrådar. Mapping. It should be obvious what the rela%on is between controls and their movements to the outcome from such ac%on into the world. The real func4on of natural mappings is to reduce the need for any informa4on from a user s memory to perform a task. By following these principles, we can create systems where the rela4onships between the user s goals, the required ac4ons, and the results are sensible, meaningful and not arbitrary. Norman's huvudexmpel är dörrar. För vissa dörrar är det omöjligt a= se om man ska dra eller trycka för a= komma in/ut, hos andra är det uppenbart. Push or pull? Affordance A ver4cal scrollbar in a graphical user interface affords movement up or down. The affordance is a visual clue that suggests that an ac4on is possible. When the affordance of an object is perceptually obvious, it is easy to know how to interact with it. 3D bu=ons afford clicking Sliders affords sliding Check box affords checking? or is affordance just a conven0on? i.e. something we learn. Determined by culture, ins4nct, mental model, e.g., hyperlinked text on website. Is oken more about conven4ons than about reality (Norman) Affordance to remember The quality of an object allowing an ac4on- rela4onship with an actor. Just by looking at something a user should know how to use it In general: when the apparent affordance of an ar4fact matches its intended use, the ar4fact is easy to operate. when apparent affordances suggest different ac4ons than thoose for which the object is designed, errors are common and signs/ instruc4ons are neccessary. Synlighet Saker och 4ng ska vara synliga i gränsytan, så a= man vet vad man kan göra och hur man uppnår sina mål. Det ska vara uppenbart vad någon4ng är 4ll för, problem uppstår när vi inte kan se det.. "When simple things need labels or instruc%ons, the design is bad. 8
Synlighet Synlighet? Automa4ska kranar. Faucets. Vi är inte säkra på hur de ska användas, vi måste gissa oss 4ll var händerna ska placeras. Synliga ra=ar, handtag, knappar etc. har ersa=s av osynliga och tvetydiga ak4va zoner. Synlighet Visuell organisa4on av informa4on är oerhört vik4gt för läsbarhet och förståelse! All4d synlighet? A= dölja vissa funk4oner kan vara fördelak4gt i gränssni=sdesign (för a= undvika problem som har a= göra med densitet, plo=righet etc). Hålls osynligt 4lls det behövs men ingår i en grupp som är tydlig "som en ledtråd". Men överväg syns det inte så finns det inte". Synlighet Återkoppling Skicka 4llbaka informa4on om vad som verkligen hände och vilket resultat blev. Ska vara tydlig, omedelbar och synkroniserad med den handling användaren uoört. 9
Återkoppling Återkoppling Dropbox shows a progress bar when users upload files using the Web interface. For events such as these, where wait 4mes vary considerably, a progress bar is essen4al so that users don t have to keep guessing how much longer they will have to wait. Ge återkoppling via status på knappar. En knapp som visar a= den klickats på ger omedelbar återkplling 4ll användaren. Mappning Mappning- rela4on De möjliga rela4oner som finns mellan olika saker, melllan en kontrol och dess effekt.. Naturliga mappningar drar fördel av fysiska analogier och kulturella standarder fysisk: ra= kulturell: röd innebär stopp?, grön innebär gå/ok? Svarar på frågan, var är jag och vart kan jag gå? Mappning- rela4on Mappning De möjliga rela4oner som finns mellan olika saker, melllan en kontrol och dess effekt. Naturliga mappningar drar fördel av fysiska analogier och kulturella standarder fysisk: ra= kulturell: röd innebär stopp?, grön innebär gå/ok? Svarar på frågan, var är jag och vart kan jag gå? 10
Mappning- rela4on Så fort man har någon form av objekt som sköter kontrollen av eller inställningarna för något annat objekt i gränsytan så ska det på något sä= vara uppenbart a= det första objektet kontrollerar det andra, dvs det ska finnas en en naturlig mappning mellan kontrollobjektet och det objekt som påverkas. Lika vik4gt är det a= förändringen av kontrollobjektet har en naturlig mappning 4ll hur objektet som påverkas verkligen kommer a= påverkas. Mappning- rela4on Naturliga/tydliga mappningar kopplat med feedback är oerhört vik4gt för a= användaren ska kunna forma en bra mental modell av hur något fungerar. Ta bort dessa två egenskaper och det blir i stort se= omöjligt för användaren a= bilda sig en uppfa=ning om hur dennes ska använda sig av systemet. Tydlig rela4on mellan bilden och vad du kan göra. Kri4sk analysis av e= tekniskt system UppgiKen består av en analys av e= tekniskt system. System AUppgiKen uoörs i form av en rapport som innehåller en beskrivning av systemet, en redogörelse av dess fördelar och nackdelar (analysen) och en slutsats/e= avslutande stycke. Analysen ska göras med hjälp av den terminologi och begrepp som vi har diskuterat så här långt under kursen (se främst föreläsning 3, Camilla). Känn dig fri a= använda allt från föreläsningsbilder men observera a= begreppen affordans, synlighet, mappning och återkoppling måste användas. Vik4gt! Begreppen ska skrivas ut i texten när de används för a= förklara något. Exemplifiera gärna genom a= beskriva olika uppgiker. Rapporten bör vara 1200-1500ord (min/max), 3-5 sidor (min/max) beroende på antal och storlek av illustra4oner). (Textstorlek 11pt). UppgiKen uoörs individuellt. 11
Till exempel Välj e= system, exempelvis en varuautomat. Beskriv automaten (om den säljer kaffe, godis, etc.), var den finns placerad, beskriv dess syke, varför den analyseras och hur analysen kommer a= genomföras (Introduk%on). Till exempel Välj e= system, exempelvis en varuautomat. Beskriv automaten (om den säljer kaffe, godis, etc.), var den finns placerad, hur den ser ut, beskriv dess syke, varför den analyseras och hur analysen kommer a= genomföras (Introduk%on). Gå igenom och beskriv (både nega4va och posi4va aspekter) hur användaren intergagerar med automaten (Innehåll). Hur presenterar automaten vad den är 4ll för och hur den bör användas för användaren? Vad kan användaren göra? Hur vet användaren vad denne ska göra först? Är det synligt? Vilka affordanser och mappningar presenterar automaten? Ger automaten återkoppling 4ll användaren om si= 4llstånd och hur fungerar det? Till exempel Välj e= system, exempelvis en varuautomat. Beskriv automaten (om den säljer kaffe, godis, etc), var den finns placerad, hur den ser ut, beskriv dess syke, varför den analyseras och hur analysen kommer a= genomföras (Introduk%on). Gå igenom och beskriv (både nega4va och posi4va aspekter) hur användaren intergagerar med automaten (Innehåll). Hur presenterar automaten vad den är 4ll för och hur den bör användas för användaren? Vad kan användaren göra? Hur vet användaren vad denne ska göra först? Är det synligt? Vilka affordanser och mappningar presenterar automaten? Ger automaten återkoppling 4ll användaren om si= 4llstånd och hur fungerar det? Avsluta med dina övergripande resultat och (Slutsats och diskussion). Inkludera bilder för a= illustrera! A= skriva rapporter Instruk4on för struktur och innehåll. Följ gärna dessa! Finns på kurshemsidan under - Li:eratur. A= skriva rapporter AS skriva rapporter Här följer några allmänna råd inför a= skriva en rapport och 4ps på hur du undviker vanliga misstag. Tänk också på a= du måste följa de särskilda instruk4oner som finns inför uppgiken. Instruk4oner för uppgiken Kri4sk analys gavs på föreläsning 3 (av Camilla), se dessa föreläsningsanteckningar på kurshemsidan. Hur du presenterar e= material bidrar 4ll det intryck det gör på den som läser det; även om själva innehållet är bra så kommer en ostrukturerad eller slarvigt skriven rapport a= ge e= mindre bra intryck. A= skriva rapporter Titel sida. En rapport har en 4telsida (förstasida) med 4tel, kursens namn, namn på förfa=aren 4llsammans med hans/hennes epostaddress. Ingen text ska finnas på baksidan av 4telsidan. Introduk%on. En rapport börjar med en introduk4on; syket är a= ge en bakgrund 4ll varför du skriver rapporten (men skriv inte bara a= det är för a= det är en del av en kurs utan beskriv varför det är intressant/vik4gt). Innehåll. Introduk4onen följs av själva innehållet i dokumentet. Det ska presenteras i en ordning som gör det lä= a= följa beskrivningar och resonemang kring resultat och slutsatser. E= förslag är a= använda numrerade rubriker/underrubriker för a= strukturera dokumentet. Tänk på a= du måste tolka dina resultat för a= göra dem förståeliga för läsaren Till exempel, om du analyserar en hemsida är det inte 4llräckligt a= påstå: Menyn innehåller 43 objekt ". Du måste skriva: " Menyn innehåller 43 objekt, vilket är alldeles för många ekersom antalet gör det svårt för användaren a= hi=a rä= alterna4v vid naviga4on i menyn." 12
A= skriva rapporter Slutsats/Diskussion. En skriven rapport innehåller all4d en slutsats och en diskussion, det budskap du vill a= läsaren ska ha få= eker a= ha läst din rapport. Den kan bestå av en summering, slutsatser och en diskussion kring dessa eller några slutliga påpekanden. Illustra%oner/bilder. I alla ovan nämnda delar av rapporten kan du inkludera illustra4oner i form av skärmdumpar, foton etc. för a= exemplifiera beskrivninar och öka förståelsen hos läsaren. Dessa måste all4d vara numrerade och ha en förklarande bildtext. Alla bilder måste också refereras 4ll i löpande text (exempelvis; se Bild 1, eller vilket illustreras i Bild 2). A= skriva rapporter Gör en stavningskontroll. Gör en stavningskontroll (som di= ordbehandlingsprogram erbjuder) men läs också själv igenom din text ordentligt minst en gång. För a= garantera en god läsbarhet bör di= dokument vara skrivet så a= texten inte har mer än 12-15 ord per rad (jämför med en bok eller det här dokumentet). Storleken på texten bör inte vara för liten, 11 punkter rekommenderas. Dokumentet bör vara lukigt men var inte frikos4g i onödan, (dvs rubriker behöver inte vara jä=estora, stycken kan vara ganska långa utan a= det blir jobbigt a= läsa och infoga inte blanka rader under rubriker och mellan stycken i onödan ). Språk. Skriv fullständiga meningar och undvik (e= för) vardagligt språk och slang. Dessutom, innan du lämnar in di= arbete: Postlåda Lämnas in i Camilla Forsells postlåda, Täppan, plan 5. Utskriven på papper, inte via epost. Inlämning: Senast måndag 21 oktober kl 9:00 (v43). Nästa föreläsning Designworkshop fredag 27/9 13-15. OBS lokaländring. B42 (ej TP2!). 13