Idag. Gränssni=sdesign. Vad påverkar designen? Kunskap om tekniska förutsä=ningar. TNM040 Kommunika4on och användargränssni= HT2013, FÖ5

Relevanta dokument
TNM040 Kommunika4on och användargränssni= HT2015, FÖ5 TNM040 HT2015. Idag. Kogni4v psykologi uppmärksamhet, minne Introduk4on 4ll projektet

Idag. Uppmärksamhet. Kogni4va nivåer. Visuell sökning (Visual search) Visuell uppmärksamhet

Föreläsning i webbdesign. Interak*onsdesign. Rune Körnefors. Medieteknik Rune Körnefors rune.kornefors@lnu.se

Writing with context. Att skriva med sammanhang

Make a speech. How to make the perfect speech. söndag 6 oktober 13

Isolda Purchase - EDI

Grundläggande teori för användargränssni3, del 1

Föreläsning 3 1ME403 Design av grafiska gränssni7, 7,5hp. Gränssni)sdesign II. Rune Körnefors. Medieteknik Rune Körnefors rune.kornefors@lnu.

Preschool Kindergarten

Studentundersökningen. TerminsGder. Idag. Psykologi Agil användbarhetsutveckling för handhållna enheter TNM082, VT2015, FÖ5

BOENDEFORMENS BETYDELSE FÖR ASYLSÖKANDES INTEGRATION Lina Sandström

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


Read Texterna består av enkla dialoger mellan två personer A och B. Pedagogen bör presentera texten så att uttalet finns med under bearbetningen.

Självkörande bilar. Alvin Karlsson TE14A 9/3-2015

Translation Changes in Swedish EBSCOhost Interface

Grafisk teknik IMCDP IMCDP IMCDP. IMCDP(filter) Sasan Gooran (HT 2006) Assumptions:

Provlektion Just Stuff B Textbook Just Stuff B Workbook

Grafisk teknik IMCDP. Sasan Gooran (HT 2006) Assumptions:

English. Things to remember

Kvalitetsarbete I Landstinget i Kalmar län. 24 oktober 2007 Eva Arvidsson

Rastercell. Digital Rastrering. AM & FM Raster. Rastercell. AM & FM Raster. Sasan Gooran (VT 2007) Rastrering. Rastercell. Konventionellt, AM

Webbregistrering pa kurs och termin

Vässa kraven och förbättra samarbetet med hjälp av Behaviour Driven Development Anna Fallqvist Eriksson

Mönster. Ulf Cederling Växjö University Slide 1

Unit course plan English class 8C

Health café. Self help groups. Learning café. Focus on support to people with chronic diseases and their families

6 th Grade English October 6-10, 2014

Översättning av galleriet. Hjälp till den som vill...

Isometries of the plane

Grafisk teknik. Sasan Gooran (HT 2006)

Quick Start Guide Snabbguide

Beijer Electronics AB 2000, MA00336A,

- den bredaste guiden om Mallorca på svenska! -

This is England. 1. Describe your first impression of Shaun! What kind of person is he? Why is he lonely and bullied?

How to format the different elements of a page in the CMS :

Information technology Open Document Format for Office Applications (OpenDocument) v1.0 (ISO/IEC 26300:2006, IDT) SWEDISH STANDARDS INSTITUTE

Datavetenskap. Beteendevetenskap MDI. Design

Om oss DET PERFEKTA KOMPLEMENTET THE PERFECT COMPLETION 04 EN BINZ ÄR PRECIS SÅ BRA SOM DU FÖRVÄNTAR DIG A BINZ IS JUST AS GOOD AS YOU THINK 05

Listen to me, please!

Från extern till intern på tre dagar Erfarenheter från externa lärares pedagogiska kompetensutveckling

Utvärdering SFI, ht -13

IT och funk0onshinder

Boiler with heatpump / Värmepumpsberedare

Webbreg öppen: 26/ /

Protokoll Föreningsutskottet

SVENSK STANDARD SS :2010

Schenker Privpak AB Telefon VAT Nr. SE Schenker ABs ansvarsbestämmelser, identiska med Box 905 Faxnr Säte: Borås

Problem som kan uppkomma vid registrering av ansökan

Workplan Food. Spring term 2016 Year 7. Name:

Support Manual HoistLocatel Electronic Locks

State Examinations Commission

Föreläsning 5 Konceptuell design och designprinciper

MÅLSTYRNING OCH LÄRANDE: En problematisering av målstyrda graderade betyg

Resultat av den utökade första planeringsövningen inför RRC september 2005

Design för användbarhet Designexempel, hur tänkte man vid designen?

Read, work and talk! - och Lgr 11

Vad påverkar designen?

Enterprise App Store. Sammi Khayer. Igor Stevstedt. Konsultchef mobila lösningar. Teknisk Lead mobila lösningar

samhälle Susanna Öhman

Webbtillgänglighet. Tillgänglighet på webben. Hörselskadades behov. Synskadades behov. Kognitivt funktionshindrades behov. Rörelsehindrades behov

Ett hållbart boende A sustainable living. Mikael Hassel. Handledare/ Supervisor. Examiner. Katarina Lundeberg/Fredric Benesch

Kommandobaserad interaktion

Att fastställa krav. Annakarin Nyberg

Hur fattar samhället beslut när forskarna är oeniga?

Chapter 1 : Who do you think you are?

Innehåll. Styrdon (ej i boken) Fitts lag (sidan ) Natural user interfaces. Kap 6.2.9, , Kap

Att stödja starka elever genom kreativ matte.

Service och bemötande. Torbjörn Johansson, GAF Pär Magnusson, Öjestrand GC

Studieteknik för universitetet 2. Books in English and annat på svenska

Människa- datorinterak5on inledande kurs, ht 13

LEVERANTÖRSLED; INKÖP OCH UPPHANDLING

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

2.1 Installation of driver using Internet Installation of driver from disk... 3

#minlandsbygd. Landsbygden lever på Instagram. Kul bild! I keep chickens too. They re brilliant.

CUSTOMER READERSHIP HARRODS MAGAZINE CUSTOMER OVERVIEW. 63% of Harrods Magazine readers are mostly interested in reading about beauty

Föreläsning 8. Designmönster

Stad + Data = Makt. Kart/GIS-dag SamGIS Skåne 6 december 2017

Användning av Erasmus+ deltagarrapporter för uppföljning

Typografi, text & designperspektiv

Heuristisk utvärdering

Adding active and blended learning to an introductory mechanics course

Thesis Production Time plan, preparation and Word templates

Rev No. Magnetic gripper 3

Materialplanering och styrning på grundnivå. 7,5 högskolepoäng

LARS. Ett e-bokningssystem för skoldatorer.

Föreläsning 2 1ME403 Design av grafiska gränssni8, 7,5hp Gränssni)sdesign I. Rune Körnefors. Medieteknik Rune Körnefors

FÖRBERED UNDERLAG FÖR BEDÖMNING SÅ HÄR

EXTERNAL ASSESSMENT SAMPLE TASKS SWEDISH BREAKTHROUGH LSPSWEB/0Y09

Immigration Studying. Studying - University. Stating that you want to enroll. Stating that you want to apply for a course.

Teknikprogrammet Klass TE14A, Norrköping. Jacob Almrot. Självstyrda bilar. Datum:

Skolutveckling pågår! Kollegialt lärande på Blackebergs gymnasium läsåret 2015/16

HANTERING AV UPS CX

Projektmodell med kunskapshantering anpassad för Svenska Mässan Koncernen

SkillGuide. Bruksanvisning. Svenska

Välkommen in på min hemsida. Som företagsnamnet antyder så sysslar jag med teknisk design och konstruktion i 3D cad.

Capabilities for Education, Work and Voice from the Perspective of the Less Employable University Graduates.

Mina målsättningar för 2015

COPENHAGEN Environmentally Committed Accountants

Methods to increase work-related activities within the curricula. S Nyberg and Pr U Edlund KTH SoTL 2017

Transkript:

TNM040 Kommunika4on och användargränssni= HT2013, FÖ5 Idag Gränssni=sdesign, saker som påverkar. Introduk4on/förberedelse inför projektet i HT2 Gränssni=sdesign Arbetet med design av e= användargränssni= kan ses som något som liknar en arkitekts arbete. En arkitekt ska i sin urormning av en ny byggnad se 4ll a=: Byggnaden är funk4onell, har alla de funk4oner och egenskaper som everfrågas, kan bli en bra förutsä=ning för den verksamhet som ska finnas i byggnaden. Byggnaden är konstruerbar på e= 4llräckligt enkelt och billigt sä=. Byggnaden är trevlig, este4skt 4lltalande, blir accepterad och omtyckt av de fram4da användarna. På samma sä= ska designen av e= gränssni= vara funk4onell, ge möjligheter för en effek4v användning. kunna implementeras i den tekniska miljön på e= rimligt sä= samt vara trevligt, este4skt och bli accepterad av användarna. De=a innebär a= det är en blandning av e= ingenjörsarbete och e= krea.vt skapande arbete. Vad påverkar designen? Design av e= användargränssni= är nästan all4d en itera4v process, med deltagande av flera olika parter. De tänkta användarna är extra vik4ga Se 4digare föreläsning om (användarcentrerad utveckling/design). De=a innebär bland annat a= man går igenom designsteget flera gånger under e= projekt, med mellanliggande tester och utvärderingar av en prototyp. I varje steg ska man delst utvärdera erfarenheterna av den 4digare itera4onen, dels modifiera lösningen med u4från de=a, en rad olika faktorer påverkar. Vad påverkar designen? Följande faktorer har vik4g påverkan på designen: Kunskap om användningssitua4onen Kunskap om användarna Gränssni= Kunskap om tekniska förutsä=ningar I vilken teknisk miljö ska utvecklingen ske Med vilka verktyg ska utvecklingen ske Bildskärmar som ska användas, skärmstorlek, upplösning, färger Databassystem och dess egenskaper Etc. Kunskap om människa- dator interak4on (MDI) och design Kunskap om de tekniska förutsä=ningarna 1

2013-10- 07 Kunskap om MDI och design Generella kunskaper om MDI och gränssni=sdesign Människans interak4on med tekniska system Hur fungerar människan i komplexa dynamiska arbetssitua4oner? Hur kan man anpassa arbetsprocesser och teknikstöd 4ll de=a? Speciellt: Kogni.va processer, automa.sering, minne, mönsterigenkänning etc. Standarder och guider av olika slag som ska beaktas (ISO, inom området/verksamheten) Tillämningsspecifika guidelines Rekommenda4oner av olika slag som gäller för e= projekt Etc. Uppmärksamhet Uppmärksamhet Defini.on: Uppmärksamhet handlar om a= vi fokuserar/ koncentrerar oss på något specifikt vid en given 4dpunkt. Kräver kapacitet, vi har begränsade resurser och kan inte bearbeta allt som våra sinnen utsä=s för. Vår hjärna litar 4ll a= vi riktar vår uppmärksamhet mot framträdande/ vik4ga detaljer och filtrerar ut de ovik4ga. Dress to kill Vår förmåga a= rikta uppmärksamhet mot flera saker sam4digt är begränsad. Kogni4va nivåer Kogni4va processer Automa4ska kogni4va processer uppgiver som vi känner igen och lä= kan uröra, utan a= egentligen tänka på dem sker ova parallet dvs vi kan uröra fler sam4digt utan större ansträngning kräver minimal uppmärksamhet ova svåra a= beskriva och svåra a= ändra på Kontrollerade kogni4va processer mer komplicerade uppgiver som inbegriper okända koncept seriella, vi kan bara uröra en i taget långsamma, begränsad kapacitet, kräver mycket (medveten) uppmärksamhet Om vi urör uppgiver automa4skt har vi kapacitet 4ll a= uppfa=a andra saker på samma gång E= gränssni= ska stödja båda processerna och undvika konflikt emellan dem 2

Test Läs listan med ord som presenteras i nästa bild Säg färgen ordet är skrivet med (tyst för dig själv) när nästa bild visas så fort du kan Grön Svart Gul Röd Rosa Blå Nu gör du det igen Blå Röd Svart Röd Grön Gul Stroop effekt A= läsa är en automa4sk (omedveten) process som inte kräver mycket mental ansträngning. Men, en sådan väl inlärd och automa4sk process kan interferera med andra uppgiver. (Här den kontrollerade processen av a= namnge färgen e= ord är skrivet i). Du vill automa4skt läsa vad orden betyder snarare än a= säga vilken färg de är skrivna i. Effekten visar a= vi inte all4d har full kontroll över vad vi riktar vår uppmärksamhet mot. Stroop effect Experiment illustrated the Stroop effect which is about interference (between automa4c and controlled processes) Interference - a phenomenon in which mental processing is made slower and less accurate by compe4ng mental processes. Interference effects occur when two or more perceptual or cogni4ve processes are in conflict. First shown by Stroop (1953), (Replicated later) he showed that if a color word like red is wri=en in a conflic4ng color such as green, i.e. not denoted by the name, people find it remarkably difficult to name the color the word is wri=en in. The task takes longer and is more prone to errors. You automa4cally want to read what the words say rather than the colour ink they are wri=en in Even if you don t read the colour word out loud, there was a 4me delay whilst you thought of the correct response (the colour ink). An irrelevant aspect of a s4mulus (meaning of word) triggers a mental process that interferes with processes involving a relevant aspect of the s4mulus (color of word). For example, the 4me it takes to name the color of words is greater when the meaning and color of the words conflict. 3

Design Förebygg interferens genom a= undvika konflikt mellan mentala processer. Effekter som Stroop är ova e= resultat av en konflikt mellan kombina4oner i kodning/avbildning. Tex. Ok Avbryt I kulturer där vi lärt oss a= grönt innebär ok/gå etc. och rö= innebär stop, stanna etc. så innebär oförenligheten mellan färgen och av texten på ikonerna en störning. Mindre acceptabla gränssni= I många situa4oner ska det vara en automa4sk process a= använda e= gränssni=. Vad betyder dessa UNIX kommandon? cat grep lint mv pr lpr Visuell uppmärksamhet Pop- out effekt i visuell sökning Change blindness Ina=en4onal blindness Visuell sökning (Visual search) Våra ögon är i konstant rörelse och de letar hela 4den ever var de ska 4=a härnäst, vid nästa fixering. Det är stor skillnad mellan någon4ng som kan lokaliseras genom en ögonrörelse och någon4ng som kräver fem, eller 4o. I det förra fallet flyter det visuella tänkandet, i det senare kan det bli ineffek4vt och frustrerande. Vårt visuella system är känsligare för vissa egenskaper i en scen än andra. Visuell sökning Studier inom visuell sökning: Förmåga a= lokalisera något specifikt i en visuell scen, deltagare i en studie ombeds lokalisera en bokstav eller e= objekt bland andra objekt. Finn det röda objektet Färg som pop- out Anne Triesman some things seem to pop- out at the viewer - no ma=er how many surrounding distractors the 4me to respond is the same (prea=en4ve processing, it occurs because of automa4c processes prior to a=en4on?). 4

Finn cirkeln Form som pop- out Färg kan a=rahera vår uppmärksamhet. Finn den röda cirkeln Kombina4on av färg och form som pop- out? Finn den röda cirkeln Språk- Larson s hundeffekt Kombina4on Trying to find a target av färg based och on form two features som (color and shape) is called visual conjunc4ve search pop- out? 'What Man talking we say to his to dog dogs' and 'What Cartoon they by Gary hear'. Larson. E= kombina4onsobjekt komponerat av flera egenskaper är i de flesta fall svåra a= se bland andra och har ingen pop- out effekt. 5

Språk - Larsons människoeffekt Same with software and much other technology Språk presenta4on av text Människor skummar hänsysnlöst särskilt i online miljöer Om det är möjigt vill vi helst undvika a= läsa Om det går a= välja mellan a= göra något och a= läsa om det, kommer de flesta a= göra det. Vi plockar ut nyckel ord och fraser. Men dessa kanske inte är de du avsåg! Pop- out effekt För design: Ska någon4ng vara lä= a= hi=a/dra uppmärksamheten 4ll sig, så gör det olikt omgivningen färg, form, storlek, låt det blinka, animering Komplexa design problem är komplexa hör gör du flera saker lä= sökbara på samma gång? OVa är vi intresserade av objekt som består av en kombina4on av egenskaper (tex., glyfer) och kombina4onssökning har sällan en pop- out effekt. Uppmärksamhet för design Markera vik4g informa4on med hjälp av: layout/struktur (placering, gruppering & ordning), storlek, mellanrum, färg, animering, understrykning Undvik a= överbelasta gränssni= t.ex. för mycket grafik och/eller informa4on. Det är nästan omöjligt a= förutse var användare kommer a= 4=a, vad som är mest vik4gt etc. Alltså vart ska du rikta användarens uppmärksamhet? Hur ska man hindra a= de blir distraherade? Vill vi ha Times Square? Blinking signs are the most effec4ve in capturing our a=en4on. When allowed Times Square is the result. Två vik4ga minnesstrukturer: Korvdsminnet Lång4dsminnet 6

Hjärnans kapacitet är begränsad Vi måste designa system som tar hänsyn 4ll våra begränsningar vad gäller uppmärksamhet och vår förmåga a= minnas Korvdsminnet Avklingnings4d c:a 15 sek. Utan repe44on - nya saker knuffar ut gamla Störningskänsligt Allt ska vara meningsfullt, och lä= a= minnas Sam4dig visning av informa4on All informa4on som behövs i e= beslut ska vara synlig sam4digt på skärmen. Användaren ska all4d känna a= man har överblick, grepp om helheten. Det är belastande för korvdsminnet a= växla bild. Undvik överlappande fönster. Formulär för läsning och skrivning ska finnas synliga sam4digt. Störningskänslighet - Avbro= Tydliga begränsningar på förmåga a= återuppta en avbruten uppgiv eversom den styrs av korvdsminnet Var är jag? Vad gjorde jag? Hur kom jag hit? Var kan jag gå från här? Vad kan jag göra härnäst? Uppmärksamhet och minne Vik4gt a= ge visuella ledtrådar/minnesstöd så a= användare lä= kan fortsä=a med en avbruten uppgiv! Markör blinkar på rä= posi4on. E= ak4vt område är betonat/markerat. När det inte går a= undvika e= avbro= ge återkoppling för a= indikera a= systemet inte har dö=. 7

Introduction Background Fairytales Discussion Brödsmulor Hans och Greta Naviga4on aid used in interfaces that allows users to keep track of their loca4ons within programs and documents. Clicking on a breadcrumb could take you a page you visited before or to related informa4on. If you get lost or want to find different informa4on, this trail helps you see the path to the current page. Korvdsminnet Avklingnings4d c:a 15 sek. Utan repe44on - nya saker knuffar ut gamla Störningskänsligt 5-8 saker åt gången Det magiska numret +/- 7. Miller talar om a= människan kan minnas 5 4ll 9 saker och processera 5 4ll 9 saker sam4digt. Alltså: Ha 5 4ll 9 flikar i en meny och ha 5 4ll 9 innehållsobjekt på startsidan. Baddeley säger a= v ibara kan minnas 3-4 saker. Och det bara i ca 20 sekunder! Såvida vi inte repeterar det om och om igen Miller, G. A. (1956). "The magical number seven, plus or minus two: Some limits on our capacity for processing informa4on". Psychological Review 63 (2): 81 97. Baddeley A, Della Sala S (October 1996). Working memory and execu4ve control. Philos. Trans. R. Soc. Lond., B, Biol. Sci. 351 (1346): 1397 403 Det magiska numret +/- 7. Miller talar om a= människan kan minnas 5 4ll 9 saker och processera 5 4ll 9 saker sam4digt. Alltså: Ha 5 4ll 9 flikar i en meny och ha 5 4ll 9 innehållsobjekt på startsidan. Baddeley säger a= v ibara kan minnas 3-4 saker. Och det bara i ca 20 sekunder! Såvida vi inte repeterar det om och om igen S A S I C A LIUF B I CIA UNSAABUSA Men ska man då all4d endast ha 3-4 flikar i menyn? Nej det är ova omöjligt, men vi människor har knep för a= om möjligt för a= förbä=ra vår kapacitet. 8

Hur många kommer du ihåg? Hur kommer du ihåg/hur gjorde du? S A S I C A LIU F B I CIA UN SAAB USA Korvdsminnet Välkänt inom psykologin: Vi chunkar dvs grupperar Miller s teori är a= 7 plus/minus 2 sådana chunks får plats i korvdsminnet. En chunk är en meningsfull enhet (ord, bokstav, siffra) som används för a= hjälpa korvdsminnet A= använda chunking är e= bra sä= a= minska den mentala belastningen. Gruppera meningsfulla enheter 4llsammans. Använd för a= låta användarna uppfa=a informa4on lä=are. För a= kunna bearbeta och minnas lä=are. STM Välkänt inom psykologin: Vi chunkar dvs grupperar Miller s teori är a= 7 plus/minus 2 sådana chunks får plats i korvdsminnet En chunk är en meningsfull enhet (ord, bokstav, siffra) som används för a= hjälpa korvdsminnet Har gjort e= stort intryck inom MDI och gränssni=sdesign av en något felak4g anledning Korvdsminnet Enligt en undersökning (2000) har designers lärt sig a= följande riktlinjer gäller och skapar gränssni= baserat på dem. Ha bara 7: alterna4v i en meny ikoner på en verktygspale= flikar på en websida punkter i en lista alterna4v i en rullgardinsmeny Varför bör dessa riktlinjer ifrågasä=as? 9

Korvdsminnet Anledningar: Dessa är alla element som kan ses och ses över visuellt och alltså inte måste återkallas från korvdsminnet! De visas inte på en skärm och försvinner, vilket skulle kräva a= användaren måste minnas dem innan denne bestämmer sig för a= välja en. Användare behöver inte minnas så många som möjligt, efetr a= bara ha hört eller se= den en gång i en sekvens. Istället kan de se över e= antal element 4lls de känner igen den de letar ever. Blandar ihop igenkänning (recogni4on) passivt minne med ihågkomst (recall) ak4vt minne Men absolut inte fel varnar för minnesbelastning!! Recogni4on rather than recall är en mycket vik4g designprincip! Korvdsminnet 5-8 saker åt gången Avklingnings4d c:a 15 sek. Störningskänsligt Lång4dsminnet Mekanismer i lång4dsminnet lagra, det vill säga organisera och integrera tillgång 4ll lång4dsminnet på två sä=: igenkänning och ihågkomst Lång4dsminnet Obegränsad kapacitet Lagrat för livet, i princip är lång4dsminnet permanent Fordrar inlärning Kan vara svårt a= återvinna informa4on Ihågkomst Vad heter Gambias huvudstad? Igenkänning Vad heter Gambias huvudstad? 1. Banjul X. Senegambia 2. Georgetown 10

Designprincip Recogni.on rather than recall Minimize the user s memory load by making objects, ac4ons, and op4ons visible. The user should not have to remember informa4on from one part of the dialogue to another. Instruc4ons for use of the system should be visible or easily retrievable whenever appropriate. (Nielsen, 10 heuris4cs for interface design). h=p://www.nngroup.com/ar4cles/ten- usability- heuris4cs/ Designprincip Designa gränssni= som gör det möjligt för människor a= känna igen saker snarare än a= tvinga dem a= komma ihåg dem använd minnesstöd Knowledge in the world vs. knowledge in the head. Human memory is essen4ally knowledge in the head, or internal knowledge. Knowledge in the world acts as its own reminder. It can help us recover structures that we otherwise would forget (Norman, 1998. The design of everyday things.). Each tab collects relevant and related elements into meaningful dialogs (size, layout, web etc). Also, arrows show that a collec4on will be expanded. Meaningful associa4ons, B for bold, I for italic, natural mappings reduces the need for informa4on in memory. 11

2013-10- 07 Designprinciper Metaforer Consistency This refers to designing interfaces to have similar opera4ons and use similar elements for achieving similar tasks. In par4cular, a consistent interface is one that follows rules, such as using the same opera4on to select all objects. For example, a consistent opera4on is using the same input ac4on to highlight any graphical object at the interface, such as always clicking the lev mouse bu=on. Inconsistent interfaces, on the other hand, allow excep4ons to a rule. (Norman, 1998. The design of everyday things.). Consistency and standards Users should not have to wonder whether different words, situa4ons, or ac4ons mean the same thing. Follow plarorm conven4ons. (Nielsen, 10 heuris4cs for interface design). h=p://www.nngroup.com/ar4cles/ten- usability- heuris4cs/ Skillnad mellan intern konsekvens (inom e= system) och extern (mellan system). Gör det möjligt a= överföra kunskap från e= system 4ll e= annat. Blue Tooth (blåtandskommunika4on) varför heter det så? Metaforer Metaforer Liknelser - begrepp och existerande mentala modeller används för a= karaktärisera och förklara det som är okänt - överföring från en domän 4ll en annan. Används för a= organisera tänkandet och främja förståelse. Metaforer Metaforer Metaforer existerar på flera olika nivåer På en hög nivå genom a= organisera en hel arbetsyta på en skärm, tex skrivbord. 12

Metaforer Metaforer existerar på flera olika nivåer På en hög nivå genom a= organisera en hel arbetsyta på en skärm, tex skrivbord. På en opera4v nivå, för a= uröra något, tex dra- och- släpp, slänga något, etc. Metaforer Metaforer existerar på flera olika nivåer På en hög nivå genom a= organisera en hel arbetsyta på en skärm, tex skrivbord. På en opera4v nivå, för a= uröra något, tex dra- och- släpp, slänga något, etc. På en låg nivå genom exempelvis ikoner som avbildar något meningsfullt för användaren, tex. filer/mappar, fönster. skrivare etc. Ikoner An icon is a conven4onal religious image oven painted on wood a picture representa4on of an object in human- system interac4on context: a language or graphical sign whose appearance leads the observer to think about an available func.on Vik4gt med design och igenkänning/förståelse av ikoner. Den metafor som valts bidrar starkt 4ll igenkänning av vilken funk4on (applika4on) de representerar. Det första en användare gör är a= försöka förstå/lista ut vad något är innan man klickar på det (öppnar det). Icons Why icons? they take up less space than text can offer language independence to use of products in different countries text must be translated to other languages can support the extensive human ability of pa=ern recogni4on an icon can (oven) be recognised faster than text reduce required space for informa4on presenta4on offer a certain level of aesthe4c appeal Icons There are four ways in which an icon can represent its underlying concept Arbitrary Symbolic Example Resemblance 13

Associa4on with the message Arbitrary bear no rela4onship to their intended meaning so the associa4on must be learned should not be regarded as poor designs, even though they must be learned e.g. the bio- hazard sign consis4ng of three par4ally overlaid circles Associa4on with the message Arbitrary bear no rela4onship to their intended meaning so the associa4on must be learned should not be regarded as poor designs, even though they must be learned e.g. the bio- hazard sign consis4ng of three par4ally overlaid circles Associa4on with the message Symbolic conveys an underlying referent (ac4on, object or concept) that is at a higher level of abstrac4on than the image itself the picture of a wine glass with a fracture to convey the concept of fragility (here fragile goods, not just wine glasses) Associa4on with the message Example an example icon represents a central ahribute of an object or func4on Associa4on with the message Associa4on with the message Example an example icon represents a central ahribute of an object or func4on e.g., a knife and fork to represent restaurant services, the image shows the most basic a=ribute of what is done in a restaurant i.e. ea4ng. Resemblance present a direct or analogous image of the func4on or concept itself the icon is a reproduc.on of an object or a func4on 14

Associa4on with the message Resemblance present a direct or analogous image of the func4on or concept itself. the icon is a reproduc.on of an object or a func4on the road sign for "falling rocks" presents a clear resemblance of the roadside hazard. Icons Two important design issues for icons are: 1) Interpreta4on (what it is the icon is intended to convey) non trivial issue, an icon may be recognized as an object but remains ununderstood as to its meaning cau4on against icons not accompanied by a textual label, however this removes the advantage of the one reason for using icons in the first place, they are concise and small! (the solu4ons are pop- up labels) Icons Icons #6 Overly original metaphors Selec4ng what is to be displayed in an icon is always a compromise between recognizability and originality. Before a metaphor (image) is developed for an icon it is wise to see how it is done in other products. Maybe the best solu4on lies not in coming up with something original but rather in adop4ng the exis4ng solu4on. An example of excessive originality is the bin icon in OS/2 Warp 4, which is not actually a bin at all but a shredder. Another problem with choosing a shredder is that there is no one well- known type of shredder out there. The icon appears very much like a printer with an octopus hidden inside. What is more, it is absolutely unclear how a full bin would be displayed according to this metaphor. Two important design issues for icons are: 2) Legibilty (whether or not one can discriminate between icons) icons are not always viewed under ideal condi4ons (e.g., poor lightning condi4ons, screen resolu4on, size of the icon itself) under such condi4ons it is the overall, global, appearance of the icon that aids discrimina4on, so icons should not be designed so they differ only with respect to one small detail. 10 Mistakes in Icon Design h=p://turbomilk.com/blog/cookbook/icon_design/ 10_mistakes_in_icon_design/ Slutsatser En användare måste kunna vara fokuserad på (arbets)uppgiven, inte på a= hantera verktyget. Man får inte överbelasta korvdsminnet. Man ska stödja lång4dsminnet. Människan kan överblicka och orientera sig i en obegränsad (?) informa4onsmängd i real4d och ha full koll på allt som sker om visualiseringen stödjer de=a. Mycket små informa4onsmängder kan vara totalt oöverskådliga och svårtolkade i annat fall. Informa4on vi inte ser kan vi inte hantera effek4vt. Informa4on overload uppstår genom för lite eller irrelevant informa4on eller för dålig visualisering!!!! Alla slutsatser kan bara tolkas och 4llämpas i dess rä=a sammanhang (användare, uppgiv, syve,...) När jag visar nästa bild Välj e= av spelkorten- vilket som helst och koncentrera dig på a= minnas det! 15

Projektarbete HT2 UppgiQens form och syqe ProjektuppgiVen i kursen är a= designa och implementera e= funk4onellt och användarvänligt grafiskt användargränssni= som vänder sig 4ll en specificerad målgrupp(er). Schemaförslag V45 (4-8 nov) 1 4llfälle som uppstart 1 labb4llfälle, 2 labbsalar bokade parallelt, 8-12 eller 13-17 V46 V50 1 4llfälle per vecka, 2 Labbsalar bokade parallelt, 8-12 eller 13-17 Totalt 6 veckors arbete 3 hp motsvarar 80h (1,5 hp. 1v arbete, är 40h) V51 (16-20 dec) Redovisning i labbsal, 2 dagar inbokade Inlämning av skrivlig domumenta4on innan redovisning Projektgrupp Frivillig gruppindelning 4 (5) personer i varje grupp 58 studenter KOLLA 12 grupper om 4 personer 2 grupper om fem personer Meddela mig (senast V43) Medlemmar Roller (främst gruppansvarig) KorRa=ad beskrivning av projketuppgiv: typ av gränssni=, dess syve och mål. Go= om 4d för självstudier fram 4ll ProjekRörberedelse - Avstämning V45 ska alla grupper redovisa en projkerörberedelse: SyVet med projekrörberedelsen är a= ni ska etablera er som grupp, komma överens om projketuppgiv och om hur projektet ska hanteras och dokumenteras. Det innebär också a= diskutera styrkor och svagheter, eventuell kompetensutveckling och andra förberdelser etc. ProjekRörberedelsen ska innehålla: ProjektuppgiV Tydlig beskrivning av typ av gränssni=, syve, mål Projektmetod och arbetsfördelning Roller Vik4gt a= resepktera allas önskningar och a= var och en kommunicerar önskemål, styrkor och svagheter 4ll gruppen. Parprogrammering eller inte System för a= hantera projektet Fldelning, Excel, Word, Facebook etc. Början 4ll projektplan och 4dsplanering När skall arbetet uröras, vad ska göras och.i vilken ordning och hur lång 4d räknas varje moment a= ta. Förstudie Implementa4on Utvärdering/ar Gruppkontrakt E= kontrakt ska upprä=as och signeras. Se föreläsningsanteckningar och förslag på innehåll på hemsidan. 16

Handledning Viss begränsad handledning kommer a= ges för a= säkerställa och följa upp a= projektgrupperna gör rä= saker och disponerar sin 4d och sin arbetsinsats rimligt väl, men själva arbetet är e= inlärningsprojekt som skall uröras av studenterna själva i grupper om fyra (fem) studenter. Sök i först ahand stöd inom gruppen. Frågor skall i första hand besvaras genom egna studier av kursmaterialet, dokumenta4on och goda exempel på nätet och biblioteket, samt genom egna prak4ska försök. Handledning Kontakt E- post: katerina.vrotsou@liu.se henry.fröcklin@liu.se Besök: Kopparhammaren, plan 4 Givetvis finns ocksåexaminator och och annan personal (Camilla, Katerina, Henry) 4llgängliga som stöd. Roller Varje grupp ska utse: En Gruppansvarig. Den personen ansvarar för kontakt med lärare, användare och andra involverade personer. Det innebär a= boka möten, hålla koll på a= saker är förberedda inför dessa möten etc. Designprocess och kvalité Perspek4vtänkande De Bono: se saken ur olika synvinklar En Projektansvarig. Den personen är ansvarig för a= gruppen fungerar och a= arbetet fortskrider enligt plan. Dessa personer kan vara desamma under hela projektet, det går också a= byta ever halva 4den (avbytare utses direkt i början av projektet). Dessutom: DeBonos sex tänkarmössor DEN VITA MÖSSAN är som papper: neutral, bär information eller data. Vilken information har vi? Vilken information saknas? Vilken information skulle vi vilja ha? Hur ska vi få den? DEN RÖDA MÖSSAN handlar om känslor och intuition (tänk rött som värme och eld). DEN SVARTA MÖSSAN är som en domarkåpa (USA) som gör kritiska bedömningar. Att identifiera varför en idé inte kommer att fungera eller varför den inte är lönsam är den svarta mössans uppgift. DEN GULA MÖSSAN är som solen: optimistisk och positiv. Med denna mössa letar man efter sätt att lösa problem och hitta välgrundade fördelar med de idéer man granskar. DEN GRÖNA MÖSSAN står för kreativitet, nya idéer, nya alternativ, nya möjligheter (tänk vegetation och tillväxt). DEN BLÅ MÖSSAN står för fågelperspektivet. Med denna mössa tänker man på processen, dagordningen, nästa steg, sammanfattningar, slutsatser. ProjekRörberedelse Gruppkontrakt 17

Gruppkontrakt SyVet är a= a= alla i gruppen ska vara överens om mål, innehåll, arbetssä= och ru4ner för arbetet under projektet. Alla ska deltaga ak4vt och ta hänsyn 4ll allas synpunkter och önskemål. Gruppkontrakt De=a innebär a= fastställa: målet med projektet ru4ner regler för kommunika4on och interak4on roller - vem som är ansvarig för vad resurser hur progression och kvalitet ska mätas hur svårigheter ska lösas hur eventuella sank4oner ska utmätas och verkställas (se hemsida för exempel på innehåll) Förslag 4ll arbetsplan Projektbeskrivning Tydlig kravspecifika4on/specifika4on av behov, eventuellt med prioriteringar Regelbundna möten för a= planera arbetet för a= utvärdera det som gjort hivlls anpassa det som är kvar a= göra (ta bort, lägga 4ll) Tala om vad som hänt sedan sist och om vad som återstår inom en snar fram4d och på längre sikt Återblick och framåtblick Dokumentera Examina4on Redovisning av projektet: Del 1. Demonstra.on: Schemalagt 1 grupp/45 min (blir kanske 30 min per grupp för redovisning och diskussion). Dokumenta4on (del 2) i form av en projektrapport lämnas in innan demonstra4onen (v50/51). Examina4on Del 2. En projektrapport som ska omfa=a följande delar: Projektgrupp ProjektuppgiV Beskrivning av användargränssni=et (generellt och specifikt) Beskrivning av målgrupp/användare Projektmetod och arbetsfördelning beskrivning av processen, hur ni har gjort och varför Tidsåtgång Självvärdering (om det finns fog för olika betyg bör det framgå här) Examina4on Projektrapporten ska vara: Väl strukturerad Tydlig och lä= a= följa/läsa Informa4v Innehålla mo4veringar 4ll metoder, val, beslut, resultat etc. Projektrapporten: Är skriven på svenska Är enkelt forma=erad förslagsvis e= pdf dokument i A4 format 12 punkter Times New roman. Innehåller givetvis illustra4oner från utvecklingen (skisser, skärmdumpar etc.). 18

Examina4on 3hp Betyg U- 5 Individuell betygssä=ning men i stort se= en gruppinsats! Oegentligheter ska i den mån det går hanteras inom gruppen eller av kursansvarig under projektets gång. Det är gränssni=et som bedöms i första hand, inte koden. MEN vid förfrågan vid demonstra4onen ska den kunna förklaras/kommenteras. Tex. Hur har ni gjort det här? Varför gjorde ni inte så här istället? LYCKA TILL! HA ROLIGT! MT2 TNM040 LiU, HT2, 2013 19