When you hear someone talk about object-oriented design, you may jump to the conclusion that they are speaking about coding. Object-oriented thinking has been around for a long time on the development side of the house, but it’s time that user experience picked up the practice too. Let’s start with a definition of what object-oriented means, and then we’ll look at how this can be applied to user experience, design, and development.

Being object-oriented involves breaking down the user interface and content into component parts known as objects.

Looking at Twitter, a tweet would be an individual object, which can have a number of elements:

• Content of the tweet
• Image
• Mention
• Hashtag
• Keyword
• Short Link
• Location

This tweet object also consists of a number of behaviors:

• Favorite
• Reply
• Retweet
• Delete
• And many more…

This object can have multiple states, which means the object may change based on the context of its use. You are probably saying: “Okay, I get it. So now what?” Let’s look at how defining your site with object-oriented thinking will impact different teams.

Applying object-oriented thinking to user experience

Back in the day when websites had static content and weren’t interactive, information architects instilled in everyone that the top navigation was one of the most important things on a website. All static content pages had to put into buckets, filed, and organized so that they could be found through the top navigation. But today the navigation is the first thing that gets hidden when screen size gets too tight. Even if the navigation isn’t hidden, studies show that people ignore the top navigation and go straight to the content in the page to find what they are looking for. Go check out some award winning sites for best navigation; 80 percent of which do not even have top navigation. Navigation is moving, morphing, and changing, and along with it, the way we need to think about sites also should change to be more modular and object-oriented.

Another change in navigation is from task-focused to object-focused navigation. Users think of objects before tasks—just think of nouns and verbs. Look at the below illustration of the difference between the two mental models. When people wake up in the morning and start to organize their day, which mental model is more likely?

Mental Model 1: Verb-Noun Mental Model 2: Noun-Verb

People tend to think noun-verb, not verb-noun. The car is dirty. Wash it. The baby is hungry. Feed her. We don’t think: wash my hair, the baby, and the car. So it makes no sense to structure navigation based on tasks. For example, look at travel sites like Orbitz, Kayak, and Expedia. These sites use the nouns of flights, car, hotels, and deals for navigation.

With your next project, look at your requirements, identify all nouns, and then see if you can identify the associated objects. Then sketch out what each object might look like and see if there are any that need to be combined. For example, you wouldn’t have individual objects for orange, apple, and banana; instead, you would have an object for fruit. An even more relevant website example: You wouldn’t have an object for every executive role on the about us page; you would have an object for people.

To learn how to look at requirements and identify dynamic objects and how they work together to create an effective modular system, I strongly recommend you look up Sophia Voychehovski and find one of her OOUX workshops. Her workshops include a hands-on exercise that helps solidify the concept. At the end of the workshop, she even demonstrates how you can take your dynamic object diagrams and build a rapid prototype in Axure so that you can start testing in days not weeks…UX Nirvana!

Applying object-oriented thinking to visual design

In the past, designers would design pages or templates to house content. There might be multiple templates to cover the different page types, but essentially these templates were just buckets to pour content into. Then designers started designing toward pattern libraries, which are essentially a collection of recurring design solutions that solve common design problems. So how is a pattern different from an object? An object can have multiple states so it would appear in multiple formats within the pattern library. A good example is a news story, which looks different on a details page than on a list page. On the details page, it shows all elements that comprise the object whereas on the list page, it may only show the title and short abstract.

This shift toward object-oriented thinking in design has impacted aesthetics. Look at modern websites, and you will notice the trend of card-based design tiles. Looking again at social media, Pinterest is probably best known for this. Card-based design is the manifestation of the underlying shift toward object-oriented thinking. Cards allow objects to be displayed in various ways based on different contexts, either in a website or elsewhere. This makes them ideally suited for responsive design more so than traditional design approaches.

Applying object-oriented thinking to development

If you use object-oriented thinking in user experience design, you will be the most liked experience designer with the development team. Talking to them about building objects will make them smile, and more importantly, designers and developers can have conversations that include the same terms and language. Further, projects will be easier to scope in terms of objects and not pages, sections, or complete applications. Everyone will be able to tear down the wall that has stood for years between experience design and technology. Since these objects will be able to stand on their own, you can embrace Agile and start launching sets of objects instead of entire sites. Hooray!

Conclusion

The way we think about experience design and visual design is evolving. The digital environment is becoming increasingly more diverse, and experience design professionals need to adapt accordingly. Object-oriented design provides the toolset for user experience designers to face these challenges head-on.

At Macquarium we embrace object-oriented thinking and apply it to projects we deliver. The benefits our design team sees from this approach are a library of objects we have built and can reuse. Remember that objects are containers for similar things (e.g., fruit or people). These objects become reusable and also decrease the amount of time to develop a rapid prototype that can be used for concept testing early on in a project. The rapid prototype also helps product stakeholders see and interact with the concept(s) earlier. Having even a rough concept they can click and interact with can reveal new ideas or challenges that traditionally wouldn’t be discovered until much later in the project. Consistency across the site or application is also more easily attained with the reusable objects, and the reusable objects allow the team to put more thought into what’s unique. We’ve enjoyed three key benefits of object-oriented thinking: speed, reusability, and consistency, all of which add value to both Macquarium and our clients.

Are you using object-oriented design, if so what benefits have you seen?