kevin@learnnuggets.com@learnnuggetsnuggethead.netHow To Communicate to theVisual CortexWhat Learners Don’t SeeKevin Thorn
Vision trumps all other senses
VisionVisual CortexCentral & PeripheralVisual Alphabet and TheoriesPerceived Affordances
Kanizsa TriangleDeveloped by Italian Psychologist, Gaetano Kanizsa in 1955
Brain creates shortcuts100 Things Every Designer Should Know About People – Suzan Weinschenk
STOPPEACEWARNOWInfluence by shapes and colorSTOPPEACEWARNOW100 Things Every Designer Should Know About People – Suzan Wein...
2D 3DNOTWE SEE
• Light enters through cornea and lens.• Lens focuses image on the retina• On the retina it is always 2D representation ev...
VisualCortex
Visual CortexRetina receives electrical patternsCreates several tracks from those patterns – asmany as 12 tracks(color, mo...
Ventral & Dorsal StreamsVisualCortexVentralstreamDorsalstream
Visual Cortex – V2• Dorsal: “Where” or “How” pathway– Motion– Representation of object locations– Control of the eyes and ...
These motor skills begin to developin the first year of life.Once learned, these are stored inlong-term memory.
Peripheral VisionTWO TYPES:• Central – look at things directly• Peripheral – everything else
Stop Clicky, Clicky, Bling, BlingPeople can’t help notice things moving in theirperipheral vision.EX: Reading text on scre...
Dave Gray – http://www.davegrayinfo.comVisual Alphabet
Geon TheoryIrving Bierderman – http://www.bmva.org/bmvc/1993/bmvc-93-018.pdf
Irving Bierderman – http://www.bmva.org/bmvc/1993/bmvc-93-018.pdf
Every OBJECT if first a shapeThat SHAPE occupies a spaceThat SPACE defines the OBJECTThorn – NuggetHead Theory
What is it? How did you know?
Shape Mashing
Mashed Shapes
• schedule• deadline• meeting• retirement• center piece• end of an era• celebration• timeless• commitment• reliable• stead...
Instruction w/ WordsTo make a peanut butter and jelly sandwich,you will need two slices of bread, peanutbutter, your favor...
Same Instructions w/ no Words
Perceived Affordances
Perceived Affordances
Perceived Affordances
Perceived Affordances
Pull or Push?
Pull or Push?
Digital Learning Instructional TextTo open the doorgrasp the handlewith a firm gripand push downrotating the leveruntil th...
Pull or Push?
Pull or Push?
The following slides represent goodvisual design that does not require“how to navigate this app” instructions.Amazon Shopp...
To continue click theNext button to beginOld school sidebarMenu designDistracting?First screen. Why is this arrow here? >W...
Design starts here
Design Differently
Thank You!kevin@learnnuggets.com@learnnuggetsnuggethead.netKevin Thorn, Chief NuggetHead
How to Communicate to the Visual Cortex - mLearn13
How to Communicate to the Visual Cortex - mLearn13
How to Communicate to the Visual Cortex - mLearn13
How to Communicate to the Visual Cortex - mLearn13
How to Communicate to the Visual Cortex - mLearn13
How to Communicate to the Visual Cortex - mLearn13
How to Communicate to the Visual Cortex - mLearn13
How to Communicate to the Visual Cortex - mLearn13
How to Communicate to the Visual Cortex - mLearn13
How to Communicate to the Visual Cortex - mLearn13
How to Communicate to the Visual Cortex - mLearn13
Upcoming SlideShare
Loading in …5
×

How to Communicate to the Visual Cortex - mLearn13

437 views

Published on

By taking advantage of what learners already know from experience, we have a perceived affordance with visual design for eLearning and mLearning.

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
437
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • Half of the brains resources are dedicated to seeing and interpreting what we see.What our eyes physically perceive is only one part.The image coming in are changed and interpreted and it’s the brain that “sees”
  • We *think* that everything in our world our eyes are sending information to our brains. Our brains then process the information and tell us what it is we’re seeing. In fact our brains may be interpreting something entirely different that what we actually see.What do you see?Triangle with black border in the backgroundWhite triangle on topNot really there. Your brain creates the shape of the upside down triangle out of empty space. It “expects” to see it.
  • Light enters through cornea and lens.Lens focuses image on the retinaOn the retina it is always 2D representation even if object is 3DImage sent to visual cortex in the brain
  • Recognition of patterns. Visual cortex turns 2D image into 3D representation
  • Biz card exercise
  • Marketers annoy us all the time. That’s why they have obnoxious flashy blinky ads in the periphery of a web page – we can’t help but notice.
  • How to Communicate to the Visual Cortex - mLearn13

    1. 1. kevin@learnnuggets.com@learnnuggetsnuggethead.netHow To Communicate to theVisual CortexWhat Learners Don’t SeeKevin Thorn
    2. 2. Vision trumps all other senses
    3. 3. VisionVisual CortexCentral & PeripheralVisual Alphabet and TheoriesPerceived Affordances
    4. 4. Kanizsa TriangleDeveloped by Italian Psychologist, Gaetano Kanizsa in 1955
    5. 5. Brain creates shortcuts100 Things Every Designer Should Know About People – Suzan Weinschenk
    6. 6. STOPPEACEWARNOWInfluence by shapes and colorSTOPPEACEWARNOW100 Things Every Designer Should Know About People – Suzan Weinschenk
    7. 7. 2D 3DNOTWE SEE
    8. 8. • Light enters through cornea and lens.• Lens focuses image on the retina• On the retina it is always 2D representation even if object is 3D• Image sent to visual cortex in the brain
    9. 9. VisualCortex
    10. 10. Visual CortexRetina receives electrical patternsCreates several tracks from those patterns – asmany as 12 tracks(color, motion, location, edges, angles, etc.)All data combined into two tracksMovement: Is the object moving?Location: Where is the object in relation tome?
    11. 11. Ventral & Dorsal StreamsVisualCortexVentralstreamDorsalstream
    12. 12. Visual Cortex – V2• Dorsal: “Where” or “How” pathway– Motion– Representation of object locations– Control of the eyes and arms; reaching• Ventral: “What” pathway– Form recognition– Object representation– Storage of long-term memory
    13. 13. These motor skills begin to developin the first year of life.Once learned, these are stored inlong-term memory.
    14. 14. Peripheral VisionTWO TYPES:• Central – look at things directly• Peripheral – everything else
    15. 15. Stop Clicky, Clicky, Bling, BlingPeople can’t help notice things moving in theirperipheral vision.EX: Reading text on screen and some animationor blinking is off to the side. Think of sidebaradvertisement.ANNOYING
    16. 16. Dave Gray – http://www.davegrayinfo.comVisual Alphabet
    17. 17. Geon TheoryIrving Bierderman – http://www.bmva.org/bmvc/1993/bmvc-93-018.pdf
    18. 18. Irving Bierderman – http://www.bmva.org/bmvc/1993/bmvc-93-018.pdf
    19. 19. Every OBJECT if first a shapeThat SHAPE occupies a spaceThat SPACE defines the OBJECTThorn – NuggetHead Theory
    20. 20. What is it? How did you know?
    21. 21. Shape Mashing
    22. 22. Mashed Shapes
    23. 23. • schedule• deadline• meeting• retirement• center piece• end of an era• celebration• timeless• commitment• reliable• steadfast• passing of timeSame Image; Different Meaning
    24. 24. Instruction w/ WordsTo make a peanut butter and jelly sandwich,you will need two slices of bread, peanutbutter, your favorite flavor of jelly, and a knife.With the knife, spread the peanut butter onone slice of bread. Also with the knife, spreadthe jelly on top of the peanut butter. Whenfinished, place the other slice of bread on topof the already prepared slice with the peanutbutter and jelly. Smash and eat!
    25. 25. Same Instructions w/ no Words
    26. 26. Perceived Affordances
    27. 27. Perceived Affordances
    28. 28. Perceived Affordances
    29. 29. Perceived Affordances
    30. 30. Pull or Push?
    31. 31. Pull or Push?
    32. 32. Digital Learning Instructional TextTo open the doorgrasp the handlewith a firm gripand push downrotating the leveruntil the latchfrees from thedoor jamb whileslightly applyingforward pressureuntil the doorswings open.Trust your learners thatthey know how to clickthe next button withoutyou telling them how.
    33. 33. Pull or Push?
    34. 34. Pull or Push?
    35. 35. The following slides represent goodvisual design that does not require“how to navigate this app” instructions.Amazon ShoppingeBayFabGoComicsNARR8Smithsonian ChannelArtRage
    36. 36. To continue click theNext button to beginOld school sidebarMenu designDistracting?First screen. Why is this arrow here? >Why do we design with an attitude that our audience are idiots?Wasted real estate?Wasted real estate?Company Logo< If we have to remind users who they work for, we have bigger problems.
    37. 37. Design starts here
    38. 38. Design Differently
    39. 39. Thank You!kevin@learnnuggets.com@learnnuggetsnuggethead.netKevin Thorn, Chief NuggetHead

    ×