“When we go into a digital environment, the laws of physics are completely blown out of the water,” exclaims Sophia V Prater, UX coach, consultant and founder of Rewired, a studio in Atlanta, Georgia. “We do crazy things. It’s often confusing and not rooted into how we perceive reality.”
By way of an example, Sophia tells the story of how a hosting company recently emailed her to let her know that two of the URLs she owns were about to renew. She decided to turn off auto-renew for one of them and clicked ‘Manage Renewals’ to do so.
“So I see a list of all my domains, and if auto-renew is off, there’s a nice little toggle to turn it back on. But if auto-renew is already on, there’s no way to turn it off! I have to go to a completely different part of the site, to ‘My Domains’, and over there you don’t use a toggle. So you have to carry out one side of the action in one place, and the other action in another place. In the real world, it would be like turning the light on with a switch but to turn if off, I’d have to go into the attic and pull a bunch of levers. It doesn’t make sense. That’s what I call a broken object — when the call-to-action for the object is completely disconnected from the object itself. As much as possible, objects should be directly manipulable. That’s how we act on things in the real world: we reach out and grab them.”
Developing the object-oriented UX process
According to Sophia, broken objects are one of the biggest user experience fails. To avoid them, she leverages the principles of ‘object-oriented UX (OOUX)’’, a philosophy that she dug up from the 90’s (developers called it “object-oriented UI” back then) and began popularising in 2013. OOUX is focused on figuring out and modelling the user’s world, then reflecting that mental model of real-world objects in the digital environments we design.
“The idea is that before I design any screens, before I even wireframe or work on the UI, I’m going to answer the following questions: what are the objects in the user’s world, what are they made of, how do they connect, and how do they relate to the user. If I get those questions answered and make sure that they’re clearly reflected in the user interface, I have a much better chance of this user interface being intuitive.”
Object-oriented UX has its basis in the real world and how we navigate through it. “So if I go into the bathroom and then leave through the same door, I’m going to expect to be where I was before,” Sophia argues. “But this often doesn’t hold true in the digital world. While breaking the laws of physics can be great, look at spellcheck and undo, you still need to lean back on the principles of what users will expect from any environment. Google Photos is a good example: I’m in my photo stream, select some photos and add them to an album and then go into my album, rearrange photos and save it. Then I click the Back button, but it doesn’t take me back to All Photos, where I just was. It takes me to All Albums, which is a page within this user session I haven’t even been before. And this happens all the time.”
[Google have since fixed this, and the back button now does return to the photo stream. Sophia points out that they could have avoided this rework by just following the heuristic: if the user is in a place, leaves that place to complete a task, when they “return” they should be back where they started. “Back” should be relative to the user’s path, not a the UX designers static site map.]
Designing CNN’s 2012 election night experience
Sophia teaches OOUX within companies (e.g. Macys.com, Mastercard, Delta Airlines, and Intercom), and at conferences all over the world. She developed the process when she was a UX designer at CNN.com and worked on the responsive election night experience in 2012, viewed by over 200 million people. It was an incredibly high profile and cutting edge project. Hardly any other news outlet at the time had a responsive design, and it wasn’t until 2015 that CNN.com launched a fully responsive site.
“This is where it all started,” Sophia remembers. “Responsive design was the catalyst. We were way ahead of the time. It was a big scramble, and we did a lot of things wrong but we did launch a successful experience that didn’t break. The page views were great, and CNN made all the money they wanted to make on that night.”
Sophia realised that the more moving parts there are, the more likely a site was going to break. Extraneous design elements can easily creep into a product, which not only increases development costs but also makes life harder for users. So Sophia thought about how she could simplify the 2008 experience without dumbing it down. She didn’t want to show less data but make it easier to build and to do so responsibly.
“We reduced the number of modules and templates. We made every module do more work, and we were reusing modules on different pages. But when I analysed the project, I realised that reducing the number of moving parts and prioritising all the elements was what I should have done throughout my career, regardless of responsive design.”
Improving the 2016 election night experience with OOUX
Initially, Sophia called her process modular design, but then she started looking into object-oriented programming and had, as she puts it, a smack-your-forehead moment. “I realised this was what developers were doing when they build databases,” she explains. “They’re determining the objects and figuring out the substance and the relationships of those objects, but they’re not necessarily doing the user research to make sure that the objects in the database are in direct correlation with how the users are thinking. I realised that the user experience designer can be the connection point between how the user thinks about the objects and how the developer needs to build them.”
In 2016 Sophia returned to work on CNN.com’s election night experience, this time as a consultant. By then OOUX was a well-oiled machine, and as the information architecture was exactly the same, it became an exercise in refining and improving the process and thus the experience.
“In 2012 I moved pieces of metadata around slightly, which increased the cognitive load on users,” Sophia points out. “That’s the last thing you want to do, especially on a website that’s being used on one night only. There should be a zero learning curve, so you don’t want to make arbitrary changes, which I call shapeshifter modules.”
Sophia describes a shapeshifter as an object that’s not consistently represented or placed. Users learn where to look for a piece of metadata, so if they expect the price on a website to be in light grey text in the bottom corner, they might still not see it if it’s in red at the top. Sometimes there’s a very good reason for an object to be represented differently if the context on the site changes, but often they’re not intentional changes on the designer’s part. Sophia therefore recommends to test designs repeatedly and to be aware that you may sacrifice consistency when making changes. In 2016 the modules on CNN’s election night experience were carbon copies of each other.
From sticky notes to digital prototype
Sophia starts her process by collaboratively building an object map with the help of sticky notes to figure out the objects and their relationships. She then tends to design a more sophisticated, digital version of the sticky notes with Trello and prototypes a CMS with Webflow — even before any wireframes are created.
“I can spin up a CMS in two hours and have a beautiful experience for someone to come in and start filling with real content, which is just amazing,” Sophia enthuses. “Usually, the object-mapping process will get it about 80 per cent right, and with the prototypes we can get really close.”
Object-oriented UX is suited for all kinds of organisations but the more complex the system, the more it’s needed to make sure objects are represented consistently across different touch points. A recent example is the site for Georgia Tech Research Institute.
“The site had a very heavy main navigation,” Sophia remembers. “There was no way it could go into a mobile scenario. It had four levels of navigation — a big top nav, lots of drop-downs and a side nav with accordions inside of it. And every little piece of content was basically a dead end. When you got the content, you had to go back to main navigation. So we defined the objects, constructed relationships between them, and now you can navigate from one object to another. Unless you want to restart, you never have to touch the main navigation. It’s just there, as I like to call it, as the fire escape.”
Spreading the word of OOUX around the world
Sophia also loves mentoring people. She led the Atlanta chapter of Ladies that UX for 5 years (before handing it off to Havana Nguyen) and created a local conference called UX Hustle Summit to help UX designers on their career path.
Sophia’s current design challenge is crafting an amazing learning experience for those that enter her OOUX Certification Course, a rigorous 10-week online program that she started in 2020. The fourth cohort filled up fast, so make sure to get on the waitlist for cohort five.
Sophia’s ultimate goal is for the term object-oriented UX to disappear, as it becomes normal UX practice. Until that happens, OOUX’s chief evangelist travels the world to tell people they just need to add this one piece to their existing process to make everything else easier. It’s a repeatable, foolproof process for creating elegant, naturally intuitive digital environments.
This article originally appeared in issue 318 of net magazine in 2019 and has been reviewed by Sophia Prater prior to republication.