Designprinsipper TDT4180, vår 2017

Transkript

1 Designprinsipper TDT4180, vår 2017 Yngve Dahl IDI, NTNU

2 Flere typer designkunnskap Konvensjoner En radio bu:on brukes når et bruker kun kan velge e: av flere alterna?ver. Swipe brukes for å scrolle på en smar:elefon. Designprinsipper/guidelines Basert på erfaring, kunnskap og sunn fornuj. Kan være vanskelig og operasjonalisere. Teorier F.eks konseptuelle og mentale modeller

3 Relevans i hverdagen

4 Hvorfor designprinsipper? Når vi har funnet en god regel, ønsker vi at andre skal bruke den. Generaliserbarhet Relevant for: Navigering Organisering av skjerm Lede oppmerksomheten Forenkle datainnput

5 Relevans for brukskvalitet Brukskvalitet (usability) er: The extent to which a product can be used by specified users to achieve specified goals with effec9veness, efficiency and sa9sfac9on in a specified context of use. (ISO ) Anvendbarhet, Effek?vitet og Tilfredss?llelse for bestemte brukere med bestemte mål i bestemte omgivelser Designprinsipper fungerer som sjekklister i designprosessen. Kan redusere resurser (kostnad,?d) brukt i utvikling av nye designløsninger. Redusere antall designiterasjoner.

6 Relevans for brukskvalitet Er det nødvendig teste bruksvaliteten?l en designløsning dersom jeg følger designretningslinjene? JA! Retningslinjer er kun generelle heuris?kker. Fanger ikke opp spesifikke aspekter ved brukskonteksten. Ikke nødvendigvis le: å operasjonalisere.

7 Sjekklister for brukskvalitet Don Normans designprinsipper fra Design of Everyday Things Læreboka, kap Jacob Nielsens 10 brukbarhets-heuristikker Shneidermans 8 golden rules Bruce Tognazzinis 19 First Principles De 7 prinsippene for Universell Design WCAG 2.0-rettningslinjer

8 Visibility Affordance Constraints Feedback Mapping Consistency Don Normans prinsipper fra Design of Everyday Things

9 Visibility Desto mer synlig funksjonaliteten er, desto mer sannsynlig er det at brukerne forstår hva de kan gjøre. Gjør det le:ere for brukeren å overse:e mål?l aksjoner. Gjør det le:ere for brukeren å se?lstand

10 Visibility Funksjoner som er ute av syne (f.eks. i menyer, tabs, views) er vanskeligere å finne og skjønne hvordan de skal brukes. Eksempel: Automa?sk vannkran Hvordan slår jeg på vannet? Hvor skal jeg pu:e hendene? Synlige kontrollelementer er ersta:et med ak?ve soner.

11 Affordance Referer?l hvilken handling en gjenstand signaliserer. Ting inviterer?l visse handlinger. Dør håndtaket sier: Trykk meg ned Lego-klossene sier: Se: oss sammen Stolen sier: Si: på meg Brusflasken sier: Drikk av meg Relasjon mellom objekt og aktørs fysiske egenskaper

12 Affordance Begrepet har sin opprinnelse i psykologi (James Gibson, 1977) Mulige aksjoner en omgivelse?lbyr en aktør. Raskt adoptert av interaskjsonsdesignere Hensikt: Gjøre det åpenbart for bruker hvordan et produkt kan brukes.

13 Affordance Real affordance (hva kan en aktør fak?sk gjøre) Fysiske gjenstander kan gripes OJe åpenbart hva vi kan gjøre med dem. Bruk krever ikke læring. Perceived affordance (hva oppfa:er en aktør at han kan gjøre) Grafiske grensesni: har ikke real affordance de er virtuelle. I GUI design er det hva brukeren oppfa:er av mulige aksjoner som er vik?g. Er de:e en knapp? Kan jeg dra de:e elementet?

14 Eksempler på god affordance

15 Eksempler på god affordance

16 Eksempler på god affordance

17 False affordance (feller) Ikke sammenheng mellom handlingene objektet inviterer?l og fak?sk funksjon. Dører som bare er dekor. Håndtak som signaliserer trekk på en dør som må skyves.

18 False affordance Ikke sammenheng mellom handlingene objektet inviterer?l og fak?sk funksjon. Labels som ser ut som knapper Et ak?vt menyinnslag ( Velg meg ) som ikke reagerer

19 False, hidden, and percep?ble affordance

20 Constraints Signaliserer begrensninger i forhold?l handlinger (hva som ikke lar seg gjøre med et produkt). Lego-klosser kan bare se:es sammen på visse måter. Knapper som er grået ut og ikke kan trykkes på. Dato-felt som bare?llater tall og punktum.

21 Constraints Affordance be?nges av ulike typer constraints: Det fysiske: Kroppen og gjenstandens anatomi (stolen, brusflasken ) Det kulturelle: Konvensjoner som læres. Rødt betyr stopp eller fare Å snakke i mobilen på forelesning. GUI-knapper som er grået ut. Det logiske Resonering F.eks. Kontrollelementers plassering og hva de styrer eller styres av. Knapper på bildøra brukes for å styre?ng på døra (dørlås, vindu, etc.)

22 Affordance + Contraints

23 Affordance + Contraints Eksempel: Trin-basert oppse: av mail

24 Feedback (?lbakemelding) Informasjon?l brukeren om aksjoner som har bli: ujørt hvilken?lstand systemet har. Feedback fullfører affordance, men ersta:er ikke. Affordance gir informasjon om handlinger som kan gjøres med en gjenstand. Feedback gir informasjon om at handlingen er ujørt. Det ser ut som en knapp og det oppfører seg som en knapp.

25 Feedback Gyldige handlinger skal allcd gi feedback. Når du trykker en knapp, forandres rammen Når du du knepper en jakke, sier det knepp Når du svinger ra:et, kjenner du motstand Når blinklyset slås på, vises det på dashbordet. Eksempel på det motsa:e: Prosesser uten?lstandsindikator (progressbar)

26 Feedback Ulike typer feedback: Visuell: Musepeker, progress-bar, knapp som trykkes ned. Audi?v: Knappe-knepp, feil-beep, varsel ved mo:a: SMS eller e-post. Tak?l: Varierende motstand, viberasjon. Kombinasjon av visuell, audi?v og tak?l feedback.

27 Mapping (overføring) Sammenhengen mellom kontrollelementer (layout og interaksjon) og deres effekt i verden. Volumkontroll med knapper over hverandre: Den øverste knappen skrur volumet opp; den nederste knappen skrur volumet ned. Volumkontroll med vri-knapp: Med klokka à høyere volum Mot klokka ß mindre volum Bilra: Drei mot venstreà bilen svinger mot venstre. Drei mot høyreß bilen svinger mot høyre.

28 Mapping Natural mapping Layout på kontroll?lsvarer layout på apparat Sammenheng mellom interaksjon og effekt Eksempler på det motsa:e: Den nederste knappen øker volumet Vri-knapp hvor det å skru mot venstre øker volumet. Stekeovn: 2x2 plater og knappesekvens.

29 Poor mapping V.F. V.B. H.B. H.F.

30 Be:er mapping V.F. V.B. H.B. H.F.

31 Natural mapping

32 Eksempel på dårlig mapping i GUI

33 Consistency Elementer som ser like ut bør ha samme funksjon. Oppførsel bør være konsistent mht en bestemt oppgave. Eksempel: Vi velger objekter i et GUI ved å trykke på venstre museknapp. Hjelper brukeren beny:e seg av?dligere erfaringer med lignende produkter. Enklere å lære hvordan produktet brukes. Konsitens mht konvensjoner OS X, Windows, IOS, Android Kontrollelementer Inkonsistens skaper forvirring Bruker må huske unntak

34 Don Normans designprinsipper Visibility Kan jeg se det? Affordance Hvordan kan jeg bruke det? Constraints Hvorfor kan jeg ikke gjøre slik? Feedback Hva skjer nå? Mapping Hva fører 9l hva? Er sammenhengen mellom kontroll og effekt naturlig? Consistency Har jeg ikke seh dehe før?

35 Jacob Nielsen s 10 brukbarhets-heuristikker Visibility of system status. Match between system and the real world. User control and freedom. Consistency and standards. Error preven?on. Recogni?on rather than recall. Flexibility and efficiency of use. Aesthe?c and minimalist design. Help users recognize, diagnose, and recover from errors. Help and documenta?on.

36 1. Visibility of system status The system should always keep users informed about what is going on, through appropriate feedback within reasonable time. Systemet skal alltid vise brukeren hva som foregår i maskinen, gjennom relevant tilbakemelding innen rimelig tid.

37 2. Match between system and the real world The system should speak the users' language, with words, phrases and concepts familiar to the user, rather than system-oriented terms. Follow real-world conventions, making information appear in a natural and logical order. Snakk brukerens språk! Bruk begreper, ord og framstillingsmåte (metaforer) som brukeren forstår.

38 Eksempel: itunes Bibliotek med forskjellig medieinnhold (musikk, filmer, show, lydbøker etc.) BuCkk (itunes store) for kjøpe ny: innhold som kan legges i biblioteket.

39 Eksempel: MSpaint - penn, pensel,viskelær

40 3. User control and freedom Users often choose system functions by mistake and will need a clearly marked "emergency exit" to leave the unwanted state without having to go through an extended dialogue. Support undo and redo. La brukeren ha kontroll. Implementer angre-mulighet på alle nivåer.

41 4. Consistency and standards Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform conventions. Konsistens i grensesnittet Følg retningslinjene for den plattformen du bruker (Windows, OS X, Android, IOS, ). Style guides (f.eks. ios Human Interface Guidelines, UserExperience/Conceptual/MobileHIG/)

42 Delete/Clear New/Create Example

43 5. Error prevention Even better than good error messages is a careful design which prevents a problem from occurring in the first place. Lag systemet slik at minst mulig feil er mulig. Stikkord: Fleksibilitet EndNote: Forfattere kan skrives skrives inn med fornavn eller etternavn først.

44 6. Recognition rather than recall Make objects, actions, and options visible. The user should not have to remember information from one part of the dialogue to another. Instructions for use of the system should be visible or easily retrievable whenever appropriate. Kunnskap i verden, ikke i hodet!

45 Recogni?on Forhåndsvisning av font

46 Recognition

47 Recall Kommandoer, hurtigtaster Menyer: Huske hvilken meny man skal velge, og hvilke valg man skal gjøre videre Tre-nivås meny

48 Recall: Endre referanseformat Preferences i Edit-menyen? Nei. Hvordan huske hvordan man endrer på setting? - Logisk oppbygning av menyene - Brukertesting

49 Recall vs recogni?on Husk og tast (kommando-linje) vs. se og velg

50 7. Flexibility and efficiency of use Accelerators unseen by the novice user may often speed up the interaction for the expert user such that the system can cater to both inexperienced and experienced users. Allow users to tailor frequent actions. Gi avanserte brukere shortcuts og lignende. Eksempler: cmd + c (kopier i OS X) ctrl + c (kopier i Windows) Snarveier i f.eks. bilderedigeringsprogram

51 8. Aesthetic and minimalist design Dialogues should not contain information which is irrelevant or rarely needed. Every extra unit of information in a dialogue competes with the relevant units of information and diminishes their relative visibility. Alt som ikke tjener en hensikt skal vekk!

52 Presentere kun data som er nødvendig

53 9. Error recovery Help users recognize, diagnose, and recover from errors. Error messages should be expressed in plain language (no codes), precisely indicate the problem, and constructively suggest a solution. Hjelp brukeren unngå feil. Hjelp brukeren håndtere feil.

54 Error recovery Tilbakemeldinger som ikke hjelper brukeren:

55 10. Help and documentation Even though it is better if the system can be used without documentation, it may be necessary to provide help and documentation. Any such information should be easy to search, focused on the user's task, list concrete steps to be carried out, and not be too large. Lag et godt hjelpesystem. Hurtigreferanse Brukermanual Tool tips

56 Universell utforming TDT4180, vår 2017 Yngve Dahl IDI, NTNU

57 Universell ujorming FN-konvensjon om reqghetene?l personer med nedsa: funksjonsevne: «Med universell ujorming menes ujorming av produkter, omgivelser, programmer og tjenester på en slik måte at de kan brukes av alle mennesker, i så stor utstrekning som mulig, uten behov for 9lpassing og en spesiell ujorming.» Muliggjøre bruk av IKT systemer, omgivelser, produkter og tjenester for personer med ulik funksjonsevne. Design for all Inkluderingsprinsippet E?sk basis Danner basisen for utarbeidelsen av WCAG 2.0-anbefalingene (?lgjengelighet for webinnhold)

58 Universell ujorming Bygger på en forståelse av funksjonshemming som relasjonell. Funksjonshemming oppstår når det ikke er samsvar mellom en persons funksjonesevner og kravene omgivelsene s?ller. Funksjonshemning er skapt av omgivelsene (f.eks dårlig design) Funksjonshemning er ikke en del av personen

59 Spesialløsninger vs. Universal ujorming

60 Menneskelig mangfold Universell ujorming tar utgangspunkt i menneskelig mangfold: Forskjellige fysiske evner, kogni?ve evner og sanseevner Barn, voksne, eldre Frisk, skadet, syk Mann, kvinne Ulike kropper Ved å designe for menneskelig mangfold kan vi lage produkter som er le:ere for alle å bruke.

61 Syv prinsipper for universell ujorming 1. Like muligheter for bruk 2. Fleksibel i bruk 3. Enkel og intui?v bruk 4. Forståelig informasjon 5. Toleranse for feil 6. Lav fysisk anstrengelse 7. Størrelse og plass for?lgang og bruk The Center of Universal Design, Design/The-7-Principles/#p7

62 1. Like muligheter for bruk Ujormingen skal være anvendbar og?lgjengelig for personer med ulike ferdigheter. Gi ulike brukergrupper samme muligheter?l bruk. Like løsninger når det er mulig, Likeverdige løsninger hvis like ikke er mulig. Unngå segregering og s?gma?sering av brukere. Muligheter for privatliv, sikkerhet og trygghet skal være?lgjengelig for alle. Gjøre ujormingen?ltalende for alle brukere.

63 1. Like muligheter for bruk Automatiske skyvedører

64 2. Fleksibel i bruk Ujormingen skal tjene et vidt spekter av individuelle preferanser og ferdigheter. Muliggjøre ulike valg av metoder for bruk. Skal tjene både høyre- og venstrehåndsbruk. Le:e brukerens nøyak?ghet og presisjon. Muliggjøre ferdigheter som samsvarer med brukerens tempo.

65 2. Fleksibilitet i bruk Sakser designet for venstre- og høyre hendte brukere. Minibank med visuell, taktil og auditiv feedback, følbar kortåpning og støtte for håndleddet

66 3. Enkel og intui?v i bruk Ujormingen skal være le: å forstå uten hensyn?l brukerens erfaring, kunnskap, språkferdigheter eller konsentrasjonsnivå. Eliminere unødvendig kompleksitet. Være i overensstemmelse med brukerens forventninger og intuisjon. Tjene et vidt spekter av lese-, skrive- og språkferdigheter. Arrangere informasjonen konsist i forhold?l vik?ghet. Muliggjøre effek?ve og raske?lbakemeldinger i løpet av og e:er at oppgaven er ujørt.

67 3. Enkel og intui?v i bruk Brukermanualer med bilder i stedet for tekst. Pasientalarm med trykk-knapp

68 4. Forståelig informasjon Ujormingen skal kommunisere nødvendig informasjon?l brukeren på en effek?v måte, uavhengig av forhold kny:et?l omgivelsene eller brukerens sensoriske ferdigheter. Bruke forskjellige måter (bilde, verbal, tak?l) for en bred presentasjon av essensiell informasjon. Muliggjøre adekvate kontraster mellom essensiell informasjon og deres omgivelser. Maksimere "lesbarheten" av essensiell informasjon. Muliggjøre kompa?bilitet med forskjellige typer teknikker og innretninger,?l bruk for mennesker med sensoriske begrensninger.

69 4. Forståelig informasjon Flyplass: Bred presentasjon av essensiell informasjon: - Auditiv informasjon (over høytalerannlegg) - Flere språk - Informasjonstavler.

70 5. Toleranse for feil Ujormingen skal minimalisere farer og skader som kan gi uguns?ge konsekvenser, eller minimaliserer u?lsiktede handlinger. Arrangere elementene på en slik måte at en minimaliserer farer og feil; mest brukte elementer, mest?lgjengelige; farlige elementer elimineres, isoleres eller skjermes. Sørge for advarsel om farer og feil. Sørge for anordninger for feilsikkerhet. Ikke oppmuntre?l u?lsiktede handlinger på områder som krever årvåkenhet.

71 5. Toleranse for feil Trådløse betalingsterminaler: Kortet må ikke settes inn riktig vei for å kunne avleses. Undo

72 6: Lav fysisk anstrengelse Ujormingen skal kunne brukes effek?vt og bekvemt med et minimum av besvær. Tillate brukeren å oppre:holde en nøytral kroppss?lling. Bruke rimelig betjeningsstyrke. Minimalisere gjentakende handlinger. Minimalisere vedvarende fysisk kraj.

73 6. Lav fysisk anstrengelse Berøringssensitive lamper erstatter på/av-bryter

74 7. Størrelse og plass for?lgang og bruk Hensiktsmessig størrelse og plass skal muliggjøre?lgang, rekkevidde, betjening og bruk, uavhengig av brukerens kroppsstørrelse, kroppss?lling eller mobilitet. Muliggjøre en klar synslinje?l vik?ge elementer for både si:ende og stående brukere. At det er bekvem rekkevidde?l alle komponenter for si:ende og stående brukere. Muliggjøre variasjoner i hånd- og gripestørrelse. Tilre:elegge nok rom for bruk av hjelpemidler og personlig assistanse.

75 7. Størrelse og plass for?lgang og bruk Eksempel: - Klar synslinje for sittende og stående - Fysisk plass som muliggjør tilgang og bruk