UX is not UI
Originally published at www.helloerik.com on December 15, 2012.
UX has become a neologism. When something has “good UX” it is an implied meaning of having the core components of UX (research, maybe a persona, IA, interaction, interface, etc etc…). It’s not really necessary or desirable to tack the word design onto the end anymore. It’s a distraction and leads people down a parallel but misguided path… the path to thinking that UX = User Interface Design.
I was inspired to write this post after viewing Elisabeth Hubert’s (@lishubert) presentation at the Future of Web Design 2012 conference in Prague. She says in the presentation quite clearly:
The interface is not the solution.
That’s the true heart of the battle between UX and those who only want UI — or don’t know the difference.
How UX people see UX
UX is an acronym for “user experience.” It is almost always followed by the word “design.” By the nature of the term, people who perform the work become “UX designers.” But these designers aren’t designing things in the same sense as a visual or interface designer. UX is the intangible design of a strategy that brings us to a solution.
Many UX designers have started to re-label themselves as UX Architects, UX Engineers, or UX Strategists. Some have even dropped the word “user” altogether and just go by Experience Architect/Engineer/Strategist. I think this is partially to help keep them from being marginalized as only interface designers, and partially as a result of the broadening nature of UX. You could be a researcher and persona writer in a senior UX role and never touch an interface design (or even have the skills to).
So what does UX actually mean? The various UX roles that a person can fulfill are plentiful. Some are whole jobs, some whole careers, and others are tactical roles we all dip in and out of.
(Download this comparison list at UX is not UI — www.uxisnotui.com right now!)
UI design is a huge part of UX. I would say that in a good majority of cases the UX designer does in fact design the interface. But UX is not UI. This is where the education of others comes in. Helping people understand just what UX is and the invaluable role it plays is illustrated beautifully with the UX Umbrella.
The UX Umbrella
In a presentation that Dan Willis (@uxcrank) did for the DC Startup Weekend in 2011, he had a phenomenal image that really shows what UX encompasses:
The items that are sheltered by the umbrella have two purposeful omissions — user experience design and interface design.
User experience design is omitted because it is the loose term that encompasses all of the various disciplines. You’re never really doing any “user experience design” that isn’t just a combination of one or more of the things under the umbrella.
User interface design is omitted because it is the crossover between visual design (look and feel) and the interaction design (how the look and feel work). Combine those two and you have an interface. The interface is the result of the “solution design” that came before it.
A skillful interface designer understands the importance of providing the user with a solution to a defined problem.
How you get to an effective UI
UI implementation in production code is typically carried out by a front-end developer. There are people like me who are HTML/CSS slingers, I am often happy to build working prototypes. But when there is complex interaction with real backend code and frontend javascript, that is best left to professionals.
So how do we get to implementing a killer UI? Let’s take a journey through an ideal hypothetical:
- We presume the problem has been identified through the user/market/persona research.
- User flows and stories are made, then trashed, then made again, then iterated on until the problem flow is clear.
- With an idea of ways to solve the problem, some rapid experiments are carried out to validate the assumptions with the personas.
- Some IA work is done to break out the product/site into the logical areas and hierarchies.
- Various wireframes and sketches are drawn to start to organize where things could go on the screen.
- With all the preceding research material and UX work, now mockups with UI included can be made with confidence.
- With mockups and a UI designed, they are user tested and iterated on through some prototypes or experiments.
- After the mockups have been vetted, it’s now time to code up the interface — UI Design!
- Once the usability of the UI has been honed, you can move it on to production — the place that people usually think of as the singular UI.
That’s quite an idealized journey. Not every step has to be taken depending on time and resources. There’s also nothing to stop it from going pretty fast; a matter of days even. I’ve designed countless UIs straight from my head to the screen without following those steps, but that’s not UX. I believe they call it “design malpractice.” Good UI is not trivial or simple — solid UX, killer visuals, and effective interaction are all part of the formula.
Keep on educating!
This is how I’d like people to see UX and understand what is meant by “user experience design.” It takes a lot of behind the scenes work to end up at a capable, elegant, and delightful interface. But the interface is not the solution. This is what the school of UX needs to combat, and then educate about what UX really can do. It’s a huge strategic process that aims to create a product or website that customers/users/visitors are drawn to, find easy to use, and quickly understand. Through the UX work we’ll arrive at the right interface conclusion.
You should give this article a 💚, follow me Erik Flowers on Medium (and on Twitter — @erik_flowers)
Credit to Dan Willis (@uxcrank) for the UX Umbrella and Elisabeth Hubert (@lishubert) for Interaction Design Beyond the Interface.
Update: Download the comparison poster/graphic
I’ve had a lot of people email about the 2-column “what we want them to see, what they typically see” comparison lists, so I’ve put them up in PDF and PNG format at UX is not UI — www.uxisnotui.com!
Originally published at www.helloerik.com on December 15, 2012.
