The two most important aspects of any platform, be it a website, program or app, is the UI and UX. They’re aspects that hold equal importance, and need to be done in tandem, after all, they ultimately decide how a user interacts with your business or product, and how they remember it!

But for those not familiar with these terms, let’s break them down and explain what they do.

UI

UI stands for User Interface and it covers everything the user sees (the look). This includes:

• The page layout which should be intuitive and well-considered.
• The colour scheme and font which should contrast nicely and remain consistent, accessible and aligned with your brand.
• Interactivity, such as buttons and drop-down menus, which should always flow intuitively and feel natural to use.

Many designers start with wireframes to visualise all these elements which they can then transform into high-fidelity, functional, interactive mockups which steer the direction of the product itself.

UX

UX stands for User Experience and it covers everything the user feels. UX focuses on how intuitive, easy and enjoyable the product is to use and to achieve good UX, designers will need to:

• Conduct thorough research to understand user needs.
• Map out a logical structure and flow for the product.

Summarising both

We can put it into a simple analogy by imagining a car. The paint job and interior may look incredible and visually pleasing, but the suspension could be poor and deliver an uncomfortable drive over bumps.

This is essentially the same principle by which UI and UX works by. UI is the paint and interior, and UX is the feeling; the suspension, the air con, the seats.

Types of user interfaces

It may be surprising, but there are different types of user interfaces:

• Graphical user interface (GUI) such as web UIs including windows, pull-down menus, buttons, scroll bars and icons.
• Menu-driven UI typically heavily used by online shopping sites and involves letting users make selections from various options to get what they need.
• Touch UI focuses on touch screen, hence the name!
• Voice UI receive verbal commands or requests from humans and responds accordingly.
• Form-based UI provides electronic forms with features such as checkboxes or dropdowns. Think of Google Forms.
• Natural language UI understands natural language and can converse with humans, in a humanlike manner. Siri or Alexa are prime examples of natural language UIs.
• Mobile UI is probably second to GUI, since most products need a mobile-friendly variant. Mobile UI focuses on creating a responsive experience for smaller screens.

Types of user experiences

UX design is separated into four core areas:

• Interaction design focuses on functionality and the flow of a UI. Developers consider how a user should interact and flow through a product.
• Visual design is all about shaping brand identity and evoking emotions, and is a question of colours, font and icons. More UI, but still critical in UX.
• Information architecture is the blueprint for organising and structuring information to ensure easy accessibility and understanding for users.
• User research is how you understand user needs, behaviours and pain points to address potential issues before they become a live issue. This is where you identify the gaps your product can resolve for your end-users.

Avoid making these mistakes!

There are many mistakes to make with UI and UX, and we can’t cover them all. But by assessing what looks and feels comfortable, you can avoid many of these mistakes naturally. A box with no padding and text crammed into the corner won’t look great, on any planet!

1. Too many styles create poor consistency in your UI. Make sure to maintain consistent colours, fonts, rounded or squared corners, line thickness etc.
2. Little contrast between primary and secondary colours is visually weak and unappealing. Use different visual weights through strong colours, bold text or varying font sizes.
3. Varying icon line thicknesses breaks consistency and ultimately the flow of your product. Make sure all icons maintain consistent thickness and general style.
4. Misaligned elements make your product look messy and disorganised. Maintain the same alignment for all elements, whether parent or children.
5. Poor touch targets for responsive views will frustrate users. Think of those tiny X buttons for popups that take 10 tries to close… frustrating!

Final thoughts

We’ve covered what UI/UX is, what they encompass, why they’re important and some of the most common mistakes you can make, but there are many more.

Of course, you can know the best practices, but your audience may be unique to what is seen as standard for your industry, and the best practices may not be the best for you. It will ultimately all come down to trial and error, and most of the time, more than one set of eyes can help you pick out mistakes, because it’s all about what looks or feels natural for us.

For the most part, we can apply common sense in any UI or UX choices. A seat made from foam will be more comfortable than a seat made from concrete… Why? Because foam is more comfortable and it doesn’t take any professional expertise to know this. And this is the same principle as with UI and UX.

But, professional advice doesn’t hurt!

It could be a friend, a colleague or even TekXera who can be those fresh set of eyes: https://tekxera.com/services/web-software-development/ui-ux-design/