Object-Oriented UX · An A List Apart Article.pdf

8/16/2019 Object-Oriented UX · An A List Apart Article.pdf

1/12

6/3/2016 Object-Oriented UX · An A List Apart Article

http://alistapart.com/article/object-oriented-ux 1/12

Object-Oriented UXby Sophia Voychehovski · October 20, 2015

Published in Information Architecture , Interaction Design

431 Issue №

Illustration by Sue ockwood

In June 2012, while working at CNN.com (http://www.cnn.com) , I was tasked withdesigning the user experience of election night. The next five months of my life would bede dicated to that single night—but success to me had nothing to do wit h who won. I wasconcerned with findability, data visualization, a shape-shifting canvas, and how the hellm ouse-over flyouts were going to work on an iPhone. For the first time in history, CNN.com was releasing a responsive experience. And, for the first time in history , I was going to designa responsive experience.

The stakes were high. Election night is like Super Bowl Sunday for CNN.com. If wellexecuted, it’s one of the highest revenue nights in a four-year cycle. To add to the pressure, we were on a tight timeline with a deadline that was not going to budge. November 6th or bust.

Then I learned that the first development sprint kicked off in four days. Four days?! My project manager calmly told me, “Don’t worry. The devs only need one template for the first

http://alistapart.com/http://alistapart.com/http://alistapart.com/http://alistapart.com/http://alistapart.com/http://www.cnn.com/http://alistapart.com/author/slockwoodhttp://alistapart.com/issue/431http://alistapart.com/topic/interaction-designhttp://alistapart.com/topic/information-architecturehttp://alistapart.com/author/sophiavoychehovski


2/12



sprint. While they are building the first template, you can move on to the next.”

Huh? How was I supposed to design a cog in a machine without first roughing out the designof the machine?

Thinking myopically worked okay when we were designing in pages on fixed screen sizes; wecould get away with quilting together pieces designed in silos. I was pretty clueless aboutresponsive design, but I did know that we’d need a clean and simple system, not pages strungtogether. And as all engineers and designers know, the more moving parts in a system, themore opportunities for disaster.

So during those first four days, I did not wireframe one disconnected template. Instead, I blocked out a holistic system made of reusable, interchangeable parts. Here’s what it lookedlike:

The diagram of the proposed election night experience I first presented to the CNN.comteam.

I presented this diagram to a conference room of stakeholders who expected to review asingle “finished” template. I demonstrated that I had reduced the number of components andtemplates compared to our 2008 design, and that the new system was simple enough to fit onone 8.5 × 11 sheet of paper! Thankfully, a critical mass of people in the room saw the value of what I presented: less stuff to build.

The diagram I churned out in 2012 was far from perfect, mostly in that I was trying to do too

much too soon. I jumped the gun on implementation, blocking out flyouts and bar graphs. I was still thinking desktop-first, worrying about positioning , as opposed to prioritization . Ipacked in a premature homepage, a cover sheet for the experience (which I would now designlast ). I took a stab at persistent top-level navigation, instead of focusing on the contentmodules first.

Although imperfect, the spirit of the diagram, and the thinking behind it, hit a chord with me.It wasn’t a sitemap; it showed no hierarchy. It wasn’t a storyboard; it didn’t block out a task flow. Instead, this diagram mapped out a system of things. And it changed the way I do UX.

’


3/12



, , , ,that I would have created then if I knew what I know now, showing a system of three objects:States (http://www2.cnn.com/election/2012/results/state/TN/) , Races(http://www2.cnn.com/election/2012/results/race/senate/) , and State-Race Results(http://www2.cnn.com/election/2012/results/state/TN/senate/) .

How I’d present the election night experience if I were designing it today.

It worked: our responsive election night turned out to be the Super Bowl Sunday CNN

executives hoped for. But we did it by the skin of our teeth, working late nights and weekendsto make sure the design performed on a myriad of devices. I’m not sure we could have pulledit off with a design any more complex.

Today, I’ve evolved this trial-by-fire experience into a proven, structured object-basedprocess. In this article, I will introduce object-oriented UX, share my process of objectmapping, and help you start doing it yourself.

Mobile rst, content rst, and objects rst

Always separate thinking about real-world things from the documents which describe

those things. Resource before representation.

— Mike Atherton

It took me about about a year to retrain myself to truly think mobile first

http://www.lukew.com/resources/mobile_first.asphttp://www.slideshare.net/reduxd/modeling-structured-content-ias13-workshophttp://www2.cnn.com/election/2012/results/state/TN/senate/http://www2.cnn.com/election/2012/results/race/senate/http://www2.cnn.com/election/2012/results/state/TN/


4/12



. . _ . , ,designing desktop-only software applications. To me, mobile first simply means forcedprioritization. It means think about layout later. Start with a single column “design” (alsoknown as a list), and force yourself to prioritize content and functionality with sequentialranking.

This approach dovetails nicely with the concept of content first: “content-out design” asopposed to “canvas-in” design (https://adactio.com/journal/4523) . You have to know what you’re saying before you can prioritize it.

Sometimes, this means having real-deal copy first—particularly when you’re working on asite with a critical mass of evergreen or instructional copy that can be organized, prioritized,analyzed, and updated before design work begins.

But if you are working on a site that is 99 percent instantiated objects (news articles,products, campaigns, donations), there’s no way to build a complete copy deck up front—orever. Instead of prioritizing actual copy, I have to think in objects.

That’s OOUX: putting object design before procedural action design, and thinking about asystem through the lens of the real-world objects in a user’s mental model (products,tutorials, locations), not digital-world actions (search, filter, compare, check out). Wedetermine the actions after first defining the objects, as opposed to the traditional actions-first process that jumps straight into flows, interactions, and features.

OOUX is powerful

Newsflash! This is how your backend engineers work. In the ’80s, the software engineeringcommunity began to transition from procedural languages to object-oriented languages, which have benefits like code reuse, data encapsulation, and easier software maintenance.Most programmers bring your designs to life using object-oriented languages like Java, Ruby,Python, C++ or C#.

Engineers start their process by mapping out the objects that make up the problem domain—something UXers should be doing from day one. When they look at your wireframes orprototypes, they first reverse-engineer your design to parse out the objects. They think, “How will object X talk to object Y ? Will object A be made up of lots of object Bs? Which attributes

will each object have? Will this class of objects inherit from that class of objects?”On the web, we develop object-orientedly, but still design procedurally, focusing on drill-down hierarchy or linear task flows. But there’s another option. In his 1995 book, DesigningObject Oriented User Interfaces (http://www.amazon.com/Designing-Object-Oriented- Interfaces-Addison-Wesley-Technology/dp/080535350X/ref=sr_1_1? s=books&ie=UTF8&qid=1441640610&sr=1-1&keywords=designing+object+oriented+user+interfaces) , designer and engineer DaveCollins argues that basing both front-end and backend design on object-oriented principles“brings coherence to the software development process. Object-orientation reveals deep

http://www.amazon.com/Designing-Object-Oriented-Interfaces-Addison-Wesley-Technology/dp/080535350X/ref=sr_1_1?s=books&ie=UTF8&qid=1441640610&sr=1-1&keywords=designing+object+oriented+user+interfaceshttps://adactio.com/journal/4523http://www.lukew.com/resources/mobile_first.asp


5/12



structural correspondences between the artifacts of analysis, design, and implementation.”

Defining objects that mimic the mental model of your users provides a scaffolding for teamcommunication. It gives you a shared language. On top of team cohesion, designing object-orientedly can also help you:

match your user’s mental model, improving their experience

ensure simplicity, reducing any accidental complexity due to extraneous design elementsgrow and maintain your product: objects can be iterated on without affecting the rest of the system and new objects can be gracefully folded in (as opposed to tacking on features)

build better APIs with portable, independent objects

get SEO brownie points from structured content and valuable cross-linking

Then, there’s my favorite justification: OOUX helps you bake in more-crucial-than-evercontextual navigation. In other words, it helps users get to content through content.

Persistent navigation might be hidden, hamburgered out of sight when a user is on a smallscreen. But even on 17-inch monitor, the most beautiful pinned-to-the-top navigation mightstill get ignored. When a user visits a site for the first time, they often gravitate to the bigshiny objects, using the navigation or search bar only as a backup plan. As Val Jencks(https://www.linkedin.com/in/valeriejencks) neatly summed up, “We go to content on thepage first. The top navigation is the fire escape.”

If a user is reading a recipe, where might they want to go next? We should anticipate how

they might want to explore based on the recipe they are reading, and not leave it up to themto peck through a hierarchical menu or come up with a search term. And we certainly shouldnot leave them with a few “related recipes” and consider our work done. They might want tosee all the recipes that the chef has posted. Or maybe they want to see more recipes that useswiss chard, pivoting by ingredient?

If we are thinking object-orientedly, we will experiment with ways that each object mightrelate to other objects, looking beyond the obvious. Maybe chefs have favorite ingredients? Inthe object-oriented design below, a user can continually explore instances of these threeobjects (recipe, chef, ingredient) without ever hitting a dead end. The content is thenavigation, and it’s all in context.

https://www.linkedin.com/in/valeriejencks


6/12



In this object model, recipes, chefs, and ingredients are interconnected, allowing continuousexploration.

If this concept feels familiar, you’ve probably read about or practiced content modeling. Inthe past five years, many information architects (see Mike Atherton’s work (http://www.slideshare.net/reduxd/modeling-structured-content-ias13-workshop) ) andcontent strategists (see Rachel Lovinger’s work (http://alistapart.com/article/content-modelling-a-master-skill) ) have started focusing on systems of reusable content types, and becoming more involved in the design of CMSes: the content creator, not just the end-user, isa primary user.

In her book Content Everywhere (http://rosenfeldmedia.com/books/content-everywhere/) ,Sara Wachter-Boettcher encourages us to model our content before diving into wireframesand interaction design:

Content modeling gives you systematic knowledge; it allows you to see what types of content you have, which elements they include, and how they operate in a standardized way.

Unfortunately, the art of content modeling is still unfamiliar to many UX designers, who hear“content” and assume it doesn’t apply to them. This is especially true for UXers who deal withsoftware as a service or product design: strategies involving content sometimes fall on deaf ears.

Object mapping

Object mapping, my process behind OOUX, is content modeling for designers who do not

deal with content in the traditional sense, but still need to design systems—and not justsystems of implementation (http://bradfrost.com/blog/post/atomic-web-design/) . While atight collection of reusable templates and modules is invaluable, those design patterns don’thold meaning for a user unless they’re backed by a system of real-world objects that matchesthat user’s mental model. Focus first on designing the system of real-world objects, then ondesigning a system of implementation to bring it all to life. This is the linchpin of all my design work, because it transforms goals into an executable system that meets those goals.

Get out your sticky notes, grab your team, and clear some wall space—I’d like to walk you

throu h m rocess.

http://bradfrost.com/blog/post/atomic-web-design/http://rosenfeldmedia.com/books/content-everywhere/http://alistapart.com/article/content-modelling-a-master-skillhttp://www.slideshare.net/reduxd/modeling-structured-content-ias13-workshop


7/12



STEP 1: EXTRACT OBJECTS FROM GOALS

One of my favorite perks of object mapping is that it provides a perfect bridge from goals todesign. Instead of haphazardly whiteboarding A Beautiful Mind -style, object mappingprovides a neat framework to move from strategy to design. (Please continue to go all JohnNash (https://en.wikipedia.org/wiki/John_Forbes_Nash,_Jr.) at the whiteboard, butcreate an object map first. It will give your wild creativity a solid foothold.)

As an example, let’s say we are building an application to help home improvement brandsconnect to DIYers. After user interviews, a competitive analysis, and discussions withstakeholders, we have our brief:

Give DIYers an outlet to post their home improvement challenges, soliciting potential solutions from product companies (brands). DIYers get expert solutions to theirchallenges and brands get exposure.

DIYers can search and browse existing challenges, commenting on the proposed solutions.

Brands can search and browse for open challenges that might be a good fit forone of their products.

Brands can create solutions that feature one or more of their products. DIYers can close a challenge after a solution has been chosen, and later follow-up on how well the solution worked.

Brands can create a library of solutions that can be reused on variouschallenges.

To extract the objects, we basically highlight the nouns.

Highlighting the nouns in our project brief is the first step to mapping our objects.

Recognizing nouns is first-grade simple, but extracting objects does require some subtle art:

We pay special attention to nouns that keep popping up, like challenge and solution .

https://en.wikipedia.org/wiki/John_Forbes_Nash,_Jr.


8/12



Those will be important objects.

We ignore the abstract noun exposure , as this describes a fluffy concept we hope willemerge from our system, not a tangible object that will be part of our system.

We ignore library because this is simply a collection of other objects ( solutions ). Watchout for words like calendar , catalog , or map . These are usually just fancy list-views of thecore object: an event , product , or location , respectively. For example, most systems that

deal with locations will have a single (perhaps filterable) map view. The map is a designmechanism, not an object itself.

We infer an object from two actions: “commenting on” and “following up.” Obviously, we will need some sort of comment object.

We note that a challenge object needs multiple states: posted, in progress, closed, andclosed with feedback.

From this 10- to 15-minute exercise, we have the main building blocks of our system. Let’s write each object on a blue sticky.

We write each object on its own sticky note to visualize the building blocks of our system.

Next, we need to define what the objects are made of.

STEP 2: DEFINE CORE CONTENT OF OBJECTS

Content modeling requires you to simultaneously understand your goals at the highest level and get intimate with your content’s most minute attributes.

——Sara Wachter-Boettcher, Content Everywhere

Quite. We just determined the macro building blocks of our system, and now we mustdetermine the most granular elements of each. This activity is often reserved for eleventh-hour detailed design, but defining elements while in the medium of sticky notes is liberating—when you start sketching a little later on, you can focus on more creative aspects. Also,having early conversations about what makes up each object can help you avoid momentslate in the game where an important element is left off (or extraneous) and the change needsto be made across several design documents.

“


9/12



, ,able to add their budget onto a challenge?” before non-designers are looking at wireframes orlayout. This helps keep conversations focused, rather than getting stuck on something like theicon for budget.

At this point in the process, I separate two types of elements: core content and metadata.Core content, like text and images, goes on yellow stickies. Metadata—any data that a usermight sort or filter on—I put on red stickies.

The granular elements of each of our objects are mapped out with additional sticky notes.

If your team isn’t sure about a potential piece of content, write it down anyway and just add aquestion mark. Move on and return to it later.

STEP 3: NEST OBJECTS FOR CROSS-LINKING

And now the system comes alive. Do a series of thought experiments for each object. Starting with one object, consider ways that each of the other objects can “nest” inside that givenobject. As you nest objects, you are defining the relationships between them, and, implicitly,the contextual navigation as well. Using blue stickies, experiment with how each object mightnest its other sibling objects.


10/12



We finish out the model by adding sticky notes that show how other content objects can“nest” within each object.

For example, here’s how that conversation might go for our challenge object:

DIYer: “Easy, the DIYer is the author of the challenge.”

Solution: “This is the main nested object of a challenge. We need to show all solutionsposted to this challenge.”

Brand: “Eh, not really? Brand will be a part of the solution modules (as an author of thesolution), but probably not directly nested into a challenge.”

Product: “Again, part of a solution, not directly nested. Huh. Unless DIYers can post theproducts they already have at home?”

Comment: “Hmmm. Probably relegated to solution…should we keep all commenting onthe solution? Or should brands and DIYers perhaps be able to post questions directly tothe challenge? We need to explore this more.”

Note that not everything is figured out. Some items, like the commenting discussion, might be best resolved during sketching—but you will be intentionally exploring an identified

design problem, as opposed to that problem catching you by surprise.

STEP 4: FORCED RANKING

Ugh. This is the most diabolically difficult step. In the prior steps, it’s very important that you wrote each element and nested object on separate stickies. Why? Because now we need toreorder the elements, from most to least important.


11/12



ISSN 1534-0295 · Copyright © 1998–2016 A List Apart & Our Authors

Our object model, reordered based on how important each element is.

This ordered list does not necessarily provide a direct representation of what will be at thetop and the bottom of the screen. In design, priority might manifest in size or color. Low-priority content might be placed at the top of the screen, but in a collapsed panel (yay,

progressive disclosure!). So reassure your team that we are simply prioritizing and notdesigning .

While prioritizing, imagine which elements will be most important to your users. Which bitsare must-have information and which are nice-to-have? When considering metadata, think about the most important sorting and filtering mechanisms. If the default sorting will be by “popularity,” then “number of DIYers who like this” will be high priority.

A new foundation and framework

Now you have an object-based system derived straight from goals. But keep in mind that while this activity provides a foundation for designing an implementation system ,interactions, and persistent navigation, it doesn’t carve any decisions in stone. It’s a first

draft! As you iterate, objects and elements will be introduced, eliminated, and reprioritized. Your object map provides a framework for continued conversation and collaboration: with your client, your design team, and your developers.

OOUX is not a new end-to-end process; it’s a new ingredient to add to your current process.It adds clarity, simplicity, and cohesion—to how you design, and to the products you releaseinto the world.

About the Author

Sophia VoychehovskiSophia Voychehovski is the founder of Rewired, a UX design studio based in

Atlanta. Rewired consults to nonprofits, social entrepreneurs, and tech startups. A

recovering perfectionist, Sophia specializes in MVPifying, complexity elimination,

and ruthless prioritization. She is constantly reminding herself (and her clients)

that done is better than perfect.

MORE FROM THIS AUTHOR

OOUX: A Foundation for Interaction Design (ooux-a-foundation-for-interaction-design)

http://alistapart.com/article/ooux-a-foundation-for-interaction-designhttp://www.rewiredux.com/http://alistapart.com/author/sophiavoychehovskihttp://alistapart.com/author/sophiavoychehovski


12/12


Documents

Object-Oriented UX · An A List Apart Article.pdf