A User Interface is like a joke. If you have to explain it, it’s not that good.
Looking to create a successful mobile app? If so, then creating a great mobile user experience should be your number one priority.
When it comes to implementing a great user experience, it’s often difficult to grasp the difference in the User Experience (UX) and User Interface (UI) design processes involved.
The concepts are often used interchangeably as they work closely together. But when it comes to the design disciplines involved, they refer to very different specialties in mobile app development.
In this article, we look at the importance and differences of UX and UI design for your mobile app.
The diagram above is a great starting point for defining the high-level differences between UX and UI design. Source: Medium
What is User Experience Design?
At Launchpad App Development, our User Experience Designers outline the end-to-end experience that users engage with when using a mobile application or website. As the Product Manager for an array of mobile apps, I’ve come to notice that the UX process is a science.
How information is laid out from screen-to-screen and how end users interact with it is ultimately the result of the UX Designer working closely with entrepreneurs and businesses. They collaborate to define and plan business goals that make sense for the consumers who will ultimately use the specific app features.
As effective UX Designer is mainly focused on an app user being able to complete a certain task. Through research, wireframing, prototyping and user testing, the UX process ensures the user can ‘do a certain thing’ established through certain business goals in an intuitive and seamless manner.
By the time an app’s user experience has been created, the UX design process has included countless hours defining the business goals, prototyping the mobile experience and fitting it in the operating system (E.g. iPhone and iPad Apps) so that the experience is built and integrated with existing navigational flows.
They know the best practices that will lead to the most seamless experience for a user from how to layout an entire screen (big picture) to the intricate details (small picture). An example of this may be when to use a dropdown box rather than a text input field, segmenting button types (primary, secondary and tertiary), the app onboarding experience, and much more.
As such, a UX Designer needs to ensure that an app logically flows from step-to-step. In other words, their core responsibility is to build an experience that feels intuitive and right for the user. An app is intuitive when the user can go through screens without have to think about what they are doing.
Like a scientist, the shared set of known basic UX Design principles have been established through trial and error when producing a desired outcome. Therefore, a UX Designer needs to find the solution to a problem as quickly as possible from a list of potential paths that lead to the same result. A UX Designer is like a doctor – he or she can prescribe a number of different types of medicine to cure your cold, but based on their knowledge about you, they choose which one most suitable to reach a desired outcome for you.
What is User Interface Design?
As previously noted, User Interface Design involves taking the output from the User Experience Design and turning it into an art. The UX process defines what a user does on a page or within the navigational flow of an app. On the other hand, the UI process defines how that page/flow looks and feels.
UI Design is an art form because it focuses on all the aspects that make a mobile app beautiful and fun to use: graphics, colours, animation, typography, button styling, gesture-based navigation tools etc. The UI components on any given screen come together to provide the overall aesthetic feel for any given mobile app.
The iPhone’s gesture-based navigation tools. Source: The 4 Characteristics of Successful App Startups
In an article about the distinctions between UX and UI design, Dain Miller captures the essence of great UI Designers. They design for emotion.
A UI Designer takes wireframes and prototypes to a completely new level by making sure that users feel in their element when navigating a mobile app. It’s not just a mix of flat and material designs coupled with some pretty pictures. The UI Designer is building a state of mind where the user feels 100% comfortable and confident with the mobile app.
For example, the UX Designer may outline that tapping a button directs a user to another page. The UI Designer takes this information to create a visual signal to the user that they are being directed to another page. This happens through the button changing colour to signal the next page is loading.
This is why we consider UI to be an art form. It’s not just about building overall visuals that put mobile users at ease when using an app. A great UI Designer considers every single interaction to provide those small, yet critical cues that visually signal a very simple and pleasant message to the user: “You’re doing great, you’re on the right track, keep going.”
UX Designer vs UI Designer. Source: UX Motel
The Difference Between UX and UI Design
The image below presents the most common difference in the outputs of UX and UI Designers. The one to the left is part of a UX wireframe done on Lucidchart. It’s predominantly black and white with a simple layout of the elements to be featured on the screen. On the right side is a Photoshop version of the Life Pulse Android Wear App produced by the designer.
In Career Foundry’s guide to UX and UI designers, the expected deliverables for each role were summarised as follows:
One of the deliverables to note from the list above is the wireframe. The wireframe creation includes a variety of conditions that are triggered by different elements throughout the app. In my experience, creating wireframes often feature a long list of conditions the developers must follow during the coding process. For instance, tapping on the X button directs me to the Y page. The UX Designer is responsible for calling out all these specific details.
When it comes to the UI Designer, they are responsible for redlining each app screen they create. Each redline provides intricate detail into the typography, padding, graphics etc. it refers to. Essentially, all elements on an app screen are specified by pixels to ensure the front end is implemented correctly.
So why do great UI Designers undertake such a time-consuming task when creating a mobile user experience? Well, as the late Steve Jobs so succinctly put it: “Details matter, it’s worth waiting to get it right.”
We focused on the main differences between UX and UI Design when it comes to mobile apps. While both processes cover different areas of expertise with many sub-specialties, there is a great degree of fluidity between them.
A mobile app that looks great but is difficult to use is an example of good UI and poor UX. But an app that is usable but looks horrible has a great UX process and not-so-great UI.
The right UX and UI processes should be your first priority to create market-leading user experience for your mobile app.
What do you think makes a great mobile user experience? Share your thoughts in the comments section below.
Ready to design a successful mobile app? Contact us for a free 1-hour discovery session and take the next step today.