This document discusses object-oriented user experience (OOUX) and how it can be applied to design modular, consistent digital experiences. It defines OOUX as starting by mapping the real-world objects that make up a user's mental model, which then informs the creation of digital modules and patterns. The document provides examples of how defining objects and their relationships early allows for more contextual navigation between instances of those objects. It advocates applying OOUX principles to simplify team structure, prioritize key features, and create a foundation for iterative design.

1. FUNDAMENTALS OF
OBJECT-ORIENTED UX

2. SOPHIA VOYCHEHOVSKI
#OOUX
@sophiaVUX

3. GAME TIME!
“Which site is responsive?”

10. RESPONSIVE DESIGN CHANGED
EVERYTHING

11. Simplify your team (be lean)
Simplify your design (modular design)
Iterate on fidelity,not functionality (Agile done right)
Make time for simple (UX waterfall / “double sprint zero”)
Prioritize Prioritization (“mobile-only” your MVP)

12. OOUX ≠ MODULAR DESIGN
OOUX informs MODULAR DESIGN

13. OBJECT:
“Performance”
MODULE:
“Calendar item”
MODULE:
“Landing Page tile”
MODULE:
“sidebar module”

14. OBJECT:
“Performance”
MODULE:
“Calendar item”
MODULE:
“Landing Page tile”
MODULE:
“sidebar module”
USER’S MENTAL MODEL
OF THE REAL WORLD: OOUX
DIGITAL REPRESENTATION
OF THE REAL WORLD: MODULAR DESIGN

15. WHAT HAPPENS WHEN A PATTERN
LIBRARY DOESN’T HAVE AN
OBJECT MODEL TO REPRESENT?

17. OOUX = SYSTEM DESIGN

18. MODULAR DESIGN =
REPRESENTING THE SYSTEM CONSISTENTLY

19. OBJECT
MODEL
MODULE/PATTERN
LIBRARY

20. WHAT IS OOUX?

21. OBJECT ORIENTED PROGRAMMING
A programming language model organized around objects rather than
"actions" and data rather than logic.

22. OBJECT ORIENTED PROGRAMMING
A programming language model organized around objects rather than
"actions" and data rather than logic.
UX
design

23. OBJECT ORIENTED PROGRAMMING
A programming language model organized around objects rather than
"actions" and data rather than logic.
UX
design
Data first. THEN logic. Objects first. Then procedures around objects.

24. THE PRACTICE OF OOUX…
1. Starts with defining the system of real-world objects that make up a
user’s mental model of the problem.
3. Ensures the anatomy of every object is mapped before sketching,
wireframes,interaction design,or visual design begins.
5. Roots every interaction in a well-defined direct object.
6. The missing part of the UX process that defines the NOUNS in our
communication

25. COMMUNICATION =
NOUNS (OBJECTS)
VERBS (ACTIONS)
MODIFIERS (ADJECTIVES, ADVERBS)

26. OOUX IS NOT A NEW PROCESS,
IT’S A NEW PIECE OF YOUR PROCESS

27. Persistent Navigation
Task Flows and
Storyboards
Discovery/research
>
>
>
Page Layouts
Build/Test
>
THEN
pattern library

28. Persistent Navigation
Task Flows and
Storyboards
Discovery/research
>
>
>
Build/Test
>Object Oriented UX
NOW
pattern/module
library

29. OOUX IS FOR EVERYWHERE

30. WHAT IS AN “OBJECT”?
In the OOUX world…

31. OBJECTS
The tangible things that make up the system or the product,directly
derived from the user’s mental model of their problem domain.
Celebrity
image
bio
birthday
Event
location
image
date
Article
timestamp
author
body copy
• multiple instances (churned out by a CMS,API,or user-generated)
• metadata such as location,date,category
• Rule of thumb: they are what the user came for. The meat.

32. OBJECT INSTANCE
Real,unique content applied to the abstract/template system object.
Celebrity Celebrity Celebrity

33. OBJECTS ARE THE COOKIE CUTTERS

34. INSTANCES ARE THE COOKIES

35. THREE REASONS TO “GO OO”
HUMANS THINK IN OBJECTS
DESIGN MODULES FOR A SYSTEM, NOT FOR PAGES.
THE NAVIGATION IS YOUR FIRE ESCAPE.

36. REASON 1:
HUMANS THINK IN OBJECTS
(like all humans,not just developer-humans)

38. Lesson 1: The world is made of objects that are
separate from me.
Lesson 2: I can understand the world by
categorizing similar objects.
Lesson 3: Putting new objects in existing
categories VS creating a new category.
Lesson 4: Objects from various perspectives.
Lesson 5: Continued complexity of categorization,
labeling,and understanding of properties.
Causeandeffect
multistep
procedures

43. “the issue with objects is not about user interfaces or OO
programming,or anything to do with computers. It is about how
people perceive and act on the world. We—end users,everyone—
have evolved to deal with objects since the dawn of time.”
-Dave Collins,in Designing Object-Oriented User Interfaces,1995

44. Browse Compare Select Checkout
Products Orders Depts
Products
Depts
My
Orders

45. Heterarchies
Cross-linking
Spiderwebs
Hamburgered Navs
Homepage last
Cookie cutters
Module libraries,style
guides…and OOUX!
Hierarchies
Deep drill-downs
Tree-like sitemaps
Glorious Top Navs
Homepage first
Snowflakes
Verb focused
THEN NOW

46. REASON 2:
Consistency for efficiency and maintainability
Subtitle
REASON 2:
OOUX HELPS DESIGN MODULES FOR A SYSTEM,
NOT FOR PAGES.

47. NO MORE
SHAPER-SHIFTER MODULES!

48. Map view Grid view

49. Google Docs Google Drive

50. Homepage
Search results

51. Search results:
Less Map
Search results:
Mo’
Map+Flyout

59. TITLE
•Bullet points

60. TITLE
•Bullet points

61. Search
preview
Search Results
Connections
AxureWorld
Group page
Axure
Company
page

62. Axure
Company
page
Flyout on Axure Company Page

63. AN EASIER LIFE FOR ALL =
INTERGRITY MODULES

64. Fashion landing
page
homepage search results grid
Search results
list

65. Featured
Search preview,
search results,
“Design” landing
page

66. Art Basel’s Curated Page

67. Projects I’ve backed

68. Pledged $200 for
- The Woodieful Chair
- Personalized thank you
card
Est. Delivery August 2016
got
it!
2 messages
June 8, 2016 +
Only show projects
with unreceived perks

69. CUSTOM MODULES FOR CONTEXT:
INTENTIONAL, CONSERVATIVE, &
DEFINITELY NOT “MVP”

70. REASON 3:
THE NAVIGATION IS YOUR FIRE ESCAPE.

71. “…users are increasingly likely to bypass your
system’s top-down information architecture;
instead they are using web-wide search tools
like Google Search, clicking through ads, and
clicking links while reading your content via
social networks…”
4th edition Polar Bear book

72. CONTEXTUAL NAV
Crosslinking on crack. Navigation that transports the user via objects
modules nested within other objects modules and detail screens,
providing relevant entry points to more objects instances.
GLOBAL NAV
Navigation that transports to the user via a persistent,unchanging
mechanism.
The OG
your way
underrated new
bestie

73. FOUR TYPES OF OBJECTS ELEMENTS
CORE CONTENT
METADATA METADATA
CTA
NESTED
OBJECT
NESTED
OBJECT
NESTED
OBJECT
NESTED OBJ

74. MOVIE MOVIE MOVIE
CITY
IMG
NAME
FAN FAN FAN
NESTED OBJECTS = CONTEXTUAL NAV!

75. NESTED OBJECTS MATRIX
Let’s create some awesome contextual navigation

76. DEAD
METADATA
LIVE
METADATA
NESTED
OBJECT
Non-actionable,
does not take user
to a filtered list of
that object.
Examples: Date,
size,ratings
Actionable! Takes
user to a filtered
list of that object.
Examples: Author,
category,location
Live metadata that
is also an object,
part of the system
in it’s own right.
Examples: Author,
category,location

77. DEAD
METADATA
Non-actionable,
does not take user
to a filtered list of
that object.
Examples: Date,
size,ratings

78. METADATA NAV: TAKE ME TO A FILTERED LIST
Comedy
Movie detail: Wayne’s World
movie object
movie object
movie object
Movie list,filtered by Comedy
Comedy

79. WHAT IF GENRE IS AN OBJECT!? (UPGRADE!)
Comedy
Movie detail: Wayne’s World Genre Detail: Comedy
movie
object
movie
object
movie
object
movie
object

80. NESTED OBJECT NAV: TAKE ME TO ANOTHER OBJECT
Comedy
Movie detail: Wayne’s World
Mike Myers Dana Carvey
Profile detail: Dana Carvey
movie
object
movie
object
movie
object
movie
object

81. A WAY TO CHEAT AT THIS

82. lucy

83. lucy
movie

84. lucy
Actress
movie

85. lucy
news story
Actress
movie

88. NOW LET’S DO IT:
HOT SAUCERY
A destination for all things hot sauce: specialty blends,ingredients,and
expertise

89. STEP 1: Extract objects
STEP 2: Element audit
STEP 3: Object nesting
STEP 4: Forced ranking
STEP 5: CTA inventory
STEP 6: Sketching sprints
STEP 7: Prototyping
ORDER OF OPERATIONS

90. GOALS
• Drive visitors to each of our unique locations.
• Introduce,promote and sell our specialty hot sauces.
• Present our mixologists as the experts that they are!
Encourage a whole new generation to become hot sauce
mixologists.
• Help build appreciation and exemplify our expertise in the
art of hotsaucery through classes and workshops (online
and in store) as well as free online recipes.
• Teach about products we sell in the store,like specialty
ingredients,tools,and bottles.

91. GOALS
• Drive visitors to each of our unique locations.
• Introduce,promote and sell our specialty hot sauces.
• Present our mixologists as the experts that they are!
Encourage a whole new generation to become hot sauce
mixologists.
• Help build appreciation and exemplify our expertise in the
art of hotsaucery through classes and workshops (online
and in store) as well as free online recipes.
• Teach about products we sell in the store,like specialty
ingredients,tools,and bottles.

92. Locations Sauces
Mixologist
s
Ingredient
s/tools
Classes Recipes

93. Name
Street
image
Address
distance
from user
contact
info
inside
images
name
descriptio
n (why we
love it)
price
images
tag/
category
Name
descriptio
n
bottle $
shot
heat index
price
Name
bio
headshot
years with
us
twitter
handle
title
descriptio
n
price
type
(workshop
,ongoing
class)
date
time
Name
date
created
image
recipe
content
gallery of
sauce on
food
Locations Sauces
Mixologist
s
Ingredient
s/tools
Classes Recipes

94. Location Sauce
Mixologist
s
Ingredient
s/tools
Classes Recipes
Mixologist
that work
here
Classes
calendar
Mixologist
creator
Locations
available
at
Class that
teaches it
Mixologist
mentor
Sauces
created
ingredient
s/tools
loved
Classes
teaching
recipes
posted
Location
works at
Location
available
at
related
ingredient
s
Recipes
that
include
Ingredient
s/tools
provided
Recipes
taught
Mixologist
teacher
Sauce
(parent)
Ingredient
s/tools
needed
Classes
that
feature
Mixologist
author
Name
Street
image
Address
distance
from user
contact
info
inside
images
name
descriptio
n (why we
love it)
price
images
tag/
category
Name
descriptio
n
bottle $
shot
heat index
price
Name
bio
headshot
years with
us
twitter
handle
title
descriptio
n
price
type
(workshop
,ongoing
class)
date
time
Name
date
created
image
recipe
content
gallery of
sauce on
food
Location

95. Mixologist
that work
here
Classes
calendar
Mixologist
creator
Locations
available
at Class that
teaches it
Sauces
created
ingredient
s/tools
loved
Classes
teaching
recipes
posted
Location
works at
Locations
available
at
related
ingredient
s
Recipes
that
include
Ingredient
s/tools
provided
Recipes
taught
Mixologist
teacher
Sauce
(parent)
Ingredient
s/tools
needed
Classes
that
feature
Mixologist
author
Name
Street
image
Address
distance
from user
contact
info
inside
images
name
descriptio
n (why we
love it)
price
images
tag/
category
Name
descriptio
n
bottle $
shot
heat index
price
Name
bio
headshot
years with
us
twitter
handle
title
descriptio
n
price
type
(workshop
,ongoing
class)
date
time
Name
date
created
image
recipe
content
gallery of
sauce on
food
Location
Related
Recipes
Locations Sauces
Mixologist
s
Ingredient
s/tools
Classes Recipes

96. Location Sauce Mixologist
Ingredient
s/tools
Classes Recipes
Mixologist
creator
Location
works at
Locations
available
Mixologist
teacher
Sauce
(parent)
Ingredient
s/tools
Mixologist
author
Name
Street
image
Address
distance
from user
inside
images
name
descriptio
n (why we
love it)
price
images
tag/
category
Name
bottle $
shot
price
Name
headshot
years with
us
twitter
handle
title
type
(workshop
,ongoing
class)
date
time
Name
date
created
image
gallery of
sauce on
food
Location
Get
Direction
s
Buy
Share Share Share
Send
testimon
y
upvote?
Sign up/
register
invite
friends?
add to
box
print
shopping
list
Buy

97. MODULE DETAIL LIST

98. MODULE DETAIL LIST

99. Mixologist
creator
Locations
available
at Class that
teaches it
Name
descriptio
n
bottle $
shot
heat index
price
gallery of
sauce on
food
Share
upvote?
Buy

100. Mixologist
creator
Locations
available
at Class that
teaches it
Name
descriptio
n
bottle $ shot
heat index
price
gallery of
sauce on
food
Share
upvote?
Buy

101. Mixologist
creator
Class that
teaches it
Name
description
bottle $ shot
heat index
price
gallery of
sauce on
food
Share
upvote?
Buy
description
description
gallery of
sauce on
food
gallery of
sauce on
food
gallery of
sauce on
food
gallery of
sauce on
food
Locations available atLocations available atLocations available at

102. Mixologist
creator
Name
bottle $ shot
heat index
price
Mixologist
creator
Name
bottle $ shot
heat index
price
Mixologist
creator
Name
bottle $ shot
heat index
price
Mixologist
creator
Name
bottle $ shot
heat index
price
CHEAPEST FIRST
MILD HOT

103. Describes the meat
Dates,prices,location
Format/taxonomy rules
Need a specific
mechanism for sort/filter.
Could provide nav from
detail template to list!
The meat
Text strings and media
Maybe size restriction?
Could be keyword
searchable…
Does not provide nav from
detail template.
CORE CONTENT METADATA/FACETS

104. Thank you!
@SophiaVUX