Web UI Design – Best Practices

Generally, good web UI design does focus on anticipating what users might need to do and ensuring that the interface in question has elements which are easy to understand, access and use to facilitate those actions. A good user interface strives to bring together concepts from the information architecture, visual design, and interaction design.

As a best practice, when choosing interface elements, it is important to acknowledge that users have become quite familiar with interface elements functioning and acting in a certain way from various sites. Because of this, it is always recommended that designers be predictable and consistent in their options or choices and the overall layout. Ensuring this is done will go a long way in helping users with task efficiency, completion and satisfaction.


The interface elements which need to be taken into consideration when designing the user interface include but are not limited to the following; Containers, Informational Components, Navigational components and input controls. Containers include items such as accordions while informational components include message boxes, tooltips, progress bar, modal windows and notifications. Navigational components include icons, search fields, tags, breadcrumb, pagination and slider for input controls this includes radio buttons, text fields, date field, buttons, check boxes, toggles and drop down lists.

From the onset, it should be noted that every design goal should be anchored on knowing your users thoroughly. This usually demands that as a designer, you fully understand the goals of your users when they visit your site, appreciate their skills levels and work within their skill sets, get to know their preferences and lean your design towards these preferences and take full cognizance of their tendencies and design accordingly.


Web UI Design – Best Practices

Keeping the interface simple

Studies have shown that the best designed interfaces are almost invisible to the user. A well designed interface avoids using unnecessary elements which may crowd the site or confuse users. A good web UI design will also desist from using confusing or difficult language and ensure that they are clear and concise when it comes to the language used in messaging or on labels.

Be purposeful in the page layout

As the designer, it is important to seriously take into consideration the spatial relationship that exists between items dotting a particular page and then go ahead and structure the page based on importance and relative urgency. Careful placement of items has been found to help draw the attention of visitors to the most important pieces of information. This in turn has the effect of aiding users to easily read and scan through the site pages.

Use Common UI elements so as to create some consistency

By implementing common elements in the user interface users tend to get more comfortable visiting the site and are able to complete their tasks fast enough without getting lost or asking for any assistance. To facilitate efficiency, it is highly recommended that the designer creates patterns in the design, layout and language throughout the site. This is important because once a user learns how to do something on one page or section of the site he or she should be able to transfer this skill to other parts of the site seamlessly.

Ensure that the system constantly communicates what’s happening 

Once you have a user engaged with the system or site, it is important to communicate with them, tell them about where they are any changes in state, actions required and any errors. It is advisable to use various UI elements to communicate the status of the system to the user and when necessary advice the users on what is expected of them. Doing this does greatly reduce instances of user frustration.

Use texture and color strategically 

The use of color and texture is a very powerful tool and can be used by the designer to either direct or redirect attention away from items and locations using elements such as texture, light, contrast and color. There are certain colors which are normally associated with certain actions such as green with entry and red with exit or danger, using these colors to espouse the same point is highly encouraged as many users are well aware about the same.

Give some serious thought to the defaults 

As earlier mentioned, it is important to think about and anticipate the goals users bring to the site. Once this has been factored in, it is recommended that the designer comes up with defaults which will reduce the burden on the user.

Have easily identifiable Links

Even though this should never be a problem, it is quite surprising at the number of websites which don’t clearly distinguish between regular text and links in the main body of text in the site. In most cases, it is advisable to indicate this difference by underlining links and having them in a different color. In some instances though contrasting the color alone will do the trick. Simply underlining or slightly changing the color is rarely enough and will more often than not impair accessibility.

The use of typography to create clarity and hierarchy 

Designers should be acutely aware about how they use typeface all through the site. It is important to have uniformity in terms of font sizes for headings, titles, and the content in general. It is a known fact that different font sizes, styles and arrangement of text can be used to increase scanability, show some hierarchy, improve legibility and ensure uniformity for users all through the site.


All of the user functions and elements discussed above are very critical to website usability and plays an important role in the user’s perception of your brand as a business. It should be noted that for web design, very small enhancements can make a very big difference in perceived speed and ensure that users are not frustrated and neither are they uncomfortable. Always make sure that all the user interface elements are kept simple and fully streamlined. It is also important stick to and follow conventions where possible. With a good web UI design, you will surely see vastly reduced bounce rates, a steady flow of traffic and better conversions.

Jessica is the Lead Author & Editor of UsabilityLab Blog. Jessica writes for the UsabilityLab blog to create a source for news and discussion about some of the issues, challenges, news, and ideas relating to usability.