INF1500 - Introduksjon til design, bruk, interaksjon Designprinsipper 11. oktober 2016 Institutt for Informatikk, Universitetet i Oslo joshi@ifi.uio.no INF1500 Introduksjon til design, bruk, interaksjon Designprinsipper 1 11.10.16
Dagens tema It is easy to make things hard. It is hard to make things easy. Åpenbart Klikk! Klikk! Klikk! Krever tenking Er det en knapp? Er det dette jeg vil ha? Eller skal jeg lete videre? (J. Putorti, 2012) INF1500 Introduksjon til design, bruk, interaksjon Designprinsipper 2 11.10.16
Oversikt over dagens forelesning Persepsjon og oppmerksomhet Designprinsipper og strategier Seks prinsipper i fokus (Andre prinsipper) Strukturelle prinsipper Fire strategier Obligatorisk oppgave 2 Formål Hva skal gjøres? Hva skal leveres? Før prototypen Om prototypen Tips og huskeliste INF1500 Introduksjon til design, bruk, interaksjon Designprinsipper 3 11.10.16
Nøkkelbegreper fra dagens forelesning Persepsjon s. 6 Habituation s. 9 Attentional blink s. 10 Guiding og filtrering s. 14 Prinsipper, retningslinjer og standarder s. 19 Designprinsipper s. 20 Visibility s. 21 Feedback s. 23 Constraints s. 25 Consistency s. 27 Affordance s. 29 Mapping s. 31 Nærhet s. 41 Likhet s. 42 Kontinuitet s. 43 Kompletthet s. 44 Symmetri s. 45 INF1500 Introduksjon til design, bruk, interaksjon Designprinsipper 4 11.10.16
Definisjoner: - Persepsjon Persepsjon Persepsjon er vår oppfatning av omverdenen slik vi forstår den når sanseorganer kommer i kontakt med omgivelsene Vår persepsjon er ikke en virkelig gjengivelse av det som faktisk eksisterer i omgivelsene rundt oss Vår persepsjon påvirkes av: Fortiden vår erfaring Nåtiden gjeldende omgivelser Fremtiden målsetninger Vi kan «prime» vårt perseptuelle system vi lærer å oppfatte noe som mer fremtredende enn annet INF1500 Introduksjon til design, bruk, interaksjon Designprinsipper 5 11.10.16
INF1500 Introduksjon til design, bruk, interaksjon Designprinsipper 6 11.10.16
INF1500 Introduksjon til design, bruk, interaksjon Designprinsipper 7 11.10.16
Definisjoner: - Habituation Perseptuell påvirkning: fortid (1) Perseptuelle mønstre Gjentatt eksponering ovenfor familiære situasjoner i kjente omgivelser Eksempel: soverommet ditt, en mye besøkt nettside, pulten din på arbeidsplassen Vi kan tro feil om en situasjon fordi vi blander virkelighet med tidligere opplevde liknende situasjoner låste du døra di hjemme i dag? Skaper trøbbel når situasjonen er annerledes enn det vi er vant til og forventer Habituation Gjentatt eksponering av like persepsjoner reduserer vår perseptuelle sensitivitet ovenfor dem Foregår på et nevronalt nivå, dvs. på et lavt nivå i nervesystemet vårt Eksempel: «er du sikker på at du vil slette?»-bokser, høre den samme talen for andre gang INF1500 Introduksjon til design, bruk, interaksjon Designprinsipper 8 11.10.16
Definisjoner: - Attentional blink Perseptuell påvirkning: fortid (2) Attentional blink Enda et lavnivå-eksempel på hvordan fortiden påvirker persepsjon Umiddelbart etter at vi hører eller ser noe (0.15 0.45 sek) er vi blinde/døve for annen stimuli (selv om ørene og øynene er operative) Hjernen jobber med å knytte persepsjonen mot tidligere erfaringer og er derfor «opptatt» Eksempel: to venner av deg sitter etter hverandre på bussen som farer raskt forbi, men du registrerer bare den første personen (bildet av person nr. 2 oppfattes i det øyeblikket hjernen er «opptatt») INF1500 Introduksjon til design, bruk, interaksjon Designprinsipper 9 11.10.16
Perseptuell påvirkning: nåtid (1) INF1500 Introduksjon til design, bruk, interaksjon Designprinsipper 10 11.10.16
Perseptuell påvirkning: nåtid (2) INF1500 Introduksjon til design, bruk, interaksjon Designprinsipper 11 11.10.16
Perseptuell påvirkning: nåtid (3) McGurk-effekten Når flere sanser er involvert i persepsjon samtidig får vi en multimodal persepsjon Et eksempel på at sanser ikke har vokst uavhengig av hverandre, men for å utfylle hverandre Vanskelig (umulig?) å påvirke hvordan hjernen oppfatter dette Eksempel: video av McGurk-effekten Buktaling Når en buktaler snakker så gjør hun det uten å bruke munnen Vi leter etter nærmeste munn i bevegelse og lar oss overbevise om at den lager lyden INF1500 Introduksjon til design, bruk, interaksjon Designprinsipper 12 11.10.16
Perseptuell påvirkning: fremtid (1) Definisjoner: - Guiding - Filtrering Guiding: Våre målsetninger veileder vårt perseptuelle apparat, så vi velger det vi trenger fra verden rundt oss Filtrering: Våre målsetninger filtrerer våre oppfatninger: ting som ikke er relatert til våre mål blir ofte filtrert ut ubevisst, dvs. de blir aldri registrering i våre bevisste sinn Barn er i mindre grad drevet av målsetninger enn stimulus og er derfor ofte mer «distraherte» «Cocktail party»-effekten er et eksempel på filtrering: vi hører kun det vi vil høre Våre målsetninger påvirker hvor vi fokuserer sansene våre: f.eks. hvor vi ser på en nettside Vi kan «prime» persepsjonen vår til å være på utkikk etter en spesifikk gjenstand: f.eks. rød bil INF1500 Introduksjon til design, bruk, interaksjon Designprinsipper 13 11.10.16
Perseptuell påvirkning: fremtid (2) INF1500 Introduksjon til design, bruk, interaksjon Designprinsipper 14 11.10.16
Oppmerksomhet Vi har sett hvordan våre mål preger vårt fokus, men vår oppmerksomhet preges av mer Bevegelse, spesielt bevegelse i nærheten av oss eller mot oss Noen som plutselig hopper ut mot deg fra en busk En bil i motsatt kjøreretning som plutselig bytter fil Trusler Alt som signaliserer eller varsler fare mot oss eller noen vi bryr oss om. Ansikter Vi er fra fødsel vant til å merke ansikter mer enn andre objekter i vårt miljø. Sex og mat Selv når vi er godt gift og stappmette rettes vår oppmerksomhet mot dette. INF1500 Introduksjon til design, bruk, interaksjon Designprinsipper 15 11.10.16
Hvorfor ser trafikklys ut som de gjør? Hvorfor har trafikklys en egen posisjon for hver farge? Hvorfor bruker trafikklys rødt for stopp og grønt for klart? Hvorfor er det bilde av en mann som går i den grønne lampen og en mann som står stille i den rød lampen? Hvorfor piper det når vi trykker på knappen? Hvorfor er trafikklys like uansett hvor i verden vi befinner oss? Hvorfor lyser det rødt og gult samtidig, men aldri grønt og gult? INF1500 Introduksjon til design, bruk, interaksjon Designprinsipper 16 11.10.16
INF1500 Introduksjon til design, bruk, interaksjon Designprinsipper 17 11.10.16
Økende allmenngyldighet Prinsipper, retningslinjer og standarder Prinsipper Abstrakte designregler Retningslinjer Retningslinjer Råd om hvordan man kan oppnå prinsipper Standarder Konkrete regler (målbare) Økende autoritet Standarder Komplementerer modellering og evaluering Sammenfatter forståelse og best praksis Hjelper med å maksimere brukbarhet Definisjoner: - Prinsipper - Retningslinjer - Standarder INF1500 Introduksjon til design, bruk, interaksjon Designprinsipper 18 11.10.16
Definisjoner: - Designprinsipp Designprinsipper Norsk-engelsk Beskrivelse av hvordan vi bør utforme et design Gir oss en idé om hva som bør og ikke bør gjøres Hjelper med å se løsningen fra ulike perspektiver Bidrar til å øke brukervennlighet Derivert fra en kombinasjon av teori kunnskap, erfaring og sunn fornuft Seks prinsipper står i fokus i dette kurset: Visibility Feedback Constraints Consistency Affordance Mapping INF1500 Introduksjon til design, bruk, interaksjon Designprinsipper 19 11.10.16
Definisjoner: - Visibility Visibility kan jeg se det? If the users can't find it, the function isn't there. Bruker kan se status og alle mulige valg videre Bruker blir ikke overveldet eller distrahert av informasjon Bruker forstår bedre hvordan funksjoner fungerer desto mer synlige de er Bruker kan bli forvirret av usynlige og automatiserte funksjoner Eksempler: Lysbryter Knapper i heisen Sensorstyrt håndvask INF1500 Introduksjon til design, bruk, interaksjon Designprinsipper 20 11.10.16
Visibility kan jeg se det? http://img.diytrade.com/cdimg/573160/3915473/0/1183625152/automatic_faucet.jpg INF1500 Introduksjon til design, bruk, interaksjon Designprinsipper 21 11.10.16
Definisjoner: - Feedback Feedback hva gjør det nå? Bruker opplyses om hva som er blitt gjort og oppnådd hittil slik at han kan fortsette Bruker forstår at input hadde en effekt på systemet Bruker får umiddelbar og synkronisert tilbakemelding Bruker ser progresjon eller status hvis funksjoner er utilgjengelig eller begrenset Eksempler: Heisknapper piper (og lyser) Datamaskiner animerer timeglass mens den tenker Microsoft Word highlighter alle ord som er feilstavet Gjøres typisk med lyd, lys, animasjon, highlighting eller en kombinasjon av flere INF1500 Introduksjon til design, bruk, interaksjon Designprinsipper 22 11.10.16
Feedback hva gjør det nå? https://9f5168dd-a-62cb3a1a-s-sites.googlegroups.com/site/designstudies2011/design-principles-examples/visibility/picture%20011.jpg INF1500 Introduksjon til design, bruk, interaksjon Designprinsipper 23 11.10.16
Definisjoner: - Constraints Constraints hva kan jeg ikke gjøre? Bruker får valgmulighetene sine avgrenset Bruker hindres i å gjøre feil Bruker kan konsentrere seg om det som er (mest) relevant Eksempler: Fysisk: Saks, puslespill, USB-kabel Logisk: høyreklikk-meny, knapper som blir grå/deaktivert Kulturelt: rød trekant for varsel, scrollefelt til høyre INF1500 Introduksjon til design, bruk, interaksjon Designprinsipper 24 11.10.16
Constraints hva kan jeg ikke gjøre? http://2.bp.blogspot.com/_wk6yfu36juo/s9a_knr_tzi/aaaaaaaabsu/wmys8h6ybig/s1600/img_6586-742371.jpg INF1500 Introduksjon til design, bruk, interaksjon Designprinsipper 25 11.10.16
Definisjoner: - Consistency Consistency hvor har jeg sett det før? Bruker ser og anvender like operasjoner og elementer når like oppgaver skal løses Bruker forstår, anvender og lærer lettere dersom like konsepter representeres likt Bruker kan enkelt overføre gammel kunnskap til ny kontekst Eksempler: Estetisk: Biler (Mercedes Benz) Funksjonelt: Trafikklys Internt: Turskilt i Marka Eksternt: Menyknapper i Mac OS X INF1500 Introduksjon til design, bruk, interaksjon Designprinsipper 26 11.10.16
Consistency hvor har jeg sett det før? http://www.zeigen.com/shortcuts/content/save.gif INF1500 Introduksjon til design, bruk, interaksjon Designprinsipper 27 11.10.16
Definisjoner: - Affordance Affordance hvordan bruker jeg det? Bruker forstår hvordan noe fungerer ved hjelp av objektets attributter Bruker får indirekte hint om hvordan noe brukes Eksempler: Knapper kan trykkes og et volumhjul kan vris Ikoner kan klikkes Hull i en saks til fingre eller knagger for å henge opp noe INF1500 Introduksjon til design, bruk, interaksjon Designprinsipper 28 11.10.16
Affordance hvordan bruker jeg det? https://sites.google.com/site/designstudies2011/design-principles-examples INF1500 Introduksjon til design, bruk, interaksjon Designprinsipper 29 11.10.16
Definisjoner: - Mapping Mapping hvor er jeg og hvor kan jeg gå? Bruker forstår sammenhengen mellom en funksjon og effekten den har på noe/verden Bruker slipper å memorere hvilken effekt en funksjon har Bruker unngår unødvendig frustrasjon Eksempler: Komfyrens plassering av knapper og hjul Dokumentet scroller oppover når vi trykker på tastaturet INF1500 Introduksjon til design, bruk, interaksjon Designprinsipper 30 11.10.16
Mapping hvor er jeg og hvor kan jeg gå? http://www.usabilitypost.com/2010/11/17/the-design-of-everyday-things/ INF1500 Introduksjon til design, bruk, interaksjon Designprinsipper 31 11.10.16
Godt design kombinerer flere prinsipper https://sites.google.com/site/designstudies2011/design-principles-examples?offset=10 INF1500 Introduksjon til design, bruk, interaksjon Designprinsipper 32 11.10.16
Retningslinjer Donald Norman: 7 principles of design The Psychology Of Everyday Things Basic Books, 1998. ISBN 978-0465067091 Ben Shneiderman: 8 golen rules of usability design Designing the User Interface: Strategies for Effective Human-Computer Interaction, 5/E Addison-Wesley, 2009. ISBN 978-0321537355 Jakob Nielsen: 10 usability heuristics Ten Usability Heuristics useit.com, 2005. ISSN 1548-5552 INF1500 Introduksjon til design, bruk, interaksjon Designprinsipper 33 11.10.16
Donald Normans syv prinsipper: Seven principles for transforming difficult tasks into simple ones 1. Use both knowledge in the world and knowledge in the head 2. Simplify the structure of tasks 3. Make things visible 4. Get the mappings right 5. Exploit the power of constraints, both natural and artificial 6. Design for error 7. When all else fails, standardize INF1500 Introduksjon til design, bruk, interaksjon Designprinsipper 34 11.10.16
Ben Shneidermans åtte gylne regler: 1. Strive for consistency 2. Enable frequent users to use shortcuts 3. Offer error prevention and simple error handling 4. Design dialogs to yield closure 5. Offer error prevention and simple error handling 6. Permit easy reversal of actions 7. Support internal locus of control 8. Reduce short-term memory load INF1500 Introduksjon til design, bruk, interaksjon Designprinsipper 35 11.10.16
Jakob Nielsens ti heuristikker: 1. Visibility of system status 2. Match between system and the real world 3. User control and freedom 4. Consistency and standards 5. Error prevention 6. Recognition rather than recall 7. Flexibility and efficiency of use 8. Aesthetic and minimalist design 9. Help users recognize, diagnose, and recover from errors 10. Help and documentation INF1500 Introduksjon til design, bruk, interaksjon Designprinsipper 36 11.10.16
70 ting å tenke på: (B. A. Myers, 1999) 1) Things that look different should act different. 2) If it is not needed, it's not needed. 3) The information for the decision needs to be there when the decision is needed. 4) The user should control the system. The system shouldn't control the user. The user is the boss, and the system should show it. 5) The idea is to empower the user, not speed up the system. 6) Don't overload the user's buffers. 7) Keep it simple. 8) Things that look the same should act the same. 9) The user should be able to do what the user wants to do. 10) Every action should have a reaction. 11) Everything in its place, and a place for everything. 12) Let people shape the system to themselves, and paint it with their own personality. 13) Error messages should actually mean something to the user, and tell the user how to fix the problem. 14) The best journey is the one with the fewest steps. Shorten the distance between the user and their goal. 15) Everyone makes mistakes, so every mistake should be fixable. 16) The more you do something, the easier it should be to do. 17) Cute is not a good adjective for systems. 18) Keep it neat. Keep it organized. 19) Consistency, consistency, consistency. 20) The user should always know what is happening. 21) Minimize the need for a mighty memory. 22) Know they user, and YOU are not thy user. 23) If I made an error, at least let me finish my thought before I have to fix it. 24) Design for regular people and the real world. 25) Eliminate unnecessary decisions, and illuminate the rest. 26) You should always know how to find out what to do next. 27) If I made an error, let me know about it before I get into REAL trouble. 28) Even experts are novices at some point. Provide help. 29) Provide a way to bail out and start over. 30) Don't let people accidentally shoot themselves. 31) Color is information. 32) The user should be in a good mood when done. 33) The fault is not in thyself, but in thy system. 34) To know the system is to love it. 35) Deliver a model and stick to it. INF1500 Introduksjon til design, bruk, interaksjon Designprinsipper 37 11.10.16
70 ting å tenke på: (B. A. Myers, 1999) 36) Follow platform conventions. 37) Make it hard for people to make errors. 38) The system status (i.e., what's going on should always be visible. 39) Accommodate individual differences among users through automatic adaptation or user tailoring of the interface. 40) Make it easy for a beginner to become an expert. 41) No you can't just explain it in the manual. 42) Provide user documentation that is easy to search, focused on the user's task, lists concrete steps to be carried out, and is not too large. 43) The system should speak the users' language, following real-world conventions. 44) Instructions for use of a system should be visible or easily retrievable. 45) What does marketing think it wants? Ok, now how do we show them they're wrong? 46) What does management think it wants? Ok, now how do we show them they're wrong? 47) Allow users to tailor frequent actions. 48) Users don't know what they want, and users can't always say what they know. 49) Roll the videotape. 50) Common sense is an uncommon commodity. 51) Make objects, actions, and options visible. 52) Data drives good design. 53) Help users develop a conceptual representation of the structure of the system. 54) Minimize the amount of information a user must maintain in short-term memory. 55) It's a jungle. Be careful out there. 56) People should not have to remember information across a dialogue. 57) Make it impossible to make errors that will get the user into REAL trouble. 58) Dialogues should not contain information that is irrelevant or rarely needed. 59) Testing, testing, testing. 60) Keep the user mental workload within acceptable limits. 61) Minimize the amount of information recoding that is necessary. 62) Minimize the difference in dialogue both within and across interfaces. 63) An ounce of good design is worth a pound of technical support. 64) Provide the user with feedback and error-correction capabilities. 65) So how is this better than what the competition is doing? 66) Provide good error messages that are expressed in plain language, precisely indicate the probem, and constructively suggest a solution. 67) Whadya mean, they're not all computer scientists? 68) Support undo and redo. 69) Different words, situations, or actions should result in different things happening. 70) The best user interface is one the user doesn't notice. INF1500 Introduksjon til design, bruk, interaksjon Designprinsipper 38 11.10.16
Fem strukturelle prinsipper Hentet fra Jeff Johnsons «Designing with the mind in mind» (kapittel 2) Følger den tyske tradisjonen på studier om menneskelig syn og holisme «Gestalt principles of visual perception» Nærhet Likhet Kontinuitet Kompletthet Symmetri INF1500 Introduksjon til design, bruk, interaksjon Designprinsipper 39 11.10.16
Definisjoner: - Nærhet Nærhet (proximity) Den relative avstanden mellom objekter påvirker vår oppfatning av hvorvidt og hvordan objektene er organisert i undergrupper Objekter som er nære hverandre fremstår som gruppert Benyttes ofte for å vise kategorier, grupperinger, blokker uten å måtte bruke distinkte skilletegn INF1500 Introduksjon til design, bruk, interaksjon Designprinsipper 40 11.10.16
Definisjoner: - Likhet Likhet (Similarity) Gjenstanders likhet kan benyttes for å gi oss en idé om at enkelte objekter er adskilt fra resten Objekter som ligner på hverandre kan f.eks. fremstå som gruppert mens alt annet oppfattes som likeverdig Vi kan bruke farger, størrelser, former etc. for å adskille objekter fra hverandre INF1500 Introduksjon til design, bruk, interaksjon Designprinsipper 41 11.10.16
Definisjoner: - Kontinuitet Kontinuitet (Continuity) Vårt visuelle system har en tendens til å rette opp i tvetydighet eller fylle inn manglende data Vår visuelle persepsjon forsøker å oppfatte kontinuerlige former fremfor oppdelte bruddstykker Kan ofte få oss til å se ting annerledes enn de egentlig er fordi hjernen kobler sammen løse stykker INF1500 Introduksjon til design, bruk, interaksjon Designprinsipper 42 11.10.16
Definisjoner: - Kompletthet Kompletthet (Closure) (Tett knyttet opp mot prinsippet om kontinuitet) Vårt visuelle system forsøker å lukke åpne figurer slik at de kan oppfattes som hele objekter Muliggjøre bruken av "negative space", dvs. tolke blanke områder som objekter Kan ofte få oss til å se ting annerledes enn de egentlig er fordi hjernen vår fyller ut ufullstendige former INF1500 Introduksjon til design, bruk, interaksjon Designprinsipper 43 11.10.16
Definisjoner: - Symmetri Symmetri Vi forsøker å tolke komplekse elementer på en måte som reduserer kompleksiteten Elementer som har rom for å tolkes på ulike måter blir organiseres og tolkes av synes vårt på den måten som gir enklest og mest symmetriske komponenter Muliggjør 3D-illusjoner i flate 2D-tegninger INF1500 Introduksjon til design, bruk, interaksjon Designprinsipper 44 11.10.16
Fire strategier for enkelthet Basert på fire strategier fra Giles Colbornes bok «Simple and Usable» Fokuserer på enkle og brukervennlige løsninger Bruker fjernkontrollen for en DVD-spiller som et konkret eksempel De fire prinsippene: Fjern Organiser Skjul Forflytt INF1500 Introduksjon til design, bruk, interaksjon Designprinsipper 45 11.10.16
Dette er utgangspunktet On/Off Quick OSD (On-screen display menu) FL Select (Change the display on DVD player) Open/Close (Eject DVD) Advanced Disc Review (Review playlist) AV Enhancer (Adjust audio and video) Repeat (Repeat play) Multi Re-Master (Improve audio quality) Numeric Keypad Depth Enhancer (Reduce picture noise ) Manual Skip (Skip 30 seconds forward) Quick Replay (Skip back a few seconds) Cancel Skip Forward Skip Back Slow Forward Slow Back Stop Pause Play Direct Navigator/Top Menu (Main menu) Play List/Menu (Show a disk menu or play list) Functions (Change on-screen menu) Return (Return to previous menu) Up Arrow Down Arrow Left Arrow Right Arrow Enter Subtitle Audio (Change soundtracks) Angle/Page (Change angle/advance still pictures Setup (Quick setup menu) Play Mode (All/group/random play) Play Speed (Change play speed) Zoom Group (Selects groups of items to play) INF1500 Introduksjon til design, bruk, interaksjon Designprinsipper 46 11.10.16
Fjern Denne strategien handler om å fjerne distraksjoner og fokusere på det essensielle Fokus på hva som er verdifullt for brukeren Konsentrere seg om det som er en brukers hovedopplevelse Levere løsninger som eliminerer frustrasjon og angst Disponere ressurser slik at løsningen leverer verdi fremfor kjedelige tjenester, irrelevant tekst og bestikkelser Bygge løsningen slik at den imøtekommer brukerens mål Fjerne elementer som distraherer og belaster brukeren: feilmeldinger, unødvendige valg, visuelt rot etc. Fjern alle unødvendige knapper slik at vi kun sitter igjen med det essensielle. INF1500 Introduksjon til design, bruk, interaksjon Designprinsipper 47 11.10.16
Organiser Denne strategien handler om å organisere frem et enklere grensesnitt Ta utgangspunkt i «chunking» Organiser elementer i håndterbare blokker I stedet for 50 menyvalg, bruk heller 5 menyer med 10 undervalg Husk Miller s law om at vi kun kan holde 7 ± 2 objekter i korttidshukommelsen Kartlegg brukers oppførsel og organiser med utgangspunkt i deres handlingsmønster Alfabetisk sortering er ikke nødvendigvis en god løsning Organiser knappene i grupper som gir mer mening for brukeren. Ta utgangspunkt i tid og sted - en tidslinje hjelper med å forstå bruk Gode kategorier har «harde kanter», dvs. ingen duplikater Bruk rutenett, størrelser, farger, plasseringer, fargekoder etc. til å underbygge organiseringen INF1500 Introduksjon til design, bruk, interaksjon Designprinsipper 48 11.10.16
Skjul Denne strategien handler om å skjule elementer (midlertidig eller permanent) for brukeren Identifiser hvilke elementer som brukes ofte og mindre ofte, og bruk det som utgangspunkt Unngå tilpasningsvennlige systemer Et godt grensesnitt behøver ikke å tilpasses En løsning som tillater tilpasning antar at brukeren klarer å lage gode og effektive grensesnitt på egenhånd Gradvis avsløring lar brukeren fokusere på det essensielle og utvide om nødvendig Bruk ledetråder og hint (mouseover, alt-tekst, ikoner) til å antyde hva som er skjult Å skjule noe fungerer bare så lenge en bruker ikke behøver å lete etter det Skjul de minst brukte knappene bak en luke så de ikke forstyrrer brukeren. "If the user can't find it, it doesn't exist". INF1500 Introduksjon til design, bruk, interaksjon Designprinsipper 49 11.10.16
Forflytt Denne strategien handler om å forflytte roller over på andre enheter Før vi flytter over noe av «ansvaret» på andre enheter må vi huske at enheten fortsatt må gjøre det den signaliserer at den skal gjøre Bruk den mest egnede enheten til å utføre en oppgave Eksempel med løpeprogrammer Se igjen eksempel med begrensninger med mobile enheter (lysark XX) Forflytt det mest individuelle over til brukerens hode Identifiser hva brukere gjør bedre enn maskiner og vica-versa Forsterk en brukeropplevelse ved å la datamaskinen ta over det "frustrerende" Lag en enkel fjernkontroll med få elementer og forflytt resten av styringen over til en on-screen meny på TVen. La brukeren dirigere og la maskinen guide La bruker oppføre seg naturlig, men hjelp med å strukturere data Design løsninger for «åpne opplevelser» - eksempel med kniv og piano INF1500 Introduksjon til design, bruk, interaksjon Designprinsipper 50 11.10.16
Oppsummering: Persepsjon er ikke en refleksjon av virkeligheten, men vår oppfatning av den Vår persepsjon påvirkes av fortid, nåtid og fremtid Designprinsipper hjelper oss med utformingen av et system Ulike designprinsipper og strategier tar for seg ulike aspekter ved brukeropplevelsen Det finnes populære retningslinjer som også kan brukes for veiledning INF1500 Introduksjon til design, bruk, interaksjon Designprinsipper 51 11.10.16
Obligatorisk oppgave 2 Formålet er å gi studentene trening i prototyping Fristen er 23. oktober innen kl. 23.59 Devilry åpnes for innlevering av oblig 2 i løpet av uken Hva skal gjøres? Hva skal leveres? Før prototypen Om prototypen Tips og huskeliste INF1500 Introduksjon til design, bruk, interaksjon Designprinsipper 52 11.10.16
Før prototypen Formålet med prototypen hvilken problemstilling skal løses? I forhold til målsetning bør denne problemstillingen løse målsetningen din Persona hvem er bruker (holdning, bakgrunn, bruksfrekvens, erfaring etc.)? I forhold til målsetningen bør personen reflektere en påtenkt bruker Behov og krav hvilke behov hos brukeren stiller krav til systemet? (oblig 1) I forhold til målsetningen bør kravene gjenspeile behovene Scenario hvilken oppgave skal utføres og i hvilken setting? I forhold til målsetningen bør scenarioet fortelle om en mulig løsning (Oppgaveanalyse) hvilke oppgaver fokuseres på? INF1500 Introduksjon til design, bruk, interaksjon Designprinsipper 53 11.10.16
Om prototypen Konseptuell modell beskrivelse av det foreslåtte systemet Funksjoner, funksjoners relasjon, presentasjon av informasjon Metodikk valg av utviklingsmodell, oppløsning og kompromisser Low eller high fidelity? Horisontal eller vertikal prototype? Utforming beskrivelse av prototypens interaksjon og grensesnitt Interaksjonstype? Grensesnittype? Grensesnittmetaforer? Designprinsipper beskrivelse av de viktigste prinsippene Hvorfor var de valgte prinsippene viktig? Hvordan har de blitt brukt i utformingen av prototypen? Alle valg må begrunnes! INF1500 Introduksjon til design, bruk, interaksjon Designprinsipper 54 11.10.16
Tips Dersom utgangspunktet fra obligatorisk oppgave 1 er dårlig, bruk fantasien Sørg for at du har brukers behov i fokus hele veien Bruk teori til å begrunne og utforme designvalg hele veien Lag gjerne prototyper av andre ting enn papir (kan leveres som bilde, video etc.) Spør din gruppelærer dersom du er usikker på noe Orakel? Hør med din gruppelærer! INF1500 Introduksjon til design, bruk, interaksjon Designprinsipper 55 11.10.16
Husk! Ikke skriv og forklar oppå selve prototypen deres, men heller før eller etter All tekst skal leveres som ett PDF-dokument (alt annet må omleveres) Evt. vedlegg/lenker/filmer kan legges ved i Devilry eller lenkes til i besvarelsen Inkluder navn og brukernavn i dokumentet Få med sidetall, overskrifter, referanser, innholdsfortegnelse INF1500 Introduksjon til design, bruk, interaksjon Designprinsipper 56 11.10.16