PATTERN RECOGNITION
 IN USER EXPERIENCE

         Kai Weber
       @techwriterkai
 UX camp CPH, 13 April 2013
ABSTRACT
Pattern recognition is an essential mental strategy for acquiring
and disseminating knowledge, though most of us are not aware
of it. When applied consciously, UX designers can employ
pattern recognition processes to develop effective user
experiences more efficiently and help users orient themselves.

The presentation is a fun whirlwind tour through human
perception and shows how you can apply pattern recognition to:
- Make sense of unknown subject matter before you design
- Overcome "designer’s block" and start designing
- Group UI elements
- Help users to navigate and understand
PROGRAM
1. Who am I and what do I know?

2. What is pattern recognition?

3. Why should UX people care?

4. The pattern recognition experience

5. Pattern recognition in UX
WHO AM I AND WHAT DO I KNOW?
WHO AM I AND WHAT DO I KNOW?
WHO AM I AND WHAT DO I KNOW?
WHO AM I AND WHAT DO I KNOW?
WHO AM I AND WHAT DO I KNOW?
WHO AM I AND WHAT DO I KNOW?
WHAT IS PATTERN RECOGNITION?
http://livinglifewithchemobrain.blogspot.com/2011/03/apparitions-on-toast.html




                                                                                 WHAT IS PATTERN RECOGNITION?
WHAT IS PATTERN RECOGNITION?
http://livinglifewithchemobrain.blogspot.com/2011/03/apparitions-on-toast.html




                                                                                                        Search the web for
                                                                                                        “apparitions on toast”
                                                                                                        for more examples…
WHAT IS PATTERN RECOGNITION?
Part of human perception:

1. Receive sensation and organize it.
WHAT IS PATTERN RECOGNITION?
Part of human perception:

1. Receive sensation and organize it.

2. Recognize patterns.
WHAT IS PATTERN RECOGNITION?
Part of human perception:

1. Receive sensation and organize it.

2. Recognize patterns.

3. Formalize patterns as rules to interpret and decide.
HOW ABOUT AN EXAMPLE?
HOW ABOUT AN EXAMPLE?
 Aardvark, J.R. (1980). Ants, and how to eat them.
    Journal of Orycteropodidae Studies, 80, 11-17.
 Barker, R. (1982). Rum babas, and what to do if you’ve got them.
    Reading: Goodnight From Him.
 Haley, W. (1955). Rock Around The Clock. New York: Decca.
 Izzard, E. (1998). Cake or Death? Gateaunomics, 10, 195-196.
 Lemur, R.-T. (2010). Strepsirrhinoplasty. Antananarivo: Raft Press.
 Leonard, E. (1996). Out of Sight. New York: Harper.
 Shorty, G. (in press). Okay, so they got me. Los Angeles: Cadillac.
HOW ABOUT AN EXAMPLE?
  Aardvark, J.R. (1980). Ants, and how to eat them.
    Journal of Orycteropodidae Studies, 80, 11-17.
  Barker, R. (1982). Rum babas, and what to do if you’ve got them.
    Reading: Goodnight From Him. …


Rule set
1. Last name, initial(s). (Year of publication).
2. If it’s an article: Title, journal title, volume, pages.
3. If it’s a book: Title. City: Publisher.
HOW ABOUT AN EXAMPLE?
  Aardvark, J.R. (1980). Ants, and how to eat them.
    Journal of Orycteropodidae Studies, 80, 11-17.
  Barker, R. (1982). Rum babas, and what to do if you’ve got them.
    Reading: Goodnight From Him. …


Rule set
1. Last name, initial(s). (Year of publication).
2. If it’s an article: Title, journal title, volume, pages.
3. If it’s a book: Title. City: Publisher.

We learn patterns by examples – or by rules.
WHY SHOULD UX PEOPLE CARE?
WHY SHOULD UX PEOPLE CARE?
We do it anyway…
WHY SHOULD UX PEOPLE CARE?
We do it anyway…

1. When we gather information
      Reading specs and designs
      Interviewing subject-matter experts
WHY SHOULD UX PEOPLE CARE?
We do it anyway…

1. When we gather information
      Reading specs and designs
      Interviewing subject-matter experts


2. When we design and order UI elements
      Create icons
      Design color schemes and shapes
WHY SHOULD UX PEOPLE CARE?
We do it anyway, so we might as well do it smartly!
WHY SHOULD UX PEOPLE CARE?
We do it anyway, so we might as well do it smartly!

   If we make sense of our subject more efficiently…

   If we structure UI elements better…

   … we can provide better user experiences!
THE PATTERN RECOGNITION EXPERIENCE
THE PATTERN RECOGNITION EXPERIENCE IN SPACE




Photo by Santiago Masquelet       Photo by Jure Šućur
http://www.sxc.hu/photo/1001312   http://www.sxc.hu/photo/784032
THE PATTERN RECOGNITION EXPERIENCE IN SPACE
                         d
        *        d d
               d




                                    t
       *     *   d dd
            * ** d



                         t
                          t t t
            * * * d

                           t t
                            t
             t   t t          t t
              t      t
            t     t
   t           t
                    t           t
        t
THE PATTERN RECOGNITION EXPERIENCE IN SPACE
                         d
        *        d d
               d




                                    t
       *     *   d dd
            * ** d



                         t
                          t t t
            * * * d

                           t t
                            t
             t   t t          t t
              t      t
            t     t
   t           t
                    t           t
        t
THE PATTERN RECOGNITION EXPERIENCE IN SPACE
                         d
        *        d d
               d




                                    t
       *     *   d dd
            * ** d



                         t
                          t t t
            * * * d

                           t t
                            t
             t   t t          t t
              t      t
            t     t
   t           t
                    t           t
        t
THE PATTERN RECOGNITION EXPERIENCE IN SPACE
                         d
        *        d d
               d




                                    t
       *     *   d dd
            * ** d



                         t
                          t t t
            * * * d

                           t t
                            t
             t   t t          t t
              t      t
            t     t
   t           t
                    t           t
        t
THE PATTERN RECOGNITION EXPERIENCE IN SPACE
                         d
        *        d d
               d




                                    t
       *     *   d dd
            * ** d



                         t
                          t t t
            * * * d

                           t t
                            t
             t   t t          t t
              t      t
            t     t
   t           t
                    t           t
        t
THE PATTERN RECOGNITION EXPERIENCE IN SPACE
                 Sharing     d
         *         d d
                 d




                                        t
        * *
File handling      d dd             Edit image
              * ** d



                             t
                              t t t
             * * * d

                               t t
                                t
                t    t t          t t
                  t      t
Edit text       t     t
     t             t
                        t           t
            t
THE PATTERN RECOGNITION EXPERIENCE IN TIME
THE PATTERN RECOGNITION EXPERIENCE IN TIME




                   Photo by Richard Cop
                   http://www.sxc.hu/photo/326144
THE PATTERN RECOGNITION EXPERIENCE IN TIME




   *     * * *    !
THE PATTERN RECOGNITION EXPERIENCE IN TIME




   *     *      *     *    *     *   !
HOW DOES PATTERN RECOGNITION WORK?
Bottom-up processing

1. Experience and organize
2. Match similarities
3. Segment into groups

… building up a representation from elements.
HOW DOES PATTERN RECOGNITION WORK?




         What is this? How do you know?
HOW DOES PATTERN RECOGNITION WORK?




         What is this? How do you know?
HOW DOES PATTERN RECOGNITION WORK?
Top-down processing

1. Know general concept and rules
2. Contextualize them
3. Apply them

… searching for confirmation by “template matching”.
HOW DOES PATTERN RECOGNITION WORK?
Bottom-up                       Top-down

   No prior knowledge             Uses prior knowledge

   Elements  concepts            Concepts  elements

   Emphasizes relations           Emphasizes context

   Slow, but usually correct      Quick, but sometimes wrong
HOW DOES PATTERN RECOGNITION WORK?




                                       What is this? How do you know?




Martin Boyce:
Untitled, 2002.
http://www.mmk-frankfurt.de/de/sammlung/
werkdetailseite/?werk=2002%2F112
HOW DOES PATTERN RECOGNITION WORK?




                                       What is this? It’s part…




Martin Boyce:
Untitled, 2002.
http://www.mmk-frankfurt.de/de/sammlung/
werkdetailseite/?werk=2002%2F112
HOW DOES PATTERN RECOGNITION WORK?




                                       What is this? It’s part of a chair!




Martin Boyce:
Untitled, 2002.
http://www.mmk-frankfurt.de/de/sammlung/
werkdetailseite/?werk=2002%2F112
HOW DOES PATTERN RECOGNITION WORK?




Martin Boyce:                              Arne Jacobsen:
Untitled, 2002.                            Chair 3107, c.1952.
http://www.mmk-frankfurt.de/de/sammlung/   http://www.moma.org/explore/collection/index
werkdetailseite/?werk=2002%2F112
HOW DOES PATTERN RECOGNITION WORK?
Bottom-up                       Top-down

   No prior knowledge             Uses prior knowledge

   Elements  concepts            Concepts  elements

   Emphasizes relations           Emphasizes context

   Slow, but usually correct      Quick, but sometimes wrong
PATTERN RECOGNITION IN UX
PATTERN RECOGNITION IN UX
   To make sense of unknown subject matter

   To group UI elements

   To help your users navigate and understand
FINAL WORDS OF ADVICE AND WARNING
FINAL WORDS OF ADVICE AND WARNING
   Patternicity: Humans are addicted to meaning.
FINAL WORDS OF ADVICE AND WARNING
   Patternicity: Humans are addicted to meaning.

   Some patterns refuse to be recognized.
FINAL WORDS OF ADVICE AND WARNING
   Patternicity: Humans are addicted to meaning.

   Some patterns refuse to be recognized.

   Pattern recognition occurs in contexts.
FINAL WORDS OF ADVICE AND WARNING
   Patternicity: Humans are addicted to meaning.

   Some patterns refuse to be recognized

   Pattern recognition occurs in contexts

   Creating UX is often a bottom-up process …
   ... but using it is often top-down exploration!
QUESTIONS? COMMENTS?
THANK YOU! KEEP IN TOUCH!




@techwriterkai




                            kaiweber.wordpress.com

Pattern recognition for UX - 13 April 2013

  • 1.
    PATTERN RECOGNITION INUSER EXPERIENCE Kai Weber @techwriterkai UX camp CPH, 13 April 2013
  • 2.
    ABSTRACT Pattern recognition isan essential mental strategy for acquiring and disseminating knowledge, though most of us are not aware of it. When applied consciously, UX designers can employ pattern recognition processes to develop effective user experiences more efficiently and help users orient themselves. The presentation is a fun whirlwind tour through human perception and shows how you can apply pattern recognition to: - Make sense of unknown subject matter before you design - Overcome "designer’s block" and start designing - Group UI elements - Help users to navigate and understand
  • 3.
    PROGRAM 1. Who amI and what do I know? 2. What is pattern recognition? 3. Why should UX people care? 4. The pattern recognition experience 5. Pattern recognition in UX
  • 4.
    WHO AM IAND WHAT DO I KNOW?
  • 5.
    WHO AM IAND WHAT DO I KNOW?
  • 6.
    WHO AM IAND WHAT DO I KNOW?
  • 7.
    WHO AM IAND WHAT DO I KNOW?
  • 8.
    WHO AM IAND WHAT DO I KNOW?
  • 9.
    WHO AM IAND WHAT DO I KNOW?
  • 10.
    WHAT IS PATTERNRECOGNITION?
  • 11.
  • 12.
    WHAT IS PATTERNRECOGNITION? http://livinglifewithchemobrain.blogspot.com/2011/03/apparitions-on-toast.html Search the web for “apparitions on toast” for more examples…
  • 13.
    WHAT IS PATTERNRECOGNITION? Part of human perception: 1. Receive sensation and organize it.
  • 14.
    WHAT IS PATTERNRECOGNITION? Part of human perception: 1. Receive sensation and organize it. 2. Recognize patterns.
  • 15.
    WHAT IS PATTERNRECOGNITION? Part of human perception: 1. Receive sensation and organize it. 2. Recognize patterns. 3. Formalize patterns as rules to interpret and decide.
  • 16.
    HOW ABOUT ANEXAMPLE?
  • 17.
    HOW ABOUT ANEXAMPLE? Aardvark, J.R. (1980). Ants, and how to eat them. Journal of Orycteropodidae Studies, 80, 11-17. Barker, R. (1982). Rum babas, and what to do if you’ve got them. Reading: Goodnight From Him. Haley, W. (1955). Rock Around The Clock. New York: Decca. Izzard, E. (1998). Cake or Death? Gateaunomics, 10, 195-196. Lemur, R.-T. (2010). Strepsirrhinoplasty. Antananarivo: Raft Press. Leonard, E. (1996). Out of Sight. New York: Harper. Shorty, G. (in press). Okay, so they got me. Los Angeles: Cadillac.
  • 18.
    HOW ABOUT ANEXAMPLE? Aardvark, J.R. (1980). Ants, and how to eat them. Journal of Orycteropodidae Studies, 80, 11-17. Barker, R. (1982). Rum babas, and what to do if you’ve got them. Reading: Goodnight From Him. … Rule set 1. Last name, initial(s). (Year of publication). 2. If it’s an article: Title, journal title, volume, pages. 3. If it’s a book: Title. City: Publisher.
  • 19.
    HOW ABOUT ANEXAMPLE? Aardvark, J.R. (1980). Ants, and how to eat them. Journal of Orycteropodidae Studies, 80, 11-17. Barker, R. (1982). Rum babas, and what to do if you’ve got them. Reading: Goodnight From Him. … Rule set 1. Last name, initial(s). (Year of publication). 2. If it’s an article: Title, journal title, volume, pages. 3. If it’s a book: Title. City: Publisher. We learn patterns by examples – or by rules.
  • 20.
    WHY SHOULD UXPEOPLE CARE?
  • 21.
    WHY SHOULD UXPEOPLE CARE? We do it anyway…
  • 22.
    WHY SHOULD UXPEOPLE CARE? We do it anyway… 1. When we gather information  Reading specs and designs  Interviewing subject-matter experts
  • 23.
    WHY SHOULD UXPEOPLE CARE? We do it anyway… 1. When we gather information  Reading specs and designs  Interviewing subject-matter experts 2. When we design and order UI elements  Create icons  Design color schemes and shapes
  • 24.
    WHY SHOULD UXPEOPLE CARE? We do it anyway, so we might as well do it smartly!
  • 25.
    WHY SHOULD UXPEOPLE CARE? We do it anyway, so we might as well do it smartly!  If we make sense of our subject more efficiently…  If we structure UI elements better…  … we can provide better user experiences!
  • 26.
  • 27.
    THE PATTERN RECOGNITIONEXPERIENCE IN SPACE Photo by Santiago Masquelet Photo by Jure Šućur http://www.sxc.hu/photo/1001312 http://www.sxc.hu/photo/784032
  • 28.
    THE PATTERN RECOGNITIONEXPERIENCE IN SPACE d * d d d t * * d dd * ** d t t t t * * * d t t t t t t t t t t t t t t t t t
  • 29.
    THE PATTERN RECOGNITIONEXPERIENCE IN SPACE d * d d d t * * d dd * ** d t t t t * * * d t t t t t t t t t t t t t t t t t
  • 30.
    THE PATTERN RECOGNITIONEXPERIENCE IN SPACE d * d d d t * * d dd * ** d t t t t * * * d t t t t t t t t t t t t t t t t t
  • 31.
    THE PATTERN RECOGNITIONEXPERIENCE IN SPACE d * d d d t * * d dd * ** d t t t t * * * d t t t t t t t t t t t t t t t t t
  • 32.
    THE PATTERN RECOGNITIONEXPERIENCE IN SPACE d * d d d t * * d dd * ** d t t t t * * * d t t t t t t t t t t t t t t t t t
  • 33.
    THE PATTERN RECOGNITIONEXPERIENCE IN SPACE Sharing d * d d d t * * File handling d dd Edit image * ** d t t t t * * * d t t t t t t t t t t Edit text t t t t t t t
  • 34.
    THE PATTERN RECOGNITIONEXPERIENCE IN TIME
  • 35.
    THE PATTERN RECOGNITIONEXPERIENCE IN TIME Photo by Richard Cop http://www.sxc.hu/photo/326144
  • 36.
    THE PATTERN RECOGNITIONEXPERIENCE IN TIME * * * * !
  • 37.
    THE PATTERN RECOGNITIONEXPERIENCE IN TIME * * * * * * !
  • 38.
    HOW DOES PATTERNRECOGNITION WORK? Bottom-up processing 1. Experience and organize 2. Match similarities 3. Segment into groups … building up a representation from elements.
  • 39.
    HOW DOES PATTERNRECOGNITION WORK? What is this? How do you know?
  • 40.
    HOW DOES PATTERNRECOGNITION WORK? What is this? How do you know?
  • 41.
    HOW DOES PATTERNRECOGNITION WORK? Top-down processing 1. Know general concept and rules 2. Contextualize them 3. Apply them … searching for confirmation by “template matching”.
  • 42.
    HOW DOES PATTERNRECOGNITION WORK? Bottom-up Top-down  No prior knowledge  Uses prior knowledge  Elements  concepts  Concepts  elements  Emphasizes relations  Emphasizes context  Slow, but usually correct  Quick, but sometimes wrong
  • 43.
    HOW DOES PATTERNRECOGNITION WORK? What is this? How do you know? Martin Boyce: Untitled, 2002. http://www.mmk-frankfurt.de/de/sammlung/ werkdetailseite/?werk=2002%2F112
  • 44.
    HOW DOES PATTERNRECOGNITION WORK? What is this? It’s part… Martin Boyce: Untitled, 2002. http://www.mmk-frankfurt.de/de/sammlung/ werkdetailseite/?werk=2002%2F112
  • 45.
    HOW DOES PATTERNRECOGNITION WORK? What is this? It’s part of a chair! Martin Boyce: Untitled, 2002. http://www.mmk-frankfurt.de/de/sammlung/ werkdetailseite/?werk=2002%2F112
  • 46.
    HOW DOES PATTERNRECOGNITION WORK? Martin Boyce: Arne Jacobsen: Untitled, 2002. Chair 3107, c.1952. http://www.mmk-frankfurt.de/de/sammlung/ http://www.moma.org/explore/collection/index werkdetailseite/?werk=2002%2F112
  • 47.
    HOW DOES PATTERNRECOGNITION WORK? Bottom-up Top-down  No prior knowledge  Uses prior knowledge  Elements  concepts  Concepts  elements  Emphasizes relations  Emphasizes context  Slow, but usually correct  Quick, but sometimes wrong
  • 48.
  • 49.
    PATTERN RECOGNITION INUX  To make sense of unknown subject matter  To group UI elements  To help your users navigate and understand
  • 50.
    FINAL WORDS OFADVICE AND WARNING
  • 51.
    FINAL WORDS OFADVICE AND WARNING  Patternicity: Humans are addicted to meaning.
  • 52.
    FINAL WORDS OFADVICE AND WARNING  Patternicity: Humans are addicted to meaning.  Some patterns refuse to be recognized.
  • 53.
    FINAL WORDS OFADVICE AND WARNING  Patternicity: Humans are addicted to meaning.  Some patterns refuse to be recognized.  Pattern recognition occurs in contexts.
  • 54.
    FINAL WORDS OFADVICE AND WARNING  Patternicity: Humans are addicted to meaning.  Some patterns refuse to be recognized  Pattern recognition occurs in contexts  Creating UX is often a bottom-up process …  ... but using it is often top-down exploration!
  • 55.
  • 56.
    THANK YOU! KEEPIN TOUCH! @techwriterkai kaiweber.wordpress.com