Oblig Devilry Tilbakemelding Prosess
INF1500 - Introduksjon til design, bruk, interaksjon Designprinsipper 6. oktober 2015 Institutt for Informatikk, Universitetet i Oslo [email protected] INF1500 – Introduksjon til design, bruk, interaksjon Designprinsipper 1 | 06.10.15 Gruppe 5 legges ned! • Gruppe 5 med Kristine Støeng legges ned fra og med uke 8 (kalenderuke 41) • De som har fulgt denne gruppen kan møte på en valgfri annen gruppetime fremover • Nærmeste gruppetime blir gruppe 3 (torsdag 12-14) • Gruppelæreren fortsetter som en del av undervisningsteamet • Gruppelæreren fortsetter å rette obliger for sin gruppe i Devilry INF1500 – Introduksjon til design, bruk, interaksjon Designprinsipper 2 | 06.10.15 Dagens tema “It is easy to make things hard. It is hard to make things easy.” Åpenbart Krever tenking Klikk! ”Er det en knapp?” Klikk! ”Er det dette jeg vil ha?” Klikk! ”Eller skal jeg lete videre?” (J. Putorti, 2012) INF1500 – Introduksjon til design, bruk, interaksjon Designprinsipper 3 | 06.10.15 Oversikt over dagens forelesning • Persepsjon og oppmerksomhet • Designprinsipper og strategier • • • • Seks prinsipper i fokus (Andre prinsipper) Strukturelle prinsipper Fire strategier • Midtveisevaluering • 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 4 | 06.10.15 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 5 | 06.10.15 Persepsjon Definisjoner: - 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 6 | 06.10.15 INF1500 – Introduksjon til design, bruk, interaksjon Designprinsipper 7 | 06.10.15 INF1500 – Introduksjon til design, bruk, interaksjon Designprinsipper 8 | 06.10.15 Perseptuell påvirkning: fortid (1) • • Definisjoner: - Habituation 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 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 9 | 06.10.15 Perseptuell påvirkning: fortid (2) • Definisjoner: - Attentional blink 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 10 | 06.10.15 Perseptuell påvirkning: nåtid (1) INF1500 – Introduksjon til design, bruk, interaksjon Designprinsipper 11 | 06.10.15 Perseptuell påvirkning: nåtid (2) INF1500 – Introduksjon til design, bruk, interaksjon Designprinsipper 12 | 06.10.15 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 13 | 06.10.15 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 14 | 06.10.15 Perseptuell påvirkning: fremtid (2) INF1500 – Introduksjon til design, bruk, interaksjon Designprinsipper 15 | 06.10.15 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 16 | 06.10.15 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 17 | 06.10.15 INF1500 – Introduksjon til design, bruk, interaksjon Designprinsipper 18 | 06.10.15 • Prinsipper • Retningslinjer • Abstrakte designregler Råd om hvordan man kan oppnå prinsipper Standarder Økende allmenngyldighet Prinsipper, retningslinjer og standarder Retningslinjer Standarder Konkrete regler (målbare) Økende autoritet • Komplementerer modellering og evaluering • Sammenfatter forståelse og best praksis • Hjelper med å maksimere brukbarhet INF1500 – Introduksjon til design, bruk, interaksjon Designprinsipper Definisjoner: - Prinsipper - Retningslinjer - Standarder 19 | 06.10.15 Designprinsipper Definisjoner: - Designprinsipp • 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 20 | 06.10.15 Visibility – kan jeg se det? Definisjoner: - Visibility ” 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 21 | 06.10.15 Visibility – kan jeg se det? http://img.diytrade.com/cdimg/573160/3915473/0/1183625152/AUTOMATIC_FAUCET.jpg INF1500 – Introduksjon til design, bruk, interaksjon Designprinsipper 22 | 06.10.15 Feedback – hva gjør det nå? Definisjoner: - Feedback • 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 23 | 06.10.15 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 24 | 06.10.15 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 25 | 06.10.15 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 26 | 06.10.15 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 27 | 06.10.15 Consistency – hvor har jeg sett det før? http://www.zeigen.com/shortcuts/content/save.gif INF1500 – Introduksjon til design, bruk, interaksjon Designprinsipper 28 | 06.10.15 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 29 | 06.10.15 Affordance – hvordan bruker jeg det? https://sites.google.com/site/designstudies2011/design-principles-examples INF1500 – Introduksjon til design, bruk, interaksjon Designprinsipper 30 | 06.10.15 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 31 | 06.10.15 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 32 | 06.10.15 Godt design kombinerer flere prinsipper https://sites.google.com/site/designstudies2011/design-principles-examples?offset=10 INF1500 – Introduksjon til design, bruk, interaksjon Designprinsipper 33 | 06.10.15 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 34 | 06.10.15 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 35 | 06.10.15 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 36 | 06.10.15 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 37 | 06.10.15 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 38 | 06.10.15 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 39 | 06.10.15 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 40 | 06.10.15 Nærhet (proximity) Definisjoner: - Nærhet • 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 41 | 06.10.15 Likhet (Similarity) Definisjoner: - Likhet • 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 42 | 06.10.15 Kontinuitet (Continuity) Definisjoner: - Kontinuitet • 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 43 | 06.10.15 Kompletthet (Closure) Definisjoner: - Kompletthet • (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 44 | 06.10.15 Symmetri Definisjoner: - 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 45 | 06.10.15 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 46 | 06.10.15 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 47 | 06.10.15 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. INF1500 – Introduksjon til design, bruk, interaksjon Designprinsipper Fjern alle unødvendige knapper slik at vi kun sitter igjen med det essensielle. 48 | 06.10.15 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 • 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 Organiser knappene i grupper som gir mer mening for brukeren. 49 | 06.10.15 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 • "If the user can't find it, it doesn't exist". INF1500 – Introduksjon til design, bruk, interaksjon Designprinsipper Skjul de minst brukte knappene bak en luke så de ikke forstyrrer brukeren. 50 | 06.10.15 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" • 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 Lag en enkel fjernkontroll med få elementer og forflytt resten av styringen over til en on-screen meny på TVen. 51 | 06.10.15 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 52 | 06.10.15 Obligatorisk oppgave 2 • Formålet er å gi studentene trening i prototyping • Fristen er 18. oktober innen kl. 23.59 • Devilry er åpnet for innlevering av oblig 2 Hva skal gjøres? Hva skal leveres? Før prototypen Om prototypen Tips og huskeliste INF1500 – Introduksjon til design, bruk, interaksjon Designprinsipper 53 | 06.10.15 Før prototypen • Formålet med prototypen – hvilken problemstilling skal løses? • Persona – hvem er bruker (holdning, bakgrunn, bruksfrekvens, erfaring etc.)? • Behov og krav – hvilke behov hos brukeren stiller krav til systemet? (oblig 1) • Scenario – hvilken oppgave skal utføres og i hvilken setting? • (Oppgaveanalyse) – hvilke oppgaver fokuseres på? I forhold til målsetning bør denne problemstillingen løse målsetningen din I forhold til målsetningen bør personen reflektere en påtenkt bruker I forhold til målsetningen bør kravene gjenspeile behovene I forhold til målsetningen bør scenarioet fortelle om en mulig løsning INF1500 – Introduksjon til design, bruk, interaksjon Designprinsipper 54 | 06.10.15 Om prototypen • Konseptuell modell – beskrivelse av det foreslåtte systemet • Metodikk – valg av utviklingsmodell, oppløsning og kompromisser • • • Funksjoner, funksjoners relasjon, presentasjon av informasjon 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 55 | 06.10.15 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! • Fredagscafé Ta med alle spørsmål du måtte ha INF1500 – Introduksjon til design, bruk, interaksjon Designprinsipper 56 | 06.10.15 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 57 | 06.10.15
© Copyright 2024