visuals lbd 032411
TRANSCRIPT
alt, inc © 2007
advantage learning technologies6255 robin lanecoopersburg, pa 18036877-757-4684 (o)610-217-9078 (f)[email protected]
Introduction
alt, inc © 2007
http://amazon.com
http://youlistenwithyoureyes.com
alt, inc © 2007
Remember: You can’t learn um You can’t teach um something they
already know ! (Robert F Mager, 1997)
You can design instruction that increases the probability that they can learn.
You can design your visuals for the way people learn (Bobbe G Baggio, 2007)
Introduction
alt, inc © 2007
Trilogy of MindHow you feel: affective domainHow you think: cognitive domainWhat you do: conative domain
Visual engagement….part of the cognitive & affective
domains
alt, inc © 2007
What is the Learning Zone?
V1V2
V4
IT
Introduction
First 4 visual regionsin the recognition of objects
(Jeff Hopkins, 2004)
alt, inc © 2007
What is the Learning Zone?
Memory
Working Long termvisual, phonetic,rehearsal
schemas
encoding & retrieval
Introduction
Ruth Clark, Frank Nguyen, John Sweller, 2006
alt, inc © 2007
Introduction
If it doesn’t go in it can’t come out…
V1
V2
V3
V4
Attention
Not Distraction
(Jeff Hopkins, 2004)
alt, inc © 2007
Recognize good visual design
Create well designed learner interfaces
Design instruction using good visuals
Learning Objectives:
Introduction
alt, inc © 2007
How you listen with your eyes
AttentionPerception
Visualization
Imagination
alt, inc © 2007
What do you see here?
alt, inc © 2007
Face orVase
alt, inc © 2007
How do people learn ?
Prior Knowledge
Context
Expectations
Recognize Good Visual Design
alt, inc © 2007
Prior Knowledge = NAPs
Recognize Good Visual Design
Neuro- Associative Pathways
alt, inc © 2007
Recognize Good Visual Design
Like hanging
clothesin the closet
alt, inc © 2007
Recognize Good Visual Design
Is it really you?
alt, inc © 2007
Recognize Good Visual Design
You need a place to hang it….
Prior Knowledge
alt, inc © 2007
Context= RelevanceContextContext = Relevance
Recognize Good Visual Design
alt, inc © 2007
Recognize Good Visual Design
or Not
alt, inc © 2007
Expectations
The most powerful word there is…..
Imagine
Recognize Good Visual Design
alt, inc © 2007
Expectations
Recognize Good Visual Design
Imagination is more important than knowledge. For while knowledge defines all we currently know and understand, imagination points to all we might yet discover and create. ( Albert Einstein)
alt, inc © 2007
Recognize Good Visual Design
Principle Question Response
Context What does context provide?
a. Sequenceb. Structurec. Relevance
Prior Knowledge Is prior knowledge important because it let’s us know what the learner already knows?
True or False
Expectations Expectations are not important to the imagination.
True or False
Review
alt, inc © 2007
Recognize Good Visual Design
Your Turn:
What is wrong with
this picture?a.Expectationsb.Prior knowledgec.Contextd.All of the above
alt, inc © 2007
You might be a visual learner if: You write things down when you listen to a lecture You have endless do lists You have post it notes everywhere You remember faces not names You remember what people are wearing Spelling is not your strong point You like to doodle You like math You know the color of your friend’s eyes You can tell a story and describe the scene in detail You couldn’t live with our your PDA
alt, inc © 2007
Content is
Create well designed learner interfaces
alt, inc © 2007
Create well designed learner interfaces
Hurricane Katrina Risk Reduction Summary•We can not totally eliminate risk – we all have a role in its reduction. • Some work has been done – improvements made. • 100 year level of protection – not a stopping point. • We will work with local governments so that risk can be included in urban planning decisions. • Results being shared with FEMA as input to the Flood Insurance Rate Maps. • Public access to risk maps will be available online. • Integrated response gives us the complete picture of managing our risk.
alt, inc © 2007
Create well designed learner interfaces
We can reduce risk
alt, inc © 2007
Create well designed learner interfaces
Why use people?
alt, inc © 2007
Create well designed learner interfaces
What comes to mind?
alt, inc © 2007
The four elements of visual design: Contrast Repetition Alignment Proximity
Create well designed learner interfaces
CRAP
alt, inc © 2007
What is contrast ?
Create well designed learner interfaces
Color
Focus
alt, inc © 2007
Create well designed learner interfaces
What is contrast ?
Size
Object
alt, inc © 2007
Create well designed learner interfaces
What is contrast ?
Age
Placement
alt, inc © 2007
Create well designed learner interfaces
What is contrast ?
If it is different….make it VERY different
alt, inc © 2007
What is repetition?
Create well designed learner interfaces
ColorNumbersPositionSubject
alt, inc © 2007
Do it Again & Again & Again
Rehearsal
Repetition
Reflection & Rest
Recall
Retrieval
Are you giving them enough downtime to process?
alt, inc © 2007
Create well designed learner interfaces
What is alignment?
Alignment makes it
easier for the learner
to take it in. Symmetry Positions White spaceBalance
alt, inc © 2007
Automated adhesive being applied to tweeter domes
Automated soldering tweeter leads down to .1mm thick. Thinner than human hair!
What is alignment?
Create well designed learner interfaces
alt, inc © 2007
Create well designed learner interfaces
Purpose and Use of Developmental Feedback
Process Review
Roles and Responsibilities
Completing the Questionnaire
Common Rating Errors
Getting Started
alt, inc © 2007
What is proximity?
Create well designed learner interfaces
UnityHarmonyBalanceScale
alt, inc © 2007
Create well designed learner interfaces
What’s wrong with
this picture?a. Contrastb. Repetitionc. Alignmentd. All of the above
Your Turn:
alt, inc © 2007
Create well designed learner interfaces
What’s wrong with
this picture?a. Contrastb. Repetitionc. Alignmentd. Proximity
Your Turn:
alt, inc © 2007
How do they think ? Dual Channels
Visual Channel
Auditory Channel
Cognitive learning theory
You can only think one thought at a time.
Design instruction using good visuals
alt, inc © 2007
Design instruction using visualsin the learning zone
Managing cognitive load
Learning occurs by active processing in the memorysystem.
alt, inc © 2007
Design instruction using visualsin the learning zone
X
X X
O
O
alt, inc © 2007
Design instruction using visualsin the learning zone
1
8
2
7
3
4
9
5 6
alt, inc © 2007
Design instruction using visualsin the learning zone
alt, inc © 2007
Design instruction using visualsin the learning zone
These are rail workers fixing a problem in the rail line.
alt, inc © 2007
Design instruction using visualsin the learning zone
Rail workers fixing problem
alt, inc © 2007
Text for good graphics
Less is More
Design instruction using visualsin the learning zone
alt, inc © 2007
Design instruction using visualsin the learning zone
g gsans shérif shérif
Fonts
alt, inc © 2007
Design instruction using visualsin the learning zone
On screens use sans shérif fonts
Arial
Verdana
Tahoma….etc.
alt, inc © 2007
In print use shérif fonts
Times New Roman
Garamond
Arno Pro….etc.
Design instruction using visualsin the learning zone
alt, inc © 2007
Design instruction using visualsin the learning zone
Why ARE YOU Using Capital Letters?
CAN YA HEAR ME NOW……
alt, inc © 2007
Goals for 2008/09:Year 4
• Program Directors – Management of the program; need for meetings with faculty & advisory boards– Documentation of outcomes– Inclusion in the admission process– Annual reports
• New Programs:– BPS Degree– Executive/Noncredit/Workforce Development Programming– Summer / Conferencing– Evaluation of Career Based Programming
• Process to improve communication with prospects and between staff• Program Review Process• Establishment of Advisory Boards
• Brand Marketing• Ensure Pro-active support from:
– University Communication– Enrollment Services– Business Affairs
alt, inc © 2007
Design instruction using visualsin the learning zone
Readability is key
alt, inc © 2007
Design instruction using visualsin the learning zone
Learners have a limited amount of capacity
Managing cognitive load
alt, inc © 2007
Social Security w/o chunking:
198603895
Social Security with chunking:
198-60-3895
Phone number w/o chunking:
2156743377
Phone number with chunking:
215-674-3377
Design instruction using visualsin the learning zone
Chunking
alt, inc © 2007
Design instruction using visualsin the learning zone
Chunking
7 + or - 2
alt, inc © 2007
Design instruction using visualsIn the learning zone
Some Basic Rules for Visuals :
Use relative graphics
Use graphics that have a purpose
Use high quality graphic of a similar type.
Use graphics that get the point across
Use graphics support the learning
alt, inc © 2007
Design instruction using visualsIn the learning zone
Power Points
alt, inc © 2007
Design instruction using visualsin the learning zone
Power Point Templates
Special Rules
Use light backgrounds with dark text
Limit background graphics
Use basic layouts with room for your content
Format your master slide for consistency
alt, inc © 2007
US Department of TransportationFederal Transit Administration
Click to edit Master text styles
B U D G E T A N D P O L I C YB U D G E T A N D P O L I C Y
What is wrong with this ?
alt, inc © 2007
alt, inc © 2007
Design instruction using visualsin the learning zone
White Space is Power
alt, inc © 2007
ColorColor can affect mood
Can’t distinguish red from green; second blue from brown
One in every 12 men & 65 women report color blindness
Design instruction using visualsin the learning zone
alt, inc © 2007
Design instruction using visualsin the learning zone
No more than two primary colors on a screen
Watch color families and feelings
Watch cognitive load
alt, inc © 2007
Design instruction using visualsin the learning zone
Structuring InformationThe Grid
© Clair Boger
alt, inc © 2007
alt, inc © 2007
alt, inc © 2007
KGA 1 Wireframes
Based on your site map, create a series of wireframes that describe the functional layout of your interface design. You should submit at least 5 wireframes. These wireframes can be created in Illustrator, InDesign or Photoshop. Post to the Week 5 Wireframe Dropbox by Sunday at midnight (MT).
Click to download an optional Wireframe template with layers for each page. (Illustrator file, 732 KB).
KGA 1 Final Logo Design
Based on your site map, create a series of wireframes that describe the functional layout of your interface design. You should submit at least 5 wireframes. These wireframes can be created in Illustrator, In Design or Photoshop. Post to the Week 5 Wireframe Dropbox by Sunday at midnight (MT).
alt, inc © 2007
Design instruction using visualsin the learning zone
Summary
Let’s reflect on what you have learned?
alt, inc © 2007
Thank You
You have completed: