First, let’s highlight why UI/UX is important.
Examples of different kinds of UI/UX
In 2005, Google launched their Google X home page, which was a UI fail. As you can clearly see in the above picture. There is a version of the Google X homepage which is cluttered compared to the Google Homepage which has more spacing and contrast for one.
This Citibank ATM machine only dispenses $20 and $50 dollar bills. Yet, it requires the users to press the keys and gives the option to specify the cents even if there are no coins in the machine.
Making the UX bad in comparison to the Bitcoin ATM machine which allows the users to just choose the denomination. The UI for Citibank lacks contrast while the bitcoin interface has contrast.
Santander website has a Bad UI as the site isn’t responsive and doesn’t adapt to changing screen sizes. the presentation of the content needs improvement because the color red grabs the attention of the user in this interface the red is grabbing the attention everywhere which is very distracting.
It has a good UX as its organized and easy to sift through.
Slack has a fun, bright and clean UI. The navigation bar allows the user to easily find the subject or person they want to talk to.
Overall Slack has a good UI & UX but to make it great, Slack needs to improve on its accessibility by simplifying the search bar and ensuring that all apps/ plugins are displayed under the Apps tab. It also needs to make its application more intuitive.
Amazon Prime Video UX could improve their accessibility of content and improve their navigation and the smoothness of the flow of content. Their UI is cluttered and needs improvement.
Now that we’ve highlighted the reason why UI/UX is essential and shown you the different kinds of UI/UX.
Let’s focus on how UI works with UX. To do that we must highlight the key UX principles and showcase how UI aids in creating the best UX
Key UI/UX principles
Is your interface loading fast enough for the users or is it lagging?
Is the user required to click to unnecessarily or scroll more than needed?
Are the users-facing too many distractions and is the content easily findable?
Ensure that the user can quickly identify where they need to search, find and interact using visuals such as color, contrast, and spacing.
Enable Keyboard shortcuts on the website to ensure speed and make a clear call to action for the users
Advertise new features of the app or website
Can the user clearly tell what to do next? And ensure that your navigation is intuitive.
Can we understand what the user wants and display content accordingly?
Ensure that your interface has consistency
Use tooltips and Integrated help messages to make your interface easy to use and tell the user what to do next.
Is content needs to be accessible to users of all ages and with disabilities?
Ensure that everyone can use your interface
Adjust color and text size to create accessible combinations
Pair color with shapes or icons to convey information
Ensure sufficient contrast between the text and the background
Don’t use hover as a means to find content
Is the website and application easy to find?
On the mobile is the text and the buttons the right size and is the design responsive?
Is the content useful and is the interface credible?
Ensure that there is a visual hierarchy that illustrates the importance of each element.
Use visuals to convey trust and security.