page loading
Designing a Good User Interface

Designing a Good User Interface

by Admin — Posted on Sep 15, 2014

We all realize the importance of having a good user interface for our Websites and Apps. We know it from the multitude of websites and apps that we visit each day from banking to e-commerce to social media sites. One might not observe when the interface is good. But we do notice when it is bad – we get confused, not able to find what we are looking for, and the entire experience gets frustrating.

It is the same for our customers as well. A poor interface frustrates the customer, leading to low repeat business, negative publicity and needless to say -we slowly lose the customer to competition. Having designed dozens of interfaces over the last 3 years for our customers including IBM, CDD, Kindergarten, Home Triangle and ongoing proposals for Mphasis and Asian Paints, here are 8 considerations that we feel is paramount to building a good User Interface, along with examples of how we used it for our designs.

1. Understanding the product and the end customer

This is the most important factor to consider before even beginning with a design – we need to identify the target audience and design in a way that appeals to them. It makes sense to add cartoons and graphical content with bright colours for a website selling children’s products and not likely for one selling industrial equipments.

Also, colour psychology tells us that certain colours evoke particular emotions in us and hence could be associated to a customer segment. For example

  • Black, silver, gold or white colours are great for a luxury segment.
  • Blue for Technology related services and products
  • Green for anything related to nature, sustainability etc
  • Red colour works great for gaming related applications and websites.

2. Choice of colours

One of the primary practices in branding design is using certain colours to represent a brand. The website/app is an extension of the brand itself. It greatly helps if the entire website is designed around the same colours. Websites of major brands like Maruti Suzuki or Coca-Cola are examples of this. There exists a theory in colour psychology called the Colour Harmony. According to this theory, using two colours that are complementary in nature creates a vibrant look for any design. But, it is a tricky business when you want to use it in texts and in large doses.

Example 1: UI design for the IBM Internet of Things App, following material design principles and aligning to the brand colors

maturity assesement app
picture of a mobile
app ui representative image1

Example 2: Internal portal for Mphasis (Proposed)- avoids a lot of clutter by giving 4 clear divisions on the type of information in the feed – Social, Corporate, Discussions etc, thus making it intuitive for the user. It also is an example of how a design can be formal as well as trendy.

mphasis ui representative image

Example 3: UI design for the Children’s book rental service website Kindergarten is flushed with bright colors and the books are arranged as if on a bookshelf, to give an experience as close to a real library.

kinder garten app imge

3. Using Minimalistic Designs

The current trend in web design is the minimalistic approach. Simplicity is the ultimate sophistication. It is understood that flashy graphics and animations divert the attention of the user away from the primary information that needs to be conveyed. So, in bare essence, minimalism is the design methodology of cutting down everything to the bare minimum such that nothing else can be removed without interfering with the purpose of the design.

4. Choosing the right design Philosophies

Familiarizing with certain design philosophies helps greatly create streamlined and effective designs. Earlier websites used skeuomorphism or rich designs that retained ornamental cues from the original structure it was derived from. Now,Flat Design is preferred as it quickly conveys the information while being visually appealing and approachable making the design streamlined and efficient especially in interface designs.

Google introduced the newer design philosophy called the Material Design which is centred around designs for the rational space which is intuitive and appealing, by mimicking a physical material.

5. Platform Friendliness

Today, there are a wide variety of devices including, smartphones, phablets, tablet computers and desktop/laptop systems of varying sizes. A website specifically designed for a desktop screen would not be user friendly on a mobile platform. Designers generally follow one of the two methods for solving this.

  • Create two versions: This involves creating two different designs- one for desktop viewing and the other for a mobile platform.
  • Responsive Design: This technique of designing involves creation of a framework that adapts to the given screen size for an optimal user experience.

6. Using uniform Design Language

This acts like a digital extension to the branding. A website that looks more homogeneous has a higher chance of recall with the user than one in which each page looks completely different than the other. One has to first decide what sort of communication tone has to be used and what emotion needs to be evoked in the user. Accordingly, certain base colours, design schemes and fonts need to be used which create a streamlined, coherent look.

7. Defining the hierarchy of information

The fundamental purpose of any web design is to provide information to the user; and the crux of the information needs to be dominant. The eye of the user needs to be guided in such a way that it follows the message that needs to be conveyed in the same order as you need. Hierarchy of information is all about ease with which a user can find what he/she is looking for.

8. Using the right Fonts

A certain font may look very good on one device. But, it might not be so on a different device or might not even be compatible on it. This is not a desirable thing. Also, certain fonts are optimized for print and certain others for digital platforms. Fonts like Verdana, Roboto, Helvetica and Ubuntu are light in size, making it very easy to read and are supported on most of the platforms. Images used for print purposes need to have a resolution of at least 300 dots per inch(dpi). But, for a digital purpose, a 72 dpi image is more than sufficient. Further, it takes up a lot lesser space which makes it easier to load.

Example 4: App for the logistic firm Chacar was designed keeping in mind, the non tech savvy audience – truck drivers and logistics partners. The visualisations were simple to understand, leaving no room for doubt for the end user.

chacar

Example 5: UI design for the Quizzing app focused on a minimalistic design and a clutter free interface

app ui representative image2

Design is after all perceptive in nature. These guidelines listed are few considerations according to current trends. What ultimately matters is the User Experience while using the website/App, which is a combination of the UI design, ease of navigation and ease of completing the purpose the customer is trying to achieve. Developers and designers use A/B testing, to assess the user experience on variants of a website/App. Half of the users are shown the design ‘A’ and the other half, design ‘B’. Using web analytics, one can easily find which of the two designs have had a higher conversion rate.

We would love to hear about what a good UI design means to you. Do comment and let us know.