SlideShare a Scribd company logo
1 of 73
Introduction




 advantage learning technologies
 6255 robin lane
 coopersburg, pa 18036
 877-757-4684 (o)
 610-217-9078 (f)
 bobbebaggio@gmail.com

                                   alt, inc © 2007
http://amazon.com

http://youlistenwithyoureyes.com




                      alt, inc © 2007
Introduction

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)




                                                  alt, inc © 2007
Trilogy of Mind
How you feel: affective domain
How you think: cognitive domain
What you do: conative domain

Visual engagement….
part of the cognitive & affective domains



                                        alt, inc © 2007
Introduction


What is the Learning Zone?


                        IT

                 V1               First 4 visual
                             V4   regions
                        V2
                                  in the
                                  recognition of
                                  objects

 (Jeff Hopkins, 2004)

                                            alt, inc © 2007
Introduction


    What is the Learning Zone?

                             Memory
                      encoding & retrieval

              Working                     Long term
visual,                                           schemas
phonetic,
rehearsal




Ruth Clark, Frank Nguyen, John Sweller, 2006
                                                            alt, inc © 2007
Introduction


              Attention
              If it doesn’t go in it can’t
              come out…

                  V4

                  V3

                  V2
                  V1


                              (Jeff Hopkins, 2004)


Not Distraction
                                                     alt, inc © 2007
Introduction

Learning Objectives:
  Recognize good visual design

  Create well designed learner interfaces

  Design instruction using good visuals




                                             alt, inc © 2007
How you listen with your eyes

Attention
Perception
Visualization
Imagination




                                alt, inc © 2007
What do you see
here?




             alt, inc © 2007
Face
or
Vase




       alt, inc © 2007
Recognize Good Visual Design

 How do people learn ?

                        Prior Knowledge

                        Context

                        Expectations




                                   alt, inc © 2007
Recognize Good Visual Design


Prior Knowledge = NAPs
 Neuro- Associative Pathways




                               alt, inc © 2007
Recognize Good Visual Design




Like hanging
      clothes
       in 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
Recognize Good Visual Design


   Context = Relevance
   Context = Relevance
   Context




                               alt, inc © 2007
Recognize Good Visual Design



     or Not




                               alt, inc © 2007
Recognize Good Visual Design


 Expectations




                         The most powerful
                         word there is…..

                         Imagine


                                      alt, inc © 2007
Recognize Good Visual Design


   Expectations
    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
 Review

 Principle         Question               Response
 Context           What does context      a. Sequence
                   provide?               b. Structure
                                          c. Relevance
 Prior Knowledge   Is prior knowledge     True or False
                   important because it
                   let’s us know what the
                   learner already
                   knows?
 Expectations      Expectations are not   True or False
                   important to the
                   imagination.




                                                          alt, inc © 2007
Recognize Good Visual Design
 Your Turn:

                    What is wrong with
                    this picture?
                    a. Expectations
                    b. Prior knowledge
                    c. Context
                    d. 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
Create well designed learner interfaces




  Content is



                                      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
Create well designed learner interfaces


  The four elements of visual design:
   Contrast
   Repetition
   Alignment     CRAP
   Proximity




                                     alt, inc © 2007
Create well designed learner interfaces


What is contrast ?

                                   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
Create well designed learner interfaces


What is repetition?

                               Color
                               Numbers
                               Position
                               Subject




                                     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 space
   Balance


                                      alt, inc © 2007
Create well designed learner interfaces

   What is alignment?
                              Automated adhesive being
                              applied to tweeter domes




Automated soldering tweeter
 leads down to .1mm thick.
  Thinner than human hair!


                                                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
Create well designed learner interfaces


  What is proximity?

                            Unity
                            Harmony
                            Balance
                            Scale




                                      alt, inc © 2007
Create well designed learner interfaces


  Your Turn:

                          What’s wrong with
                          this picture?
                          a. Contrast
                          b. Repetition
                          c. Alignment
                          d. All of the above




                                       alt, inc © 2007
Create well designed learner interfaces

  Your Turn:

                          What’s wrong with
                          this picture?
                          a. Contrast
                          b. Repetition
                          c. Alignment
                          d. Proximity




                                      alt, inc © 2007
Design instruction using good visuals

  How do they learning theory
  Cognitive think ?
    Dual Channels

    Visual Channel

    Auditory Channel




   You can only think one thought at a time.


                                        alt, inc © 2007
Design instruction using visuals
in the learning zone

  Managing cognitive load
  Learning occurs by
  active processing
  in the memory
  system.




                                   alt, inc © 2007
Design instruction using
visuals
in the learning zone

           X

                   O

           O       X       X


                               alt, inc © 2007
Design instruction using
visuals
in the learning zone

           1       2       3

          4        5       6

           7       8       9


                               alt, inc © 2007
Design instruction using
visuals
in the learning zone




                           alt, inc © 2007
Design instruction using
visuals
in the learning zone




These are rail workers fixing a problem in the rail line.



                                                            alt, inc © 2007
Design instruction using
visuals
in the learning zone

  Rail workers fixing problem




                                alt, inc © 2007
Design instruction using visuals
in the learning zone

Text for good graphics




                    Less is More




                                   alt, inc © 2007
Design instruction using visuals
in the learning zone

  Fonts


      g                   g
      sans shérif         shérif




                                   alt, inc © 2007
Design instruction using
visuals
in the learning zone

 On screens use sans shérif fonts
 Arial
 Verdana
 Tahoma….etc.




                               alt, inc © 2007
Design instruction using visuals
in the learning zone


  In print use shérif fonts
  Times New Roman
  Garamond
  Arno Pro….etc.




                                   alt, inc © 2007
Design instruction using visuals
in 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 visuals
in the learning zone




                     Readability is key




                                   alt, inc © 2007
Design instruction using visuals
in the learning zone

  Managing cognitive load

  Learners have a
  limited amount
  of capacity




                                   alt, inc © 2007
Design instruction using visuals
in the learning zone

 Chunking
 Social Security    Phone number
 w/o chunking:      w/o chunking:
   198603895          2156743377

 Social Security    Phone number
 with chunking:     with chunking:
   198-60-            215-674-3377
   3895

                                    alt, inc © 2007
Design instruction using visuals
in the learning zone


  Chunking


  7 + or - 2


                                   alt, inc © 2007
Design instruction using visuals
In 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 visuals
In the learning zone

            Power Points




                                   alt, inc © 2007
Design instruction using visuals
in 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 Transportat
                                             Federal Transit Administrati




   Click to edit Master
        text styles

What is wrong with this ?

         B U D G E T   A N D   P O L I C Y         alt, inc © 2007
alt, inc © 2007
Design instruction using visuals
in the learning zone




        White Space is Power




                                   alt, inc © 2007
Design instruction using visuals
in the learning zone


 Colo
 r
Color can affect mood

 Can’t distinguish
  red from green;
  second blue from brown

 One in every 12 men & 65

 women report color
 blindness



                                   alt, inc © 2007
Design instruction using visuals
in 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 visuals
in the learning zone

 Structuring Information
 The 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).


KGA 1 Final Logo Design

Based on your site map, create a series of       Click to download an optional Wireframe template with
wireframes that describe the functional          layers for each page. (Illustrator file, 732 KB).

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 visuals
in the learning zone

  Summary
  Let’s reflect on what you
  have learned?




                                   alt, inc © 2007
Thank You


You have completed:




                      alt, inc © 2007

More Related Content

Viewers also liked

Itm615 expectations bb
Itm615 expectations bbItm615 expectations bb
Itm615 expectations bbBobbe Baggio
 
Intro review - Postítulo Lengua Inglesa
Intro review - Postítulo Lengua InglesaIntro review - Postítulo Lengua Inglesa
Intro review - Postítulo Lengua InglesaHoly Rose
 
Itm615 expectations bb
Itm615 expectations bbItm615 expectations bb
Itm615 expectations bbBobbe Baggio
 
Dla how doyou_06022012
Dla how doyou_06022012Dla how doyou_06022012
Dla how doyou_06022012Bobbe Baggio
 
Meta trends 050212 baggio
Meta trends 050212 baggioMeta trends 050212 baggio
Meta trends 050212 baggioBobbe Baggio
 
Trinity (A Joint E-bulletin of Tri-Party Twin club Agreement between RC Kota ...
Trinity (A Joint E-bulletin of Tri-Party Twin club Agreement between RC Kota ...Trinity (A Joint E-bulletin of Tri-Party Twin club Agreement between RC Kota ...
Trinity (A Joint E-bulletin of Tri-Party Twin club Agreement between RC Kota ...Neha Gupta
 
Rotaract Club Kota , glimpses 2010/2011
Rotaract Club Kota , glimpses 2010/2011Rotaract Club Kota , glimpses 2010/2011
Rotaract Club Kota , glimpses 2010/2011Neha Gupta
 
Pj effect astd_041012
Pj effect astd_041012Pj effect astd_041012
Pj effect astd_041012Bobbe Baggio
 

Viewers also liked (9)

Itm615 expectations bb
Itm615 expectations bbItm615 expectations bb
Itm615 expectations bb
 
Intro review - Postítulo Lengua Inglesa
Intro review - Postítulo Lengua InglesaIntro review - Postítulo Lengua Inglesa
Intro review - Postítulo Lengua Inglesa
 
Itm615 expectations bb
Itm615 expectations bbItm615 expectations bb
Itm615 expectations bb
 
Dla how doyou_06022012
Dla how doyou_06022012Dla how doyou_06022012
Dla how doyou_06022012
 
Meta trends 050212 baggio
Meta trends 050212 baggioMeta trends 050212 baggio
Meta trends 050212 baggio
 
Trinity (A Joint E-bulletin of Tri-Party Twin club Agreement between RC Kota ...
Trinity (A Joint E-bulletin of Tri-Party Twin club Agreement between RC Kota ...Trinity (A Joint E-bulletin of Tri-Party Twin club Agreement between RC Kota ...
Trinity (A Joint E-bulletin of Tri-Party Twin club Agreement between RC Kota ...
 
Rotaract Club Kota , glimpses 2010/2011
Rotaract Club Kota , glimpses 2010/2011Rotaract Club Kota , glimpses 2010/2011
Rotaract Club Kota , glimpses 2010/2011
 
Gases
GasesGases
Gases
 
Pj effect astd_041012
Pj effect astd_041012Pj effect astd_041012
Pj effect astd_041012
 

Similar to Visuals lbd 032411

Working through Screens Idea Cards | www.FlashbulbInteraction.com/WTS.html
Working through Screens Idea Cards  |  www.FlashbulbInteraction.com/WTS.htmlWorking through Screens Idea Cards  |  www.FlashbulbInteraction.com/WTS.html
Working through Screens Idea Cards | www.FlashbulbInteraction.com/WTS.htmlFlashbulb Interaction, Inc.
 
Sample Sales Training PPT
Sample Sales Training PPTSample Sales Training PPT
Sample Sales Training PPTNicole DeFalco
 
Re-imagining the Design of Everyday Things
Re-imagining the Design of Everyday ThingsRe-imagining the Design of Everyday Things
Re-imagining the Design of Everyday ThingsEffective
 
Human-Centered Design and the Intersection of the Physical and Digital Worlds
Human-Centered Design and the Intersection of the Physical and Digital WorldsHuman-Centered Design and the Intersection of the Physical and Digital Worlds
Human-Centered Design and the Intersection of the Physical and Digital WorldsEffectiveUI
 
Consulting toolkit delivering the presentation
Consulting toolkit   delivering the presentationConsulting toolkit   delivering the presentation
Consulting toolkit delivering the presentationchrisdoran
 
Rossett fallinloveagain w isd
Rossett fallinloveagain w isdRossett fallinloveagain w isd
Rossett fallinloveagain w isdAllison Rossett
 
It Role State Exploration 7 Nov Illumine
It Role State Exploration 7 Nov  IllumineIt Role State Exploration 7 Nov  Illumine
It Role State Exploration 7 Nov Illumineibecome
 
Avanulo Blue Paper Enigi User Engaged Construction (1)
Avanulo Blue Paper   Enigi   User Engaged Construction  (1)Avanulo Blue Paper   Enigi   User Engaged Construction  (1)
Avanulo Blue Paper Enigi User Engaged Construction (1)mstxbusiness
 
Agile Chennai Keynote by Jeff Patton
Agile Chennai Keynote by Jeff PattonAgile Chennai Keynote by Jeff Patton
Agile Chennai Keynote by Jeff PattonNaresh Jain
 
Introduction to design specifications to Summer of Code NZ students
Introduction to design specifications to Summer of Code NZ studentsIntroduction to design specifications to Summer of Code NZ students
Introduction to design specifications to Summer of Code NZ studentsLulu Pachuau
 
Consulting toolkit preparing dummy pack
Consulting toolkit   preparing dummy packConsulting toolkit   preparing dummy pack
Consulting toolkit preparing dummy packchrisdoran
 
Consulting toolkit analogies
Consulting toolkit   analogiesConsulting toolkit   analogies
Consulting toolkit analogieschrisdoran
 

Similar to Visuals lbd 032411 (20)

Working through Screens Idea Cards | www.FlashbulbInteraction.com/WTS.html
Working through Screens Idea Cards  |  www.FlashbulbInteraction.com/WTS.htmlWorking through Screens Idea Cards  |  www.FlashbulbInteraction.com/WTS.html
Working through Screens Idea Cards | www.FlashbulbInteraction.com/WTS.html
 
Sample Sales Training PPT
Sample Sales Training PPTSample Sales Training PPT
Sample Sales Training PPT
 
Re-imagining the Design of Everyday Things
Re-imagining the Design of Everyday ThingsRe-imagining the Design of Everyday Things
Re-imagining the Design of Everyday Things
 
Human-Centered Design and the Intersection of the Physical and Digital Worlds
Human-Centered Design and the Intersection of the Physical and Digital WorldsHuman-Centered Design and the Intersection of the Physical and Digital Worlds
Human-Centered Design and the Intersection of the Physical and Digital Worlds
 
How To Select Your Dreamteam by Verhaert
How To Select Your Dreamteam by VerhaertHow To Select Your Dreamteam by Verhaert
How To Select Your Dreamteam by Verhaert
 
Flotree pcs 2011
Flotree pcs 2011Flotree pcs 2011
Flotree pcs 2011
 
Consulting toolkit delivering the presentation
Consulting toolkit   delivering the presentationConsulting toolkit   delivering the presentation
Consulting toolkit delivering the presentation
 
Visual Literacy Week 2 (of 6) Slides
Visual Literacy Week 2 (of 6) SlidesVisual Literacy Week 2 (of 6) Slides
Visual Literacy Week 2 (of 6) Slides
 
Rossett fallinloveagain w isd
Rossett fallinloveagain w isdRossett fallinloveagain w isd
Rossett fallinloveagain w isd
 
Portfolio gita.d.singh
Portfolio gita.d.singhPortfolio gita.d.singh
Portfolio gita.d.singh
 
Portfolio gita.d.singh
Portfolio gita.d.singhPortfolio gita.d.singh
Portfolio gita.d.singh
 
Portfolio Gita.D.Singh
Portfolio Gita.D.SinghPortfolio Gita.D.Singh
Portfolio Gita.D.Singh
 
It Role State Exploration 7 Nov Illumine
It Role State Exploration 7 Nov  IllumineIt Role State Exploration 7 Nov  Illumine
It Role State Exploration 7 Nov Illumine
 
Avanulo Blue Paper Enigi User Engaged Construction (1)
Avanulo Blue Paper   Enigi   User Engaged Construction  (1)Avanulo Blue Paper   Enigi   User Engaged Construction  (1)
Avanulo Blue Paper Enigi User Engaged Construction (1)
 
Portfolio: Gita.D.Singh
Portfolio: Gita.D.SinghPortfolio: Gita.D.Singh
Portfolio: Gita.D.Singh
 
Agile Chennai Keynote by Jeff Patton
Agile Chennai Keynote by Jeff PattonAgile Chennai Keynote by Jeff Patton
Agile Chennai Keynote by Jeff Patton
 
Introduction to design specifications to Summer of Code NZ students
Introduction to design specifications to Summer of Code NZ studentsIntroduction to design specifications to Summer of Code NZ students
Introduction to design specifications to Summer of Code NZ students
 
Define Part 1
Define Part 1Define Part 1
Define Part 1
 
Consulting toolkit preparing dummy pack
Consulting toolkit   preparing dummy packConsulting toolkit   preparing dummy pack
Consulting toolkit preparing dummy pack
 
Consulting toolkit analogies
Consulting toolkit   analogiesConsulting toolkit   analogies
Consulting toolkit analogies
 

Visuals lbd 032411

  • 1.
  • 2. Introduction advantage learning technologies 6255 robin lane coopersburg, pa 18036 877-757-4684 (o) 610-217-9078 (f) bobbebaggio@gmail.com alt, inc © 2007
  • 4. Introduction 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) alt, inc © 2007
  • 5. Trilogy of Mind How you feel: affective domain How you think: cognitive domain What you do: conative domain Visual engagement…. part of the cognitive & affective domains alt, inc © 2007
  • 6. Introduction What is the Learning Zone? IT V1 First 4 visual V4 regions V2 in the recognition of objects (Jeff Hopkins, 2004) alt, inc © 2007
  • 7. Introduction What is the Learning Zone? Memory encoding & retrieval Working Long term visual, schemas phonetic, rehearsal Ruth Clark, Frank Nguyen, John Sweller, 2006 alt, inc © 2007
  • 8. Introduction Attention If it doesn’t go in it can’t come out… V4 V3 V2 V1 (Jeff Hopkins, 2004) Not Distraction alt, inc © 2007
  • 9. Introduction Learning Objectives:  Recognize good visual design  Create well designed learner interfaces  Design instruction using good visuals alt, inc © 2007
  • 10. How you listen with your eyes Attention Perception Visualization Imagination alt, inc © 2007
  • 11. What do you see here? alt, inc © 2007
  • 12. Face or Vase alt, inc © 2007
  • 13. Recognize Good Visual Design How do people learn ? Prior Knowledge Context Expectations alt, inc © 2007
  • 14. Recognize Good Visual Design Prior Knowledge = NAPs Neuro- Associative Pathways alt, inc © 2007
  • 15. Recognize Good Visual Design Like hanging clothes in the closet alt, inc © 2007
  • 16. Recognize Good Visual Design Is it really you? alt, inc © 2007
  • 17. Recognize Good Visual Design You need a place to hang it …. Prior Knowledge alt, inc © 2007
  • 18. Recognize Good Visual Design Context = Relevance Context = Relevance Context alt, inc © 2007
  • 19. Recognize Good Visual Design or Not alt, inc © 2007
  • 20. Recognize Good Visual Design Expectations The most powerful word there is….. Imagine alt, inc © 2007
  • 21. Recognize Good Visual Design Expectations 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
  • 22. Recognize Good Visual Design Review Principle Question Response Context What does context a. Sequence provide? b. Structure c. Relevance Prior Knowledge Is prior knowledge True or False important because it let’s us know what the learner already knows? Expectations Expectations are not True or False important to the imagination. alt, inc © 2007
  • 23. Recognize Good Visual Design Your Turn: What is wrong with this picture? a. Expectations b. Prior knowledge c. Context d. All of the above alt, inc © 2007
  • 24. 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
  • 25. Create well designed learner interfaces Content is alt, inc © 2007
  • 26. 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
  • 27. Create well designed learner interfaces We can reduce risk alt, inc © 2007
  • 28. Create well designed learner interfaces Why use people? alt, inc © 2007
  • 29. Create well designed learner interfaces What comes to mind? alt, inc © 2007
  • 30. Create well designed learner interfaces The four elements of visual design:  Contrast  Repetition  Alignment CRAP  Proximity alt, inc © 2007
  • 31. Create well designed learner interfaces What is contrast ? Color Focus alt, inc © 2007
  • 32. Create well designed learner interfaces What is contrast ? Size Object alt, inc © 2007
  • 33. Create well designed learner interfaces What is contrast ? Age Placement alt, inc © 2007
  • 34. Create well designed learner interfaces What is contrast ? If it is different…. make it VERY different alt, inc © 2007
  • 35. Create well designed learner interfaces What is repetition? Color Numbers Position Subject alt, inc © 2007
  • 36. Do it Again & Again & Again Rehearsal Repetition Reflection & Rest Recall Retrieval Are you giving them enough downtime to process? alt, inc © 2007
  • 37. Create well designed learner interfaces What is alignment? Alignment makes it easier for the learner to take it in. Symmetry Positions White space Balance alt, inc © 2007
  • 38. Create well designed learner interfaces What is alignment? Automated adhesive being applied to tweeter domes Automated soldering tweeter leads down to .1mm thick. Thinner than human hair! alt, inc © 2007
  • 39. 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
  • 40. Create well designed learner interfaces What is proximity? Unity Harmony Balance Scale alt, inc © 2007
  • 41. Create well designed learner interfaces Your Turn: What’s wrong with this picture? a. Contrast b. Repetition c. Alignment d. All of the above alt, inc © 2007
  • 42. Create well designed learner interfaces Your Turn: What’s wrong with this picture? a. Contrast b. Repetition c. Alignment d. Proximity alt, inc © 2007
  • 43. Design instruction using good visuals How do they learning theory Cognitive think ?  Dual Channels  Visual Channel  Auditory Channel You can only think one thought at a time. alt, inc © 2007
  • 44. Design instruction using visuals in the learning zone Managing cognitive load Learning occurs by active processing in the memory system. alt, inc © 2007
  • 45. Design instruction using visuals in the learning zone X O O X X alt, inc © 2007
  • 46. Design instruction using visuals in the learning zone 1 2 3 4 5 6 7 8 9 alt, inc © 2007
  • 47. Design instruction using visuals in the learning zone alt, inc © 2007
  • 48. Design instruction using visuals in the learning zone These are rail workers fixing a problem in the rail line. alt, inc © 2007
  • 49. Design instruction using visuals in the learning zone Rail workers fixing problem alt, inc © 2007
  • 50. Design instruction using visuals in the learning zone Text for good graphics Less is More alt, inc © 2007
  • 51. Design instruction using visuals in the learning zone Fonts g g sans shérif shérif alt, inc © 2007
  • 52. Design instruction using visuals in the learning zone On screens use sans shérif fonts Arial Verdana Tahoma….etc. alt, inc © 2007
  • 53. Design instruction using visuals in the learning zone In print use shérif fonts Times New Roman Garamond Arno Pro….etc. alt, inc © 2007
  • 54. Design instruction using visuals in the learning zone Why ARE YOU Using Capital Letters? CAN YA HEAR ME NOW…… alt, inc © 2007
  • 55. 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
  • 56. Design instruction using visuals in the learning zone Readability is key alt, inc © 2007
  • 57. Design instruction using visuals in the learning zone Managing cognitive load Learners have a limited amount of capacity alt, inc © 2007
  • 58. Design instruction using visuals in the learning zone Chunking Social Security Phone number w/o chunking: w/o chunking: 198603895 2156743377 Social Security Phone number with chunking: with chunking: 198-60- 215-674-3377 3895 alt, inc © 2007
  • 59. Design instruction using visuals in the learning zone Chunking 7 + or - 2 alt, inc © 2007
  • 60. Design instruction using visuals In 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
  • 61. Design instruction using visuals In the learning zone Power Points alt, inc © 2007
  • 62. Design instruction using visuals in 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
  • 63. US Department of Transportat Federal Transit Administrati Click to edit Master text styles What is wrong with this ? B U D G E T A N D P O L I C Y alt, inc © 2007
  • 64. alt, inc © 2007
  • 65. Design instruction using visuals in the learning zone White Space is Power alt, inc © 2007
  • 66. Design instruction using visuals in the learning zone Colo r Color can affect mood  Can’t distinguish red from green; second blue from brown  One in every 12 men & 65 women report color blindness alt, inc © 2007
  • 67. Design instruction using visuals in the learning zone No more than two primary colors on a screen Watch color families and feelings Watch cognitive load alt, inc © 2007
  • 68. Design instruction using visuals in the learning zone Structuring Information The Grid © Clair Boger alt, inc © 2007
  • 69. alt, inc © 2007
  • 70. alt, inc © 2007
  • 71. 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). KGA 1 Final Logo Design Based on your site map, create a series of Click to download an optional Wireframe template with wireframes that describe the functional layers for each page. (Illustrator file, 732 KB). 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
  • 72. Design instruction using visuals in the learning zone Summary Let’s reflect on what you have learned? alt, inc © 2007
  • 73. Thank You You have completed: alt, inc © 2007

Editor's Notes

  1. Neuro Associative Pathways …or NAPS…The hooks
  2. The context of an event, word, paradigm, change or other reality includes the circumstances and conditions which surround it (Wikipedia The set of circumstances or facts that surround a particular event, situation, etc. ( dictionary.com)
  3. Your turn…let’s take a minute for you to reflect on what we have just gone over.
  4. Now….Let’s start with some basics on how to create good programs using visuals First let’s take a look at good visuals for learning…which means good slide design Almost 85% of the your learners will have visual as their predominate learning style The most important concept with slide design is to understand that the learner takes the entire image in at once. So look at the entire page. Remember CONTENT is KING. We read from left to right, so your content should be on the left so that learners can read it naturally…………….. left-to-right, top-to-bottom
  5. Mixing fantasy and reality…Sesame Street and Blues Clues, what are distracters …like humor….what are enhancers like repetition…Malcolm Galdwell…Blink and Tipping Point
  6. In order to produce slides that look good and are efficient for learning …you need to get a handle on The four elements of basic design: Contrast, Repetition, Alignment and Proximity Let’s look at each one of these to learn how you will use them in our project.
  7. What is contrast? The first element of design is contrast. Contrast is: Variety, size, color, shape, emphasis Why Contrast so important ?....Because… Contrast is what brings your eyes to a page. Cause you to notice and focus…pay attention Here is some advice on creating contrast: When using contrast If you are making it different make it very different……or keep it the same. You should create a focal point and distinguish it from the rest of the page.
  8. You don’t need more than one major and one or two minor focal points per slide. You should always …….Keep it simple. Very simple. BB: Examples of each….different very different…. …focal point…one major and two minor focal points……..simple but effective BB: Great graphic of contrast….maybe 3 or 4 examples…big little…light dark….round square…….loud soft….bring words in one at a time….always have CONTRAST up on screen…
  9. The second element of basic design is …….Repetition What is repetition? Repetition is: Consistency, rhythm, patterns Why is repetition important? Because……Repetition reinforces the ideas. sets the stage….. gives the presentation consistency….provides cognitive reinforcement in the mind of the learner Here is some Advice for using Repetition: When you are using repetition you should Repeat things that tie the slide together. Each slide should look like it belongs to the same module of instruction. Use unifying identifiers. (ie….logo…branding…same fonts…similar layouts.) Always remember……You do not want to make the learner think about the design of the slide. BB: Examples of each….bullet points….template….logo….placement
  10. Alignment is the third element of good design. What is alignment? Alignment is: Symmetry, asymmetry, positions, positive and negative, white space, balance Why alignment so important? Alignment makes it easier for the learner to take it in. Now let’s look at some advise for using alignment : When you use alignment…… Choose one alignment and use it on the entire page. People read from left to right in this culture so Do NO center text. When in doubt left align! Consider the alignment of both text and graphics. Do not mix alignments unless you have a very good reason to do so. Consider both vertical and horizontal alignments. Use mirrors. Which means to occasionally flip the graphics and text to cognitively wake people up. Always remember that the slide goes into the mind of the learner as one image….clean, neat and simple alignment is best. BB: examples of each…..Show a graphic with left alignment..,…graphics and text alignment….etc…for each bullet.
  11. The fourth (and final) element of good design is proximity. What is proximity? Proximity is: Unity, harmony, scale, balance Why is proximity important? Because……Like relates to like….cognitive links are created when things are grouped together. Here is some advice for creating proximity: You should ……. Group or cluster like items together. Group things according to their meaning or what is being communicated Try to establish relationships between items. If the items go together keep them close together. Do not make the learner guess. Always make it easy for the learner to look at and understand where things are.
  12. Now let’s look at some other principles that will help you create a good learning visuals Always put your learners first…..it’s not only what you have to say that is important….it is what you can get them to take in and remember that drives the learning Make your content easy to understand…. You want to position your materials so that you give your learners the greatest chance to take in the information you are presenting You also want to minimize the text on screen…..This also minimizes cognitive load. Cognitive Load is a term that refers to the load on working memory during problem solving, thinking and reasoning. This includes perception, memory, and language, The term was coined by Sweller in 1988 . Cognitive load is determined by the amount of information passed to visual auditory parts of working memory. There has been a great deal of research done on learning and cognitive load...but here is the bottom line......less is more.....MINIMZE cognitive load... A very good place to start is with text that is easy to read….so
  13. Gagne, ARCS Gagne: Gain attention Inform of Objectives Review Prerequisites Present Stimuli Provide Guidance Elicit Performance Provide Feed Back Assess Preformance Retention and Transfer One instructional design model that works well is called ARCS. The Attention, Relevance, Confidence, Satisfaction or ARCS model can help you create quality instruction. The Four parts of ARCS are: Attention…you want to raise the level of interest of the learner. Relevance….you want answer the question “What is in it for me?,,,,, for the learner….adult learners have a need to know Why. Confidence…. you want learners to gain confidence in applying what they learn Satisfaction….you want the learners to feel like they have become more competent……. and the investment of their time was worth it. Remember…..feelings are powerful… Here are some examples on why and how to follow the ARCS model…
  14. This is worth saying again….. Minimize the text on screen! People do not read screens. Here is some advice on text size and font style You should….. Use sans shérif fonts. (Arial, Verdana, Tahoma….etc.) Use 32 to 44 point for titles. Chose a size for each level of text and bullets, and be consistent. The size of the text should not be smaller than 20 for body text. Do Not use red or green text. One in four people is color blind. They will have difficulty seeing it. View your slides at 75% as you develop Always run a spelling and grammar check.
  15. Another very important concept in creating your Presenter program we have already mentioned but now lets talk about it In more detail…..you want to Minimize cognitive load…. How do you minimize cognitive load for you learners? One way is through a process called chunking…. There are many theories about how to group, segment, sequence and structure information for training and learning. Most of the theories today that deal with module construction are concerned with working memory. This part of your memory is the part that retains information while you work with it. Probably the most important discovery so far came from Miller in1956. Miller determined that working memory has two very important characteristics: 1. It screens information as it comes into it 2. It has a limited capacity and duration What does this mean to you when creating good graphics for learning? It’s SIMPLE If you make it to long, confusing or difficult, the learner will disregard the information. You can retain the information in working memory by repeating it, over and over. Transferring the information to long term memory can be achieved by rehearsal or by connecting it with information already there.
  16. Without rehearsal, working memory can hold ONLY 5 to 9 items for no more than 10 to 20 seconds. Miller said working memories most important characteristic is that it is limited. One way to increase working memory is to CHUNK the information. Chunking is another name for grouping. Another way is to have mental task that can be preformed automatically or with out thinking about them. The more the learner has to think about what they are learning the smaller, more meaningful and shorter the chunks should be. What does this mean? Learners shouldn’t be thinking about lower level skills while trying to learn new ones, these should be automatic. Include in each module learning aides, visual and auditory, that support the learning. Engage the learner in high levels of interaction. Ask questions. The objective is to get the knowledge into long term memory. The storage capacity in long term memory is vast. Although it needs to be organized in different ways for different learns to be able to retrieve it. You may want to use different techniques depending on you content. BB: again maybe the Clark picture and just stuff it with information…like over stuff it….and/or have it move in and fall out
  17. So how do you chunk…..your content? If your content is based on facts definitions, procedures and rules include: Linear ordering Images and visuals Graphic Organizers Charts Small declarative statements that can be recognized as either true or false, right away by the learner. Tables Drawings Illustrations Maps Tables If your content is based on “how to” perform activities be sure to situate it in context. “ How to do things” requires situating in realistic settings. Provide situations where the learner must adapt to changing conditions. Start simple with basic knowledge. Group the modules to allow the learner to combine steps and perform. Associate skill mastery with performance without much conscious though. Here is some good advice: Short is usually better than long. Combine and group things logically. Make sure you present the basic information first. Remember each module must: Keep the learners attention Provide a meaningful learning experience. Make learning possible. BB: We need good examples of each
  18. 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
  19. Another important aspect of good nter design is screen layout: Remember content is king and in Western cultures… learners read left to right and top to bottom. But where are the power positions or focal points on the screen? How do you know where to put the really important stuff? There happens to be a principle that photographers and painter know about….it is called The Law of Thirds The Law of Thirds says The most important and powerful points on any screen are one third down and one third in from either side. The eyes moves from top left to bottom right.
  20. Now let’s look at some other principles that will help you create a good Presenter program: Always put your learners first…..it’s not only what you have to say that is important….it is what you can get them to take in and remember that drives the learning Make your content easy to understand…. You want to position your materials so that you give your learners the greatest chance to take in the information you are presenting You also want to minimize the text on screen…..This also minimizes cognitive load. Cognitive Load is a term that refers to the load on working memory during problem solving, thinking and reasoning. This includes perception, memory, and language, The term was coined by Sweller in 1988 . Cognitive load is determined by the amount of information passed to visual auditory parts of working memeory. There has been a great deal of research done on learning and cognitive load...but here is the bottom line......less is more.....MINIMZE cognitive load... A very good place to start is with text that is easy to read….so
  21. One of the biggest mistakes that beginners make is that they forget to: Remember the white space. So ……What is white space? White space is the area around what you have on the page. White space sets your page. White space can create emphasis, White space gives the leaner a cognitive rest. White space separates things. White space can announce and define White space does not have to be white, it is meant as “blank space”. Always remember that white space can make or break a screen…….don’t forget that white space is part of the total image. BB: 3 or 4 examples of white space
  22. Psychology of Color (http://www.infoplease.com/spot/colors1.html)
  23. Purple The color of royalty, purple connotes luxury, wealth, and sophistication. It is also feminine and romantic. However, because it is rare in nature, purple can appear artificial. Brown Solid, reliable brown is the color of earth and is abundant in nature. Light brown implies genuineness while dark brown is similar to wood or leather. Brown can also be sad and wistful. Men are more apt to say brown is one of their favorite colors. .