UI design and UX design are two of the most often confused terms in web and app design – and it doesn’t help that the two terms are usually placed together in a single term, UI/UX design. These terms are not interchangeable; each refers to a specific type of user design.
At its most basic level, the user interface (UI) refers to the series of screens, pages, and visual elements—like buttons and icons—that enable a person to interact with a product or service. So “UI” is anything a user may interact with to use a digital product or service.
User experience (UX), on the other hand, is the internal experience that a person has as they interact with the product or services – and this is a much later concept compared to UI.
The Development of the User Interface
The graphical interface didn’t exist back in the 70s, when interacting with a computer required either using the command line interface or writing lines of code to complete a task. The first true graphical user interface (GUI) came along in the 1980s, consisting of submitting commands through icons, buttons, menus, and checkboxes.
This was a fundamental shift in computer use, as it meant that anyone could use a computer without needing to code, and it resulted in the personal computer revolution, starting with the Apple Computer in 1984.
As computers evolved and proliferated into many devices, so the role of a UI designer changed to meet growing user expectations. Today, UI encompasses websites, mobile apps, wearable technology, and smart home devices – for users of all ages, backgrounds, and technical experience.
UX came from the improvements made in UI, when it became increasingly important for the technology displayed on the screen to interact with users in a more proactive way, creating a ‘customer experience’. In other words, how users feel at a cognitive level as they interact with a company’s products or services.
The difference between UI and UX
With a UI, the focus is on the visual touchpoints that allow users to interact with a product or service. To achieve this, UI designers use a combination of typography, colour, buttons, animations, and imagery to make navigation of a product’s interface as intuitive as possible, while keeping the design consistent with company branding. UI is therefore focused on the product via information design, motion design, and brand.
UX design is all about the overall feel of the experience through your website or app; how they interact with it, if it feels intuitive, or clunky and confusing. A UX designer considers the user’s entire journey to solve the reason for the user being there on your website or app in the first place; what steps do they take? What tasks do they need to complete? How straightforward is the experience? What kinds of problems and pain-points do users come up against? Looking at it another way, since UX is about the user experience, it can be considered as the voice and intentions of the company.
A UX designer is therefore concerned with the conceptual aspects of the design process, needing skills in strategy, user research, information architecture, and interaction design. As UX designers gain an understanding of their audience, they create user personas, which helps with defining the goals, desires, and limitations of their target users to map out the right experience. Good UX combines what the company stands for with what the user wants.
To illustrate the difference between UI and UX, consider a restaurant – the UI is the presentation: the shopfront, the tables, chairs, the colour scheme, the choice of wine and the items on the menu. UX is why people would rather eat there than somewhere else.
Which Comes First?
UX and UI are clearly different but related design disciplines. Whilst the UI designer considers all the visual aspects of the user’s journey, the UX designer’s job is to map out the entire journey. However, UX/UI design is also a collaborative process, requiring both disciplines to work closely together to be effective.
Just as with any journey, the first step is to map out the bare bones of the route, and then fill in the details of what you’ll need to get to the end. In other words, UX design usually comes first in the product development process, and then the UI. Both are equally important, however, and each is reliant on the other for the product’s success.
Blueberry
At Blueberry, we use our experience in UI and UX design thinking to assist clients in creating high quality software applications. This starts with a review of the project’s requirements (functional, system, technical, and so on) to get a better understanding of the business processes. We then use collaborative design tools, such as Figma and Balsamiq to map out, wireframe and prototype the logical architecture of the application.
This collaborative process runs in parallel with the aesthetic design of the app. Client discussions help pinpoint their UI preferences – what they like and what they don’t – and streamlines the whole UI design process, while keeping the design consistent with company branding.
For projects with smaller budgets or applications, where functionality is the main priority, we use highly customisable application templates, which provides us with a rich variety of themes and styles that can be further tailored to bespoke requirements, using SASS, CSS and HTML5.
As an example, our BBWT development platform, for building custom web and cloud applications, uses the PrimeNG library to provide the core GUI controls – menus, data input, grids, and so on – as the starting point for further development into a bespoke design (PrimeNG is a spin-off project from PrimeFaces, a collection of open-source rich UI components for Angular).