Loading...

 

Understanding the difference between UI and UX Design. Same, yet very, very different!

  Waqas Khalid Obeidy     17 Dec 2018
Did you know that UI and UX are not the same concepts? Surely, they are closely connected, even mutually penetrated and rarely exist without each other. Would you like to know the differences between UI and UX design in detail? If I were to explain it in a couple of sentences, this would be my best shot. The UI can be considered as the series of screens, pages, and visual elements like buttons and icons that we use to interact with a device. However, UX on the other hand, is the internal experience that a person has as they interact with every aspect of a company’s products and services. UX Design refers to the term User Experience Design, while UI Design stands for User Interface Design. Both elements are crucial to a product and work closely together. But despite their professional relationship, the roles themselves are quite different, referring to very different parts of the process and the design discipline. Where UX Design is a more analytical and technical field, UI Design is closer to what we refer to as graphic design, though the responsibilities are somewhat more complex. A lot of folks mix up these terms and use them interchangeably. The term UX was coined by cognitive scientist Don Norman in the early 1990’s while he was VP of the Advanced Technology Group at Apple. He once said, “Terms like these just sort of entered the vocabulary and no longer have any special meaning. People use them often without having any idea why, what the word means, its origin, history, or what it’s about.” For the people reading this article, you won’t be the “folks” Norman was referring to after reading this article.

User Interface Design (UI)

Long time ago, back in the 1970’s, if I wanted to use a computer I had to use the command line interface, which looked much similar to our modern day command prompt interface but was way more complicated. And trust me when I say, this was the only thing you could actually see on the computer screen. That’s right, No Images, No Fancy Icon, No Dancing Fonts, nothing!
DEC_VT100_terminal
(Image Source: Jason Scott & Wikipedia) I couldn’t buy a computer with graphics, icons, buttons, or a mouse. They didn’t exist commercially at the time. To get the computer to do what we wanted, we had to speak to it in a computer programming language. This is what my uncle who is a senior computer engineer at a tech firm in California, narrated to me during a meeting last month in Kuala Lumpur, Malaysia. Things changed in 1981, when a group of computer scientists at Xerox PARC developed and launched the Xerox Star. That was the personal computer with the very first graphical user interface (GUI). It used windows, icons, drop-down menus, radio buttons, and checkboxes. And it allowed users to open, move, and delete files. It might not look like much compared to what’s available in 2016. But at the early stages of the personal computing era, the GUI was a revolution. It meant you no longer had to rely on writing code to use a computer, making it far more accessible to the masses.
Xerox_Star_8010_workstations
(Image Source: Wikipedia) The advent of the GUI introduced the need for a new breed of designer—one who was focused on the graphical interface of a personal computer. And that’s when the UI designer stepped onto the scene. Despite it being an older and more practiced field, the question of “What is user interface design?” is difficult to answer by its ranging variety of misinterpretations. While User Experience is a conglomeration of tasks focused on optimization of a product for effective and enjoyable use; User Interface Design is its compliment, the look and feel, the presentation and interactivity of a product. Here is how some of the modern day dictionaries define user interface; noun Computing: the means by which the user and a computer system interact, in particular the use of input devices and software. Every design element that you opt for, such as, the fonts or the color palette, make a significant impact on your UI. That’s why it is best to use a good mix of font families and optimized images to make user experience seamless and hassle-free. Less is better in UI design. And nothing sours the whole user experience than a bunch of pesky errors or bugs that may arise if your product isn’t taken through the paces and tested extensively for them. The following infographic by DesignMantic sums up the 10 commandments of User Interface design quite succinctly.
ten-Commandments-UI-Design1
ten-Commandments-UI-Design2
The UI role is crucial to any digital interface and for customers a key element to trusting a brand.While the brand itself is never solely the responsibility of the UI designer, its translation to the product is. Let’s have a quick look at the UI Designer’s responsibilities: Look and Feel:
  • Customer Analysis
  • Design Research
  • Branding and Graphic Development
  • User Guides/Storyline
Responsiveness and Interactivity:
  • UI Prototyping
  • Interactivity and Animation
  • Adaptation to All Device Screen Sizes
  • Implementation with Developer

User Experience (UX)

Like I stated above, Don Norman, a cognitive scientist and co-founder of the Nielsen Norman Group Design Consultancy, is credited with inventing the term in the late 1990’s declaring that”User experience” encompasses all aspects of the end-user’s interaction with the company, its services, and its products.” This implies that regardless of its medium, UX Design encompasses any and all interactions between a potential or active customer and a company. As a scientific process it could be applied to anything, street lamps, cars, Ikea shelving and so on. In an email explaining the origin of the term, Norman wrote: “I invented the term because I thought Human Interface and usability were too narrow: I wanted to cover all aspects of the person’s experience with a system, including industrial design, graphics, the interface, the physical interaction, and the manual. Since then, the term has spread widely, so much so that it is starting to lose its meaning.” By definition, user experience covers a broad range of disciplines, and it can be hard for some to wrap their heads around.But in a more recent essay, Norman elucidated on the combination of ingredients that go into achieving a high-quality user experience: “The first requirement for an exemplary user experience is to meet the exact needs of the customer, without fuss or bother. Next comes simplicity and elegance that produce products that are a joy to own, a joy to use. True user experience goes far beyond giving customers what they say they want, or providing checklist features. In order to achieve high-quality user experience in a company’s offerings there must be a seamless merging of the services of multiple disciplines, including engineering, marketing, graphical and industrial design, and interface design.” UX isn’t just limited to the visual interface of your product. It’s a concept that has many dimensions and encompasses the entire journey a person takes, including: • The process they go through to discover your company’s product • The sequence of actions they take as they interact the interface • The thoughts and feelings that arise as they try to accomplish their task • The impressions they take away from the interaction as a whole
UX Design
User Experience Honeycomb (Source: Peter Moreville) UX designers are responsible for ensuring that the company delivers a product or service that meets the needs of the customer and allows them to seamlessly achieve their desired outcome. They may do that by conducting user research to get as much context as possible about the user of the product and then using those learnings to mockup wireframes and prototypes to help the user get from point A to point B. Now let’s have a quick look at the UX Designer’s responsibilities: Strategy and Content: • Competitor Analysis • Customer Analysis • Product Structure/Strategy • Content Development Wireframing and Prototyping: • Wireframing • Prototyping • Testing/Iteration • Development Planning Execution and Analytics • Coordination with UI Designer(s) • Coordination with Developer(s) • Tracking Goals and Integration • Analysis and Iteration So part marketer, part designer, part project manager; the UX role is complex, challenging and multi-faceted. You see that iteration of the product, as connected to analysis or testing is indeed mentioned twice, but in reality you would put it in between every other item on the list. Ultimately the aim is to connect business goals to user’s needs through a process of testing and refinement to that which satisfies both sides of the relationship.

So, What’s actually the difference between UI and UX?

Don Norman and Jakob Nielsen summed it up perfectly when they said: “It’s important to distinguish the total user experience from the user interface (UI), even though the UI is obviously an extremely important part of the design. As an example, consider a website with movie reviews. Even if the UI for finding a film is perfect, the UX will be poor for a user who wants information about a small independent release if the underlying database only contains movies from the major studios.” Google is another good example. Its interface is simple. There’s barely anything to the UI—just a logo, a search bar, a few buttons, and a search results page. But when you type something into that search box, you get access to nearly the entirety of digitized human knowledge in less than one second. Now imagine that every time you searched on Google it took 15 seconds to get a result—you’d no longer be able to instantly get an answer to your question. Even if the interface stayed the same, your experience with Google would be dramatically different.

Okay! But which one is more important, UI or UX?

If you’ve read the above paragraphs you already know the answer. But in case you’re unsure, look no further than the quote of the designer and expert Helga Moreno from onextrapixel.com, who inside her article The Gap Between UX And UI Design puts it quite eloquently: “Something that looks great but is difficult to use is exemplary of great UI and poor UX. While Something very usable that looks terrible is exemplary of great UX and poor UI." Like most things in life, different people have different takes on this topic. So thanks to people at www.usertesting.com who reached out to some smart and talented folks from the tech industry to get their opinion. Here are some of them: UX is focused on the user’s journey to solve a problem, UI is focused on how a product’s surfaces look and function Ken Norton – Partner at Google Ventures, Ex-Product Manager at Google A UX designer is concerned with the conceptual aspects of the design process, leaving the UI designer to focus on the more tangible elements Andy Budd – Co-founder of Clearleft, Founder of UX London UI is focused on the product, a series of snapshots in time. UX focuses on the user and their journey through the product Scott Jenson – Product Strategist at Google UI is generally about visual design and information design around screens. UX is about the complete experience, and it may not be even about the screen Patrick Neeman – Director of Product Design at Apptio, Founder of Usability Counts As you can see, they are both crucial, and while there are millions of examples of great products with one and not the other, imagine how much more successful they might have been when strong in both fields. And let’s face it, both roles are still confused, misinterpreted, and falsely sought after. So if you’re looking to get into these fields, it’s not a matter of which is more important, but based on the descriptions above which is more attractive to you. Here is a great example by ED_LEA to understand visually the difference between UI and UX.
User Experience Vs. User Interface Infographic As Cereal
User Experience Vs. User Interface Infographic As Cereal While there are collegiate institutions who have Interactive Design and visual design programs, there are very few official ways to learn either UI or UX Design skills as applied to working with tech startups. Online programs offered by Lynda.com, interaction-design.org and careerfoundry.com are also great ways to get a headstart in these fields.