Werkgroep 2 van 5 Vrijdag 15/02/ :30 16:50

Transcriptie

1 Minor UxD Psychology p. 42 UxD Theorie Module Psychologie Werkgroep 2 van 5 Vrijdag 15/02/ :30 16:50 Claudia van Tongeren 2

2 Minor UxD Psychology p. 43 Quiz time! Niks op tafel alle apparatuur/boeken uit/weg Maximaal 5 minuten Quiz 1

3 Minor UxD Psychology p. 44 Vooruitblik Vandaag > Lezen > Kleuren > Perifeer zicht > 5 Design Guidelines De week na het voorjaarsreces > Geheugen > Leren > Probleemoplossen > 13 Design Guidelines

4 Chapter 04 :: Reading is Unnatural Minor UxD Psychology p Lezen is onnatuurlijk Het menselijk brein heeft honderdduizenden jaren de neurale structuren ontwikkeld die nodig zijn om gesproken taal te ondersteunen Schrijven en lezen bestaat slechts enkele duizenden jaren en is pas sinds vier of vijf eeuwen gemeengoed - lang nadat het menselijk brein zich had ontwikkeld tot zijn moderne staat

5 Chapter 04 :: Reading is Unnatural Minor UxD Psychology p. 46 Leren lezen Lezen is een kunstmatige vaardigheid die we leren door middel van systematische instructie en oefening, zoals het spelen van een viool Leren lezen is het trainen van onze hersenen om patronen te herkennen, van laag naar hoog niveau > Basiskenmerken zoals lijnen en vormen > Deze kenmerken vormen patronen; letters, cijfers, symbolen > Letters, cijfers, symbolen vormen morfemen > Morfemen vormen woorden > Woorden vormen zinnen > Zinnen vormen paragrafen

6 Chapter 04 :: Reading is Unnatural Minor UxD Psychology p. 47 Functie- en contextgedreven lezen Lezen is het herkennen van kenmerken en patronen. Patroonherkenning/lezen gebeurt op twee manieren > een bottom-up, feature-driven proces > een top-down, context-gedreven proces

7 Chapter 04 :: Reading is Unnatural Minor UxD Psychology p. 48 Bottom-up, feature-driven, context-vrij lezen Lijnen, vormen, patronen > karakters, symbolen > morfemen > woorden > zinnen > paragrafen Met genoeg oefening wordt dit proces automatisch

8 Chapter 04 :: Reading is Unnatural Minor UxD Psychology p. 49 Top-down, context-gedreven lezen Werkt andersom: van hele zinnen en paragrafen > raden > terug naar woorden en karakters Context-driven reading is less likely to become fully automatic because most phrase-level and sentence-level patterns and contexts don t occur frequently enough to allow their recognition to become burned into neural firing patterns.

9 Chapter 04 :: Reading is Unnatural Minor UxD Psychology p. 50 Welk type lezen is beter? The most efficient way to read is via contextfree, bottom-up, feature-driven processes that are well learned to the point of being automatic Skilled readers may resort to context-based reading when feature-based reading is disrupted by poor presentation of information In less skilled readers, feature-based reading is not automatic; it is conscious and laborious. Therefore, much more of their reading is context based

10 Chapter 04 :: Reading is Unnatural Minor UxD Psychology p. 51 Design implicaties Geschoold (snel) lezen is meestal automatisch en vooral gebaseerd op functie, karakter en woordherkenning Hoe gemakkelijker de herkenning, hoe makkelijker en sneller het lezen Minder ervaren lezen daarentegen is vooral gebaseerd op contextuele aanwijzingen

11 Chapter 04 :: DG07 «Don t disrupt reading; support it!» Minor UxD Psychology p. 52 Design Guideline #07 Het lezen niet verstoren maar juist ondersteunen

12 Chapter 04 :: DG07 «Don t disrupt reading; support it!» Minor UxD Psychology p. 53 Gebruik beperkte, hoog consistente vocabulaires (klare taal of vereenvoudigde taal). Het lezen niet verstoren door het gebruik van moeilijke lettertypes (Bottom-up, context-vrij, automatische lezing is gebaseerd op de herkenning van letters en woorden op basis van hun visuele kenmerken. Daarom zal een lettertype met moeilijk te herkennen kenmerken en vormen moeilijk te lezen zijn. Het lezen niet verstoren door het gebruik van kleine lettertypen (soms gebruiken ontwerpers kleine letters omdat ze erg veel tekst hebben, maar als de beoogde gebruikers het toch niet kunnen lezen, zou het beter helemaal weggelaten kunnen worden)

13 Chapter 04 :: DG07 «Don t disrupt reading; support it!» Minor UxD Psychology p. 54 Het lezen niet verstoren door het gebruik van lawaaierige achtergronden Tenzij je het lezen expres moeilijk wilt maken voor bots, als bewijs dat de lezer een mens is (captcha) Het lezen niet verstoren door onnodige tekstherhalingen Het lezen niet verstoren door gecentreerde tekst

14 Chapter 04 :: DG08 «Minimize the need for reading» Minor UxD Psychology p. 55 Design Guideline #08 Beperk de noodzaak om te lezen

15 Chapter 04 :: DG08 «Minimize the need for reading» Minor UxD Psychology p. 56 Beperk de noodzaak om te lezen Te veel tekst in een user interface jaagt zwakke lezers weg (helaas een aanzienlijk percentage van de bevolking). Te veel tekst vervreemdt zelfs goede lezers: het verandert gebruik van een interactief systeem in een intimiderende hoeveelheid werk. Dus: > Minimaliseer de hoeveelheid proza tekst in een user interface > Gebruik bij instructies zo weinig mogelijk tekst, die toch de meeste gebruikers in staat stelt om zijn/haar doelen te bereiken. > In een productbeschrijving, geef een kort overzicht van het product en laat gebruikers meer detail opvragen als ze dat willen.

16 Chapter 04 :: DG08 «Minimize the need for reading» Minor UxD Psychology p. 57

17 Chapter 04 :: DG09 «Test text on real users» Minor UxD Psychology p. 58 Design Guideline #09 Test tekst op echte gebruikers

18 Chapter 04 :: DG09 «Test text on real users» Minor UxD Psychology p DG#09 :: Test ontwerpen op de beoogde gebruikers om zeker te weten dat iedereen alle essentiële tekst snel en moeiteloos kan lezen. En/of gebruik de leesniveau tool op Accessibility.nl 2

19 Chapter 05 :: Our Color Vision is Limited Minor UxD Psychology p Onze waarneming van kleuren is beperkt Waarneming is geoptimaliseerd voor edge contrast, niet de helderheid De mogelijkheid om kleuren onderscheiden hangt af van hoe kleuren worden weergegeven 1 op de 12 mensen is kleurenblind Externe factoren (beeldscherm, omgeving) beïnvloeden onze waarneming van kleuren

20 Chapter 05 :: Our Color Vision is Limited Minor UxD Psychology p. 61 Hoe werkt kleurenwaarneming (1) We hebben drie typen kegels (cones) met verschillende sensitiviteit/gevoeligheid. Onze hersenen doen iets met optellen en aftrekken en voilà we zien een heleboel kleuren!

21 Chapter 05 :: Our Color Vision is Limited Minor UxD Psychology p. 62 Hoe werkt kleurenwaarneming (2) Retina heeft rods & cones = staafjes & kegels > Rods gebruiken we nauwelijks, alleen in het donker > Cones, variërend in gevoeligheid Lage frequentie cones Medium frequentie cones Hoge frequentie cones Gevoeligheid v.d. 3 typen cones Artificiële receptoren

22 Chapter 05 :: Our Color Vision is Limited Minor UxD Psychology p. 63 Hoe combineren onze hersenen nu de signalen van de kegels zodat we een breed scala van kleuren zien? Neuronen in de visuele cortex aan de achterkant van onze hersenen leiden signalen af (subtract) die via de optische zenuwen van de midden-en lage frequentie kegels komen, waardoor een rood-groen verschil signaalkanaal wordt geproduceerd Andere neuronen in de visuele cortex deduceren de signalen van de hoge en lage frequentie kegels, waarbij een geel-blauw verschil signaalkanaal wordt geproduceerd Een derde groep van neuronen in de visuele cortex voegt de signalen, afkomstig van de low-en medium-frequentie kegels, tot een algemeen luminantie- of zwart-wit signaalkanaal Deze drie kanalen worden kleur-opponente kanalen genoemd

23 Chapter 05 :: Our Color Vision is Limited Minor UxD Psychology p. 64 Waarneming is geoptimaliseerd voor edge contrast, niet de helderheid

24 Chapter 05 :: Our Color Vision is Limited Minor UxD Psychology p. 65 Waarneming is geoptimaliseerd voor edge contrast, niet de helderheid (vervolg) Zie ook:

25 Chapter 05 :: Our Color Vision is Limited Minor UxD Psychology p. 66 De mogelijkheid om kleuren te onderscheiden hangt af van hoe kleuren worden gepresenteerd Bleke kleuren Kleine oppervlakte Grote afstand >> moeilijk te onderscheiden

26 Chapter 05 :: Our Color Vision is Limited Minor UxD Psychology p. 67

27 Chapter 05 :: Our Color Vision is Limited Minor UxD Psychology p. 68

28 Chapter 05 :: Our Color Vision is Limited Minor UxD Psychology p. 69 Kleurenblindheid One or more of the color subtraction channels don t function normally, making it difficult to distinguish certain pairs of colors Approximately 8% of men and slightly under 0.5% of women have a color perception deficit The most common type of colorblindness is red/green

29 Minor UxD Psychology p In Photoshop kun je ook een kleurenblindcheck doen

30 Chapter 05 :: Our Color Vision is Limited Minor UxD Psychology p. 71 Externe factoren beïnvloeden onze waarneming van kleuren Computer/device-schermen verschillen enorm Kijkhoek heeft invloed op kleuren Verlichting en direct zonlicht >> Keep in mind that you don t have full control of the color viewing experience of users. Colors that seem highly distinguishable in the development facility on the development team s computer displays and under normal office lighting conditions may not be as distinguishable in some of the environments where the software is used.

31 Chapter 05 :: DG#10 «Gebruik goede kleuren; zicht- en onderscheidbaar» Minor UxD Psychology p. 72 Design Guideline #10 Gebruik kleuren die voor iedereen goed zichtbaar en onderscheidbaar zijn

32 Chapter 05 :: DG#10a «Use distinctive colors» Minor UxD Psychology p. 73 Design Guideline #10a Gebruik onderscheidende kleuren

33 Chapter 05 :: DG#10a «Use distinctive colors» Minor UxD Psychology p. 74 > De kleuren die mensen het gemakkelijkst kunnen onderscheiden zijn die welke een sterk signaal (positief of negatief) op een van de drie kleurenwaarnemingkanalen en neutrale signalen op de twee andere kanalen veroorzaken. > Deze kleuren zijn rood, groen, geel, blauw, zwart en wit. Andere kleuren leiden tot signalen op meer dan één kleurkanaal, en dan kan ons visuele systeem ze minder snel en gemakkelijk onderscheiden van andere kleuren

34 Chapter 05 :: DG#10b «Distinguish colors by saturation and brightness and hue» Minor UxD Psychology p. 75 Design Guideline #10b Onderscheid kleuren door verzadiging, helderheid en tint

35 Chapter 05 :: DG#10c «Avoid color pairs that color-blind people cannot distinguish» Minor UxD Psychology p. 76 Design Guideline #10c Vermijd kleurcombinaties die kleurenblinden niet kunnen onderscheiden o.m. donkerrood-zwart, donkerrood-donkergroen, blauw-paars, lichtgroen-wit

36 Chapter 05 :: DG#10c «Avoid color pairs that color-blind people cannot distinguish» Minor UxD Psychology p. 77 If you are not color-blind, you can get an idea of which colors in an image will be hard to distinguish by converting the image to grayscale (or use Vischeck.com or Photoshop)

37 Chapter 05 :: DG#10d «Use color redundantly with other cues» Minor UxD Psychology p. 78 Design Guideline #10d Gebruik kleur in combinatie met andere signalen

38 Chapter 05 :: DG#10d «Use color redundantly with other cues» Minor UxD Psychology p. 79

39 Chapter 05 :: DG#10e «Separate strong opponent colors» Minor UxD Psychology p. 80 Design Guideline #10e Scheidt sterk opponente kleuren

40 Chapter 05 :: DG#10e «Separate strong opponent colors» Minor UxD Psychology p. 81 Placing opponent colors right next to or on top of each other causes a disturbing shimmering sensation, and so should be avoided.

41 Chapter 06 :: Our Peripheral Vision is Poor Minor UxD Psychology p Ons perifeer zicht is slecht Stationary items in muted colors presented in the periphery of people s visual field often will not be noticed Motion in the periphery is usually noticed

42 Chapter 06 :: Our Peripheral Vision is Poor Minor UxD Psychology p. 83 Resolutie van de fovea in vergelijking met die van de periferie Each eye has approximately six million retinal cone cells. They are packed much more tightly in the center of our visual field a small region called the fovea - than they are at the edges of the retina The fovea is only about 1% of the retina, but the brain s visual cortex devotes about 50% of its area to input from the fovea.

43 Chapter 06 :: Our Peripheral Vision is Poor Minor UxD Psychology p. 84 We have a much, much greater resolution in the center of our visual field than elsewhere

44 Chapter 06 :: Our Peripheral Vision is Poor Minor UxD Psychology p. 85 Blinde vlek

45 Chapter 06 :: Our Peripheral Vision is Poor Minor UxD Psychology p. 86 Waar is de visuele periferie dan goed voor? Our peripheral vision exists mainly to provide low-resolution cues to guide our eye movements so that our fovea visits all the interesting and crucial parts of our visual field Peripheral vision is good at detecting motion

46 Chapter 06 :: Our Peripheral Vision is Poor Minor UxD Psychology p. 87 (Fout)meldingen worden vaak niet opgemerkt omdat ze in de periferie zitten Everything on the screen that is not within 1 2 centimeters of the click location is in peripheral vision, where resolution is low If, after the click, an error message appears in the periphery, it should not be surprising that the person might not notice it

47 Chapter 06 :: DG11 «Make sure that error messages will be seen» Minor UxD Psychology p. 88 Design Guideline #11 Zorg ervoor dat (fout)meldingen worden gezien

48 Chapter 06 :: DG#11 «Zorg ervoor dat (fout)meldingen worden gezien» Minor UxD Psychology p. 89 Hoe? Zet ze waar gebruikers kijken Markeer de fout Gebruik een (fout)symbool Reserveer rood voor fouten Sterkere methoden (gebruik met mate om gewenning te voorkomen) Pop-ups Geluid Beweging/knipperen

49 Minor UxD Psychology p. 90 Opdrachten Opdracht 1 > Gebruik de leesniveau tool om een stuk tekst te checken Opdracht 2 > Gebruik vischeck.com om te controleren op leesbaarheid voor kleurenblinden en slechtzienden Opdracht 3 > Bespreek met je buren Een functionele UI die voor iedereen leesbaar is levert in op visuele aantrekkelijkheid Je kunt koffie halen e.d. Iedereen om terug in het lokaal

50 Nabespreking Leesniveautool en Kleurenchecker > Meest opzienbarende bevindingen? Wie is het WEL/NIET eens met de stelling > Een functionele UI die voor iedereen leesbaar is levert in op visuele aantrekkelijkheid Anderson s Getmentalcard#09 Aesthetic-Usability Effect Aesthetically pleasing designs are often perceived as being easier to use > How might this apply to the Web? Attractive things work better or at least we perceive them as being easier to use. Have you evaluated how attractive your application (or site) is to your users? We are more forgiving of attractive designs and assume they are (or should be) easier to use. The curious part? A welldesigned site is often a more usable site.

51 Minor UxD Psychology p. 92 Terug- en vooruitblik Deze week > Vertekende waarneming > Gestalt-principes > Lezen > Kleuren > Perifeer zicht > 11 Design Guidelines Lesweek twee > Geheugen > Leren > Probleemoplossen > 13 Design Guidelines De laatste week > Tijd > 2 Design Guidelines Design Guidelines Pagina s uit het boek

52 Design Guidelines overzicht tot nu toe Minor UxD Psychology p Vermijd dubbelzinnigheid 2. Wees consistent 3. Begrijp de gebruikersdoelen 4. Doe de Gestalt-Check > Nabijheid > Gelijkenis > Coninuïteit > Geslotenheid > Eenvoud > Figuur/Grond > Gemeenschappelijk lot 5. Zorg voor visuele structuur 6. Zorg voor visuele hiërarchie 7. Het lezen niet verstoren maar juist ondersteunen 8. Beperk de noodzaak om te lezen 9. Test tekst op echte gebruikers 10. Gebruik voor iedereen zichtbare kleuren > Gebruik onderscheidende kleuren > Onderscheid kleuren door verzadiging, helderheid en tint > Vermijd kleurcombinaties die kleurenblinden niet van elkaar kunnen onderscheiden > Gebruik kleur in combinatie met andere signalen > Scheidt sterk opponente kleuren 11. Zorg ervoor dat (fout)meldingen worden gezien > Zet ze waar gebruikers kijken > Markeer de fout > Gebruik een (fout)symbool > Reserveer rood voor fouten > Pop-ups > Geluid > Beweging/knipperenn

53 Minor UxD Psychology p. 94 Design Guidelines (in English) 1. Avoid ambiguity 2. Be consistent 3. Understand the user goals 4. Gestalt-Check your design > Proximity > Similarity > Continuity > Closure > Symmetry > Figure/Ground > Common Fate 5. Provide visual structure 6. Provide visual hierarchy 7. Don t disrupt reading; support it 8. Minimize the need for reading 9. Test text on real users 10. Use colors that are visible for everyone > Use distinctive colors > Distinguish colors by saturation, brightness AND hue > Avoid color pairs that color-blind people cannot distinguish > Use color redundantly with other cues > Separate strong opponent colors 11. Make sure that error messages will be seen > Put it where users are looking > Mark the error > Use an error symbol > Reserve red for errors > Pop-ups > Sound > Motion/blinking

54 Minor UxD Psychology p. 95 Huiswerk Huiswerk voor de volgende werkgroep maandag 25/02/2013 van 13:30 16:50 Boek bestuderen > Ch. 4, 5, 6 :: Pagina 33 t/m 77 > Bereid je voor op Quiz 2 Opdracht > Voorbeelden bij Design Guidelines #7 t/m #11 > In je UxD-Dropbox zetten