Balance or imbalance is just a natural way of how life works. We see it everywhere, in the human body, nature like in plants, trees and animals. Symmetry has been proven to be very appealing to the human eye. Studies have shown that the more symmetry, the more attractive we find them to be.

Symmetry and balance are related terms. But they are not exactly the same thing. Let’s have a look at their definitions:

• Symmetry refers to the visual quality of repeating parts of an image across the axis, along a path or the centre.
• Balance is the visual principle that makes a design appear to be equally weighted throughout the layout.
• Asymmetry, on the other hand, refers to anything that is not symmetrical.‘

Symmetry

Balance is the key to a great design and engaging website layout. But symmetry is one of the tools that the designer can use to create balance. A design or element is symmetrical when two or more of them are identical and seem to mirror each other from a central point or axis. This strikes balance and order to the design.

While designing, symmetry has visually appealing benefits that can be very difficult to achieve and may not be appropriate in all contexts. Generally, an imbalance perceived by human eyes may not create a good user experience. Humans perceive the imbalance to be disorderly and chaotic.

In contrast, symmetrical designs are aesthetically pleasing to our eyes to understand at first glance. Since symmetrical designs include repetition of designs that reflect each other, they contain less information for our eyes to process and lead to lesser cognitive load.

Another reason why symmetry is pleasing to look at is because it balances out the visual weight in the designs. Since they are balanced, our eyes do not need to shift focus from one side to another to deduce the meaning.

Types of Symmetrical Design

Designers have identified three different types of symmetry that are widely used:

i) Reflectional Summary

This type of symmetry occurs when a design element is reflected on the other side from a central axis, resulting in two identical mirrored images. An axis refers to an imaginary straight line, so reflectional symmetry can be reflected horizontally, diagonally, or vertically.

A perfect example of this could be the wings of a butterfly. Even though they are not perfectly symmetrical, they appear to be the same and identical on both sides.

ii) Rotational Symmetry

This type of symmetry occurs when a design element is reflected from the central point. Just like reflectional symmetry is reflected from a straight line, rotational symmetry is reflected from just a single point.

Just like flower petals bloom from the centre and radiate outwards from its centre point, demonstrating perfect rotational symmetry.

iii) Translational Symmetry

This type of symmetry occurs when a design or an element is repeatedly used in the same orientation. Unlike the first two types, translational symmetry is not reflected and does not need to be placed in proportion with the other images or the central point or axis. The element can be placed anywhere in the graphic design as long as the orientation is consistent.

For example, when you walk on sand, the way the footprints are formed seem to be mirroring each other.

Some examples of website designs with symmetry are:

Asymmetry

In contrast to symmetrical designs, asymmetrical design does not have a particular balance from any side of its central point or axis. Even though it is unbalanced, it still gives a natural look to the design.

Like we observed, symmetry seems to be more predictable and easier to perceive than asymmetry. Although this helps to create a good user experience, the simplicity can make it monotonous and boring as well.

Since they are unpredictable and have fewer rules, they feel very natural. This also makes the user’s brain more inclined to think harder and make sense of it, and also grabs the user’s attention.

Unlike symmetrical designs, asymmetrical elements do not necessarily exercise visual balance to make the whole picture easily perceivable in the first glance. This helps the visitor to focus on the details of the design rather than the whole picture.

Some examples of asymmetry are:

When to Use Symmetrical and Asymmetrical Designs?

For traditional uses, designers, when they want to portray trust or confidence, symmetrical layout and elements work the best. Symmetrical designs give a feeling of balance. For example, Apple’s website leverages many symmetrical elements. The information about Airpods and Accessories are placed in two boxes of equal sizes. The red lines indicate the alignment of text from each box. The designer has also used the same colours on each side to balance the layout.

Some brands, like Apple, are known for creating beauty through simplicity and symmetry. Asymmetry is more appropriate for other brands where the designer wants to draw the user’s attention, such as call to action. Asymmetry can also be used when the designer wants to convey movement. For sports brands, like Nike and Gatorade, creating a perception of movement is important and they do so using asymmetrical elements.

Conclusion

Symmetrical and asymmetrical designs each have their pros and cons that makes them special in their own unique way. Designers should ideally include both symmetry and asymmetry in their design layout. They can use symmetrical elements and layouts when recall is important, and asymmetrical when visual interest of the user is more important.

Designers could also blend the two types of design by adding a random mark to symmetrical form so it adds some asymmetry to them. Contrasting symmetrical design elements against asymmetrical design elements is important. By using rotational and translational types of symmetry, designers can indicate a sense of motion, rhythm and flow.

Do follow our LinkedIn page for updates: [ Myraah IO on LinkedIn ]

In the below stated images, what do you think helps us to seamlessly flow through the design without any interference?

Imagine if this was just one dot, line or brick; would it still feel the same and have a seamless experience?

Probably not! This is because repeating elements in the design creates flow. When our eyes land on an element with certain characteristics, we tend to seek other elements in the layout with similar features.

When we place more than one element on the page, we create a pattern and a pattern is the seed of the rhythm. Rhythm activates space and leads the visitors through the design.

The term ’rhythm’ is a word we commonly use, but perhaps not the one we associate with design. In this blog we will explore rhythm in the context of visual elements of a design, how we create it, types of rhythm, where do we usually find rhythm on websites and how designers can leverage it easily.

What is Rhythm?

As a design principle, rhythm is the patterned repetition of elements in space. Apart from the repetition of elements, the interval or whitespace between them is also a determining factor causing rhythm. While perceiving the whitespace that exists between elements, we create a sense of organised movement, somewhat similar to a musical beat.

Designers usually alternate the positive element with whitespace to create a pattern, which then repeats and varies itself to create rhythm. We can create rhythm by:

• Repetition that creates a pattern through predictability
• Alteration that creates a pattern by contrasting pairs (dark/light, thick/thin)
• Gradation that creates patterns through progression

Types of Rhythm

Rhythmic patterns are built from elements and the intervals between elements. The eye will follow the path of the rhythm. Designers can further plan and place elements to create a rhythm than randomly adding them. The three primary types of rhythms are:

i) Regular Rhythm

It occurs when the intervals between elements or the elements themselves are predictable or similar in size or length. This type of rhythm repeats the elements over a predictable interval. This sameness or repetition creates a less interesting rhythm and user experience.

The placement of these elements is usually in a linear path. Designers can repeat shapes, colours, patterns or other characteristics of the element over a regular interval or vary the interval to change the pace of the rhythm. Designers could also keep some characteristics constant while varying the others, for example, keeping size and shape constant while varying the colour of the elements. This variation would lead to interesting designs and higher engagement.

ii)Flowing Rhythm

This type of rhythm occurs when the elements or intervals are organic. These patterns create a sense of movement. Typically, each element is unique yet similar over each interval. A good example of this type of rhythm are the stripes on a tiger or zebra.

This rhythm creates natural patterns that evoke a feeling of organic movement. The designers could add elements in an organic manner over each interval or the interval itself could be organic.

iii)Progressive Rhythm

This rhythm occurs when a sequence of elements, forms or shapes is shown through a progression in visual characteristics. The elements or shapes repeat over an interval with some variation and graduation, that is usually pregressive.

The size, colour or other characteristics of the element changes over each interval and is pregressive in nature. These characteristics gradually increase or decrease creating a sense of direction over the sequence. This variation leads to more visual tension and interest and directs the user’s eyes along the progression.

A colour gradient is an example of progressive rhythm. Gradually decreasing the size or intensity of colour creates a linear perspective directing the visitors eyes to a vanishing point.

Common Places to Find Rhythm on a Website

Remember, rhythms are repeated patterns and while designing a website, we often repeat elements. Let’s discuss some of the places where we most commonly find rhythm in websites.

Navigation bars: the navigation and menus we create always contain repeated items.

Links: The colour and general characteristics of the link in the website creates repetition.

Indexes: These typically list several posts with similar visual format (title, page number, read more, images). This could be blog or book indexes.

How to use rhythm to design your website?

Rhythm is a patterned movement derived from repetition. When visually present in a design, it engages the user, creates interest and leads the eye from one element to another. Wonder how web designers incorporate rhythm in the website designs?

This website design demonstrates all three types of rhythm.

The grids containing the images creates a regular rhythm in the layout. The patterns and colour scheme at the top and bottom of the page are different. These colours are contrasted and located on a dark background that occurs in the middle of the layout as a horizontal line. When perceived together, they create a rhythm throughout the layout. The designer also includes the horizontal shape of the illustration and horizontal elements that create a rhythm.

The navigation bar at the top and the bottom of the page includes hand illustrated lettering causing a sense of flow and movement rhythm. The texture in the background and strokes in the illustration seem organic thus giving a natural look.

The shapes in the illustration attenuating towards the right creates a progressive rhythm in the shapes. You may also observe a series of circles in the illustration that progress towards the intervals. The 3 faces in the starting of the layout also create a sense of rhythm.

Doesn’t this layout feel seamless? This website design displays an immediate rhythm. If you notice, every section on the page is about the same height and is contrasted by different background colours. These colours alternate between light and dark to create rhythm of value down the page.

Each section is connected with a series of repeating lines and dots with endpoints in each section. This demonstrates a sense of connection. These lines and dot segments vary, even though the interval between them is fairly consistent. They lead the eyes from one section to the next and facilitate a rhythmic movement.

If you notice the third section, there are several icons on the right side. These icons vary in their shape and space between them creating a flowing rhythm.

Several sections contain circles progressing in size creating yet another type of rhythm. Background texture, lists and connecting lines throughout create rhythms throughout the layout.

Conclusion Whether designers plan it or not, as soon as they place multiple elements on the layout, design exhibits patterns and rhythm.Human mind seeks patterns and naturally perceives them. We find regular and predictable patterns soothing and engaging.

Designers can create rhythm in their design by repeating and varying elements over whitespace at varied intervals. A good visual rhythm will cause the user’s eyes through the pattern. The predictability of the rhythm by repetition of elements leads to anticipation that further directs the visitors to flow.Variation in the design facilitates interest in the rhythm. It avoids monotony and holds occasional surprises for the visitors.

Do follow our LinkedIn page for updates: [ Myraah IO on LinkedIn ]

Effective web design is a critical piece in the success of any business website: call center Ecommerce websites, portfolio websites, brand landing pages, and more. Your website’s visual appeal can evoke feelings of trust, security, and authority in your potential clients. And you risk losing potential customers if it’s slow, hard to navigate, or read.

The majority of customers today want nothing to do with poor-quality websites. In fact, 40% of consumers will leave your website if it takes more than 3 seconds to load.

The best web designs combine beauty and aesthetics with functionality and optimization. This unique combo is the only way to meet designated QA metrics.

Below are seven essential elements to include in an effective web design.

Image Source

White Space

Effective web designs are usually clean, accessible, and simple. The element responsible for a clean website look is white space. White space refers to the blank area of space between content on your website.

White spacing in between buttons and texts can make each element stand out. Deliberate white spacing can also increase the feeling of importance attached to an element.

For example, white spacing around a CTA button can create a natural focal point that draws the user’s eyes. It’s a little detail that can make your site more user-friendly.

Consistency in spacing is another point to consider. Navigational elements on your website should incorporate white spacing consistency. We also recommend using grid-based layouts to keep things looking clean and balanced on all web pages.

Layout and Visual Appearance

Another component of a great website design that requires attention is the overall look. This broad term describes the reaction you want first-time visitors to have about your website.

Your website’s visual appearance and layout are key to wowing your audience when the page loads. These first impressions are crucial to the eventual opinion a prospective customer will form about your brand.

You want your website to evoke thoughts of adjectives like clean, intuitive, familiar. White spacing is one of the elements that can make that happen. We also encourage using margins to improve your website’s visuals and achieve a balanced web design.

Your choice of imagery also determines your website’s visual appearance. Be deliberate about your choice of graphics, photographs, and icons. These images should provide complementary information for your text and be of the highest quality.

The layout is at the intersection of the customer experience vs. customer journey debate. And, as far as layout goes, a grid style is best. But you should also place each piece of the design with a visual hierarchy in mind.

Place each element in a manner that directs the visitor’s gaze to where you want it. Users will term your website as intuitive and accessible when it has a natural flow.

Navigation

Your web page’s navigation isn’t the place to get creative. The most effective web design is one with simple, functional navigational elements. Avoid the user-accessibility pitfalls of complicated hover effects and multi-tiered sub-navigation menus.

Navigational elements should exist in your website’s body, header, and footer. And they should work to direct users to the info they want quickly.

The first major decision is whether to use the “hamburger” menu style. The hamburger menu has three parallel lines which users can click to access a navigational drop-down. It offers a great way to save space. But the hamburger menu also hides information from visitors.

Effective navigation encompasses elements other than your web page’s header menu. We recommend using directional arrows for long, one-page designs to guide visitors through each section. Your website’s page experience ratings will also benefit from a “Back to the Top” button.

Finally, don’t underestimate the navigational importance of the web page’s footer. Visitors to a website tend to scroll to the end of a web page, especially when the layout is clean and attractive.

A website visitor scrolling to the end of your web page indicates significant interest. They’ll need somewhere else to go, and the presence of navigational elements can guide them. For instance, say the website is for a SaaS company. The footer can be a great place to include a sign-up button. Or it can include a link to a blog titled “What is a SaaS Company?”

Image Source

Color Scheme

Color is still an essential part of what makes an effective website design. Your choice of color palette signals your brand to the visitor. It can also inform trust and authority.

Consider trending industry perspectives alongside your brand identity before deciding on a color scheme for your website. You should also pay special attention to your target demographics and audience. The main question to answer here is — what color appeals to my target audience?

For instance, accountancy and law firms should opt for deep green or blue hues, as these signal professionalism. Surprisingly, a photographer can use black and white images to portray the true vibrancy of their work.

Children under age six will love bright versions of primary colors. Conversely, teens and adults want to see dark, sophisticated color schemes. In the same vein, parents and guardians will enjoy soft yellow, blue and pink color schemes.

The dominant color in your scheme will influence the rest of the visual palette for your web design. Thanks to visual distinction, complementary colors on the opposite side of the color wheel will guide your visitor’s gaze. And you can also use them to ensure visitors focus on particular buttons or content elements.

Image Source

Typography

Just like with the color scheme, it’s essential to consider your target audience and industry trends before deciding on a font. Your website’s typography will determine the tone in which visitors receive any content on it.

Serif fonts are best for formal businesses and brands like law firms. You can add a small twist by using distinguished serif fonts (those with the extra bits on each letter). Conversely, a photographer will benefit from light, airy typography that eludes good vibes, comfort, and creativity.

The average visitor to your website has seen Times New Roman and Arial one too many times. Use a different font for your typography without going past the borders of normalcy.

After settling on the main font, choose a complementary one for accents and headings on your web page. Avoid the temptation of selecting unnecessary sizes for your headings or going beyond three different typefaces.

An effective website design offers a contrast between site text and background color. Generally, you can only achieve contrast when you pair light colors with dark tones.

Finally, every piece of text on your website design must be completely readable. Fulfilling this readability requirement means body copy must be 16 pixels at the very least.

Image Source

Optimize for Mobile

Mobile phones are responsible for 50% of global web traffic. Professionals worldwide include mobile phones in their essential remote work tech stack.

In fact, the 4th quarter of 2021 saw mobile traffic (excluding tablets) account for 54.4% of worldwide web traffic.

These metrics measure the quality of user experience a website delivers to visitors. The higher your site’s performance, especially on mobile, the higher it’s likely to rank.

The majority of WordPress templates and themes come equipped with provisions for mobile traffic. But if you’re designing a custom look for a website, you’ll need to incorporate elements for mobile traffic.

You have two options to ensure mobile accessibility in the second scenario above. You can either choose to design a responsive web page template that adapts to mobile screen sizes, or you can design a unique mobile-only version of your web page that activates when non-desktop visitors access the site.

Content

Interior designers don’t stop after painting the walls in your house. Instead, they start to think about the decor pieces.

Similarly, an effective website design isn’t complete without content. Even after selecting the layout, typefaces, color schemes, and icons, you still have to think about content. More specifically, you have to assess how it interacts with your design.

Visitors to your website need information quickly. Say your brand offers work communication products and services.

Visitors to your site will likely be asking themselves whether your brand is trustworthy and capable of delivering features like phone status. Your website content offers a platform to answer these questions.

We recommend using headings to organize sections and make it easy for the reader to tell what information is on offer. Similarly, avoid long, rambling paragraphs. Instead, break up your text with headings, display text, and lists.

Content efficiency is important, as extra words can dull your brand message and selling points. Learning to say more with fewer words is a key sales communication skill. And with the short attention span of today’s internet users, short, easy-to-digest content is best. Evaluate each word from your readers’ perspective: Is this word relevant?

Your content strategy should also include keyword optimization. Incorporate keywords your audience is likely going to be searching for in your content. Doing so will boost your chances of ranking on Google result pages.

The last thing to consider is the location of your content. You can look past your homepage or blog page. Ensure your “Contact Us” and “About Us” pages are home to consistent messages that convey the brand identity.

Image Source

Your Blueprint to an Effective Website Design

Above, we’ve covered seven elements that make up a great web design. Pay attention to them, and you’re well on your way to impressing the entity that matters — the eventual users.

Bio:

Jenna Bunnell – Senior Manager, Content Marketing, Dialpad

Jenna Bunnell is the Senior Manager for Content Marketing at Dialpad, an AI-incorporated cloud-hosted unified communications system that provides phone call transcription and valuable call details for business owners and sales representatives. She is driven and passionate about communicating a brand’s design sensibility and visualizing how content can be presented in creative and comprehensive ways. Check out her LinkedIn profile. She has also written content for CrankWheel and AWeber.

Do follow our LinkedIn page for updates: [ Myraah IO on LinkedIn ]

Imagine you’re strolling on the streets and happen to notice these advertisements:

Image Source

There are many hoardings and banners and obviously, one out of these will catch your attention first. Probably the hoarding titled ‘Eleven Art’? Does it mean that hoarding is dominating and prevailing? Perhaps because of its colour scheme? Red has been known to draw the attention of the users.

Just like the above example, in a website design, when two elements are placed in a design layout, either one of them will attract the user’s attention more and exert some dominance over the other or they will be equal in every aspect. It might be larger in size, or have an attractive colour, maybe located in the middle or top area, or the subject matter might stand out. It’ll appear as if it controls the lesser elements to a certain degree. You will end up noticing that first. Consider this example below:

Isn’t it evident that the red triangle stands out and draws your attention more than the grey circles? This is because the triangle dominates in size and colour.

As we continue to add more and more elements to the design layout, some dominate others; and there would be one that dominates all of them and prevails. This element demands attention and becomes the entry point of our design. It will be the first element that will draw the user’s attention in the entire layout.

Elements of lesser dominance become the user’s focal points. They are not the most dominant on the composition however they dominate over the majority of elements on the design layout. This is not the first element the user’s attention would be drawn towards, it’ll perhaps be the second or third.

How to Create Focal Points in the Design?

The designer can create focal points by emphasising on the dominant element through contrast and emphasis. In order to gain the user’s attention, the element must contrast with its surrounding elements. Greater emphasis creates more contrast in the composition. Conclusively, it is about giving website elements greater visual weight so that they stand out.

Designers can control the size, density, colour, local whitespace, value, shape, position, style, shape, depth, and orientation to control the visual weight of the elements. The eyes are a good judge to determine which element weighs more, especially if the goal of the designer is to have elements with large differences in the visual weight.

For example, in this website design below, the icons of facebook, twitter, messenger are focal points whereas the logo and the headline dominate the design.

Similarly, in this design, the app store, google pay option and the details of the event are focal points.

What is Dominance?

Dominance in simple terms refers to the state of being controlling, commanding or prevailing. Every design should have a focal point or primary area of interest that serves its way into the design. The design flow can be achieved by creating secondary and tertiary dominance.

Consider these 2 polygons of different sizes. The larger polygon is likely to dominate (even though it is slightly larger) and the greater the difference in size between these 2 polygons, the larger will dominate the smaller.

A lack of dominance between the website elements in the composition leads to competition and user’s attention. Consider these circles present in the composition. Which one would you look at first? Chances are your eyes will dodge back and forth between the two circles.

This is because there is no dominant element the user’s eyes could anchor to. Without a dominant element, the viewers would struggle to find an entry point into the design layout. This may be more difficult than it sounds and would not only lead to inattentiveness but the viewer’s may also skip to another website. The designers must reduce the amount of effort it takes to enter the composition by having a dominant element that makes the starting point obvious.

How to Create Dominance in Your Design?

Dominance helps to create an area of interest, a focal point or starting/entry point in the design. The dominant design in the webpage or design should be the element that you want your user’s to see first, perhaps a slogan, headline, title of the page or your logo.

Just like in this website design, the designer wants the logo to be dominant.

However, in this website design, the designer wants the user’s to get anchored to the headline.

As a thumb rule, the elements in the design with the most visual weight will be the most dominant one. However, that may not be true.

Just like in the above image, your eyes will probably fall first on the circle in the centre. It is not even the largest shape in the image and does not carry the most visual weight. However, because the element is completely surrounded by whitespace, it dominates the local environment. The elements with more visual weight blend together and do not dominate its immediate space.

Levels of Dominance

Designers can create three levels of dominance in their layout. That is a realistic maximum, the more levels, the less contrast will exist between each level, and lesser the contrast, the harder it will be to distinguish one level from the next.

When creating levels of dominance in the design, the layout will be a part of one of these levels below:

• Dominant: This is the element with the greatest visual weight. It will have primary emphasis and will advance in the foreground.
• Sub-dominant: These are the elements that have secondary emphasis on the design. These have less visual weight than the dominant element but more than every other element. It becomes the middle ground in the composition.
• Subordinate: These elements are given the least visual weight. They recede into the background of the layout.

Designers could also add 4th level of dominance. Human beings can easily distinguish between most and least, but everything in between these levels of dominance tends to become a grey area of equal dominance.

Just like in this image, the red square is at the dominant level. It carries the most visual weight given its dimensionality, colour, and size. The yellow circle in the lower left hand side and the cluster of dots above it are in the subdominant level and serve as a focal point. The former uses a drop shadow to give it extra weight and the latter to use local density to give the group extra visual weight. Every other element in the composition sits at the subordinate level and recedes into the background.

Similarly, in this website’s design, the slogan- “the anti-staffing recruiting company” is dominant because it carries more visual weight and has more whitespace around and is larger in size, with contrast. The sub-dominant textual content in the design would be the names below the photos and the logo of the organisation. They weigh less than the slogan but more than other elements on the page. Lastly, the subordinate dominance in the website design is the navigation tool that has the least visual weight. It recedes into the background of the layout.

Conclusion

It is easy to determine dominant elements in the design, but the task for the designer is to be conscious of how each of the elements dominate each other to its immediate surroundings and the design as a whole.

Dominance can be created by contrast, emphasis and visual weights. Identical elements cannot dominate each other. The more visual weight an element has, the more it will dominate the other elements. However, this may not always be true, designers must also consider elements of lesser visual weight and determine their dominance.

Designers could use dominance to create an entry point in the design. Additionally, by determining hierarchy, designers can also exhibit dominance in the design that would guide the visitor’s eye from one part of the design to the next.

One way designers could incorporate dominance and hierarchy in the design is by observing new designs and compositions and paying attention to where they look first, second and last. Determining what you consider dominant, sub-dominant and subordinate instinctively and why they appear in that way.

Do follow our LinkedIn page for updates: [ Myraah IO on LinkedIn ]

UX design can be a fulfilling and satisfying project. A carefully crafted and user-focused design can help you build traffic and drive conversions for your website.

However, even the best designers can make mistakes. Not surprisingly when that happens, it affects your bottom line. But not just that. When users are clicking off your website, it can signal to the search engine that your website isn’t worthy of those coveted top-ranked search positions.

Search engine ranking page

According to an Echidna case study, better UX design can increase on-site conversion by as much as 150%. Moreover, search engines, such as Google, use UX to signal how to rank sites via their algorithm.

Google’s Web Vitals indicate that they actively assign websites status based on their user performance. With this in mind, it is more important than ever to get your UX design game on point.

So let’s discuss some common mistakes and how you can fix them.

1. A Bad First impression

What makes a good first impression on a website?

According to the research given below, the top three impression factors are:

• Page speed
• Mobile-friendliness
• Aesthetics

The first point is critical. Bounce rate grows exponentially with the time it takes for a page to load. Research from Google identified that in just three seconds of load time, bounce rate can increase by 32%. That figure grows to a startling 123% within just 10 seconds.

To drive this point home, consider that 70% of users admitted page speed affects their likelihood to buy. To create a good first impression, page speed is crucial. No matter how fantastic your page design is, it won’t matter if users click off, waiting for your page to load. To solve this problem:

• Choose a reliable host.
• Compress your HTML, Javascript, and CSS where possible.
• Use browser caching.
• Reduce page redirects.
• Make your site safe against attacks or vulnerabilities that could slow you down.
• Optimize your visual content for the web.

Next is ensuring your site is mobile-friendly. In 2021, more than half of all global site traffic came from mobile devices. With smartphones, it’s easier than ever to access content with a mobile device.

Image Source

Yet whether it’s through an app or mobile browser, if your content isn’t mobile-optimized, it can spell disaster. 59% of shoppers say mobile-friendliness factors into their decision to buy from a brand. A good designer will take this seriously. Try:

• Choosing a mobile-optimized theme.
• Simplify your content where possible.
• Reconfigure designs to fit mobile screens.
• Make content readable for all devices.
• Prevent pop-ups on mobiles that can block content.
• Make it easy to contact you with communication software, such as alternatives for Grasshopper (phone system software).

They say humans are visual creatures. Users will base their impression of a brand on how they present themselves online. While sites must be functional, they also must be visually appealing. Research has found 50% of consumers are heavily influenced by aesthetic design. The most powerful tools in your design arsenal should be:

• Color
• Images
• Text and fonts
• Alignment and flow
• White space

With all these points, you should reflect on who your audience is and design accordingly. Think of it in terms of customer acquisition cost vs lifetime value. Investing in a good first impression can generate long-term returns by retaining users on your website.

2. Poor Site Architecture

Organizing your site properly can be a challenge. Poor planning can ruin a beautifully crafted website. A survey of top web designers suggested poor navigation was one of the top reasons for a visitor leaving a site.

Image source

It should be no surprise then that 79% of users will go to another site if they can’t find what they’re looking for. In this way, making your site easy to navigate, with a clear site hierarchy and architecture is paramount.

You can:

• Divide up your site categories clearly.
• Use accurate navigation titles.
• Make sure your search function is working properly.
• Make it clear not only to users but search engines as well, through your code architecture.
• Consider a contact center RFP to make it easier for you to manage any customer issues that may arise.

Suffice to say, good architecture and navigation plays a key role in making a site functional.

3. Bad Functionality

One way to think about functionality is task success rate.

This is a measure of how easy it is for a user to complete a task on your site. For example, if a user goes to make a purchase and the cart function has a problem, as many as 70% of users will abandon their cart because of poor UX design.

Image source

To manage this problem:

• Ensure you carry out user testing with a variety of users.
• Measure their task success rate.
• Identify barriers to completing tasks.

A good measure of task success rate is between 70% and 80%. Achieving this rating will put your website ahead of most competitors.

Another consideration of functionality is accessibility. Over one billion people worldwide have some form of disability. Functionality for them can be the difference between using a site or not. Regardless of its content.

Yet, more than 90% of homepages fall below the WCAG (web content accessibility guidelines) standards. UX designers need to take a proactive approach to making their websites accessibility-compliant.

WCAG state sites should be:

• Perceivable,
• Operable,
• Understandable,
• And robust for all users.

Making your site functional for these users is not only ethical. It opens you to traffic from a wide source of users.

4. Inconsistency

We might think of inconsistency in terms of aesthetics, but here we are talking about what it means to use a website. Or more broadly, interact with a brand.

Consistency in UX designs means that a site responds the way a user expects across different interactions.

For instance, if you’ve ever found one thing on a site, but been told another through their call center or even another page, that is inconsistency. You need a holistic approach to your whole business model. 3CX alternatives provide ways to make your communication consistent.

Image source

You need a clear understanding of the customer’s journey through your site. You want to create a consistent experience to build trust and credibility for your design. Research on UX shows a user expects two things when they use a site:

The second aspect of consistency is brand identity and presentation. The majority of consumers engage with retailers through multiple channels. The way you present your brand should:

• Be researched and data-driven.
• Reflect users’ buying habits.
• Be consistent across all channels.

Why? Because a consistent brand presentation has been shown to increase revenue by as much as 20%. Recognition creates trust and credibility. Trust and credibility drive conversion.

Ensure your team is trained to create a consistent, data-driven brand face.

5. Not Content Friendly

When we design our UX, it’s common practice to substitute the old Lorem ipsum for actual content. The problem with this approach is when we add the final product, our content can go awry. From sloppy formatting to spelling mistakes, this can impact UX more than you think.

Spelling error on a post about spelling errors!

It takes users as little as 50 milliseconds to make a judgment about a website. Surprisingly, within that time, users can spot many issues. We have to think about this in terms of what the users’ eyes go to as soon as a page loads.

Studies show that most users don’t go to the trouble of reading a site in its entirety. Their eyes skim for keywords and headlines to decide the value of content. In this instance, you are making a value proposition to the user. They will ask:

“Is this page worth reading?”

And the odd spelling mistake, unclear copy, or poor phrasing can be the difference between yes or no. The best copy is:

• Researched and edited.
• Succinct and to the point.
• Useful and purpose-driven.
• Actionable.
• Empowered by a catchy but accurate headline.

In short, don’t leave your copy to the last minute. Build your design around your copy.

Takeaways

Now we’ve covered these common UX design mistakes, let’s end with some takeaways:

• Design with your audience in mind. A user-centric approach has been a throwaway term throughout the industry. Yet, often the focus remains on sales rather than customer experience. Consider IoT development software to learn how people use your site.
• Usability is key. From page speed to architecture and functionality, the bottom line is if a user can’t use your site—no matter how beautiful it is—your efforts will be in vain.

Well, that’s all folks. Happy designing!

Bio:

Jenna Bunnell – Senior Manager, Content Marketing, Dialpad

Jenna Bunnell is the Senior Manager for Content Marketing at Dialpad, an AI for contact centers’ unified communications system that provides valuable call details for business owners and sales representatives. She is driven and passionate about communicating a brand’s design sensibility and visualizing how content can be presented in creative and comprehensive ways. Jenna Bunnell also published articles for domains such as Miro and VoilaNorbert. Check out her LinkedIn profile.

Do follow our LinkedIn page for updates: [ Myraah IO on LinkedIn ]

With the advent of Cryptocurrency and Metaverse, the term Web 3.0 has been gaining popularity in these times. But what does it actually consist of? And what came before that?

Web (or as earlier referred to as World Wide Web) is the Internet’s core information retrieval system developed in the 1990’s. It is the primary tool used by people to read, write and share information across the Internet and to interact with other users. It has rapidly evolved since its conception both from the perspective of users as well as developers.

Web 1.0

The era of Web 1.0 was ushered in by the invention of the earliest browsers such as Mosaic, Netscape, Internet Explorer, etc. Web 1.0 was the first stage of the World Wide Web phenomenon which was also referred to as the Static Web since it only allowed read functionality.

It meant that users were limited to accessing and only reading the content that was made available to them by the scarce content providers. It functioned like a digitised version of a newspaper or magazine. There was no option for the users to provide feedback to the content providers or even interact with other users accessing the same platform.

Web 1.0 surely had its limitations. Nonetheless, most Internet users of that era (1990-2000) were awed and entertained by its novel features of real-time news retrieval and email. Content creation was just at its infant stage and to begin thinking about user interactive applications was a far cry. However it started changing as online banking and trading gained popularity.

AOL in the 1990s when writing and receiving emails was the new ‘cool thing’. Image Credit: PopSugar

Web 2.0

The advent of Web 2.0 saw the paradigm shift of how the Internet was used. It is also referred to as the read-write web or the social web. It’s the longest era of web till date (2000-2010) which brought us user-generated content and interactive web applications mediated by expensive servers.

It completely transformed the bland static pages of Web 1.0 to an explosion of various applications, content and features from every niche that’s ever growing. Web 2.0 allowed any user to become a content creator. This content could now be viewed and shared by millions others through a multitude of sites. Some of the famous Web 2.0 applications are Facebook, Twitter, Instagram, Youtube, Snapchat, TikTok, Uber, AirBnB and many others.

Examples of a few Web 2.0 apps. Image credit: Pixabay

The exponential growth of Web 2.0 was driven by important innovations such as mobile Internet access, social networking and cloud computing.

In 2007, with the launch of the iPhone, the Internet started to become accessible on mobile phones conveniently. This broadened the reach of the Internet as compared to its predecessor of dial-up modems. Users could now access the Internet faster on-the-go and could always stay in a ‘connected state’.

The launch of social networking sites such as Friendster, MySpace, Orkut and later Facebook moved the Internet from a dark, anonymous space to a miniature well-connected world. Social media encouraged and promoted good content creation from its users. It grew exponentially as users now felt compelled to compete for attention from their peers by sharing snippets of their life in the form of texts, pictures and videos.

Staying connected with the world. Image credit: PixaHive

Cloud servers capitalised on the emergence of new websites and applications by providing low-cost data storage and maintenance systems. Cloud providers assembled mass-produced computer hardware in numerous remote data centres around the world. Businesses could now rent the cheap storage and maintenance systems without buying their own expensive and dedicated infrastructure. This enabled small-sized businesses to scale in the digital space.

A server farm. Image credit: Flickr CC BY-SA 2.0

Since Web 2.0 was built on easy-to-use technologies such as HTML5, CSS3 and Javascript frameworks, this enabled a startup culture with a multitude of innovations. Some of the prime examples being Uber and Ola who changed the transportation sector, AirBnB and Oyo Rooms who brought in a culture of affordable rooms for rent, the many easy to use food delivery apps, various web streaming services like Netflix, Hulu and Amazon Prime.

To summarise Web 2.0, the users are the product. It’s completely built around the users with different platforms figuring out ways to enable their users to create their own content and keep themselves engaged.

Web 2.5

This is the current era of Web that we are living in which is the transitional phase between Web 2.0 and Web 3.0. It mainly has been focusing on the practical evolution of mobile computing and mobile technologies primarily in the mobile app market. Its key players being Amazon, Google, Salesforce, KiSSFLOW, etc. the primary objective has been to create web applications that can connect users to any device at any given time and place.

Technologies such as Progressive Web Apps (PWA) and Accelerated Mobile Pages (AMP) were developed in this era.

Web 3.0

Web 3.0, also known as the Semantic Web, is a relatively new concept which aims to look at the future of the web. Its founded on two core technological innovations:

• Artificial Intelligence
• Decentralised Data Networks

Artificial intelligence and machine learning algorithms are very powerful technologies that have already entered the digital world. They create extremely useful and many times life-saving predictions and actions. Using them, many platforms such as the ones in social media and ecommerce have generated recommendation systems which help to intelligently create and distribute useful content tailored to the particular need of a user.

Their potential applications go far beyond into areas such as precision material development, climate prediction, disaster management, drug testing and design etc.

A few applications of AI and Machine Learning. Image Credit: JavaTPoint

With the core tenet of decentralisation of data, Web 3.0 aims to break down the massive databases stored by Internet giants and give greater control to its users. Unlike the data of Web 2.0 which is stored on a single server with a unique https web address, the content of Web 3.0 could be stored at multiple locations simultaneously hence decentralising its location.

Web 3.0 will be trustless and permissionless i.e; the network will allow the users to interact with each other without a mediator and anyone will be able to participate without the authorisation of a governing body. This will result in a Blockchain or a peer-to-peer mode of communication and storage.In contrast to Web 2.0 where the user was the product, in Web 3.0 the user will now truly be the content owner. All the data generated by any computing resource will be sold by and to users through decentralised data networks, ensuring that users retain the entire ownership and control instead of a middleman.

An example of a Blockchain transaction. Image credit: Wikimedia Commons

Experience Web 3.0 for the first time with Myraah. Store your Files, Images, Videos, Websites, Data and NFTs on secure & distributed storage. Built for speed and simplicity, Myraah’s Web3 storage solution is paving the way for a more resilient internet.

Do follow our LinkedIn page for updates: [ Myraah IO on LinkedIn ]

Dark and light, large and small, loud and soft, all of these are relative measurements on a scale. Just like a day cannot exist without a night, website elements cannot exist without contrasting each other on a scale.

In website designing, we usually talk about scale when we are referring to size and its relationship with different design elements. Designers may also consider proportions that indicate how well the design has been scaled.

In this blog we will understand the related concepts of Size, Scale and Proportion.

Scale

Scale is a relative measurement of an element or object. It is a progressive classification of some quality like size, rank, amount or importance. In website designing, when we talk about scale, we are typically concerned about the size of the element.

Everytime we make a comparison between the objects, we scale them. When we say something is big it’s immediately seen on a scale and compared to something smaller in size. A single object has no scale unless it is viewed in comparison to another object. Scale needs the context of another object to exist.

For example, the image above shows short, mid-sized, and tall men. We can only compare these because the other is present, if we remove any 2 figures, we can no longer say which one is tall or short.

The moment we place an element on the layout, we have something to compare it with. We can compare it with the webpage or browsing window, with other elements, space around the element that would create a figure/ground relationship between the element and whitespace or to a common standard like size of a table or the television.

Scale communicates the relationship between elements. Two elements of the same dimension when placed on the same point on a scale of size is communicative of that they are similar in some. Similarly, two elements with different dimensions at different points on the same scale communicate that they are not the same.

Scales are paramount and are used across many design principles. Through scale, we can show contrast between different elements as well as similarity in groups of varied elements. Scales communicate relationships between elements. Two elements of the same size are perceived as related in some way. Two elements with notable differences in size are perceived as different.

Through scale, designers can create a variety of varied visual weights that would lead to:

• Dominance and focal points
• Visual hierarchy
• Balance
• Flow and
• Rhythm

Scales can be used to create an illusion of depth as larger elements/objects tend to overpower and advance while the smaller elements/objects tend to recede into the background. Larger elements appear to be closer and smaller elements appear to be further away thus creating illusions. Scaling creates perspective in the layout.

Image source

It can also be used to create icons, for example, the icon below denotes a series of three curves that are scaled in relation to a dot.

Scale can also imply the meaning of an element. For example, in the image below, the larger square dominates and confronts the smaller square communicating pressure. It imposes its will and exerts its influence on the smaller square.

Important information can be communicated through scale alone. By adding a relative contrast in size designers can create an interesting association between two design elements. A composition where contrast exists along a scale creates a comparison that communicates meaning. The layout becomes active by adding contrast and implies meaning.

Image source

Image source

Lack of scaling would lead to a static and boring design thus hampering user experience. It would also create competition between the elements and leave the user to determine and create a relationship in the composition.

Although contrasting is interesting, the similarity of scale is important. When everything contrasts, it may get tedious and confusing for the user to determine the scale and perceive the layout. A perfect blend between contrast and similarity works better. The designer should determine how much of each should be used and scale them effectively.

Size

Size refers to the physical dimensions of an object. Size is an absolute information.

Web designers make a lot of choices about the size of the overall page entailing the size of the sidebar, header, font size, content area, images, footer and main menu. Every element on the page is displayed at some size. Designers size the elements and images to fit within their design, set the text on the page, and build a perception of mass through size.

Sizing can also help the website users and potential customers to find what they are looking for quickly and easily. Size can also be used as an effective design tool to draw user’s attention to key website features and important information by using visual hierarchy. The designer could make the most important content larger and position it at the top of the page.

Image source

Users expect everything to appear in absolute measurement. These measurements may vary as the designers resize the webpage or when viewed through a tablet or mobile that includes different dimensions. But at any discrete point, all the elements are displayed with fixed dimensions and size.

Image source

Image source

Image source

Proportion

Proportion refers to the relationship between the elements on a scale with respect to a comparative magnitude. Proportion is the ratio between parts of the elements and the whole layout. When one element changes, the other must also vary in the same proportion to create a better user experience.

Proportion is usually defined as a comparison of dimensions or distribution of forms. Proportion can help create symmetry and visual weight. It can also help ease the tension and cognitive load of a user.

Certain scalar relationships in the layout may be pleasing and attractive while others are off. If the different sizes of elements are arranged in proportion they are likely to enhance user experience and create balance and harmony.

Image source

Proportion done well creates unity in the composition. The universal way a human would apply proportion to a standard of measurement is the human body. Users tend to judge the size of the objects by their own experience of human proportion.

Image source

Generally proportion is only noticed when one or more elements are out of proportion with other elements in the layout.

Users respond to proportion emotionally. When something is out of proportion it can evoke feelings of disorganisation and confusion. Designers should note that they are communicating varied messages by placing elements in and out of proportion and making appropriate decisions based on what they want to communicate.

Image source

However, designers should also note that elements that are out of proportion grab the users attention, just like in the image below.

One aspect of the website design where proportion is present is the layout. Designers need to identify if their layout is fixed, fluid or elastic. Do the elements of the design also scale when the browser is resized? How large is the header in comparison to the footer? Are they in proportion with each other and the content they contain?

Think of a web page or a blog where drastically increasing the size of a header has no impact on the content body of the blog. The heading text grows while the size of the content body remains the same. This way the entire blog will look out of proportion. If the size of all the elements were changed in the same proportion as the header, the blog would have been more appealing and user-friendly.

Image source

Conclusion

Size, scale and proportion are interrelated concepts and subtly enter design thinking and website layout. These elements allow the designer to manipulate the ideas of many design principles.

In designing when we talk about scale, we refer to size. We often compare and contrast objects with their opposite ends on the scale. Objects contrast through a scale; greater the difference along the scale, greater and better is the contrast.

When the scale is in harmony, it is in proportion. Proportion helps to create unity and harmony in a design. Elements out of proportion evoke emotions, drag attention and sometimes make the design look shabby. However, a purposely done out of proportion element can communicate varied meanings.

Do follow our LinkedIn page for updates: [ Myraah IO on LinkedIn ]

Von Restorff Effect

When a designer says to a client, “Let’s do something different and creative, something that is out of the box”. The client may be immediately faced with questions like, “Will it work? Why deviate from the usual ones, the ones that are not common in the market?” It might just sound like a leap in the dark to the client. But guess what, the von Restorff effect is evidence that doing something different from the established norm, does work in aiding memorability.

In 1933, Hedwig von Restorff, a German psychiatrist conducted a memory experiment. She gave her participants a list of similar but distinct objects. Out of all the objects, one object on the list was in a unique colour. When the participants were asked to recall the list after a brief period of time, the uniquely coloured object’s recall rate was 8 times higher than the rest. She deduced that when multiple homogenous stimuli are presented, the one that differs from the rest is more likely to be retained.

Simply put, the von Restorff effect elucidates that in a group of similar elements, the one that looks different from the rest is most likely to be remembered.

This is also called the isolation effect: the distinctive feature of the element isolates it from others. According to neuroscientists, our mind and brain have a tendency to remember things that are different. They search for visual discrepancies and lookout to break habits. Some of the ways to make an element stand out are by altering their size, colour, spacing, shape, highlighting, underlining or making the element bold or italic.

Wondering how we can harness this law to effectively design web pages that would enhance user experience and lead to higher engagement? The von Restorff effect has been widely used in almost every website and services, some of which make use of it more effectively than others. The requirement to make every single element and content visually distinct is fundamental in design. When this principle is used sparingly and strategically, the design not only helps draw the user’s attention but also directs them to the most valuable information. Some of the common examples are:

1. Pricing Plan chart

In the example above, the design draws the user’s attention to the most popular offering (most likely the profitable one too), the Pro pricing plan. By isolating one choice in the field, the designers help improve recall of the most desirable product offering, and ultimately lead to higher conversion rate since the users will rush for the highlighted plan instead of spending more time exploring the alternatives.

The designer could also isolate the pricing plan by increasing its size and changing its colour. In the example given below, the designer has made use of the colour red which is known to evoke feelings of alertness and attention.

2. Call to Action

Ever observed why Buy now and Sign up buttons stand out the most on any webpage? The button is designed to draw the users’ attention and perform the click action. The designers want the users to differentiate between the simple buttons and call to action buttons, and make it as obvious and unobstructed as possible. By simply changing the font, colour, and shape of the button, designers attempt to steer the user’s attention. The designers are also likely to make cancel and logout buttons much smaller than Call to Action (CTA) buttons. This way the user grabs another product while finding their way out.

3. Incoming Notifications

The von Restroff effect can also be observed when alerting users to incoming notifications. From the example stated above, the users can clearly distinguish which app requires their immediate attention and action.

4. News Websites

This effect is also commonly used in news websites to place emphasis on featured content to make a specific content stand out against other headlines and ads. The user’s attention is drawn by usage of scale to create contrast between the featured content and adjacent content. The focus is drawn on the featured headlines that break out the implied columns of content. For example:

This principle is not only limited to website designing but also helps to inflate sales and effectively marketing the product. One of the prime examples of this is when Apple launched their iPod in 2001. The identifying characteristic of this product was the colour. You knew who had an iPod because of the white earphones. By leveraging this simple and trivial idea, Apple managed to create differentiation. When everyone had black earphones, they opted to take the opposite path, which made them stand out.

Selective Attention

Humans live in an overstimulating world full of distractions. Everyday, at any given moment, humans are subject to a plethora of sensory information with multiple signals competing for their attention. Our ability to focus on things around us is limited in terms of capacity and duration, hence we only focus on relevant information. This phenomenon is known as selective attention.

Selective Attention refers to the ability to select from many objects and focus on one particular object or stimuli in the design or web page, and filtering out other distractions. Attention being a limited resource, this type of filtering allows us to overlook unimportant elements and focus on what really matters. The user may tend to stay focused only on the part of the webpage that seems relevant and meets their goal. This concept is evident from the presence of Tunnel Vision and Banner Blindness in digital interface.

Tunnel Vision

When the brain adapts to selectively attend to the web page content due to cognitive overload, the human visual system acquires a tunnel vision, that is, the user focuses on a particular element and disregards the others.

In a research study conducted by Neilson and Norman (2012), users ignored the year at the top of the design and read the entire writeup before they found the year 2000. Hence, the strong tunnel vision prevented the users from noticing the year at the top of the design.

Retrieved from Nielson and Norman (2012)

One way to prevent tunnel vision usability is by positioning related items close together. This makes the design more accessible and also helps the low-vision users who magnify the screen to perceive the information when it is in proximity.

Banner Blindness

It refers to the tendency of users to ignore elements that they perceive to be advertisements on a webpage. When we choose to selectively attend to content, we may omit the content that is not helpful and defeats our goal, for example, digital ads.

Users may search for elements that would help them achieve their goal – especially design patterns such as search bars, navigation, links, or buttons; and would instinctively look for these items in common locations. They would also ignore legitimate content if it:

• has an ad-like visual hierarchy, such as animation
• are placed in close proximity to actual ads
• has ad-specific placement like right-hand side of the page

Therefore, it is vital to visually differentiate between content and an ad to minimise the possibility of it being inadvertently perceived as an ad by not placing them in the same section. This could be done by carefully choosing colours, background, and type of the content carefully. The designers must also be mindful of not mixing content and ads.

Key Takeaways:

The von Restorff effect is a powerful guideline for how to use contrast to direct people’s attention to the most relevant, impactful, and engaging content. It can help to inform our design decisions to lay emphasis on important call to action or relevant information by creating visual distinction, and help to ensure that users of the products and services are able to quickly identify what they need to achieve their goals.

Designers could also employ restraint when placing visual elements of the webpage to avoid mixing of content as well as to ensure salient items do not get mistakenly perceived as ads. Additionally, taking into consideration the positioning of related items, carefully choosing the colour, background and the type of content are other considerations that designers must follow.

Do follow our LinkedIn page for updates: [ Myraah IO on LinkedIn ]

Principles of Gestalt

There are six principles in total, which when combined together are called Gestalt principles.

Principle of Similarity

The principle of similarity is grounded in the ideology that when things share the same visual characteristics such as shape, colour, size, texture, orientation, value or any other property, they will be perceived as belonging together. For example, even though all the shapes are the same, it is clear that each row represents a distinct group.

Hence, by giving different layout elements similar visual features, a designer can stimulate appropriate neuronal connections in the user’s brain that helps them decode the design quickly and effortlessly.

For example, in the design given below, the designer has distinguished different sections of the website by utilising different colours. It is very evident that the purpose of the purple section differs from that of the pink and yellow section.

In this design, the designer has differentiated the design on the basis of shape. The rectangles are indicative of different genres of music and the circles represent artists.

Principle of Proximity

The principle of proximity is a cognitive tendency to discern elements close to each other as related than the elements that are placed further off on a page. This is caused by the subconscious urge to organize the information one is exposed to and group them automatically, much quicker than they encode. For example:

Interestingly, a research study concluded that the relative distance of elements (proximity) overpowered the other distinctive features such as colour or shape. For example:

In user interfaces, from text to images and web forms to navigation bars, this principle is substantially utilised in web designing. Grouping similar content together facilitates a seamless relationship between elements thus delivering a better visual experience.

For example, in the designs given below, the nearness of each icon/image and its corresponding text communicates that they are related to each other.

Principle of Closure

Human visualisation is strongly driven to see objects such as shapes, alphabets and pictures as a whole even when they are not complete. When a few elements of the picture are missing, our brain attempts to close the gaps and use our perception to fill in the gaps and perceive it as a whole.

We attempt to convert and perceive the complex ambiguous elements into easy ones. Isn’t it intriguing to see how our mind fills the gaps and perceives these moving dots as a dog?

When the user is exposed to the right amount of information, the brain perceives and derives a conclusion by filling the gaps and creating a unified whole. This way we can lessen the cognitive load by decreasing the number of elements needed to communicate the required information. This principle also helps us to minimise the visual noise and make the design more engaging.

A loading indicator, progress bars or sliders are good examples of the law of closure. By using negative space we make the solution obtained more understandable to the user. This principle has also been widely used in iconography and logos. For example:

Another widely used example of closure is when the image displayed on the web page partially fades off the user’s screen, it indicates that more information is likely to flash if the user swipes left or right. If a full image is displayed, the user would not immediately interpret that there might be more information, thus increasing the unlikelihood of the user to scroll.

Principle of Figure Ground

This principle asserts that we tend to unconsciously segregate the visual field into figure (foreground) and ground (background) in order to structure and organize the information and lessen the cognitive load. The foreground entails elements of the page attract our primary attention, and the background is everything else. We do this by comparing the two (or more) elements’ size, and perceiving the smaller object as a figure, and larger to be the ground. For example:

In the design above, your eye instantly sees the shape, that is, a circle, a star or a triangle sitting on a brown background.

This principle has also been used to design a variety of logos. For example: we instantly differentiate between the background and foreground, and perceive the alphabet ‘M’.

This principle is often used to lay emphasis on pop up information over other content. Page that was formerly the figure (the focus of user’s attention) temporarily becomes the background for the new information, which is the new figure. This approach has been widely employed since it provides adequate context that helps the users to be oriented while interacting with the page. For example:

Principle of Continuation

Our visual perception has a tendency to perceive elements placed in a continuous form rather than disconnected arrays of elements. When the elements are arranged on a line or curve, they are likely to be perceived as more related. For example:

In the figure above, the green dots in the curved line seem to be more related to the orange dots in the curved line than green dots in the straight line. Hence, the ability of our eyes to naturally follow a curve or a line is stronger than identifying similarity of colour.

We subconsciously tend to follow the smoothest line and create connections between elements. This is an extremely valuable tool to guide users’ eyes in a particular direction by placing the vital elements in that path. For example: horizontal sliders, dropdown options etc.

For example, in the designs given below, placing the essential elements in a row helps to easily locate and provide a better user experience.

Principle of Symmetry

This principle asserts that the human mind groups objects that are symmetrically equal to reduce ambiguity and complexity. Our human visual system when exposed to a stimulus generates multiple interpretations, but our brain tends to automatically interpret and simplify the information by giving symmetry. In the design below, you are likely to perceive it as a set of three opening and closing brackets. Thus, symmetrical balance overpowers the proximity principle.

Symmetry is a useful tool to communicate information on a web page since our eyes seek those attributes that are in order and symmetrical. It has been widely utilised in portfolios, navigation, galleries, product displays, banners, listings, and content heavy pages.

In the design given below, the designer has symmetrically segregated the information depending on its kind. This not only enhances the user experience but also highly impacts the engagement with the web page.

The 3-column design that has been immensely used is also rooted in this principle. For example:

Key Takeaways to Incorporate Gestalt Principles in your Web Designs

1. We perceive the whole before we see the smaller details. The overall appearance of a web page design must take precedence over the finer details.

2. Minimal and simple designs enhance the user interface by avoiding visual and cognitive overload. Let your users’ minds fill in the gaps.

3. Ensure that the background is separated from the foreground elements with emphasis on the main call to action.

4. Make sure that the UI elements that perform a similar function or belong to the same group share one or more visual features in proximity. Differentiate the ones that do not belong to the same group.

Do follow our LinkedIn page for updates: [ Myraah IO on LinkedIn ]