View
318
Download
4
Category
Preview:
DESCRIPTION
Slides from UXStrat 2014 and UXweek 2014 workshops. By leveraging Object Oriented UX, we can create simple, efficient, and easy to use digital products that does not rely on the often-ignored persistent navigation. OOUX is the new IA: we need modular systems, not silo-ed drill downs.
Citation preview
RESPONSIVE REDESIGN IN A DAY
Sophia Voychehovski
sophia@rewiredUX.com
@SophiaVUX
Experience/Knowledge in Responsive Design
Experience/Knowledge in Content Strategy
Experience/Knowledge in Sticky Note Artistry
Groups!
RESPONSIVE REDESIGN IN A DAY
AKA: Object Oriented UX
In a post-responsive-revolution world
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)
THE WORLD IS MADE OF OBJECTS
and ACTIONS
Web experiences are the same
1990’s: static objects
2000s: actions
Today: dynamic objects
Information Architecture
Interaction Design
System Design / OOUX
Why Dynamic Objects First?
Know your objects to know your actions
Hierarchy and priority is now…a priority
We’ve Hamburgered our Nav
We have to be efficient
GAME TIME! “Which site is responsive?”
An OOUX (or System Design)
Vocabulary
Often timely, often updated
multiple instantiations
is the purpose
Evergreen
single instantiation
talks about the purpose
Core content
Core content
CTA
CTA
metadata metadata
nested obj nested obj nested obj
UIUI
Object Elements
Meta Data Nested
Objects
author
location
genre
User CelebrityAuthor
Person Template
>>
<
History MissionAbout us
Static Template
>>
<
Information Architecture
Interaction Design
System Design
manifests in the persistent navigation - the fire escape, the constant. What static object rely on.
manifests in the UI elements and action flows
manifests in the design of the dynamic objects and their flow
Information ArchitectureInteraction Design
System Design >>>
Questions? Comments?
System Design in Action
Audit Site Inventory
Article
title
Text
Author name bio
Related articles
Image
date
shoe sizerelated articles
Product
Name
Comments
User datecomment
text
name
name
Description
Rating
price
Reviews
related products
Manufacturer
User rating
Name logo
SHARE BUY
1. Dynamic Object Inventory 2. Dynamic Object Manifestation
>
3. Dynamic Object Sketching
>
4. OOUX Prototyping (Demo) >
• It has multiple instances, each with unique content
• A user can create one
• It could be a search results facet
• You can imagine the organization adding or removing one
• It has metadata (date posted, length, number of likes)
• It’s not specific (Watch out for instances of objects!)
How to recognize a dynamic object
If you answered yes to ANY of these, you probably have a dynamic object
GAME TIME! “Am I a dynamic
Object?”
SongYES!
“Viva Las Vegas”Nope
AppYES!
the footerNope
the top navigationNope
Lady GagaNope
song popularityNope
album cover imageNope
album coverNope
Article
title
Text
Author name bio
Related articles
Image
date
shoe size related articles
Product
Name
Comments User date comment text
name
name
Description
Rating
price
Reviews
related products
Manufacturer
User rating comment
Name logo description
SHARE BUY
ProductsSimilar
Manufacturers
Event
Title
Date/time
description
Related Product
REGISTER
Users going
Dynamic Object Inventorydynamic objects
core content and metadata
CTAs
profile pic
number of likes
date
history
size
available or not
quantity in stock
Blog name branding image
description tags? all articles,
archives
Dynamic Content InventoryDynamic Object Spreadsheet
Column 1:
List your dynamic objects
Column 2:
Does it have a
module? (yes/no)
Column 3:
Does it have a detail page?
(yes/no)
Column 4:
Does it have a list
page? (yes/no)
Column 6:
How critical is
the object? (1,2,3)
Column 5:
First pass of
grouping similar objects
into templates
= Hierarchy Sketches of D.O. modules, detail pages and lists
Pick 3 Dynamic Objects
Phase 1 MVP
Has Detail Page
Various template groups
Object-Oriented design in Axure (Demo)
Sophia Voychehovski
sophia@rewiredUX.com
@SophiaVUX
Recommended