Allow a web copywriter some alliterative, homophonic license: “Usability” used to be what the business, IT and design worlds referred to as “user-friendly” — that something should be easy, convenient and practical to use. It’s a concept as familiar and necessary to customer experience as “the customer is always right.”

“User experience” (UX) design is the evolution of this continuum, adding “enjoyable” to that description; and more crucially, the understanding that UX encompasses end-to-end customer interaction with a brand. End-to-end enjoyability, is exactly where “user interface” (UI) design comes in for digital and web development applications.

UX and UI have been used interchangeably in everything from task lists to job titles, but they’re not the same thing. What’s the difference between UX and UI — and does this impact the work of the web designer or web content writer?

Top level: “UX is holistic and takes into consideration all the factors that come into play when a person has an experience with a company, its services and product…UI is one component of UX and focuses on the visual aspects of the experience,” says Abeiene Nejar, a Vancouver, British Columbia-based UX consultant.

The Hook

Complete this sentence: “Good UX is….” Key UX criteria could include adjectives like “useful,” “findable,” “credible” — the user experience honeycomb provides further considerations.

Drill down further into the skill sets needed to create good UX, among them project management, UI design and content strategy, and it becomes clear that both UX and UI are interrelated.

But who really does what for a web development project? What tasks and deliverables fall under UX or UI, and how far do they overlap?

Take, for example, an eCommerce website project. From the business perspective, the goal is to sell products; from the customer perspective, to purchase them.

UX design, a combination of marketing, creative direction and project management, provides the “why” — using research and testing to balance business requirements with customer objectives.

The UX designer would focus on something like simplifying the user path from the home page or landing page, to adding products to the shopping cart, to completing the purchase, displaying “need to know” information in a timely and organized way throughout, and providing higher level answers to questions like:

• Why have an “FAQ” page?
• Why create a “Put on my Wish List” function?
• Why include tech tips in a sidebar?

UX deliverables would include:

• Sitemap (strategy, UI and content development)
• Wireframing and prototyping (testing and iteration)
• Research and analytics (competitor/customer analysis)
• Project execution (coordination with UI designers, web designers and developers, milestone tracking)

UI design, a combination of visual design, interactive design and (yes, increasingly) coding, provides the “what” — using look, feel and interactivity to actualize UX research, strategy and development into an attractive, responsive, satisfying customer experience.

The UI designer would focus on crafting the user-facing, viewable website elements — from buttons, icons and text, to colour and typeface — based on the company’s branding or style guide, and provided UX parameters. UI design represents the company aesthetic and communicates the brand, and answers questions like:

• What does the user notice first, second, and so on?
• What will users interact with, and how will they know what to do?
• What individual visual elements will immediately make the site stand out?

UI deliverables would include:

• Look and feel (customer/design research, style and layout mock-ups)
• Responsiveness and interactivity (UI prototyping, cross-platform adaptability)
• Branding and visual element development (user guides/personas, colour palettes, typography, photography, graphics)
• Implementation (working with web designers and developers, web copywriters)

If you’re more into strategizing and structuring an effective experience from the user perspective, you likely fall on the UX end of the spectrum. If you’re more interested in crafting what the strategy and structure would actually look like, you just might prefer UI design.

Both UX and UI want to achieve the same thing: Meaningful customer experience.

The Bottom Line

UX and UI are interdependent parts of the website’s larger whole, and both must be well-executed to give customers the most functional, enjoyable experience.

Lucia Ciccio, Senior User Experience Designer at SurveyMonkey:

“If you were to use the human body as an analogy, UX is the internal skeletal or nerve systems. It is the underlying thinking about the needs of the user and how the product will meet those needs. UX builds empathy with the user and answers those needs by planning user flows, calls-to-action and feedback. UI is like the skin, the eye color, the tone of voice that gives the product its own personality. Think page layout, colours, fonts, text, imagery, animation.”

“When both [UX and UI] are done well, the product is memorable, pleasant and helpful — all the qualities you want in a good person. Good UX is smooth, intuitive and unnoticeable to the user, while good UI should stand out, aiming to be unique and engaging.”

The Crystal Ball

UX is here to stay. A Walker Information report suggests customer experience will be the key brand differentiator by 2020, at least for B2B organizations.

The strong business case for the ROI of UX seems clearly established, vindicating the famous 1973 declaration that “good design is good business.” High profile examples would be design- and user-centric companies like Apple, Facebook and Google, which created success by improving and innovating the UX (and yes, UI) for existing products and services.

UI will likely see a more rapid, necessary evolution; the emergent Internet of Things has introduced environments where personal virtual assistance may eventually replace conventional UI requiring direct, immediate physical interaction.

Until that happens, we’re confident that brilliant UI design is one of the most powerful tools for achieving stellar UX results in digital and website environments (not least because it incorporates content writing). Do you agree?

In a recent contribution to Forbes Technology Council on maximizing the business benefits of UX, Intechnic founder Andrew Kucheriavy suggests effective UI design doesn’t simply incorporate UX into the web development process, it can also increase development efficiency by up to 50% — specifically, through using previously tested user interfaces for specific interaction design issues (pattern libraries of reusable solutions, such as a Wizard for guiding users through a linear process).

Have you worked with pattern libraries? What aspects of UX or UI do you find are already part of your role and project requirements?

A web copywriter works both within the broad parameters of UX and content strategy, as well as to the “look and feel” and technical specifications for UI content writing. Enhance the UX and UI of your next website development: Contact us for content strategy and creation that appreciates the difference.