designing object oriented experiences
Post on 02-Jul-2015
2.054 Views
Preview:
DESCRIPTION
TRANSCRIPT
OBJECT-ORIENTED UX@UXLX
5.24.2016
BEACH
CLEANING
WHAT IS OOUX?
1 Hour Lecture on OOUX / Discussion
Extract objects
Element audit
Object nesting
Forced ranking
CTA inventory
Sketching sprints
Prototyping!
AGENDA
#UXLUX #OOUX
@sophiaVUX
WHERE DID THIS ALL START?
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)
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 ≠ MODULAR DESIGN
OOUX informs MODULAR DESIGN
OBJECT: “Performance”
OBJECT: “Performance”
MODULE: “Calendar item”
MODULE: “Landing Page tile”
MODULE: “sidebar module”
OBJECT: “Performance”
MODULE: “Calendar item”
MODULE: “Landing Page tile”
MODULE: “sidebar module”
USER’S MENTAL MODEL OF THE REAL WORLD: OOUX
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
OOUX = SYSTEM DESIGN
OOUX = SYSTEM DESIGN
MODULAR DESIGN = REPRESENTING THE SYSTEM CONSISTENTLY
MODULAR DESIGN = REPRESENTING THE SYSTEM CONSISTENTLY
OBJECT MODEL
OBJECT MODEL
MODULE/PATTERN LIBRARY
http://edn.embarcadero.com/article/29677
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)
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 digitalobject system matches the users’ mental model of theproblem domain.
OOUX (the practice)
OOUX (the practice)UX that focuses on designing a system of real-world objectsthat align with with a user’s mental model of their particularproblem domain.
UX that puts object design before action design.
UX that acknowledges that the purpose of interactiondesign 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
DeptsMy
Orders
Customers
Browse Compare Select Checkout
Products Orders Depts
Products
DeptsMy
Orders
Customers
Browse Compare Select Checkout
Products Orders Depts
Products
DeptsMy
Orders
Customers
Browse Compare Select Checkout
Products Orders Depts
Products
DeptsMy
Orders
Subtitle
Subtitle
food
fridge
counter
back splash
clutter
cooking
clean
cooking
food
oven
food
clean up
cutting
bake
milk
fire
utensil
microwavefridge
sinkknife
fork
microwave
appliance
tomato
fridge
smells
smell
knife pot pan
oven
stirring
fridge
sink
microwave
food food
oven
fork
spoon redblender
creativity love
satisfaction
white
stove
cabinets
food foodcereal
toaster
coffee maker
food
mixer
stove
fork plate
oven
fridge
oven
crumbs
taste
IKEA
fridge
cutting board
clean
tile
copper
countermixer
cabinet
fork
beer
napkin
foodcooking
sink
table
counter
food
work
windows
sour cream
mango
Shoes
Appalachian
fun
sweat?
cat
mountain
hill
calves
water
dogs
shoes
mountain
mountain
fun
pain
Switzerland
northchildhoodnature
bootsshorts
goretex
boots
peace
mountain
mountain
trees
river
friends
boots
purple
trees
cliff
boots
dirt
fir trees
boots
ascent
shade
rocks
boots
view
1990SWe applied a
couple hundred years of IA to the
web.
Taxonomies, hierarchies,
categories inside categories inside
categories…
2000SWe start getting popular. Because
$$$ is really moving around on
the web.
Interaction design, usability
testing, task flows and user stories.
2010SWe 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
Persistent Navigation
Task Flows and Storyboards
Discovery/research
>>
>
Page Layouts
Build/Test>
THEN
pattern library
Persistent NavigationTask Flows and Storyboards
Discovery/research
>>
>
Build/Test>
NOW
Persistent NavigationTask Flows and Storyboards
Discovery/research
>>
>
Build/Test>Object Oriented UX
NOW
Persistent NavigationTask Flows and Storyboards
Discovery/research
>>
>
Build/Test>Object Oriented UX
NOW
pattern/module library
WHY OOUX?
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 +
ON YOUR OWN: LINKEDIN
QUESTION BREAKWe are about to get into the weeds…
SYSTEM OBJECTS VS SUPPORT CONTENT
SYSTEM OBJECTS
SYSTEM OBJECTSObjects that make up the system or the product, directlyderived from the goals of the organization.An object with multiple instances.
SYSTEM OBJECTSObjects that make up the system or the product, directlyderived from the goals of the organization.An object with multiple instances.
Celebrity
image
bio
birthday
Event
location
image
date
Article
timestamp
author
body copy
SYSTEM OBJECTSObjects that make up the system or the product, directlyderived from the goals of the organization.An object with multiple instances.
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
SUPPORT CONTENTContent that support the system or the product. They areaccoutrements (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 areaccoutrements (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
[SYSTEM] OBJECT INSTANCEReal, unique content applied to the abstract/templatesystem object.
[SYSTEM] OBJECT INSTANCEReal, unique content applied to the abstract/templatesystem object.
Celebrity Celebrity Celebrity
[SYSTEM] OBJECT INSTANCEReal, unique content applied to the abstract/templatesystem object.
We are not so concerned with thinking through ALL theinstances. We use instances to stress-test our objects.
Celebrity Celebrity Celebrity
INSTANCES ARE THE COOKIES
OBJECTS ARE THE COOKIE CUTTERS
OUR CONCERN ARE THE SYSTEM OBJECTS.
We already have the tools for support objects.
FIVE ELEMENTS OF OBJECTS
Core content
Core content
FIVE ELEMENTS OF OBJECTS
Core content
Core content
metadata metadata
FIVE ELEMENTS OF OBJECTS
Core content
Core content
CTA
CTA
metadata metadata
FIVE ELEMENTS OF OBJECTS
Core content
Core content
CTA
CTA
metadata metadata
UIUI
FIVE ELEMENTS OF OBJECTS
Core content
Core content
CTA
CTA
metadata metadata
nested obj nested obj nested obj
UIUI
FIVE ELEMENTS OF OBJECTS
Core content
Core content
CTA
CTA
metadata metadata
nested obj nested obj nested obj
UIUI
FIVE ELEMENTS OF OBJECTS
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 detail: Wayne’s World
movie object
movie object
movie object
Movie list, filtered by Comedy
Comedy m
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 m
WHAT IF GENRE IS AN OBJECT!? (UPGRADE!)
Comedy
Movie detail: Wayne’s World
WHAT IF GENRE IS AN OBJECT!? (UPGRADE!)
Comedy
Movie detail: Wayne’s World Genre Detail: Comedy
movie object
movie object
movie object
movie object
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
Movie detail: Wayne’s World
Mike Myers Dana Carvey
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
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
GAME TIME! “Am I an object?”
SONG
SONGYES!
“VIVA LAS VEGAS”
“VIVA LAS VEGAS”Nope
ALBUM COVER IMAGE
ALBUM COVER IMAGENope
ALBUM
ALBUMYES!
ARTIST BIO
ARTIST BIONO
PLAYLIST
PLAYLISTYES!
THE SIDE BAR NAVIGATION
THE SIDE BAR NAVIGATIONNope
LADY GAGA
LADY GAGANope
POPULARITY RATING
POPULARITY RATINGNope
lucy
lucy
movie
lucy
Actress
movie
lucy
news story N
Actress
movie
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.
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.
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.
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.
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.
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.
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
Ingredients/tools
Classes
Recipes
Location
Sauce
Mixologist
Ingredients/tools
Classes
Recipes
Location
Sauce
Mixologist
Ingredients/tools
Classes
Recipes
year openedName Street
image Address distance from user
Phone Number
email address
inside images
history/blurb
namedescription (why we
love it)priceimages tag/
category
Name description image heat indexprice testimony Mixologist
creator
Name bio image years with us
twitter handle
Location works at
title description price
type (workshop,
ongoing class)
date time Location Prerequisites
Name summary date createdimage Mixologist
creatorrecipe
content
year openedName Street
image Address distance from user
Name description
Name
name
title
Name
Phone Number
image heat index
bio image years with us
description (why we
love it)price
description
summary date created
price
Location
Sauce
Mixologist
Ingredients/tools
Classes/Events
Recipes
email address
inside images
history/blurb
price testimony
twitter handle
images tag/category
type (workshop,
ongoing class)
date time Location Prerequisites
image Mixologist creator
recipe content
year openedName Street
image Address distance from user
Name description
Name
name
title
Name
Phone Number
image heat index
bio image years with us
description (why we
love it)price
description
summary date created
price
Location
Sauce
Mixologist
Ingredients/tools
Classes/Events
Recipes
email address
inside images
history/blurb
price testimony
twitter handle
images tag/category
type (workshop,
ongoing class)
date time Location Prerequisites
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
ingredients/tools loved
Classes teaching
recipes posted
Sauce featured
Mixologist teaching
Ingredients/tools
provided
Recipes that aligns
Sauce (parent)
Ingredients/tools needed
Classes that
feature
Location available
at
Sauce that use
Current classes
that teach
Mixologist that love
Recipes that
include
year openedName Street
image Address distance from user
Name description
Name
name
title
Name
Phone Number
imageheat index
bio image years with us
description (why we
love it)price
description
summary date created
price
Location
Sauce
Mixologist
Ingredients/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
LocationPrerequisit
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
ingredients/tools loved
Classes teaching
recipes posted
Location available
at
Sauce that use
Current classes
that teach
Recipes that
include
Sauce featured
Mixologist teaching
Ingredients/tools
provided
Sauce (parent)
Ingredients/tools needed
Recipes that aligns
Classes that
feature
Name Street image Address distance
from user
Name description
Name
name
title
Name
Phone Number
imageheat index
bio image years with us
description (why we
love it)price
description
summary date created
price
Location
Sauce
Mixologist
Ingredients/tools
Classes/Events
Recipes
email address
inside images
price testimony
twitter handle
images tag/category
date time
Mixologist creator
Location works at
Location
image Mixologist creator
recipe content
sauces of the day
Classes calendar
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)
Ingredients/tools needed
Get Directions
Contact
BuyShare
Share
Share
Share
Share
Share
Share
Send testimony
upvote?
Sign up/register
purchaseinvite
friends?
add to box
print shopping
list
Name Street image Address distance
from user
Name description
Name
name
title
Name
Phone Number
imageheat index
bio image years with us
description (why we
love it)price
description
summary date created
price
Location
Sauce
Mixologist
Ingredients/tools
Classes/Events
Recipes
email address
inside images
price testimony
twitter handle
images tag/category
date time
Mixologist creator
Location works at
Location
image Mixologist creator
recipe content
sauces of the day
Classes calendar
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)
Ingredients/tools needed
Get Directions
Contact
BuyShare
Share
Share
Share
Share
Share
Share
Send testimony
upvote?
Sign up/register
purchaseinvite
friends?
add to box
print shopping
list
MDL
MDL
MD
MDL
MDL
MD
NOW IT’S YOUR TURN
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
STEP 1: EXTRACT OBJECTS
OBJECTS ON
BLUE!
STEP 1: EXTRACT OBJECTS1. 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 AUDIT1. 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 NESTING1. 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 RANKING1. 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
METADATA ON RED
NESTED OBJECTS ON BLUE!
MORE NESTED
OBJECTS!!ACTIONACTIONACTION
STEP 5: CTA INVENTORY1. 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
METADATA ON RED
NESTED OBJECTS ON BLUE!
MORE NESTED
OBJECTS!!ACTIONACTIONACTION
STEP 6: OBJECT REPRESENTATION
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?)
•
MODULE DETAIL LIST
DIYER
MODULE DETAIL LIST
CHALLENGE
MODULE DETAIL LIST
SOLUTION
top related