Designing Object Oriented Experiences

OBJECT-ORIENTED UX
@UXLX
5.24.2016

1 Hour Lecture on OOUX / Discussion
Extract objects
Element audit
Object nesting
Forced ranking
CTA inventory
Sketching sprints
Prototyping!
AGENDA

SOPHIA VOYCHEHOVSKI
@sophiaVUX
sophia@rewiredUX.com

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)

GAME TIME!
“Which site is responsive?”

OOUX ≠ MODULAR DESIGN
OOUX informs MODULAR DESIGN

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

OBJECT:
“Performance”
MODULE:
“Calendar item”
MODULE:
MODULE:
USER’S MENTAL MODEL
OF THE REAL WORLD: OOUX

OBJECT:
“Performance”
MODULE:
“Calendar item”
MODULE:
MODULE:
USER’S MENTAL MODEL
OF THE REAL WORLD: OOUX
DIGITAL REPRESENTATION
OF THE REAL WORLD: MODULAR DESIGN

MODULAR DESIGN =
REPRESENTING THE SYSTEM CONSISTENTLY

OBJECT
MODEL
MODULE/PATTERN
LIBRARY

http://edn.embarcadero.com/article/29677

Object Oriented Programming
A programming language model organized around objects
rather than "actions" and data rather than logic.

Object Oriented UX
A design language model organized around objects
rather than "actions" and data rather than logic.

An OOUX (the thing)
A digital system that is intentionally organized around real-
world objects and their relationships.
Users can clearly identify objects and their relationships.
Navigation and interaction is intuitive because the digital
object system matches the users’ mental model of the
problem domain.

OOUX (the practice)
UX that focuses on designing a system of real-world objects
that align with with a user’s mental model of their particular
problem domain.
UX that puts object design before action design.
UX that acknowledges that the purpose of interaction
design is to provide a means for users to create, manipulate,
move, or find instances of objects.

Customers
Browse Compare Select Checkout
Products Orders Depts
Products
Depts
My
Orders

food
fridge
counter
back
splash
clutter
cooking
clean
cooking
food
oven
food
clean up
cutting
bake
milk
fire
utensil
microwave
fridge
sink
knife
fork
microwave
appliance
tomato
fridge
smells
smell
knife pot
pan
oven
stirring
fridge
sink
microwave
food food
oven
fork
spoon red
blender
creativity love
satisfaction
white
stove
cabinets
food food
cereal
toaster
coffee
maker
food
mixer
stove
fork plate
oven
fridge
oven
crumbs
taste
IKEA
fridge
cutting
board
clean
tile
copper
counter
mixer
cabinet
fork
beer
napkin
food
cooking
sink
table
counter
food
work
windows
sour
cream
mango

Shoes
Appalachi
an
fun
sweat?
cat
mountain
hill
calves
water
dogs
shoes
mountain
mountain
fun
pain
Switzerlan
d
northchildhood
nature
boots
shorts
goretex
boots
peace
mountain
mountain
trees
river
friends
boots
purple
trees
cliff
boots
dirt
fir trees
boots
ascent
shade
rocks
boots
view

1990S
We applied a
couple hundred
years of IA to the
web.
Taxonomies,
hierarchies,
categories inside
categories inside
categories… 
2000S
We start getting
popular. Because
$$$ is really
moving around on
the web.
Interaction
design, usability
testing, task flows
and user stories.
2010S
We freak because
now our designs
have to move
across devices.
Shit just got
complicated.
Responsive
design, modular
design, OOUX
IA HISTORY IN A NUTSHELL

A BETTER HISTORY LESSON
http://abbytheia.com/2014/09/27/euroia/

Heterarchies
Cross-linking
Spiderwebs
Hamburgered Navs
Homepage last
Cookie cutters
Objects first
Hierarchies
Deep drill-downs
Tree-like sitemaps
Glorious Top Navs
Homepage first
Snowflakes
Verb focused
THEN NOW

Persistent Navigation
Task Flows and
Storyboards
Discovery/research
>
>
>
Page Layouts
Build/Test
>
THEN

Task Flows and
Storyboards
Discovery/research
>
>
>
Page Layouts
Build/Test
>
THEN
pattern library

Task Flows and
Storyboards
Discovery/research
>
>
>
Build/Test
>
NOW

Task Flows and
Storyboards
Discovery/research
>
>
>
Build/Test
>Object Oriented UX
NOW

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

REASON 1:
“The navigation is your fire escape.”

REASON 2:
Consistent object representation
for efficiency and maintainability

REASON 2:
Consistent object representation
for efficiency and maintainability
AND BETTER USER EXPERIENCE!

CONSISTENT OBJECT
REPRESENTATION

Pledged $200 for
- The Woodieful Chair
- Personalized thank you
card
Est. Delivery August 2016
got
it?
2 messages +

QUESTION BREAK
We are about to get into the weeds…

SYSTEM OBJECTS VS
SUPPORT CONTENT

SYSTEM OBJECTS
Objects that make up the system or the product, directly
derived from the goals of the organization.
An object with multiple instances.

SYSTEM OBJECTS
Celebrity
image
bio
birthday
Event
location
image
date
Article
timestamp
author
body copy

SYSTEM OBJECTS
Rule of thumb: they are what the user came for. The meat.
Celebrity
image
bio
birthday
Event
location
image
date
Article
timestamp
author
body copy

SUPPORT CONTENT
Content that support the system or the product. They are
accoutrements (and often crutches) to the core experience.
An object with a single instance.

SUPPORT CONTENT
How it Works Privacy Policy About us
Content that support the system or the product. They are
accoutrements (and often crutches) to the core experience.
An object with a single instance.

CONTEXTUAL NAV [IS MY JAM]
Celebrity Object
Fan Obj Fan Obj Fan Obj Fan Obj
Movie ObjMovie ObjMovie Obj

GLOBAL NAV [IS USEFUL, TOO]
Celebrity Object
Fan Obj Fan Obj Fan Obj Fan Obj
Movie ObjMovie ObjMovie Obj
Global Nav
MOVIES CELEBS ABOUT SIGN UP

Part of the heterarchy
MULTIPLE INSTANCES
Is the purpose
Often created by user
Often lots of metadata
Accessed in context of
other objects*
Part of the hierarchy
SINGLE INSTANCE
Talks about the purpose
Created by the org
No metadata
Accessed from persistent
navigation*
SUPPORT CONTENT SYSTEM OBJECTS

[SYSTEM] OBJECT INSTANCE
Real, unique content applied to the abstract/template
system object.

system object.
Celebrity Celebrity Celebrity

system object.
We are not so concerned with thinking through ALL the
instances. We use instances to stress-test our objects.
Celebrity Celebrity Celebrity

OBJECTS ARE THE COOKIE CUTTERS

OUR CONCERN ARE THE
SYSTEM OBJECTS.
We already have the tools for support objects.

Core content
Core content
FIVE ELEMENTS OF OBJECTS

Core content
Core content
metadata metadata

Core content
Core content
CTA
CTA
metadata metadata

Core content
Core content
CTA
CTA
metadata metadata
UIUI

Core content
Core content
CTA
CTA
metadata metadata
nested obj nested obj nested obj
UIUI

Core content
Core content
CTA
CTA
metadata metadata
nested obj nested obj nested obj
UIUI
nested obj

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

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

METADATA NAV: TAKE ME TO A FILTERED LIST
Comedy
Movie detail: Wayne’s World

METADATA NAV: TAKE ME TO A FILTERED LIST
Comedy
movie object
movie object
movie object
Movie list, filtered by Comedy
Comedy

WHAT IF GENRE IS AN OBJECT!? (UPGRADE!)
Comedy

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

NESTED OBJECT NAV: TAKE ME TO ANOTHER OBJECT
Comedy
Mike Myers Dana Carvey

NESTED OBJECT NAV: TAKE ME TO ANOTHER OBJECT
Comedy
Mike Myers Dana Carvey
Profile detail: Dana Carvey
movie
object
movie
object
movie
object
movie
object

GAME TIME!
“Am I an object?”

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

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

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.

Location
Sauce
Mixologist
Ingredient
s/tools
Classes
Recipes

Location
Sauce
Mixologist
Ingredient
s/tools
Classes
Recipes
year
opened
Name
Street
image
Address
distance
from user
Phone
Number
email
address
inside
images
history/
blurb
name
descriptio
n (why we
love it)
priceimages
tag/
category
Name
descriptio
n
image heat indexprice testimony
Mixologist
creator
Name bio image
years with
us
twitter
handle
Location
works at
title
descriptio
n
price
type
(workshop,
ongoing
class)
date time Location
Prerequisit
es
Name summary
date
created
image
Mixologist
creator
recipe
content

year
opened
Name
Street
image
Address
distance
from user
Name
descriptio
n
Name
name
title
Name
Phone
Number
image heat index
bio image
years with
us
descriptio
n (why we
love it)
price
descriptio
n
summary
date
created
price
Location
Sauce
Mixologist
Ingredient
s/tools
Classes/
Events
Recipes
email
address
inside
images
history/
blurb
price testimony
twitter
handle
images
tag/
category
type
(workshop,
ongoing
class)
date time Location
Prerequisit
es
image
Mixologist
creator
recipe
content

year
opened
Name
Street
image
Address
distance
from user
Name
descriptio
n
Name
name
title
Name
Phone
Number
image heat index
bio image
years with
us
descriptio
n (why we
love it)
price
descriptio
n
summary
date
created
price
Location
Sauce
Mixologist
Ingredient
s/tools
Classes/
Events
Recipes
email
address
inside
images
history/
blurb
price testimony
twitter
handle
images
tag/
category
type
(workshop,
ongoing
class)
date time Location
Prerequisit
es
image
Mixologist
creator
recipe
content
Mixologist
that work
here
sauces of
the day
Classes
calendar
Mixologist
creator
Locations
available
at
Class that
teaches it
Mixologist
mentor
Location
works at
Sauce
created
ingredient
s/tools
loved
Classes
teaching
recipes
posted
Sauce
featured
Mixologist
teaching
Ingredient
s/tools
provided
Recipes
that aligns
Sauce
(parent)
Ingredient
s/tools
needed
Classes
that
feature
Location
available
at
Sauce that
use
Current
classes
that teach
Mixologist
that love
Recipes
that
include

year
opened
Name
Street
image
Address
distance
from user
Name
descriptio
n
Name
name
title
Name
Phone
Number
imageheat index
bioimage
years with
us
descriptio
n (why we
love it)
price
descriptio
n
summary
date
created
price
Location
Sauce
Mixologist
Ingredient
s/tools
Classes/
Events
Recipes
email
address
inside
images
history/
blurb
price testimony
twitter
handle
images
tag/
category
type
(workshop,
ongoing
class)
date time
Mixologist
creator
Location
works at
Location
Prerequisit
es
image
Mixologist
creator
recipe
content
Mixologist
that work
here
sauces of
the day
Classes
calendar
Locations
available
at
Class that
teaches it
Sauce
created
ingredient
s/tools
loved
Classes
teaching
recipes
posted
Location
available
at
Sauce that
use
Current
classes
that teach
Recipes
that
include
Sauce
featured
Mixologist
teaching
Ingredient
s/tools
provided
Sauce
(parent)
Ingredient
s/tools
needed
Recipes
that aligns
Classes
that
feature

Name
Street
image
Address
distance
from user
Name
descriptio
n
Name
name
title
Name
Phone
Number
imageheat index
bioimage
years with
us
descriptio
n (why we
love it)
price
descriptio
n
summary
date
created
price
Location
Sauce
Mixologist
Ingredient
s/tools
Classes/
Events
Recipes
email
address
inside
images
price testimony
images
tag/
category
date time
Mixologist
creator
Location
works at
Location
image
Mixologist
creator
recipe
content
sauces of
the day
Locations
available
at
Sauce
created
Classes
teaching
recipes
posted
Location
available
at
Sauce that
use
Current
classes
that teach
Sauce
featured
Mixologist
teaching
Sauce
(parent)
Ingredient
s/tools
needed
Get
Directions
Contact
BuyShare
Share
Share
Share
Share
Share
Share
Send
testimony
upvote?
Sign up/
register
purchase
invite
friends?
add to
box
print
shopping
list

Name
Street
image
Address
distance
from user
Name
descriptio
n
Name
name
title
Name
Phone
Number
imageheat index
bioimage
years with
us
descriptio
n (why we
love it)
price
descriptio
n
summary
date
created
price
Location
Sauce
Mixologist
Ingredient
s/tools
Classes/
Events
Recipes
email
address
inside
images
price testimony
images
tag/
category
date time
Mixologist
creator
Location
works at
Location
image
Mixologist
creator
recipe
content
sauces of
the day
Locations
available
at
Sauce
created
Classes
teaching
recipes
posted
Location
available
at
Sauce that
use
Current
classes
that teach
Sauce
featured
Mixologist
teaching
Sauce
(parent)
Ingredient
s/tools
needed
Get
Directions
Contact
BuyShare
Share
Share
Share
Share
Share
Share
Send
testimony
upvote?
Sign up/
register
purchase
invite
friends?
add to
box
print
shopping
list
MDL
MDL
MD
MDL
MDL
MD

STEP 1: EXTRACT OBJECTS
OBJECTS
ON
BLUE!

STEP 1: EXTRACT OBJECTS
1. Read over the goals and the user research as a team,
paying close attention to nouns.
2. Discuss potential objects. Start circling ones you think
might be part of our new system.
3. Watch out for example nouns, super-abstract nouns, or
nouns that are fancy words for lists like “map.”
4. Write each object on a BLUE Sticky. You should have
about 4-7 objects.
OBJECTS
ON
BLUE!

STEP 2: ELEMENT AUDIT
OBJECTS
ON BLUE!
CORE
CONTENT
ON
YELLOW
CORE
CONTENT
ON
YELLOW
METADATA
ON
RED
CORE
CONTENT
ON
YELLOW
NESTED
OBJECTS
ON BLUE!

STEP 2: ELEMENT AUDIT
1. Taking one object at a time, start cataloging all the
elements that should make up this object.
2. Remember! One element on each sticky!
3. Core content: text, image, video
4. Metadata: will a user sort or filter objects by this?
5. Don’t get to hung up on Yellow vs Red.
6. If an element comes up that’s actually another object -
put it on a BLUE STICKY!
OBJECTS
ON BLUE!
CORE
CONTENT
ON
YELLOW
CORE
CONTENT
ON
YELLOW
METADATA
ON
RED
CORE
CONTENT
ON
YELLOW
NESTED
OBJECTS
ON BLUE!

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

STEP 3: SERIOUS NESTING
OBJECT
CORE
CONTENT
ON
YELLOW
CORE
CONTENT
ON
YELLOW
METADATA
ON
RED
CORE
CONTENT
ON
YELLOW
NESTED
OBJECTS
ON BLUE!
MORE
NESTED
OBJECTS!!
MORE
NESTED
OBJECTS!!

STEP 3: SERIOUS NESTING
1. Taking one object at a time, do a series of short thought
experiments. How will each of the OTHER objects nest into
that object? Some will not have a relationship…but most
will!
2. Even think about how that object will nest inside of itself!
OBJECT
CORE
CONTENT
ON
YELLOW
CORE
CONTENT
ON
YELLOW
METADATA
ON
RED
CORE
CONTENT
ON
YELLOW
NESTED
OBJECTS
ON BLUE!
MORE
NESTED
OBJECTS!!
MORE
NESTED
OBJECTS!!

STEP 4: FORCED RANKING
OBJECT
CORE
CONTENT
ON
YELLOW
CORE
CONTENT
ON
YELLOW
METADATA
ON
RED
CORE
CONTENT
ON
YELLOW
NESTED
OBJECTS
ON BLUE!
MORE
NESTED
OBJECTS!!
MORE
NESTED
OBJECTS!!

STEP 4: FORCED RANKING
1. Taking one object at a time, reorder the elements from
what you think will be MOST important to the user to the
LEAST important.
OBJECT
CORE
CONTENT
ON
YELLOW
CORE
CONTENT
ON
YELLOW
METADATA
ON
RED
CORE
CONTENT
ON
YELLOW
NESTED
OBJECTS
ON BLUE!
MORE
NESTED
OBJECTS!!
MORE
NESTED
OBJECTS!!

STEP 5: CTA INVENTORY
OBJECT
CORE
CONTENT
ON
YELLOW
CORE
CONTENT
ON
YELLOW
METADAT
ON
RED
NESTED
OBJECTS
ON BLUE!
MORE
NESTED
OBJECTS!!
ACTIONACTIONN

STEP 5: CTA INVENTORY
1. Taking one object at a time, brainstorm all actions that
might associate with that object.
2.Feel free to make up notation - maybe star a CTA that
needs user validation or “#2” a CTA that’s probably future
state.
OBJECT
CORE
CONTENT
ON
YELLOW
CORE
CONTENT
ON
YELLOW
METADAT
ON
RED
NESTED
OBJECTS
ON BLUE!
MORE
NESTED
OBJECTS!!
ACTIONACTIONN

STEP 6: OBJECT REPRESENTATION
• Sketching! 10 minutes on each object. Play with:
• Modules - the top most elements
• Detail screens - all elements (do you need it?)
• Lists - all instances of an object…how will a user want to
sort, filter, and view? (Do you need it? Or should it just
come up in search results?)

Designing Object Oriented Experiences

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Destaque

Destaque (20)

Semelhante a Designing Object Oriented Experiences

Semelhante a Designing Object Oriented Experiences (20)

Último

Último (20)

Designing Object Oriented Experiences