Pattern recognition is an essential human mental process for acquiring and sharing knowledge. While unconscious for most people, conscious use of pattern recognition can help UX designers develop more effective user experiences efficiently. The presentation discusses how pattern recognition works in both bottom-up and top-down ways. It provides advice on applying pattern recognition to make sense of new subjects, group UI elements, and help users navigate interfaces. The key messages are that pattern recognition is context dependent and some patterns are difficult to recognize, so the process requires balancing bottom-up exploration with top-down expectations.
1. PATTERN RECOGNITION
IN USER EXPERIENCE
Kai Weber
@techwriterkai
UX camp CPH, 13 April 2013
2. 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
3. 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
12. WHAT IS PATTERN RECOGNITION?
http://livinglifewithchemobrain.blogspot.com/2011/03/apparitions-on-toast.html
Search the web for
“apparitions on toast”
for more examples…
13. WHAT IS PATTERN RECOGNITION?
Part of human perception:
1. Receive sensation and organize it.
14. WHAT IS PATTERN RECOGNITION?
Part of human perception:
1. Receive sensation and organize it.
2. Recognize patterns.
15. 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.
17. 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.
18. 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.
19. 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.
22. WHY SHOULD UX PEOPLE CARE?
We do it anyway…
1. When we gather information
Reading specs and designs
Interviewing subject-matter experts
23. 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
24. WHY SHOULD UX PEOPLE CARE?
We do it anyway, so we might as well do it smartly!
25. 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!
27. 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
28. 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
29. 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
30. 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
31. 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
32. 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
33. 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
38. 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.
39. HOW DOES PATTERN RECOGNITION WORK?
What is this? How do you know?
40. HOW DOES PATTERN RECOGNITION WORK?
What is this? How do you know?
41. 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”.
42. 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
43. 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
44. 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
45. 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
46. 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
47. 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
51. FINAL WORDS OF ADVICE AND WARNING
Patternicity: Humans are addicted to meaning.
52. FINAL WORDS OF ADVICE AND WARNING
Patternicity: Humans are addicted to meaning.
Some patterns refuse to be recognized.
53. FINAL WORDS OF ADVICE AND WARNING
Patternicity: Humans are addicted to meaning.
Some patterns refuse to be recognized.
Pattern recognition occurs in contexts.
54. 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!