Floating Orange
Design. Write. Learn.

What I Learned This Week

User Experience and User Interface Design

UXD VS UID
Even if you’re involved in digital design, the differences between UX (User Experience) Design and UI (User Interface) Design can be confusing. Many organizations define these roles differently, which can add to the confusion over what a UX Designer does compared to what a UI Designer does.

My aim in this blog entry is to peel away some of the confusion, and help create clarity about what the two roles do within the specific context of designing apps and websites for use on smart phones, tablets, laptops and desktops. So, when I use the word “design”, I’m really talking about design within this context, the context of digital design.

First, I think it’s helpful to view design on a spectrum. On one end are very social tasks and considerations, and on the other end, very technical tasks and considerations.  Think of it like a spectrum with a liberal arts education on one end and a mechanical engineering education on the other. 

User Experience (UX) is much more concerned with sociology, usability and interaction. UX takes a cognitive approach that is more focused on increasing customer loyalty and satisfaction with the entire brand. As such, UX is more interested in a product that is easy to use and results in customer conversion.

User Interface (UI), on the other hand, tends to pick up the spectrum at branding and focus more on the mechanics of creating   specific graphics and designing specific visual elements of a product, even coding in many cases. UI is more concerned with creating a beautiful product than one that is necessarily easier to use. And while everyone ultimately wants customer conversion, UI tends to be more concerned with the aesthetic value of the product than the functional value.

Let me be clear, I’m not suggesting there is a conflict between UX and UI. Rather, I’m saying that they come from two different, and equally important perspectives that compliment each other and are both required to deliver digital products that delight customers and get the job done. Let’s take a look at what those roles actually do and how they compliment each other to bring a great product to market.

The Design Process
Earlier, I asked you to envision a spectrum of design tasks and considerations, beginning with social thinking and completing with technical thinking. When we start breaking this spectrum into more discrete steps, it ends up becoming our design process, beginning with research aimed at understanding human behavior and culminating with writing the HTML, CSS and JS that helps drive that behavior on different form factors.

End-to-end, a design process will typically include the following seven general steps:

Research
Depending on your digital product, research can be extensive. Particularly when designing a new product, it begins with understanding the market for the product you are designing, including competitor and customer analysis. It almost always involves putting together a coherent product roadmap that plans out the objectives you want to achieve based on the market analysis you’ve completed. 

Usability Design & Testing
The usability of any product can be measured according to six basic dimensions:
1. Is the product design intuitive? Is it obvious to users how to navigate your product? 
2. Is it easy to learn? Can new users perform basic tasks quickly?
3. Is the product efficient? Can experienced users perform tasks quickly?
4. Is the product memorable? Can users easily remember how to use the product after being away for a while?
5. How often do users make errors while using the system, and how severe are those errors? How long does it take users to correct errors?
6. And, of course, how well do users like the product?
There are many methods and tools you can use for Usability Design and Testing, and I cover them in detail in another blog. The big takeaway here is that Usability Testing can be ongoing and iterative, and the results are used to inform the rest of the design deliverables/

Information Architecture
Information Architecture (iA) refers to the organization and labeling of the content for your digital product. I talk more about iA in another blog, but for now, the only thing that’s really important to understand about iA is that it’s all about organizing the information displayed on a page in a way that’s easy for the user to understand.

Wire-framing
Wire-framing is the place where you connect visual design to Information Architecture, and its perhaps to place you will most often see overlap between a UX Designer’s job and a UI designer’s job. Either role can create wire-frames, and both roles are very concerned with the creation and evaluation of wireframes.

Prototyping
One of the most powerful tools for a UX Designer is the prototype. There was a time when prototyping meant writing code to develop a basic, workable application. Today, there are plenty of tools available, like Axure and UXPin, that allow a UX Designer to take a rough wireframe and make it interact well enough to demonstrate an idea to a room full of stakeholders. A good prototype tells the story of a user’s journey through an application or website and helps designers and product owners start imagining situations that they couldn’t before.

Graphic Design
A graphic designer is a master of using color, typography, icons and other images to convey compelling message. Graphic design is more in the UI sphere of responsibility, but UX is also very concerned with graphic design, inasmuch as it effects how a user interacts with the product. Graphic design is about creating images, selecting fonts, and mixing them in a hierarchy that creates a desired feeling. Tools used in graphic design include the Adobe Creative Suite, Sketch and Autodesk Graphic, as well as many others.

Visual Design
If graphic design is concerned with creating a compelling message on a website, or making an application intuitive, visual design is more focused on ensuring a consistent look and feel across multiple digital properties. If a graphic designer is focused on communicating a specific message at a specific time, visual designers are more concerned with the overall look and feel of the brand. 

Summary
Different organizations define the roles of UX and UI differently, depending on the size of the organization, the type of digital product, and where they are in the product lifecycle. Regardless of how the roles get defined, UI is going to be more concerned with aesthetics and consistency, whereas UX is focused on interaction and usability. The bottom line is really what you, as a designer prefer to do. If you like thinking about the big picture of business strategy, doing behavioral research and focusing on marketing analytics, then the User Experience path may be for you. If you prefer focusing on the aesthetics of a product, like graphic art, and even enjoy writing code, maybe you’re a UI Designer at heart.