Designing Object Oriented Experiences

OBJECT-ORIENTED UX@UXLX

5.24.2016

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

SOPHIA VOYCHEHOVSKI@sophiaVUX

[email protected]

mailto:[email protected]

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)

GAME TIME! “Which site is responsive?”

OOUX ≠ MODULAR DESIGN

OOUX ≠ MODULAR DESIGN

OOUX informs MODULAR DESIGN

OBJECT: “Performance”


MODULE: “Calendar item”

MODULE: “Landing Page tile”

MODULE: “sidebar module”





USER’S MENTAL MODEL OF THE REAL WORLD: OOUX





USER’S MENTAL MODEL OF THE REAL WORLD: OOUX

DIGITAL REPRESENTATION OF THE REAL WORLD: MODULAR DESIGN

OOUX = SYSTEM DESIGN

MODULAR DESIGN = REPRESENTING THE SYSTEM CONSISTENTLY

OBJECT MODEL

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)

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

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/

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


Discovery/research

>>

>

Build/Test>Object Oriented UX

NOW


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.


Celebrity

image

bio

birthday

Event

location

image

date

Article

timestamp

author

body copy


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.


Celebrity Celebrity Celebrity


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


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 m

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?”

SONGYES!

“VIVA LAS VEGAS”

“VIVA LAS VEGAS”Nope

ALBUM COVER IMAGE

ALBUM COVER IMAGENope

ALBUMYES!

ARTIST BIO

ARTIST BIONO

PLAYLIST

PLAYLISTYES!

THE SIDE BAR NAVIGATION

THE SIDE BAR NAVIGATIONNope

LADY GAGA

LADY GAGANope

POPULARITY RATING

POPULARITY RATINGNope

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.

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



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)


image Mixologist creator

recipe content



Name description

Name

name

title

Name

Phone Number

image heat index


description (why we

love it)price

description


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)



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



Name description

Name

name

title

Name

Phone Number

imageheat index


description (why we

love it)price

description


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


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)


Recipes that aligns

Classes that

feature

Name Street image Address distance

from user

Name description

Name

name

title

Name

Phone Number

imageheat index


description (why we

love it)price

description


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


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)


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


description (why we

love it)price

description


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


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)


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


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


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


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


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


MORE NESTED

OBJECTS!!

MORE NESTED

OBJECTS!!

STEP 5: CTA INVENTORY

OBJECT

CORE CONTENT

ON YELLOW

CORE CONTENT

ON YELLOW

METADATA ON RED


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


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

SOPHIA VOYCHEHOVSKI@sophiaVUX

[email protected]

mailto:[email protected]

Designing Object Oriented Experiences

Design

Transcript of Designing Object Oriented Experiences