Embed Size (px)
Citation preview
OBJECT-ORIENTED UX (OOUX) A scalable model for user-centered design to increase collaboration across disciplines and teams.12 OCT 2016
Ed HertzogSr. UX Engineer
Georgia SpangenbergSr. Researcher
#OOUX
IN CONTEXT
PAST PRESENT FUTURE
#OOUX
THE PAST
#OOUX
LINEAR AND ATOMIZEDTRADITIONAL PROCESS
01 02 03RESEARCH DESIGN DEVELOPMENT
#OOUX
RESEARCH DEFICITSTRADITIONAL PROCESS
Puts focus on user in up-front research phase: lack of user focus in later phases
Conceptual and discovery research too early, often too abstract for other disciplines
#OOUX
DESIGN DEFICITSTRADITIONAL PROCESS
Interactive focus - lacks opportunities for abstraction for developers
Atomized focus on interaction before data
Voice of user can be lost
#OOUX
IMPLEMENTATION DEFICITSTRADITIONAL PROCESS
Developers see little interest in research phase (not relevant to their needs yet)
“Whisper down the lane”
#OOUX
WHAT IS THE PROCESS REALLY LIKE?PROCEDURAL DESIGN & PROGRAMMING
#OOUX
How have we moved beyond that?
#OOUX
THE PRESENT
#OOUX
A shift in mindset.
#OOUX
A SHIFT IN MINDSET
Research engaged throughout the project; all disciplines use sprints to deliver value.
Research is a design and development tool for creating a “user-center designed” product.
Abandon the assembly line process.
#OOUX
THE GOAL
As a researcher,
I want to get to findings & insights (quickly),
so that we can get to a good design (quickly).
USER-CENTERED DESIGN
#OOUX
What’s it look like?
#OOUX
THE AGILE TRINITY
#OOUX
EVALUATE EVALUATE EVALUATE
RESEARCH DESIGN BUILD
#OOUX
SPRINT 0 SPRINT 1 SPRINT 2 SPRINT 3 SPRINT 4 SPRINT 5 SPRINT 6 SPRINT 7
#OOUX
SPRINT 0 SPRINT 1 SPRINT 2 SPRINT 3 SPRINT 4 SPRINT 5
kickoff
#OOUX
STAKEHOLDER INTERVIEWS
IN-DEPTH USER INTERVIEWS
FRAMEWORK DESIGN
TECH ASSESSMENT
COMPETITIVE ASSESSMENT
SPRINT 0Week 3 Week 4Week 1 Week 2
SPRINT 1
#OOUX
FRAMEWORK DESIGN
TECH ASSESSMENT
COMPETITIVE ASSESSMENT
Week 3 Week 4 Week 6Week 5 Week 7
RESEARCH SYNTHESIS
SPRINT 0
USABILITY TESTING
SPRINT 1 SPRINT 2
MVP DEVELOPMENT
IN-DEPTH USER INTERVIEWS
#OOUX
SPRINT 0 SPRINT 1 SPRINT 2 SPRINT 3 SPRINT 4 SPRINT 5 SPRINT 6 SPRINT 7
#OOUX
CURRENT PROCESS
Assumes and relies upon close physical proximity of teams
Assumes and relies upon hyper-communicative team members
Not necessarily scalable when utilizing geographically remote teams
#OOUX
How can we iterate on this process?
#OOUX
THE FUTURE
#OOUX
A change in mindset.
#OOUX
Object-Oriented UX #OOUX
A change in mindset.
#OOUX
OOUX ORIGINS
Dave Collins (1994) Designing Object-Oriented User Interfaces
Sophia Voychehovski (2015) http://alistapart.com/article/object-oriented-ux
#OOUX
OOUX
Place object design before interaction design.
Place data before logic.
Abandon the assembly line micro-process.
#OOUX
PROCEDURAL
#OOUX
PROCEDURAL vs.
#OOUX
PROCEDURAL vs. OBJECT ORIENTED
#OOUX
WHY DO WE WANT TO DO THIS?
So we can think about the entire system in line with real-world objects in users’ mental model, not digital-world actions.
We don’t go to a web site because we want to search, filter, or check-out. We go to a web site because we want a plane ticket. We want relationships. We want food. We want a book.
We want things.
#OOUX
You might be thinking, this all sounds great, but we have a lot of invested in Agile. We have user stories, we have workflows, we have a minimal viable product we need to produce in a few weeks.
What does that all mean?
BUT WE’RE SO INVESTED IN AGILE!
#OOUX
Start with a discrete “object”, which can have associated “actions” and “adjectives” associated with it.
OOUX & “THINGS”
Example: Object: Coin Verb: Rate Adjective: Year
#OOUX
As a user I can view numerous coins so that I can rate each coin.
As a user I can add/edit/delete comments for each coin and sort by date posted.
As a user I can view the properties of each coin, so that I can see what the current average rating is, as well as view the year, mint, type, obverse and reverse image and see who the user is who originally uploaded the coin.
THE USER STORYNoun, Verb, Adjective, Metadata
#OOUX
1. Nouns are objects
2.Verbs are methods of objects (CTAs)
3.Adjectives are properties of objects
4.Collection of adjectives are metadata
5.Find relationships between objects
6.Find dependencies between objects
7.Code before wireframes (!)
Object Mapping
More on Sophia Voychehovski’s Object Mapping process http://rewiredux.com/ooux
#OOUX
Another Example: Researcher is planning usability testing, gives developer a list of workflows to build into prototype.
#OOUX
So, what’s the problem?
1. Vaguely defined pages that reflect only the researchers mental model of it (not design or dev)
2. Sentence fragments instead of user stories
3. No clear delineation between page and action or relationship between them
4. No URLs referenced which can be confusing for developers who likely just came onto the project
#OOUX
Reframed as an OOUX: Researcher is planning usability testing, gives developer a list of workflows to build into prototype.
#OOUX
So, what’s different?
1. Object State: Workflows are collections of related objects
2. Clear Identifiers: Each object has a clear ID, the team has the same understanding of that object and which workflows utilize an object
3. Color Coding: Colors distinguish objects and CTAs (adopted from OOUX object mapping*)
4. Colloquial Naming: Each object state has one to ease communication
5. URLs: Each object state has one making it easier for all team members to locate assets
*for more on OOUX object mapping: Object-Oriented UX by Sophia Voychehovski http://alistapart.com/article/object-oriented-ux
#OOUX
THE EFFECT OF OOUX ON PROCESS?
Research, then design, then development vs.
Research and design and development
#OOUX
SPEAK THE SAME LANGUAGE
#OOUX
…about this idea? …what role research and design play in defining objects? …other challenges we should solve for?
WHAT DO YOU THINK?
