Most Important Principles of Good Web UI Design You Need to Know (2022)

Spoiler’s alert! 2022 will be a bold year.

No, I’m not referring to Qatar’s 2022 FIFA World Cup (though that’s interesting). Rather, next year will be the time when you really need to buckle up and get ready for some seriously significant UI Design changes.

The shift is already underway. And while you may not notice it at first because it’s slow and insidious, it’s probably the most significant change that UI design has seen in the last 20 years, possibly longer.

This article will discuss 12 of those changes with you. By understanding these principles, you’ll understand why your interactions with technology are changing, improving, or being challenged by new devices. You can then plan for this future according to your objectives.

So, here are the UI design principles you need to know in 2022:

Most Important Principles of Good Web UI

1. Know Your Users, Understand their Needs

Your website is only as good as the user experience it provides

Your primary objective when designing web UI is to make sure your website users can accomplish what they want in the quickest-and-least-frustrating way possible.

You must consider their needs, expectations, capabilities, limitations, and yes, even cultural differences.

You can accomplish this by researching your users’ demographics, observing their behaviour, and speaking to them directly.

For example, you might hire an outside company to conduct focus groups to first-hand observe users’ behaviour. Or, you can create personas (based on the data) and show them your design. In doing so, you’ll get to understand what works or doesn’t work for your target audience.

2. Content Should Reign Supreme

Remember when flashy graphics and confusing navigation were all the rage? Now it’s all about content. The days of luring people to your website with impressive but irrelevant graphics are over.

When users visit your website, they’re not looking to be entertained – they already have YouTube, Netflix, Facebook, Tiktok, and a whole host of other entertainment sites for that.  They are there to get something done. They want to find the content they need, understand it at a glance, and right-of-the-bat see how it will benefit them.

You do not want to underestimate the power of storytelling and its ability to connect people with your idea, brand, products, services, or whatever solution you’re offering.

So, how do you put this into practice?

Design your web UI with content that is relevant to your brand. Where most people will be focusing on using stock imagery and Lorem ipsum to make their designs look good, you have the opportunity to take it a step further and create a genuinely good story.

Every image you use and every text box you create should contain a germane copy relevant to your brand message. You also want to make sure it’s engaging enough to drive the point home.

It’s only rare that the perfect imagery and character count make it to the final product. That’s why it helps to start by planning your content before thinking about how you will design the layout and format it.

3. Balance Consistency and Discoverability

Consistency is one of the most overlooked aspects of web design. According to Nielsen Norman Group, people are good at recognizing patterns. That means whatever design you settle on should be consistent throughout your website.

You will want to balance consistency with discoverability because if it’s too predictable, your site visitors may not engage with it as much as they would like.

For example, buttons that all look the same risk being ignored. Yet, at the same time, when the buttons are too different, then users may have a hard time finding a button that performs the desired action. That means you have to think about combining both to meet their expectations without causing frustration or making them feel stupid for clicking on what they don’t want.

Also, less-than-intricate buttons may not stand out well enough.

The best way to handle this is through user testing. Observe the different actions your users take when they arrive on your website. Then carry out A/B testing — in which you test two versions of a design against each other — to see which performs better.

Use this information to fine-tune your design and make sure it is consistent throughout the experience.

4. Play with Animation to Improve Navigation and Engagement

From scrolling effects to hover states, the animation is a great way to attract and engage your website visitors. There are many different kinds of animations that you can use. But for this article, let’s focus on the two main types: functional animation and presentational animation.

Functional animation helps make functionality easier by adding a visual cue to represent the next step. For example, Slide Outs and Modals are excellent ways to show the next step.

Presentational animations, on the other hand, look great but serve no practical purpose. They’re meant for user delight and engagement.

As with everything, balance is key. Use functional animation to enhance user experience and presentational animation to delight them.

5. Start with Mobile in Mind

Everything you do should start with a mobile-first mindset.

By now, everyone is familiar with the tenets of responsive web design. It’s best to make your website mobile-friendly from the beginning because it will be harder to change the layout as you add more features and content over time.

We can all learn from Codal. After embracing the mobile-first approach, the start-up ended up with a jumbled-up web product when viewed on desktop computers.

They were forced to abandon it entirely and start over, this time using a mobile-in-mind approach (not a mobile-first approach).

They would test their breakpoints and layout on mobile and then adapt it to be desktop-friendly.

6. Don’t Let Your Design Fall into a Rut

The best designs don’t just come from hard work and determination; they rely on inspiration too. People may not know it. But if you look carefully, you’ll find references to other designers’ work on many popular websites. That’s because great design isn’t about reinventing the wheel; it’s about using the best elements of your industry to create something unique.

7. Design Like You’re Right, Even When You’re Not

People with strong personalities tend to have their own way of seeing things. As a result, they may be more inclined to believe they are always right. But being super confident doesn’t mean one should stop being introspective, especially when it comes to design.

For example, take the story of Mike Monteiro. He’s known for his straightforward personality and strong opinions about web design, but he also tries to pay attention whenever someone disagrees with him.

Many designers don’t realize that their design choices are influenced by the way they see things. But when you try to put yourself in the shoes of your users, it’s easier to see if something is missing or doesn’t make sense.

8. Follow Design Trends–but Don’t Be a Slave to Them

Design trends come and go, and each of them can help or hinder a design solution. For example, Google Material Design has been around for some time now and has evolved quite a bit.

Material Design is typified by clean, simple layouts that help users focus on what’s most important. It also incorporates familiar OS elements such as toolbars and buttons. And yes, the OS metaphor of layers (e.g., tabs) for content display. Most importantly, it’s data-driven, meaning all design decisions are made with user data in mind.

Although Material Design is pretty popular, it’s not the best choice for certain projects. Its simplicity may be too dull or impersonal for e-commerce sites that need to engage their clients via rich graphics and imagery. On the other hand, Material Design could work wonderfully for content-rich websites geared toward a more general audience.

Not every site needs to be Material Design-compliant. But knowing the pros and cons of design trends will help you make informed decisions about your own web projects.

9. Consider Affordance

Don’t complicate the obvious.

We all know, blue signifies a hyperlink. A silhouette of the head and torso represents a profile icon. These are called signifiers, and they help users navigate a page.

When a designer shows that their design is intentional by incorporating signifiers, it implies the site has been carefully crafted to inform its visitors.

The only challenge you have is to understand how affordance evolves along with design trends so you can implement it properly.

10. Prioritize Accessibility

One of the top rules in web design is to prioritize accessibility. That means that you need to consider users with disabilities and those who are not tech-savvy.

By not prioritizing accessibility, you risk losing 25% of potential users, aggravating your customers, and damaging your brand reputation.

At the interface level, accessibility may mean using high contrast colours and HTML semantic markup for users with low vision.

Designing for accessibility also means incorporating universal design principles. These are concepts that don’t rely on the user’s knowledge or experience with technology.

11. Exercise Progressive Disclosure

It’s not hard to make things more complex than they really are.

Progressive disclosure is the idea that you don’t need to show all information at once if users can access it gradually. This way, you prevent information overload without compromising your design.

For example, Gmail uses progressive disclosure to show users the settings they need most often. Other examples are Facebook’s privacy shortcuts and Twitter tweet list.

The key here is to know how much information you can reveal at once–without overwhelming your users.

Not only that. You also want to make sure the most important information is the easiest to find.

12. Establish Trust and Credibility

No matter how flashy your design is, it means nothing if users don’t trust you.

You can make them feel more secure by using reassuring symbols like the padlock icon on HTTPS sites or the credit card glyph on shopping carts.

You also want to let users know that you’re legit. You can do this by including your address and phone number on the footer of your website.

Let them know that there are people behind what they’re seeing. People who they can trust. Be sure to include the bio and photos of your executive team, customer success stories, live support chat, and accessible email contacts.

13. Tree-test Your Prototypes

Don’t make the mistake of letting your design go live without testing it first.

Tree testing, also known as A/B testing, lets you offer identical versions of your website to different users. You’ll learn how each version performs and what enhancements can increase conversions.

The best time to tree test is in the early stages of a project when it’s still possible to implement changes before the site goes live.

14. Use Only One Actionable Element Per Page

Every page on your website should have one goal, ideally with a single action.  If you make users decide between different actions, they will become overwhelmed and agitated. You want them to go where you send them–and go there fast.

Make sure that buttons or links are visible and noticeable at first glance. You don’t want your users to miss out on something valuable just because they didn’t notice it on your page.

15. Don’t Induce anxiety

Don’t make your visitors feel anxious and uneasy.

They should be able to trust you and your site, so don’t force them to share personal information if it’s not necessary. Get rid of opt-in boxes that cause anxiety by asking for too much information upfront or asking users to follow you on social media.

Avoid using a time-ticking timer or discounts that are about to expire.

16. Let Users Get Back to Where They Once Were

You’ve lured them in with your fantastic design, and now you want to keep them on your site for as long as possible.  But don’t make the mistake of confusing them with complex navigation or making it difficult for them to go back to the page they once visited.

Users should have a sense of where they are and how to get back on track if they want–without any fuss.  If you make it too complicated, some may give up on your site and uninstall your mobile app.

---

Design Trends You Need to Know (2022)

There are certain aspects of web design that will never go out of style: fast load times, user-friendly navigation, ease of use, data security, and responsive layouts, to name a few.  However, you can keep your site on the cutting edge by learning about the latest design trends of 2022 and beyond.

Here are the trends to get you started:

1. Colourful Minimalism

2022 will be a year of colourful minimalism.

The colours will be lighter and brighter. Minimalism will become more colourful while displaying simplistic elements like bold lines, flat buttons, and big typography.

The colour palette of 2022 is expected to include pastels, whites, greys, warmer neutrals, and watercolours. It’s also possible that designers will use holographic colours to give a sense of three-dimensionality.

Take Bubbly as an example.

Take Bubly as an example. Their cans and website are as colourful and bold as they come.

You can see how they use bright colours, bold lines, and big typography to display the brand’s personality.

2. Fast Page Speed and Load Time

It’s expected that by 2022, a page taking longer than 2 seconds to load will be considered broken.

Website performance has a direct impact on your bottom line.  If your pages take too long to load, visitors will turn the other way, and you’ll lose out on revenue.

That is why web designers are pushing for faster page speeds in 2022 and beyond. Pinterest reduced wait times by 40% and increased sign-up by 15% (source).

2022 will likely see more websites working to improve speed and performance: reducing assets, lazy loading, deferring JavaScript and minimizing HTTP requests.

Designers will also pay more attention to image sizes. They should be as small as possible, optimized for the web, and free from unnecessary metadata.

3. Big Bold Typography

For many years, designers have been using minimalism to drive their designs.  They would use white space, large photos, and big typography to make their content stand out.

However, web design is moving away from minimalism.

2022 will see more bold typography because it’s the best way to catch visitors’ attention when they’re scrolling through long pages of content. Big letters can provide clarity for headlines and body text and ensure readability.

Using elegant fonts is crucial to the design of 2022 because users will be expecting one-of-a-kind designs that take advantage of the latest trends.

4. Progressive Lead Nurturing Forms

Lead generation forms are the first step in turning website visitors into customers.

Designers will make these forms more effective by using progressive profiling to allow users to fill out each field at their own pace instead of filling out all the information upfront.

This way, if you’re hoping to get people who are interested in your product or services but are not ready to commit to a sale just yet, they can easily submit their name and email address.

As users scroll through your website, the form will update to ask for more information such as phone number, company name, etc. This will ensure that you’re always collecting relevant data without asking for too much in one section.

5. Voice-Activated Interface

The voice-activated interface will be a popular trend in 2022.

How do we know this? Amazon has already taken the plunge and released the Amazon Echo, which listens for voice commands and answers questions about movies, music, weather, sports scores, etc. It’s like Siri talking to Siri at home.

So, what does this mean for websites in 2022? Web designers will integrate voice-activated commands into their sites to engage users.

If you’ve ever used Siri, then you know how this works.  The site recognizes your voice and responds based on the commands you give it.

6. Interactivity

Adding interactive elements to your website is an excellent strategy for providing value to your visitors, offering guidance, and driving engagement.

For instance, if you’re a realtor, you could add a mortgage calculator to your website. Doing so not only offers value to your visitors but also comes as an excellent opportunity to collect more data from them and learn a thing or two about their needs.

In 2022, more designers will be using interactive elements to accomplish tasks and create a better user experience.

Examples of interactive elements you can add to your site:

• • Assessment quizzes
  • Polls and surveys
  • Calculators
  • Contests
  • Gamification

7. Virtual Reality

Virtual reality is a growing trend in 2022.

Today, the most popular virtual reality experiences are created by video game designers who can benefit from VR by creating more immersive games for players to enjoy.

But soon, we’ll see web designers implement virtual reality too!  With tools like WebVR and A-Frame becoming more popular, it’s only a matter of time until Virtual Reality makes its way onto the web.

And when this happens, it opens up another realm of possibilities for web designers to offer unique experiences to their visitors that are difficult (or impossible) to recreate in the real world.

So, what can you do with virtual reality?

• • You could let users visit different locations around the world.
  • You could create a space where users can interact with each other in virtual reality.
  • Or maybe you’ll make it possible for them to see what your product would look like before ordering it.

8. Organic Shapes

Rather than using rectangles and squares to create the foundation of their designs, web designers will use circles, triangles, waves and other shapes that give their site a more unique and modern feel.

This is because certain organic shapes (like triangles and circles) make it look like your site is made up of three separate components instead of one.

This will not only make your site more aesthetically pleasing, but it’ll also guide users through the different pages on your site with greater ease.

9. The Use of Colour to Evoke Certain Emotions

Web designers will find new ways to use colour in their designs.

For example, if you want your visitors to feel relaxed while on your site, you could choose a calming blue colour.

But if you want them to feel excited about an upcoming event, you may choose more vibrant and uplifting colours.

In other words, the use of colours in 2022 will go beyond aesthetics. It’ll be used to evoke certain emotions and even create the desired atmosphere for your site.

Colours and the emotions they evoke:

Blue	water, relaxation, peace, and calm
Red	energy, passion
Yellow	sunshine and happiness
Green	life and freshness
Purple	royalty, wisdom, luxury
Orange	creativity, warmth
Pink	love, softness, femininity
Grey	elegance, formality
Black	power, elegance
White	purity and cleanliness

10. UX Designers Will Make It Possible for Users to Add More Functionality to Websites

In other words, websites will become more like apps.

We’re currently seeing this trend grow thanks to the increased popularity of “Click-to-call” buttons, appointment booking forms on websites, and chatbots that simplify the buying process for users.

In 2022, we’ll see this trend expand even further thanks to advancements in Artificial Intelligence that allow websites to communicate more naturally with their visitors.

As Artificial Intelligence becomes more advanced, web designers will develop creative ways for their website users to access information and take action on their websites.

11. Smart Videos

Internet speeds are only getting faster, which means that more people than ever before will be able to view high-quality video content on their phones.

This opens up the door for web designers to create sites that incorporate responsive videos into their designs. You’ll find this becoming much more common in social media platforms where users can post videos of themselves or updates about their lives.

2022 will be when web designers take full advantage of the increased use of video content by creating better-optimized websites for high-quality video viewing.

---

Seven Key psychological principles of UX & UI design

I am often reminded of this quote by Steve Jobs when I sit down to design an interface. It is not enough for a website or application to simply look good — it needs to feel good and work well too.

This article will cover psychological principles commonly used in the design process:

Visual Hierarchy

Squeaky wheels get the grease. This is sometimes called:

• The Law of the Vital Few:  A few major issues or questions will be on most users’ minds. To make it easy for them to find answers, prioritize those over minor usability details.

How many times have you been surprised by a page’s contents? That was a situation where the designer attempted to be too clever.  Sometimes, it works out great, and sometimes, not so much.

“You can’t fool all of the people all of the time.”

Trick or treat!  Most users will pay attention to content that appeals to them, but they’ll ignore the rest.  Hence, a proper visual hierarchy is critical for UX design.

Two factors determine visual hierarchies:

• Salience – Items that capture attention or “grab” users’ eyes should be prioritized.  You can draw their attention through size, colour, spacing, and placement on the page.
• Perceived Value/Relevance – Objects that seem important or relevant to users should be prioritized over less meaningful items. This is why ad campaigns often depend on celebrities — they enhance the perceived value of items.

Some aspects of your website are more important than others: forms, value proposition, and call to action. You want to make sure they’re first to get attention and the rest second. When your menu has ten items, there’s an obvious order in which you should list them.

It’s not necessarily about prioritizing items by their actual value or relevancy — it’s about what users perceive that value to be.

Hierarchy isn’t limited to size only.

You can use colour, spacing, and other factors to establish relative importance.

When designing an interface…

Use your user research to determine what elements are most important. Then incorporate that into the hierarchy of the site’s design.

Amazon uses colour to make their call-to-action and Buy Now button more prominent.

Start with Your Business Objectives

Here’s a secret:  Every choice you make in your design process should be informed by what you want to accomplish for your business.

The only way to create a successful website is to solve a problem or achieve an objective.

This might seem obvious, but it’s easy to get caught up in the creative process and lose sight of what you’re trying to accomplish.

Divine Proportions

You’ve heard of the magical number 1.618 (φ). Designs that utilize this golden ratio are considered more aesthetically pleasing.

This is an aesthetic principle, not a psychological one — but it illustrates how influential our innate preferences are on UX design.

We also have the Fibonacci Sequence, where each term is the sum of the two previous terms.  The sequence is: 1, 2, 3, 5, 8, 13…

And this is a number series that turns up in nature quite often.  It can be found in spiral galaxies and pine cones, as well as human facial proportions.

The Golden Ratio looks like this:

And it’s calculated as = A/B = (A+B) B = 1.618

You get the golden ratio by dividing an element into two parts (one longer and the other shorter). But it only fits the golden ratio if the sum of the two elements divided by the shorter elements yields 1.618.

Do you know who else has applied the golden ratio? Well, Twitter.

Here’s a Tweet their creative director made in 2010.

It’s simple.

Say your layout width is 960px. You can begin dividing it by 1.618. So it becomes 593px. Subtract that from 960, and you have 367px.

593px

226px         367px

141px

Again, do the same with the 367px, and you’ll get the two rectangular boxes 226px

and 141px.

Hick’s Laws

Hick’s Law states that the time it takes for a user to choose an action is a function of the number of choices.

In other words, each additional choice you present to your users will increase the amount of time they take to arrive at a decision.

For example, when buying something on Amazon or IMDb, if you’re presented with too many options, you’ll take longer to make a decision.

The more options a user has, the more time it takes to arrive at a decision.

If you have many options, it’s okay to provide some sort of filter or sorting mechanism.

Otherwise, you’ll frustrate your users and increase the chance they’ll abandon the ship.

We can all learn from Wine Library. They seem to have perfected the art of using filters.

Fitt’s Law

Fitts’ Law states that the time it takes to reach a target is a function of the distance to and size of the target.

If you make your call-to-action button bigger, people will click it faster.

This is why large “CTAs” is so common online — from Facebook ads to blog post headlines.

Spotify is among the few companies cashing in on this. They are always using large call-to-actions. Their play button is also bigger than any other button on the site.

Note that bigger doesn’t always translate to better. For instance, you don’t want a button to take half of the screen. A small button is more likely to attract more clicks when increased by, say, 20%. However, doing the same to a larger button won’t generate the same impact.

The Rule of Thirds

It’s always a good idea to incorporate images into your design.

The rule of thirds is a guideline that tells you where to place graphics in your design.

According to the rule, images should be aligned with imaginary lines which break up your design into thirds both horizontally and vertically.

Users like it when things are visually divided or organized in this way because we tend to focus on one subject at a time.

Check the image below. The image on the right looks more interesting — and that’s because it utilizes the rule of the thirds.

 

---

Unbreakable Rules about User Interface Design to Keep in Mind

As a Singapore web designer, you need to make sure that the user interface design that you provide to your client is worth every dollar that they spend on that service. The user interface is one of the most critical sections of the website as it gives visitors the first impression of the business.

No potential client will continue to browse the site and do business with you if the user interface is not appealing and properly designed. Here are seven unbreakable laws about user interface design that you should keep in mind. Note these tips not only apply to Singapore web designers but also businesses looking for professional website design services in Singapore.

7 User Interface Design Rules to Follow Always

Rule 1: Clarity

The first thing that you need to know is that potential clients who land on your website will avoid interface elements whose meaning or purpose is not upfront. Google team understands this fact well, and that’s why they decided to simplify the interface by hiding the less essential elements behind an abstract icon.

The bottom line is that the majority of website users often ignore web elements that they do not understand. Therefore, it is imperative to make sure that the website interface does not have unnecessary elements or things that make visitors wonder what they are required to do next.

Rule 2:  Preferred Action

Users will feel more at home and comfortable on your website if they understand the preferred or specific action that they should take.

To understand what we mean, look at the above screenshot of Twitter. Obviously, users know that they should start tweeting when they land here, but the team went ahead and included a “Compose new tweet” button on the right corner and an input box on the left sidebar. The two buttons blend perfectly with the surrounding elements.

Make sure that no users wonder what step to take next or your preferred action by organizing the interface well. Use contrast to make the CTA buttons stand out from the rest.

Rule 3: Context

Unknown to most Singapore web designers is that web visitors want to see interface controls close to the object or element that they want to control or are more interested in always. They expect to see interface elements in the specific context of the objects they want to manage or control.

Keep things simple and handy for potential customers.

Rule 4: Work on Default Values

Defaults matter to people not only here in Singapore but also abroad.

• • A majority of Singaporeans have set a specific ringtone and background as the default on their mobile devices
  • People rarely change their TVs factory settings

Unknown to most people that defaults have a major impact on our lives. They typically rule the world. When designing a user interface, make sure that you put into consideration the default values. They should be as practical and useful as possible.

Rule 5: Guided Action

The beauty of professional web design is that you can manage how website users navigate the site by making sure that all elements are in the right places. Your potential customers will not have a problem doing something if you request them to do it politely and professionally.

There is a huge difference between asking them to do something and expecting them to decide to take a specific action on their own. A good example is the endorsements CTA buttons on LinkedIn that are strategically placed above the user’s profile pages.

Since the introduction of these call-to-actions, millions of people have profited from endorsements made by colleagues, business associates, friends, and even former schoolmates. The secret is using the right element and placing it at the correct location on the user interface.

The lesson is that if you want your website visitors to do something, do not hesitate to request them to do it.

Rule 6: Feedback

Your website visitors will feel better navigating your site and doing business with you if you provide constant and clear feedback after every action they take on the site.

For example, Gmail offers good feedback after you do any action such as delete an email. The site also goes an extra mile to display tabs such as “Undo” and “Learn More” links to offer additional information to the users. All this feedback and links to additional information make the users feel comfortable using the site.

Rule 7: Easing Processes

Website visitors will be more encouraged to take a complex action if broken down and presented in small steps. Most people hate filling long, complicated forms online as such, tasks are difficult, overwhelming, and annoying.

However, splitting the form into multiple steps and displaying a progress bar will make it more convenient for your users to provide the information you want to capture using the form. They would rather spend time completing ten small tasks than one gigantic task.

Contrary to popular belief, the small tasks do not intimidate them; instead, they create a sense of accomplishment once they complete them successfully. Be sure to organize them chronologically.

These are the seven most essential laws of user interface design that you should keep in mind. Breaking any of them can spell doom on your business regardless of its current size and performance.

There is no need to worry though, with a professional team of website designers in Singapore on your side, rest assured that your web user interface would be structured appropriately and optimized. We will work on the project from the start until the expected results are achieved. We can also do digital marketing on your behalf to ensure that your site conveys the intended message to the target audience and converts.