Fundamentals of Object-Oriented UX

FUNDAMENTALS OF OBJECT-ORIENTED UX

SOPHIA VOYCHEHOVSKI #OOUX

@sophiaVUX

GAME TIME! “Which site is responsive?”

RESPONSIVE DESIGN CHANGED EVERYTHING

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)

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: “Landing Page tile”

MODULE: “sidebar module”

USER’S MENTAL MODEL OF THE REAL WORLD: OOUX

DIGITAL REPRESENTATION OF THE REAL WORLD: MODULAR DESIGN

WHAT HAPPENS WHEN A PATTERN LIBRARY DOESN’T HAVE AN

OBJECT MODEL TO REPRESENT?

OOUX = SYSTEM DESIGN

MODULAR DESIGN = REPRESENTING THE SYSTEM CONSISTENTLY

OBJECT MODEL

MODULE/PATTERN LIBRARY

WHAT IS OOUX?

OBJECT ORIENTED PROGRAMMINGA programming language model organized around objects rather than

"actions" and data rather than logic.



UXdesign



UXdesign

Data first. THEN logic. Objects first. Then procedures around objects.

THE PRACTICE OF OOUX…

1. Starts with defining the system of real-world objects that make up auser’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 ourcommunication

COMMUNICATION = NOUNS (OBJECTS) VERBS (ACTIONS)

MODIFIERS (ADJECTIVES, ADVERBS)

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

Persistent Navigation

Task Flows and Storyboards

Discovery/research

>>

>

Page Layouts

Build/Test>

THEN

pattern library

Persistent NavigationTask Flows and Storyboards

Discovery/research

>>

>

Build/Test>Object Oriented UX

NOW

pattern/module library

OOUX IS FOR EVERYWHERE

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

OBJECTSThe 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.

OBJECT INSTANCEReal,unique content applied to the abstract/template system object.

Celebrity Celebrity Celebrity

OBJECTS ARE THE COOKIE CUTTERS

INSTANCES ARE THE COOKIES

THREE REASONS TO “GO OO”

HUMANS THINK IN OBJECTS

DESIGN MODULES FOR A SYSTEM, NOT FOR PAGES.

THE NAVIGATION IS YOUR FIRE ESCAPE.

REASON 1: HUMANS THINK IN OBJECTS

(like all humans,not just developer-humans)

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.

Cau

se and

effectm

ultistep

p

rocedu

res

“the issue with objects is not about user interfaces or OOprogramming,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

Browse Compare Select Checkout

Products Orders Depts

Products

DeptsMy

Orders

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

REASON 2: Consistency for efficiency and maintainability

SubtitleREASON 2:

OOUX HELPS DESIGN MODULES FOR A SYSTEM, NOT FOR PAGES.

NO MORE SHAPER-SHIFTER MODULES!

Map view Grid view

Google Docs Google Drive

Homepage

Search results

Search results: Less Map

Search results: Mo’

Map+Flyout

TITLE• Bullet points

Search preview

Search Results

Connections

AxureWorld Group page

Axure Company

page

Axure Company

page

Flyout on Axure Company Page

AN EASIER LIFE FOR ALL = INTERGRITY MODULES

Fashion landing page

homepage search results grid

Search results list

Featured

Search preview, search results,

“Design” landing page

Art Basel’s Curated Page

Projects I’ve backed

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

CUSTOM MODULES FOR CONTEXT: INTENTIONAL, CONSERVATIVE, &

DEFINITELY NOT “MVP”

REASON 3: THE NAVIGATION IS YOUR FIRE ESCAPE.

“…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

CONTEXTUAL NAVCrosslinking on crack. Navigation that transports the user via objectsmodules nested within other objects modules and detail screens,providing relevant entry points to more objects instances.

GLOBAL NAVNavigation that transports to the user via a persistent,unchangingmechanism.

The OG

your way

underrated new

bestie

FOUR TYPES OF OBJECTS ELEMENTS

CORE CONTENT

METADATA METADATA

CTA

NESTED OBJECT

NESTED OBJECT

NESTED OBJECT

NESTED OBJ

MOVIE MOVIE MOVIE

CITY

IMG

NAME

FAN FAN FAN

NESTED OBJECTS = CONTEXTUAL NAV!

NESTED OBJECTS MATRIXLet’s create some awesome contextual navigation

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

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

Profile detail: Dana Carvey

movie object

movie object

movie object

movie object

A WAY TO CHEAT AT THIS

lucy

movie

lucy

Actress

movie

lucy

news story N

Actress

movie

NOW LET’S DO IT: 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.

Locations Sauces Mixologists

Ingredients/tools

Classes Recipes

Name

Street image

Address

distance from user

contact info

inside images

name

description (why we love it)

price

images

tag/category

Name

description

bottle $ shot

heat index

price

Name

bio

headshot

years with us

twitter handle

title

description

price

type (workshop, ongoing class)

date

time

Name

date created

image

recipe content

gallery of sauce on food


Ingredients/tools

Classes Recipes

Location Sauce Mixologist s

Ingredients/tools

Classes Recipes

Mixologist that work here

Classes calendar

Mixologist creator

Locations available at

Class that teaches it

Mixologist mentor

Sauces created

ingredients/tools loved

Classes teaching

recipes posted

Location works at

Location available at

related ingredients

Recipes that include

Ingredients/tools provided

Recipes taught

Mixologist teacher

Sauce (parent)

Ingredients/tools needed

Classes that feature

Mixologist author

Name

Street image

Address

distance from user

contact info

inside images

name


price

images

tag/category

Name

description

bottle $ shot

heat index

price

Name

bio

headshot

years with us

twitter handle

title

description

price


date

time

Name

date created

image

recipe content


Location

Mixologist that work here

Classes calendar

Mixologist creator

Locations available at Class that

teaches it

Sauces created

ingredients/tools loved

Classes teaching

recipes posted

Location works at


related ingredients

Recipes that include

Ingredients/tools provided

Recipes taught

Mixologist teacher

Sauce (parent)


Classes that feature

Mixologist author

Name

Street image

Address

distance from user

contact info

inside images

name


price

images

tag/category

Name

description

bottle $ shot

heat index

price

Name

bio

headshot

years with us

twitter handle

title

description

price


date

time

Name

date created

image

recipe content


Location

Related Recipes


Ingredients/tools

Classes Recipes

Location Sauce Mixologist Ingredients/tools

Classes Recipes

Mixologist creator

Location works at


Mixologist teacher

Sauce (parent)


Mixologist author

Name

Street image

Address

distance from user

inside images

name


price

images

tag/category

Name

bottle $ shot

price

Name

headshot

years with us

twitter handle

title


date

time

Name

date created

image


Location

Get Directions

Buy

Share Share Share

Send testimony

upvote? Sign up/register

invite friends?

add to box

print shopping list

Buy

MODULE DETAIL LIST

Mixologist creator

Locations available

at Class that teaches it

Name

description

bottle $ shot

heat index

price

gallery of sauce on

food

Share

upvote?

Buy

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

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 FIRSTMILD HOT

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

Thank you!

@SophiaVUX

Fundamentals of Object-Oriented UX

Design

Transcript of Fundamentals of Object-Oriented UX