When you’re shopping around for a custom software developer for your great app idea, there are common terms that you’ll come across. Two of these includes ‘UX’ & ‘UI’. These two acronyms stand for ‘User Experience’ and ‘User Interface’ and are probably the most commonly confused terms when describing an application.
A User Interface (UI) without UX is like a painter slapping paint onto canvas without thought; while UX without UI is like the frame of a sculpture with no paper mache on it.
Rahul Varshney, Co-creator of Foster.fm
UX & UI Dissected: Macro Vs. Micro
Macro
User Experience encompasses the application as a whole (macro), whereas UI refers to the individual components and their layout (micro). An application or custom software solution often addresses some sort of pain. For example, Field Eagle is a mobile data collection application. The pain it addresses is that data collection is often done on paper, which comes with a suite of problems: difficult to update forms, inaccuracies due to human error, illegible handwriting, and slow data to reporting process.
In the example of Field Eagle, the UX determines how well this pain is solved through the application. Did it make collecting data more efficient and accurate? Was it easy to use? Did its features and functionality add value to the company?
UX is also about how an application made you feel when you used it. If an application is difficult and frustrating to use, then the User Experience is considered a failure. Imagine if you used an email application that made it difficult to send an email. The UX failed because the pain it was to address was the need to send emails. If you use an email application that felt seamless and ended with the email sending, then you feel a sense of accomplishment and satisfaction and you would consider the UX a success.
The UX of an application is accomplished by a technical team of marketers, designers, analysts, and developers who tackle:
Strategy and Content:
- Competitor Analysis
- Customer Analysis
- Product Structure/Strategy
- Content Development
Wireframing and Prototyping:
- Wireframing
- Prototyping
- Testing/Iteration
- Development Planning
Execution and Analytics:
- Collaboration between UI Designer(s) & Developer(s)
- Track Goals and Integration
- Analysis and Iteration
User Experience encompasses both the functionality and the aesthetics of an application. If an application looks good but performs poorly, users will be frustrated. Vice versa, an application that performs well, but looks terrible can cause users to abandon the app.
Micro
A User Interface is made up of the components on a screen and their layout. What are these components? They are all the drop down boxes, text boxes, navigations, image carousels, error and success messages, sliders, loaders, fonts, colours, grids, use of white space, etc. Essentially, the UI of an application is the ‘Look and Feel’ and the ‘Responsiveness and Interactivity’. User Interface design is responsible for the transference of a brand’s strengths and visual assets to an applications interface as to best enhance the users’ experience. Furthermore, it is a process of visually guiding the user through an application’s interface via interactive elements and across all sizes/platforms.
Each one of these is a piece of the User Interface. The UI also refers to how these components behave.
Consider these two drop down boxes:
The first one is quite plain, while the second one is more stylized with an animation. A subtle difference, albeit a big one in terms of the overall UI.
The following image demonstrates the UI of a screen from the Field Eagle application. Here you see UI components such as layout and colour, buttons, navigations, date picker, and some graphs.
Conclusion
The User Interface of an application or software makes up part of the User Experience, therefore, you cannot have one without the other. However, as you can see, they are two separate things that require different skill sets. The quality of the UX and UI of an application is what can make it a success or a failure, so when you’re shopping for a custom software developer, make sure you ask about their UX/UI processes.
