Minor UxD Psychology | p. 42
UxD Theorie Module Psychologie
Werkgroep 2 van 5 Vrijdag 15/02/2013 13:30 – 16:50
Claudia van Tongeren
2
Minor UxD Psychology | p. 43
Quiz time! Niks op tafel alle apparatuur/boeken uit/weg
Maximaal 5 minuten
Quiz 1
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
Chapter 04 :: Reading is Unnatural
4
Minor UxD Psychology | p. 45
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
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
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
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
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.
Chapter 04 :: Reading is Unnatural
Minor UxD Psychology | p. 50
Welk type lezen is beter? The most efficient way to read is via context-
free, 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
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
Chapter 04 :: DG07 «Don’t disrupt reading; support it!»
Minor UxD Psychology | p. 52
Design Guideline #07
Het lezen niet verstoren maar juist ondersteunen
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)
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
Chapter 04 :: DG08 «Minimize the need for reading»
Design Guideline #08
Beperk de noodzaak om te lezen
Minor UxD Psychology | p. 55
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.
Chapter 04 :: DG08 «Minimize the need for reading»
Minor UxD Psychology | p. 57
Chapter 04 :: DG09 «Test text on real users»
Design Guideline #09
Test tekst op echte gebruikers
Minor UxD Psychology | p. 58
Chapter 04 :: DG09 «Test text on real users»
1
2
Minor UxD Psychology | p. 59
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…
Chapter 05 :: Our Color Vision is Limited
5
Minor UxD Psychology | p. 60
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
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!
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
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
Chapter 05 :: Our Color Vision is Limited
Minor UxD Psychology | p. 64
Waarneming is geoptimaliseerd voor edge contrast, niet de helderheid
Chapter 05 :: Our Color Vision is Limited
Minor UxD Psychology | p. 65
Waarneming is geoptimaliseerd voor edge contrast, niet de helderheid (vervolg)
Zie ook: http://youtu.be/R_CN5kY_FeY?t=2m
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
Chapter 05 :: Our Color Vision is Limited
Minor UxD Psychology | p. 67
Chapter 05 :: Our Color Vision is Limited
Minor UxD Psychology | p. 68
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
Minor UxD Psychology | p. 70
www.vischeck.com In Photoshop kun je ook een kleurenblindcheck doen
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.
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
Chapter 05 :: DG#10a «Use distinctive colors»
Minor UxD Psychology | p. 73
Design Guideline #10a
Gebruik onderscheidende kleuren
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
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
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
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)
Chapter 05 :: DG#10d «Use color redundantly with other cues»
Design Guideline #10d
Gebruik kleur in combinatie met andere signalen
Minor UxD Psychology | p. 78
Chapter 05 :: DG#10d «Use color redundantly with other cues»
Minor UxD Psychology | p. 79
Chapter 05 :: DG#10e «Separate strong opponent colors»
Design Guideline #10e
Scheidt sterk opponente kleuren
Minor UxD Psychology | p. 80
Chapter 05 :: DG#10e «Separate strong opponent colors»
Placing opponent colors right next to or on top of each other causes a disturbing shimmering sensation, and so should be avoided.
Minor UxD Psychology | p. 81
Chapter 06 :: Our Peripheral Vision is Poor
6
Minor UxD Psychology | p. 82
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
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.
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
Chapter 06 :: Our Peripheral Vision is Poor
Blinde vlek
Minor UxD Psychology | p. 85
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
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
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
Chapter 06 :: DG#11 «Zorg ervoor dat (fout)meldingen worden gezien»
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
Minor UxD Psychology | p. 89
Minor UxD Psychology | p. 90
Opdrachten Opdracht 1 > Gebruik de leesniveau tool om een stuk tekst te checken www.accessibility.nl/kennisbank/tools/leesniveau-tool
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
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.
Minor UxD Psychology | p. 92
Terug- en vooruitblik Deze week > > > > > >
Lesweek twee
Vertekende waarneming Gestalt-principes Lezen Kleuren Perifeer zicht 11 Design Guidelines
> > > >
Geheugen Leren Probleemoplossen 13 Design Guidelines
De laatste week > Tijd > 2 Design Guidelines
Design Guidelines 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
Pagina’s uit het boek 77
150
178
Minor UxD Psychology | p. 93
Design Guidelines overzicht tot nu toe 1. 2. 3. 4.
Vermijd dubbelzinnigheid Wees consistent Begrijp de gebruikersdoelen Doe de Gestalt-Check > > > > > > >
Nabijheid Gelijkenis Coninuïteit Geslotenheid Eenvoud Figuur/Grond Gemeenschappelijk lot
5. 6.
Zorg voor visuele structuur Zorg voor visuele hiërarchie
7.
Het lezen niet verstoren maar juist ondersteunen Beperk de noodzaak om te lezen Test tekst op echte gebruikers
8. 9.
10. Gebruik voor iedereen
zichtbare kleuren > > > > >
11.
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
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
Minor UxD Psychology | p. 94
Design Guidelines (in English) 1. 2. 3. 4.
Avoid ambiguity Be consistent Understand the user goals Gestalt-Check your design > > > > > > >
5. 6. 7. 8. 9.
Proximity Similarity Continuity Closure Symmetry Figure/Ground Common Fate
Provide visual structure Provide visual hierarchy Don’t disrupt reading; support it Minimize the need for reading Test text on real users
10. Use colors that are visible
for everyone > > > > >
11.
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
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
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
