25.03.2021

Best Practices in Web-Design UI/UX

We've all been there – we search for some company or product on the internet, we open a link to a website, and... we just close it after 5 seconds. Why does this happen? What distinguishes attractive, credible, modern-looking websites where users find what they want, and those unfortunate ones that are closed with a roll of the eyes.    
Research suggests that a website can make it or break it for a company when it comes to credibility and customer conversion rates. At the same time, it is often the most overlooked aspect of running a business, since the reasoning that “a good product or service speaks for itself” is not uncommon.

 
Let’s consider some of the best practices for UI/UX that can help to optimize user interaction and increase those conversion metrics. (Google Analytics: https://analytics.google.com)

• Loading time – ideally, all pages should load in under 4 seconds. Studies have claimed that the average attention span has decreased to 8 seconds over the last 20 years. Therefore, the goal is to deliver the information a user needs as quickly as possible. Compressing all images (~kB) and style sheets (gZip compression), and decreasing the amount of unnecessary JavaScript animations helps.
• Navigation, amount of options – does navigating seems intuitive or does it feel like a struggle with bouncing back and forth? When presented with many options, user decision times grows exponentially – “analysis paralysis”. Aim for functional minimalism, add a breadcrumb. Users like to know where they are at all times.
• Call to Action (CTA) – what a user needs to do on each page they look at (for e-commerce: buy, sign-up, learn more; for industry systems: confirm, process, send). CTAs should be bright and clear, leaving no doubt what a user has to click, contrasted with color, larger font, positioned well (rule of thirds).
• Place important and immediate information at the top left (logo, menu options) – people scan pages from top left to bottom right.
• Color scheme should be consistent with company colors and cause immediate association.
• Leave plenty of white space between elements so the content can “breathe”. Users are overwhelmed when presented with clutter, add sufficient padding around all UI controls.
• A picture is worth a thousand words (navigation items, user options can be placed as clickable tiles with pictures) – less text and spaced graphics lightens an application.
• Principle of least astonishment – users have developed certain familiarity and expectations when dealing with systems (be they online shops, e-banking or customer portals). Therefore, presenting them with radically different controls or actions has a negative surprising effect, whereas adding familiar buttons and navigation flows benefits uninterrupted interaction.
• A/B testing is an effective way to measure how changes in UI/UX affect the metrics and learn more about what impacts target audience behavior. Half of the web-traffic is directed to a version A and half of the traffic to a version B, periodically goal metrics are analyzed, this process can be continuous for all layout changes.

Users interacting with any system expect a logical, sequential, uninterrupted flow for accomplishing their tasks, regardless of system complexity.  
This can be achieved by taking into account researched mental models and patterns in human behavior to decrease users' learning curve, as well as by following the modern UI themes (e.g. https://themes.getbootstrap.com) to stay up to date on trends.