Usability and User Experience – the Cornerstones of UI Design

User Interface Design or Engineering, also known as Front End Development, is all about designing attractive user interfaces for different machines, software, mobile devices, or other products with the aim of enhancing user experience.
UI design is extremely powerful as it leads to enhanced user engagement leading to greater success of the application. A good UI design simplifies user interaction by presenting information in an easy to understand manner and making it more intuitive and efficient at the same time. Though there are many important factors to be considered when developing sites but this blog focuses on 2 of the most important aspects: Usability and User Experience, as they are both tied to the speed of the page.

Enhancing Usability or Website Performance

A good UI design should enhance usability or website performance. Here are a few points to consider that might help you to improve web performance:

1. Minimize HTTP Requests: Most web pages take time to load different sections of the page: image, stylesheets, script etc. For each of these elements an HTTP request is made and with more on-page components the page load time gets compromised. Therefore it’s a good idea to have fewer on-page components.

2. Reduce Server Response Time: It’s the time in which a server completes a user request and is measured in milliseconds. Your page will load faster if the server time is low. You can improve server time using various tools like PageSpeed, Yslow, etc.

3. Use CDN: A CDN (Content Delivery Network) is essentially a network of geographically dispersed servers. Each CDN node caches the static website content like images, CSS, JS, and other media files. Retrieving this content is very time consuming so it is advisable to set-up CDN nodes across the world. When a user requests your site, the node closest to the user location will deliver the static content.

4. Enable Browser Caching: Whenever you visit a web page, the elements on it are stored in your system’s local hard drive as a cache or temporary storage. So, when you visit the web page again, your browser loads the page without sending another HTTP request to the server. For all cacheable resources (images, CSS/JS, PDF etc.) set an expiration time of one week or so.

5. Optimize Images: Use images optimally in your application as oversized images may take longer to load, compromising on the site speed. Use exact image size (cropped images), reduce color depth of the images, and use JPEG or PNG images.

6. Avoid Using External Plugins: More plugins may increase your page load time raising security issues and may end up in a crash. Use selective plugins and disable others before you measure the server performance. Thus, you can identify harmful plugins hampering your site speed.

7. Avoid Inline CSS and JS: By default, external CSS and JS files are cached by the browser. When users navigate away from a landing page, they already have your stylesheets and JS files preventing a re-download of styles and scripts. If you use a lot of CSS and JS in your HTML document, you won’t be able to benefit from the web browser’s caching features.

Understanding User Needs

It is crucial to understand the needs of the users while designing an interface or an application. Here are some rules for better UI design:
1. Know Your User: A good UI design revolves around the user needs hence it is important to     know your user. Your primary objective while creating UI design should be user goals. Understand their needs by examining their experience and skills. Figure out what kind of interfaces they like and why.

2. Layout: Users spend a lot of time getting acquainted with the interface so it’s crucial to make it easily understandable. A good layout comes with the right placement of elements. Most vital elements should draw user attention. By using familiar web UI elements, you will help your users feel at home.

3. Consistency: Maintain consistency in the interface design. Repeating the common elements across the interface design will make users feel more connected and help them navigate easily. Intuitive navigation demands for consistent use of language, layout, and design elements. Users have a preconceived notion about certain design rules. They want the website to match with their notion. It might look tempting to break the set rules and innovate, but make sure there is consistency and users are able to learn about the new design rules if you plan to innovate.

4. Visual Hierarchy: A good UI design highlights the most important information so that users can focus on that and take action. Font-size, color, icons, and placement of all such elements in a proper visual hierarchy is crucial. This makes the interface unambiguous and clear.

5. Feedback: Validating the action of your users is crucial. Your interface should give a prompt feedback to the users when their actions are correct or incorrect. Guide your users about the right action with messages wherever possible.

Conclusion

A good UI design is not just about getting the visuals right, it is also about making your application more efficient and performance oriented yet simple and pleasing for users. Focus on the points about usability and user experience discussed above and you will never go wrong in your UI design phase.