pattern recognition for ux - 13 april 2013

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?

WHAT IS PATTERN RECOGNITION?


htt

p:/

/liv

inglif

ew

ith

che

mobra

in.b

logsp

ot.

co

m/2

011/0

3/a

pparition

s-o

n-t

oast.

htm

l

http://www.imaginaryfoundation.com/index.php?pagemode=detail&type=Mens Sale&uid=E56E57


http://livinglifewithchemobrain.blogspot.com/2011/03/apparitions-on-toast.html






htt

p:/

/liv

inglif

ew

ith

che

mobra

in.b

logsp

ot.

co

m/2

011/0

3/a

pparition

s-o

n-t

oast.

htm

l

Search the web for

“apparitions on toast”

for more examples…









Part of human perception:

1. Receive sensation and organize it.




2. Recognize patterns.




2. Recognize patterns.

3. Formalize patterns as rules to interpret and decide.

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.





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.





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?


We do it anyway…


We do it anyway…

1. When we gather information

Reading specs and designs

Interviewing subject-matter experts


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


We do it anyway, so we might as well do it smartly!


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

http://www.sxc.hu/photo/1001312



* d

* d d

* * t t

* * *

d d

d

d d

t

t

t t

t

t

t

t

t

t t

t t

t t t

t

t

t

*

* d

t


* d

* d d

* * t t

* * *

d d

d

d d

t

t

t t

t

t

t

t

t

t t

t t

t t t

t

t

t

Sharing

File handling Edit image

Edit text

*

* d

t

THE PATTERN RECOGNITION EXPERIENCE IN TIME


Photo by Richard Cop




* * * ! *


* * * ! * * *

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.


What is this? How do you know?


Top-down processing

1. Know general concept and rules

2. Contextualize them

3. Apply them

… searching for confirmation by “template matching”.


Top-down

Uses prior knowledge

Concepts elements

Emphasizes context

Quick, but sometimes wrong

Bottom-up

No prior knowledge

Elements concepts

Emphasizes relations

Slow, but usually correct


Martin Boyce:

Untitled, 2002. http://www.mmk-frankfurt.de/de/sammlung/

werkdetailseite/?werk=2002%2F112

What is this? How do you know?

http://www.mmk-frankfurt.de/de/sammlung/werkdetailseite/?werk=2002/112






Martin Boyce:



What is this? It’s part…







Martin Boyce:



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







Martin Boyce:



Arne Jacobsen:

Chair 3107, c.1952. http://www.moma.org/explore/collection/index






http://www.moma.org/explore/collection/index

http://www.moma.org/explore/collection/index


Top-down

Uses prior knowledge

Concepts elements

Emphasizes context

Quick, but sometimes wrong

Bottom-up

No prior knowledge

Elements concepts

Emphasizes relations

Slow, but usually correct

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

Patternicity: Humans are addicted to meaning.




Some patterns refuse to be recognized.



Some patterns refuse to be recognized.

Pattern recognition occurs in contexts.



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!

kaiweber.wordpress.com

@techwriterkai

http://kaiweber.wordpress.com/

https://twitter.com/

pattern recognition for ux - 13 april 2013

Technology