- PART 1 – UI versus UX – Differences and History
- PART 2 – UX/UI Design and Product Life Cycle
- PART 3 – Users, Usability and Common Design Pitfalls
- Part 4: Users, Accessibility, and Common Design Pitfalls
- Part 5 – UI/UX Design: The Color Theory and how it helps
- Part 6 – UX/UI Design: Prototyping Essentials
Suppose you have a departmental store and you want to join the online bandwagon. You want to have a web presence through which people can do online shopping. You want people to pay online, checkout with their items and you want to ship them to the given addresses. You also want to keep records of items sold, demographics of the people to whom you have sold and all the data related to the shop. What will you do?
As an obvious choice, you will probably contact a service provider who will develop a web application for you. What do you think the service provider will ask you? The main requirements, the colors of your choice, or your business logo albeit in layman terms!
UI/UX design, Web, App, & Software Design
UI/UX immerses itself to all screen sizes (Browser, Mobile, Tablet etc). These days UI/UX design teams have to work closely with designers, developers, product management, and marketing teams. Wireframe Mockups are created while interfacing with all these teams with a user in perspective. In this series, we will be looking at the UI/UX design from the perspective of the web, app, and software design. These days design involves truly immersive colour theory, typography, iconization, infographics, graphics, and interactivity.
UI/UX design teams have little knowledge of programming but it is becoming important these days to have a knowledge of programming that directly relates to web design and outlook. E.g. Sass and Less are being used these days to further enhance the interactivity in designs. These language are the modern toolkits of a UI designer as well. We will discuss the toolkits further in the series. Around all these areas, a parallel aspect is the user research. It is now conducted by all the teams in their own respective areas and then merged into a coherent whole for the UX/UI design teams as well.
— Creativity Different (@CDifferent) April 13, 2017
The service provider will take your crude requirements, jot them down, analyze them and maybe show you a prototype of the website or wireframes. A prototype or wireframe is non-functioning look and feel of the web application. This is called User Interface Design (UI Design). It simply shows how the user will see the web application, placement of functions, and cosmetics. UI does not only work on cosmetics but also on passing messages to the user. So the service provider will also get the user stories pertaining to the interface as well.
Once we have the prototype or wireframes approved by the user, the next step is to take the user interaction with the system in a user friendly environment regardless of the technical knowledge and skill of the user or users. It is also called customer experience in Marketing terms. In technical terms, it is known as User Experience Design (UX Design). User Experience Design is also derived from user requirements. Although it is more technical than the UI Design, it is as important as the UI Design.
UX designer takes the design to the next level by working on user experience from all perspective i.e. it makes sure that design has a particular consistency around the user. UX designer makes note of the user journey when interfacing with the platform. It creates user personas and creates an approach on what user stories to target and which functionality should be built around them.
A usability testing framework is also devised by the UX designer so that one can know the exact journey of the user through the platform. This involves clickable mockups.
Connection between UX and UI
Most of the time, these two terms UI and UX Design appear together. As you can see well from the above explanation, neither can exist without each other else the application will be of no use. Each of them is used interchangeably and complement each other. Using an analogy, UI is the skin, while UX is the underlying vessels that make the skin functional.
A bit of History
In 1969, Nickerson put forwards a pretty futuristic statement about design: “the need for the future is not so much computer oriented people as for people-oriented computers”. This led to technologies intended for human use e.g. User-Centered Systems Design (UCSD), User Experience (UX), User-Centered Design (UCD), Interaction Design (IxD), and Human-Computer Interaction (HCI). Each one of these further crystallizes to diverse domains.
Early design elements (from the 40s to 70s), the focus was much on the command line and programming languages. But then it included the concepts of Windows, Icons, Menus, Pointers (WIMP), and Graphical User Interfaces (GUIs), back in 80s.
Don Norman, founder of the Nielsen Norman Group Design Consultancy is known to be the first one to have coined this term in the late 1990’s while UI has been there for quite a long time. If you have heard of these terms in passing than know that both of the terms while new have been used since the beginning of technology world. They have become more defined as we move towards mobile applications where the user is experiencing the graphic design (UI) and is navigating through pages and pages (UX) in a small dimension.
— ShengyuC (@ShengyuChen) June 3, 2017
Post-2000 CE, it starts merging with other parts of applied research areas e.g. Human Relations, Organisational Behaviour, Psychology, Engineering, Mathematics, Linguistics etc. This is one of the reasons that UX and UI teams have to collaborate closely with other teams within the organization. The pictorial summary of some of the fields related to the user can be seen in the following graphic (Courtesy: Gordon D. et al, Springer 2014).
And in much much modern ways the AI (Artificial Intelligence), and AR (Augmented Reality) interfaces require much much more intuitive, innovative, and complex designs.
— 3BeansDigital (@3BeansDigital) June 3, 2017
UI and UX are the most confusing terms and people find it hard to understand the context in which they are used. However, it is important to understand that one without another is absolutely nothing. UX allows a user to be able to navigate through the application with ease of purpose while UI makes it possible for the user to understand the context/layout or the brand of the website.