Comments on Object-Oriented UX

53 Reader Comments

Back to the Article
  1. Please don’t say “object-oriented”, please! What you’re advocating is probably orientation towards modules, components or containers. As soon as you say OO, some people might start classifying, “namespacing,” inheriting, encapsulating and abstracting towards complexity instead of reducing to simpler forms. As it happened with CSS, it might happen with UX, too.

    Copy & paste the code below to embed this comment.
  2. First, I love the article it is extremely challenging to look at removing navigation through content. I have developed my own thinking which I call Object Attribute Action - where the path to an object is typically through its Attribute (ie. iTunes getting to the object, a song, via an attribute like genre). The thing that stands out to me in the overall article and its comparisons is the lack of actions. What happens when I am composing something? Bring alternate things, images, text, data into an application? Where does that fall into this thinking?

    Copy & paste the code below to embed this comment.
  3. Fantastic article. In building the content modules on stickies in this way, you’ve also created a high-level database schema and a roughed-out API design, which as a developer, makes my life easier and helps show the relationship between the UX design and the functional design. This would probably help engage an entire agile team in the discussion rather than half the team losing focus before its over. I love the concepts presented in this article and I hope this idea takes hold. Thanks for sharing it!

    And I think calling it “object oriented” is perfectly semantic fwiw :)

    Copy & paste the code below to embed this comment.
  4. Sophia, I don’t want to split hairs over semantics, though obviously the language we use directs our thinking. Is the goal here to make UX more approachable to developers? (There has, for quite a long time, been a movement in development/programming world that questions the idea and benefits of object-oriented thinking.) When I think of objects, I think of nouns, but experience to me is more about actions I take (verbs) and how I feel (adjectives.) What about sounds? What about designing experiences for TVs, desktops, phones and watches we carry, or audio-based devices in our rooms and kitchens that don’t have a screen, or devices we haven’t even seen or heard of? Should form define our thinking and experience or rather function? I’m not sure that following software development terminology would be an improvement. I guess it depends. But when design process gets stuck in methodology imported from other discipline, for the benefit of development team, would designers still have a unique voice and perspective they bring or a chance to do something new that breaks the boundaries?

    Copy & paste the code below to embed this comment.
  5. Great article, thanks.  Think you raise a great analogy with the development process - as other commenters and your article say, this is exactly what developers need to do, extract the nouns, verbs, behaviours and relationships from the business requirements.  Oftentimes as web developers, this is done from the wireframes and so having this thinking in place up front when they are produced is a bit help - ideally in conjunction with the developers.

    On the semantics, perhaps strictly the closer resemblance is with “entity relationship modelling” - which is exactly that process of analysing the requirements and determining the database tables/model classes and their relationships - and avoids some of the other OO aspects that don’t to apply so closely.  But I wouldn’t worry too much about that - no analogy is perfect.  For me anything that gets the designer, the developer and the business talking similar language and working from the same concepts is a good thing.

    Copy & paste the code below to embed this comment.
  6. Very interesting article Sophia! I’ve found myself working in the same way, but I’d never thought about how to put it together as you did here.

    Thanks!

    Copy & paste the code below to embed this comment.
  7. Hello Sophia! I recently tried to grasp “object oriented” Content Management / UX too. Like you, I also experience that when designing something, something often frowned upon as an approach is “content first”  to create a great experience.

    I find that “object oriented” is a great analogy in terms of content and metadata organization.  I know how to organize content, maybe also how to prioritize. However, keeping users interested by keeping them “in the loop” of exploring new content through content is really brilliant!

    Thank you a lot for this great insight. With this knowledge, I can’t wait to create a new enticing experience for users.

    Copy & paste the code below to embed this comment.
  8. Great article Sophia! Before I wireframe anything, I often ask myself “what are all the things that need to be a part of this product to accomplish the goals we’ve set?” And I whittle down from there to questions like “what are all the pieces that need to be on this page/screen?” I really like your systematic approach with the stickies. I think it helps make it more visual for other groups and likely spawns more creative thinking in terms of how objects COULD be related (i.e., “what if it worked like this?!?”). And I like the separation from design, because that tends to be UX and Creative’s domain. But stickies and discussion belong to everyone. Also, I find developers are super helpful when it comes to thinking up different ways objects can be related or described. Thanks for sharing your process!

    Copy & paste the code below to embed this comment.
  9. Great article! simple and effective. It sounds like a very good start for my new project. The name OOUX is catchy and also descriptive enough!

    Copy & paste the code below to embed this comment.
  10. A thought provoking approach. I need to think on it more and try some of the suggestions but I love the good theory and How-To here.

    The noun extraction look spot on for a project I’m doing - will try it next week.

    Copy & paste the code below to embed this comment.
  11. One of the biggest failures in any project is walls and barriers. The biggest reason designers and developers cannot come together is because we don’t have tools that create a functional interface. I appreciate the evils of letting a developer standardize the design right out of our work but that is because there are ego centric standards on both sides that resist evolving to protect rather than interface with each other.

    The long and short of it is we have tools like Bootstrap that standardizes working mobile first. While it can be done without this, it also has achieved a level of function that improved the interaction of developers and designers. The next generation of web includes something allowing us to create custom web components.

    Like it or not, Sophia is about to see her concept of OOUX come to life. Yet, don’t be afraid of this. Rather get out in front of it because this change is going to be bigger than when we stopped using table tags for layout. It won’t guarantee developers and designers will mix properly but it will create a giant step forward.

    P.S. KnockoutJS, AngularJS and other solutions are already moving in this direction.

    Copy & paste the code below to embed this comment.
  12. It should probably be called Component Based UI or something similar, but that aside the idea seems more then reasonable, it seems sort of obvious to me actually and that’s not meant as an insult. This is just the process of discovery and the “folding” that happens as one area of an industry rediscovers fundamentals.

    As a full stack web dev of 20 years who is not fully a visual designer, I’m surprised by how much your end result looks like a database entity diagram. There was a period of time where people started saying “Don’t design the DB first, start with the UI”, but now that we are mobile first, reduced UI space, etc. there is a pull back to building a UI that closely maps to the data model because the data model embodies the fundamental reality of the thing you are building. The data model is the atomic structure of the thing.

    Copy & paste the code below to embed this comment.
  13. This is such a great approach to designing UX. Coincidentally, I recently worked on the design of a provincial election site using a similar method. Rather than approaching the design as a series of templates, we began with content modelling and found it to be a powerful way to analyze and evaluate every decision, component and feature that went into the site.

    Goals always remained at the forefront, which resulted in an easily scalable and manageable design system. As a designer, I was surprised by natural flow and low resistance of this approach, and how easy it fostered collaboration amongst the project team.

    Copy & paste the code below to embed this comment.
  14. Quite a thought provoking article. I like the way how OOUX brings clarity to bring UI and content teams closer. For different roles in a team, common understanding of the common goal has often been a challenge and this article addresses it beautifully.

    Copy & paste the code below to embed this comment.
  15. @Sophia Voychehovski I can understand the desire to not call this UI. I was a bit too focused on end state. Your distinction is warranted and important here. You are mapping out, and improving the UX, by aligning the “bones” of the visual and structural model to the reality of the data model of the things you are displaying.  Ultimately, this is the UX that makes the UI implementation not just visually appealing but a good experience and not a shined up mess.

    We are seeing this in the video gaming space that I operate in also. We have been experiencing some of this by having to rework interfaces for mobile screens and then going “You know, this control scheme has merit on larger screens”. Mobile first, and prioritization for responsiveness is causing a very real focus on “what matters” instead of having 27 square inches of visual real estate to dump things into.

    Copy & paste the code below to embed this comment.
  16. Great article, thank you. I’m primarily a developer and when I’m tasked with doing UX for a project this is basically how I approach it because I start asking the sort “Will object A be made up of lots of object Bs?” questions immediately.

    I wish we had a tool set that supported this sort of design/thinking. Seems silly that so many of those objects will be defined over and over again for each step/context in the process: first for the conceptual part of the UX design, then again in wireframes, again in a UI program, again for for the database and yet again in both HTML and CSS. Ignoring content strategy, copy writing, defining error messaging, defining metrics tracking….

    Were there a tool to facilitate the UX method described here that allowed the creation of robust objects, attributes and relationships it should be easy to then import that structure into other applications to make specific use of them. Say, importing into something like illustrator as a set of objects for doing wireframes or Sketch to do UI work.

    Or into a code boilerplate generator that allowed a certain amount of developer interaction beforehand. If you could define the field types for each attribute, for instance, it should be pretty easy to get most of the required SQL boilerplate generated (or point it directly at something like a Rail generator). If you could define the HTML tags for each object/attr, a basic HTML structure with BEM class names based on context/labeling could be very useful. Sure, both would still require manipulation after the fact but it would save a lot of time and make this entire process a hell of a lot DRYer.

    I’m counting on Mr. Vinh to sort this all out. :)

    Copy & paste the code below to embed this comment.
  17. As a full-stack developer using object-oriented programming, I think using that terminology in a UX case is completely appropriate. OO principles will not be the same when comparing backend development vs UX/design, of course. The roles play a part in the terminology definitions, and that is ok. In the instance of OOUX, I feel what a UXer would call an object can be thought of as a content type in a CMS to a developer, the core content of objects being the fields, and the nested content being the taxonomy.

    As someone who is also working on a large build using Drupal, I think this process is spot on. Thanks for sharing!

    Copy & paste the code below to embed this comment.
  18. Thanks for the overdue article. You’ve done a great job of spelling out an embarrassingly under appreciated aspect of the real foundational work of UX. I kind of think of this as a litmus test between UX architects and “designers,” whatever that means these days. I certainly probe for understanding of this when interviewing.

    “There was a period of time where people started saying “Don’t design the DB first, start with the UI” - I would suggest that what you’re describing here is an advanced and efficient way of doing exactly that. Because the abstraction you create by thinking from a user-centered perspective can be radically different from any number of abstractions that might arise from a purely data-centric exercise.

    (Stephen, it sounds like you have data modeling background, would you disagree with that characterization? I think it’s the reason that most db architects sigh with frustration when asked to “just put it all in and we’ll figure out the relationships later.” I.e, the use cases are a critical piece of the business modeling that should drive the data architecture. I think a lot of *natural* data architects intuitively gravitate toward schemas that support the business model, and probably can’t conceive of anyone not doing so. But it’s shocking how many I’ve worked with who believe they see an inherent, use case-agnostic model, which often seems to reveal as much about them as it does about the data. If you (the royal “you” - not you, Stephen) model data and don’t spend a lot of time being frustrated by business stakeholders who can’t articulate their business processes, you may be doing it wrong :-)   

    So I don’t see this as the process finally coming back around to some “truth” of the data schema being the prime driver. Rather, just that this is how we should take UCD deliverables to a level of maturity that cuts out a lot of unnecessary iterations, wherein the whole team has to grope around blindly pushing on templates that were designed with users in mind but no recognition of the importance of the structure of content within the UCD process, eventually coming somewhere close to this approach gets you.

    On the naming controversy: I am by nature in favor of precise vernacular, so might share some of Adam’s concerns about OOUX as a term, and find it pretty easy to imagine it creating issues downstream if a large population of developers map OO to design processes that result in complexity. And it makes me cringe when terms get co-opted and morphed.

    But at the same time, it’s a reality that our language evolves (or devolves :-), in precisely this ugly way, so if using OO for this supports moving “designers” forward into UX architects, more power to you. (I might like something like “Concept Structured” for denotative precision, but recognize that it would draw a lot more blank stares than “object-oriented,” which people have heard of and at least think they kind of understand.)

    In the end, it’s always about that, isn’t it? Who are the intended recipients of the term, and for each of those populations, what does their cultural ethnographic context morph your chosen words into in their minds? How closely does it hew to your intent, and what unique things in their world change it’s meaning to them? Oh, for a research grant on this one :-)

    Copy & paste the code below to embed this comment.
  19. A great article & a great discussion - thanks to Sofia and everyone else.

    I see the overarching idea behind this as being very similar to Concept Mapping, which is a topic I’m digging into right now. I guess you could also call it Business/Systems Modeling, as well as a myriad of other names (e.g. some people already mentioned Entity-Relationship diagramming).

    In case anyone is interested to explore this in more detail (and doesn’t have immediate access to Sofia’s presumably excellent workshops), as well as dig into the philosophical background of why concepts are so powerful, I highly recommend an online course on Udemy aptly named “Concept Mapping”, by Per Emanuelsson.

    The course is not tied specifically to UX or Software Engineering, and will help anyone who needs to efficiently deal with complexity of any sort and help make his/her ideas understandable and unambiguous for any number of people. Oh yeah, and you even get to brush up on your basic UML notation skills in process :)

    Copy & paste the code below to embed this comment.
  20. In the engineering world, there is a shift underway. Object-oriented is giving up ground to functional programming. Not that OO is/was bad, just that something potentially more scalable and efficient has come on the scene.

    The design thinking parallel for functional is activity-centered design. Map out the activities you intend to address and you’ll find yourself thinking more about what users do and think (functions) and less about what your system is (objects). Along that spectrum of activity “stuff”, you’ll find the points where your solution is relevant and where it needs to support other systems. Objects will surface out of that, but they aren’t the center of the universe.

    In my experience designing around functions (or activities) results in a better product experience.

    Sidenote: Job stories* are a natural way to communicate the requirements of an activity-centered ecosystem.

    * https://blog.intercom.io/using-job-stories-design-features-ui-ux/

    Copy & paste the code below to embed this comment.
  21. A very thorough and insightful write up about OOUX. Love the term and the ideas behind it.

    Copy & paste the code below to embed this comment.
  22. I prefer the term ‘schematic UX’, as the process is more akin to building an OO schema (i.e. object-oriented database architecture) than a truly Object-Oriented Design. For example:

    - Your ‘objects’ commonly have multiple responsibilities (this violates a key principle of Object-Oriented Design known as the Single Responsibility Principle), and must do so in order for them to be coherent. This is not something you can solve; it’s a fact of the schema approach you are taking;
    - You are describing the ‘objects’ in terms of their attributes, rather than the messages being sent between them. Good OOD will focus on message structure over object structure (i.e. object structure will emerge from message structure), and
    - It is generally a mistake to think of ‘Objects’ in an OOP program as being ‘real-world things’. They are meant to be abstract bundles of state and behaviour in a way that simplifies the message structure of a system.

    However, none of the above strictly apply in the case of designing a ‘schema’, which is essentially an object-oriented map for a database. I suggest this approach be called ‘schematic UX’ rather than the more confusing ‘object-oriented UX’.

    Also, I think this is a great approach to doing UX! I will be encouraging developers I meet to read this article.

    Copy & paste the code below to embed this comment.
  23. Thanks for sharing! I love your approach, though one thing struck me: Atherton’s quote “Always separate thinking about real-world things from the documents which describe those things.” seems like a direct contradiction to derive the objects from the nouns from the brief. I totally get what you are doing there, but it absolutely depends on having a /good/ brief, what, as we all know I guess, is kind of a rare thing.

    Copy & paste the code below to embed this comment.
  24. Really awesome article.

    This is a super easy, interactive exercise to level the playing field when Strategists, Designers, and Developers are collaborating in the early stages of the project.

    Regardless of what it’s called (IMO, OOUX is easiest for Deisgners and Strategists to understand), this an awesome exercise to ID content, its attributes, and relationships between content.

    Again, tremendous article. Exactly what I was looking for!

    Copy & paste the code below to embed this comment.
  25. Also, this is a great exercise to run with clients, especially if they don’t know what the content is yet. Excellent brainstorming exercise to uncover all the possible attributes and relationship. This would be equally valuable if you receive a good brief, or if the client has no idea how the feature will look.

    Copy & paste the code below to embed this comment.
  26. _

    Copy & paste the code below to embed this comment.
  27. BADASS. I shared this with my entire team and tweeted it out with screenshots.

    It’s a goldmine. A must-read.

    As a designer who also devs, it’s great to socialize the term and workflow of #OOUX because it leads into #OOCSS and api construction so fluidly.

    Great thinking, Sophia. This is an excellent use of the human brain.

    Copy & paste the code below to embed this comment.
  28. Amazing! The OO aproach is really like a Pandora’s box. I loved the conceptual layer that you identified and I agree with you in each letter.
    Thanks for this article.

    Copy & paste the code below to embed this comment.
  29. Sophia, thanks for an info-packed article. As a developer, I learned an awful lot from not only your post, but the links contained within (content!)

    I can’t help but draw parallels with the OOUI & Naked Objects patterns, which I think are primarily coming at the same topic from the developer angle.

    Copy & paste the code below to embed this comment.
  30. Very interesting ! Thanks for sharing

    Copy & paste the code below to embed this comment.
  31. Thanks so much for this article. I’ve just done a basic object map for a side-project following your instructions and it’s clarified a muddy spot and raised an important question I wouldn’t have even thought about until after I’d started coding. Very useful! I’d love to see a follow-up on how you create the inventory of CTAs.

    Copy & paste the code below to embed this comment.
  32. Presenting this methodology, which helps a design team build better websites and products is a great assessment. The application seems much more needed on mobile platforms, due to the shift in consumer behavior. Furthermore, stressing on the fact that the content and UI teams need to work more closely with each other seems the best way to maximize clarity and keep the final OS clean. This is keeping in mind that there is a definition of field types for each attribute that needs to be addressed.

    Copy & paste the code below to embed this comment.
  33. This is a great article.

    I admire it because it introduces a theory about design (think in objects) but focusses on teaching a process (object mapping).  The magic of this approach is that a person could use the object mapping recipe, and get real value out of it, before actually having the conceptual epiphany about the theory of object oriented design.  In fact, following the process is probably the best way to get to the epiphany, just as happened to you on the CNN project.

    One suggestion I have is that, in my experience, if you refer to the work in step 2, Define Core Content of Objects, as Creating the Data Model, you immediately engage your developer stakeholders while at the same time giving your non-developer stakeholders an intuition about this “data model thing” the developers keep talking about.

    Copy & paste the code below to embed this comment.
  34. Nice article!

    I suspect that a lot of people who wrestle with designing large complex sites are kind of doing this anyway, but it’s nice to frame it in this way.

    I don’t see any harm in calling it ‘OO’. That’s kind of exactly what it is anyway.

    Copy & paste the code below to embed this comment.
  35. Very nice article.  I have developed a similar approach, but yours is far better.

    One question: How do you represent object transactions?

    For example, suppose I design a service that transfers money from an account to another.  My cash does not directly go to others, but it goes to a (virtual) teller first and the teller validates things and performs transferring.

    Any suggestion? or is it beyond this topic?

    ‘OO’ seems fine to me by the way. OO does not necessarily means an approach of implementing. It can be used to analyze.

    Copy & paste the code below to embed this comment.
  36. Sophia,

    Awesome Article. Really in Depth to the nitty-gritty.
    Have no issues calling that OO UX Design and I actually like it. It gives it the right analogy to navigate your mind and to think of objects as opposing to screens.

    Thanks again. I am a fan! Peace.

    Copy & paste the code below to embed this comment.
  37. Great article with lot’s of solid points and sound ideas.

    “Object oriented” might not be the right way to express what you mean. OO inherits a lot of baggage from the programming paradigm, you don’t really need. Further more, the programming world is not moving to OOP from FP. The two programming paradigms are complimenting each-other and are used in different ways, not much competition between them.

    I would love to read more about your experience with this approach when you get to designing a bigger system from scratch. I think the way you should name your approach should be the title you are going to give to an object created entirely of other objects :)

    Copy & paste the code below to embed this comment.
  38. Many good points in this. I was discussing with a colleague that the ‘object’ could be either content as you described or actions/functions depending on the application space. One may take on slightly more importance than the other and then would become the main focus for the mapping process you outlined.

    Copy & paste the code below to embed this comment.
  39. In the past I have arrived at a similar place by starting the design process with entity relationship diagrams (ERDs), but your framework folds this concept in and provides a solid approach for prioritizing.  This seems to be the biggest value of your approach:  Across the multiple dimensions of objects, relationships, mental models, etc., how do we prioritize things as they relate to the goals of the user?  This is an excellent starting point for an inspired and informed design.

    Looking forward to your follow ups to this article.

    Copy & paste the code below to embed this comment.
  40. This was very helpful for me! I look forward to applying OOUX at work.

    Copy & paste the code below to embed this comment.
  41. This was very helpful for me! I look forward to applying OOUX at work.

    Copy & paste the code below to embed this comment.
  42. Thanks so much for the write-up. This is now my go to methodology for thinking about product architecture. BTW this reminds me of what Paul Adams touched on briefly while describing architecture in https://blog.intercom.io/the-dribbblisation-of-design/. I wonder if you see the same parallels.

    Copy & paste the code below to embed this comment.
  43. Sophia,
    Great article!  Thank you for the clean and simple overview.  I’ll be sharing this in the future, to at the very least save myself from having to explain it less eloquently.  :-)  The semantic discussions always make my brain hurt as well.  I’ve been referring to my very similar approach as Entity Based Modeling.  ...or other variations on “entity” depending on what seems to grok with different teams.  OO is a great analogy and does bring out the right thinking, but I can see how getting into the details of the semantics may lead to bike shedding.

    I’m curious if you’ve considered ways to abstract the Actions in a similar manner?  After the Entity relationships have been established, I find very exciting discoveries when adding the interactive dimension to the mix.  If done appropriately of course.  Otherwise you simply put the good old fashioned actions on top of a new cleaner ERD.  With the different abilities that the multitudes of devices provide, there are just as many discoveries in automation and behavior to be made by taking the same approach to the interaction layer.  Personally, I’ve been using the terms ‘Tasks’ or ‘Events’ to try to consciously separate the human element from the actions.  By breaking those apart I’ve had a lot of luck discovering new ways to automate or restructure the Actions that a human will take in the new system.
    JAx

    Copy & paste the code below to embed this comment.
  44. Great article. So interesting to think in terms of focussing on things/content first, then how they’re going to interact with that content.

    Thinking in terms of Things is pretty intuitive. But for some reason Things tend to get relegated to assumptions when we’re designing user interactions.

    By the way, the term ‘object oriented’ makes complete sense to me both as a designer and someone with a programming background.

    Copy & paste the code below to embed this comment.
  45. the idea of universe.,

    Copy & paste the code below to embed this comment.
  46. I’m a software engineer tinkering with UX, and while I follow the rationale of reducing the impedance mismatch between an OO data model in the back-end and front-end, what if I said that the software industry is no longer so totally sold on OO?

    Functional languages are gaining traction, and many data processing systems view the universe as sequences of actions and events which flow through transformation tasks, even at the hardware level streams, tasks and pipelines are the common model.

    It would be strange if the UX world would embrace OO design and abandon task and action oriented thinking, while the software industry did the exact opposite, leaving us with an impedance mismatch all over again.

    Copy & paste the code below to embed this comment.
  47. I’m a software engineer tinkering with UX, and while I follow the rationale of reducing the impedance mismatch between an OO data model in the back-end and front-end, what if I said that the software industry is no longer so totally sold on OO?

    Functional languages are gaining traction, and many data processing systems view the universe as sequences of actions and events which flow through transformation tasks, even at the hardware level streams, tasks and pipelines are the common model.

    It would be strange if the UX world would embrace OO design and abandon task and action oriented thinking, while the software industry did the exact opposite, leaving us with an impedance mismatch all over again.

    Copy & paste the code below to embed this comment.
  48. Don’t think that there’s a cross-link to this more recent ALA OOUX article…

    https://alistapart.com/article/ooux-a-foundation-for-interaction-design

    Copy & paste the code below to embed this comment.