UX is different to UI quite frankly. They’re 2 distinct disciplines (starting with UX and ending with UI). Let’s review the differences, and how both are equally critical in delivering a product which customers want.
UI stands for “User Interface” – which includes toolbars, menus, buttons, windows and other controls that customers can use to navigate apps and/or other digital product.
UX, stands for “User Experience.” It refers to how well people interact with a product, which can include but not limited to UI. Essentially the focus is how well/poor customers interact with business’s website, apps or other digital experiences – a study to see how the whole system rises to their expectations, meets their needs from start to finish…
In simplest of terms, UI or ‘visual design’ is far closer to ‘art’ while UX (interaction design) is behavioral science of Users. Here is the distinction which gets too often gets missed or misunderstood.
Interaction design / UX
The below maps out a typical responsibilities a UX / Interaction designer will own & drive for his/her team:
Human to system interaction & experiences end-to-end
Lead advocate for the User & User’s needs for the org
Proto-personas, user flows & journeys
Customer & stake-holder interviews
Usability for behaviors of users, research planning
Synthesize business needs with user goals into probable solutions
Distilling ideas into WireFrames, User flows, app maps / experience maps, prototypes
Light documentation where applies
An interaction / UX designer is expected to invest time & align well with dev & PM gathering needs, constraints of the project. Then synthesizing them to align with field research evidence (from speaking with customers). With the focus on more behavioral science of Users and testing out hypotheses / assumptions, they are less concerned about pixel-perfect design (this is entrusted with the key collaborator– UI designer) which will be handled at a later stage in the process. Iterated versions of User flows, User goal-driven, and a map of the experience is articulated via map of WireFrames which shows the user journey from end-to-end.
Here (the below sample) is look at a typical WireFrame (WF) which has gone through several iterations. The example shows the interaction design & flow of a Point-of-Sale system for restaurants (using an a tablet device). Elements of 4D (time) and the corresponding interactions between human & system are mapped out, with edge cases & common use cases considered, enabling designers & developers to anticipate data/content organization along with notifications/alerts to include where necessary.
While we’re only seeing just a portion of it the full map, while a typical WF with annotations can be containing 30+ screens all mapped out displaying the whole journey with all uses cases considered.
The benefits of WF are primarily speed & flexibility (to alter & iterate), focus on the overall experience and communicating this rapidly to the project team of what the UX is going to be like from a single page.
Big Design Up-Front Vs. Big Learning Up-Front
The focus for interaction designers is taking an abstract idea or concept into a practical / feasible solution which add true value to Users, checking with cross-functional colleagues throughout as stakeholders. Furthermore, accommodating common uses cases & edge cases fall on interaction design for a smooth experience.
There are practical reasons to keep things light in WF (WireFrames) & low/med fidelity designs– we intentionally want to avoid investing heavily into pixel (detailed) design during interaction design. Rather we opt for Big-Learning Up-Front by failing fast, frequent, and cheap under “Design Thinking”methodologies. More on that in this article .
In short, getting bogged down with details of Visual design this early in the process is a hazard for time-lost, and to be avoided. Early hypotheses tested with Users and failures led to insights gained, once their validated solutions are ready for higher fidelity output, the WFs & journey flows are translated to the UI designer to commence the detailed design process.
Visual Design – UI
The 2nd half of the design process– detailed design with UI. The attention to detail, right down to its tiny pixel. To handle UI well, it takes visual skills & proficiency in design creation tools (Sketch), focus as well as time/bandwidth to handle the work. Making things align to literally to pixel-perfection is in order here. This role is reserved for the specialist who’s responsible for knowing every ‘nooks & crannies’ of the design system, the brand guidelines, in order to deliver with consistency. Their output literally is what is ready to be coded, down to the fine detail. Typically what was mapped out in a WF & user flow (generated from UX) will need to be processed by the UI designer and modified in order to meet patterns/constraints of the Design system.
Visual / UI designer is responsible for & drives:
Conveying brand ideals
Reviews interaction design for visual implementation
Visual representation of design concepts
Interprets the Design System for project
Type, iconography, color, patterns, layout
Detailed design for max desirability in aesthetics
Proto-personas & UI usability testings
Participates in research activities alongside UX
Interaction designers nurses/translates the WFs to the UI designer and should be flexible to make adjustments and still keep focused on not breaking usability (while visual designer is focused on compliance to the the brand guidelines).
It can also be the most exciting part as we’re now going to see visuals being fleshed out, and being testing with usability testings with customers, getting much closer to the finished product which all the research & experiments have led to; we can almost see the ‘finish line’ (as least for this track-meet or cycle) before it gets handed off for coding.
The 80/20 rule in skill-set
Since these two roles are joined “at the hip” and cross-dependent on each other, it’s advisable to have both roles speak the same language when needed. For example, a UX designer should be able to undertake 20% of his capacity in visual design when required while 80% is dedicated to UX. Vice versa for Visual/UI designers– meaning they should be able to generate WFs or an App map occasionally– 20%.
Common traps – Hiring 1 instead of 2
Due to lack of understanding of the UX or budget constraints, organizations new to UX typically find 1 designer to handle both UX & UI. This may work possibly for small scale projects, while for enterprise level (bigger scope) projects this is quite problematic. A designer’s bandwidth is limited, typically in these situations they end up doing mostly UI work to meet the demands of Dev. UX & interaction design gets sacrificed as a result, leading to a poorer experience & quality being forfeited for end-users.
Aside from bandwidth issues, designers are highly specialized today and focused on 1 vs the other, not both. Hiring managers should be able to detect their strengths during the hiring process, designer’s portfolios (of artifacts) usually indicate easily to which side they are more orientated in. In such a case where budget allows for just 1 full-time resource, we recommend getting an UX/interaction designer profile first, look for out-sourcing the UI role from an agency for the short term; and gradually build up a team from there. The rationale is that an UX designer needs to be embedded within an organisation closely (with cross-functional colleagues) in order to be effective; a UI designer, for most cases should take less time to get ramped up if a Design System exists for a project. It’s quite common to outsource UI designers in such cases.
For example, you can have the world-class best UI designer but fail in quality interaction design at the start, then the UI work will end up rather poorly because of it. While on the contrary, if your interaction/UX is at a decent level, then it offers the carry-over effect to good UI. Regardless, nothing can argue against the value of having a very competent visual designer on your team to provide that quality finish & craftsmanship that projects require.
Having both UX & UI resources is essential, having both sides of the brain working for your product design. Below is an apt quote from the Co-founder of Xero. In 14 years Xero went from a start-up to become a juggernaut in Tax & accounting domain with a UX-driven company culture.
“
Our approach to design is not about making software look pretty. In fact, I tell people, we’re not a software company, we’re a user experience company.
Have you got a novel situation in relation to this topic?
Share with me the scenario and put a spot-light on it. If you have a question, anecdote or an interesting topic to raise in UX, send them through. Discussing & articulating the challenge would be the 1st step in edging closer to a remedy.
