How to Create Dominance and Visual Hierarchy in Website Design

April 1, 2022

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

example-banners-hoarding-website-design-dominance-red-colour

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:

focal-point-dominance-size-colour-website-design-example

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.

dominance-focal-point-website-design-attention

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

website-design-example-dominance-focal-point

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.

dominance-focal-point-size-colour-website-design-attention

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.

website-elements-with-similar-elements-cannot-dominate-attention-of-users

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.

level-of-dominance-website-designing-attention-example

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

focal-point-example-website-designing-dominance

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.

visual-weight-example-dominance-focal-points

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.

levels-of-dominance-sub-dominant-subordinate

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.

dominance-focal-points-website-design-attention-example

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 ]

5 UX Design Mistakes That You Should Avoid At All Costs

March 29, 2022

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.

Screen Shot 2022-03-29 at 03.30.57

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.

pexels-andrea-piacquadio-826349

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.

pexels-picjumbocom-196644

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.

propexels-nicola-barts-7927346

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.

pexels-tranmautritam-251225

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:

  • Pragmatism – It shouldn’t be difficult for a user to understand how a site works.
  • Hedonism – The user gets joy when a site performs as expected. In other words, it is predictable.

Predictability should rank highly as a UX design consideration. When things don’t work as we expect, it creates a negative experience for users.

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.

Not Content Friendly

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 ]

Incorporating Visual Distinction to Accomplish User Goals

November 18, 2021

Through evolution, we have developed an incredibly sophisticated system of visual and cognitive processing. We can identify objects or elements in fractions of a second and possess superior pattern processing capabilities. These traits have proven valuable for survival and affect how we perceive and process the world around us. They also impact how we encode information in our memory and therefore our ability to recall or recognize items and events.

When it comes to digital interfaces, it was found that contrasting elements have the tendency to draw our attention faster. A primary challenge for a designer is to manage what users will focus on in an interface while supporting them in achieving their goals.

In the previous article we explored ways to grab a user’s attention and enhance user experience.

We will mainly use the following frameworks to understand and explore ways to enhance user’s attention:

  • The Von Restorff Effect
  • Selective Attention
  • Tunnel Vision

  • Banner Blindness

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.

The-von-restroff-effect-distinct-element-stands-out-isolation-effect

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

Von-restroff-effect-isolation-pricing-plan-example

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.

Pricing-table-template-comparison-chart-for-business

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.

example-von-restroff-effect-call-to-action-isolation-effect

von-restroff-effect-example-call-to-action-sing-up-buy-now-isolation-effect

3. Incoming Notifications

notifications-von-restroff-effect-example-alert

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:

von-restroff-effect-example-chunking-news-paper-headlines

von-restroff-example-effect-isolation-news-headline-chunking

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-example-cognitive-psychology-divided-attention-type-of-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.

selective-attention-tunnel-vission-example-nielson-norman-research

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.

selective-attention-example-banner-blindness-google-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

selective-attention-example-banner-blindness-google-ads-digital

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 ]

Rules to Arrange Elements on Website for Clarity

November 11, 2021

Digital world has become highly competitive. Users spend approximately 5.59 seconds looking at a website’s content. In 2.6 seconds, the user’s eyes land on the area of the website that most influences their first impression. Website designers have to not only create an effective design but also compete for user’s attention. How can we have our user’s undivided attention in the over stimulated digital world?

In this article I will walk you through several effective ways to grab your users’ attention and enhance user’s experience by:

  • Miller’s Law
  • Chunking
  • F-shape eye scanning pattern
  • Z-shape eye scanning pattern

1. MILLER’S LAW: ORIGINATION OF MAGICAL NUMBER 7

Ever wondered, when exposed to a long list of elements, you seem to remember only some of it? This is because humans cannot retain much information in their short-term memory. This essentially holds true when people are bombarded with multiple abstract or unusual pieces of information in rapid succession.

Short-term memory presents a special interest for website designers. To enhance the user experience and interaction, designers must minimise the user cognitive load and reduce distracting elements.

The human brain is not optimized for data memorization that web pages often demand. Many usability guidelines are dictated by cognitive limitations. One way to overcome this and provide a pleasant user experience is by utilising Miller’s law.

This law originates from a research paper published in 1956 by a cognitive psychologist Miller titled as ‘The Magical Number Seven Plus or Minus Two: Some limits on our capacity for processing information.’ The experiment purports that the number of elements a human mind can hold in working memory are 7 +- 2. Simply put, the human memory can typically hold five to nine strings of elements or words regardless of the amount of information in one stimulus or element.

Miller-Law-7-memory-ui-attention-psychology

2. Chunking

One of the crucial findings from Miller’s experiment was that the quantity of the information does not affect the memory as much as the number of information carrying chunks being memorized do. The term ‘chunks’ refers to a collection of familiar pieces of information that have been grouped together and stored in a person’s memory.

chunking-millers-law-group-similar-information-memory-attention-7

Miller’s experiment and his passion for memory span was not centred around the number 7, but on the concept of chunking and our ability to memorise information. Although there are factors that influence how many chunks a person can retain (familiarity with content, context, specific capacity), the key takeaway message is: short-term memory is limited, and the method of chunking helps us to retain information more effectively.

In the field of Website designing, chunking usually implies breaking content into small, distinct bits of information (chunks), in contrast to undifferentiated mass of atomic information items. When designers chunk content in a design, the content becomes easier to comprehend and remember.

Users can then effectively scan the content, identify the information that aligns with their goal, and utilise that content easily and quickly. By structuring the content into visually distinct units with clear hierarchy, designers align the content in accordance with how people evaluate and process web pages.

The simplest example of chunking can be found in how we separate debit card numbers by utilising the concept of chunking which would have otherwise been a long string of digits (significantly more than seven) hard to process and memorise.

Millers-law-chunking-debit-card-example-chunk-four-memory-short-term-memory

Another commonly observed example is while browsing the web. Users are often exposed to an inevitably dreaded ‘wall of text’ that entails content with lack of formatting or hierarchy and exceeds the appropriate line length. This content is more difficult to process as it increases the cognitive load and may result in lower user engagement with unpleasant user experience.

Millers-law-chunking-text-loaded-dense-example-memory-short-term

When compared with the design alongside that has required formatting along with appropriate line lengths, the user experience is impacted drastically. The design is an improved version of the same content. Heading and subheading have been added to provide hierarchy, whitespace has been used wisely to break the content into processable sections, line length has been reduced to improve readability, keywords have been highlighted and underlined to provide contrast with the surrounding text.

This concept can also be leveraged to provide structure to information dense content. This not only makes the result more visually pleasing, but it also makes the content scannable. Users who are skimming the latest headlines can determine whether the article is worthy of their attention and can quickly scan through it.

Millers-law-example-headline-scanning-chunking-information

Millers-law-example-headline-scanning-chunking-short-term-memory

Although being a vital concept in website designing, only chunking the content does not enhance user experience. Neuroscientists have identified various eye scanning techniques after conducting decades of research that have been known to impact the engagement with content on WebPages. Eye tracking is a significant tool for website designing that shows what areas of a webpage are grabbing the user’s attention and areas that are being ignored. This also helps us to understand how the user searches and grasps content.

3. The F-Shape Eye Scanning Pattern

Nielsen and Norman’s (2006) eye tracking research has elucidated that users read web page content in an F-shaped pattern, that is:

  • Users first read the content in a horizontal movement, usually the first few lines on the upper part of the content area. This forms the F’s top line.
  • Next, the users move down the page and hunt for keywords or points of interest. Once found, they read across forming the second horizontal line of F. This usually covers a shorter area than the previous movement.
  • Finally, users attempt to scan the content’s left side in a vertical movement forming the F’s stem.

For example:

F-shape-eye-scanning-pattern-attention-skimming-neuropsychology

F-shape-eye-scanning-pattern-attention-skimming-

This type of scanning technique is utilised for content heavy pages like blogs or articles. This pattern can be incorporated by enhancing the first two paragraphs by highlighting headers, bolding subheaders and including bullet points and keywords.

Heatmaps generated after conducting research indicated that:

  • The first two lines of the page receive more attention than other lines.
  • The first few words on the left-hand side of each line of the text receive more fixations than the latter.

Researches have also indicated that the users may fixate on more words and read towards right again, thus forming an E. Interestingly, a recent line of research indicates that content in right-to-left languages like Arabic, users tend to read content in flipped a F-shaped pattern.

4. Z-Shape Eye Scanning Pattern

Another evidence based eye scanning technique is Z-shape scanning pattern. This pattern is applicable in almost every web interface since it includes almost all core elements like brand, hierarchy, structure, and call to action. Z-pattern is ideal for interfaces where call to action is the main motive. This usually applies to web pages that are not content heavy and leverage whitespace effectively. This scanning arrangement mimics the route for the visual system to travel from left to right in a zigzag pattern:

Users first scan from top left to top right either because of the menu bar or the subconscious habit of reading from left to right. This creates the horizontal line of the alphabet Z.

When the eye reaches towards the end, it shoots down and moves towards left again, perhaps because of the subconscious reading habit, creating an imaginary diagonal line.

User then repeats the horizontal search in the lower part of the webpage, again forming the lower horizontal line of Z.

For example:

Z-shape-eye-scanning-pattern-attention-skimming-neuropsychology

Z-shape-eye-scanning-pattern-attention-skimming

When applied to web pages, the most important content can be placed along the top and bottom corners which visually connects them diagonally.

5. SUMMARY:

Grasping the user’s attention is an ever going battle a designer will face. Employing Miller’s law and applying the concept of chunking would not only help users to scan and memorize the content more easily but also increase engagement. Placing essential elements like call to action in the path of F-shape and Z-shape would also enhance the user experience and help users locate content effectively.

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

9 ways to make your Website design more appealing

October 14, 2021

In the previous article we explored the theory of fluency – which states that fluent designs are easy to process , hence improves user engagement. In this article we will explore nine practical ways to implement this theory.

Simply put we can make a design easy to process by simplifying a design and reducing redundant visual information or alternatively by using ways that our brain finds a particular image type easier to process.

1. Making use of familiar form but with intriguing details

Designs that are complex can be liked by a user if they convey a lot of information per design element i.e. designs that have high proportional density. Furthermore, designs which turn out to be easier to process than expected by the user are also liked by the user.

Putting these ideas together we can say that – the existence of a lot of details sets an expectation among users that it will be more difficult to process, yet its overall familiar easy-to-process form comes as a surprise to the user creating a positive experience.

design-with-intriguing-details

2. Clarity and Contrast

A contrasting subject and background can increase the processing fluency of a design. Research has shown that when shapes are viewed with a higher level of contrast to the background, people are more likely to find them attractive.

clarity-and-contrast-in-web-design

3. Self-Similar Patterns

These designs use underlying low Kolmogorov Complexity patterns for constructing the design. The overall design uses simple but repetitive patterns making it look naturally integrated and harmonious. The smaller elements of the pattern are similar to the whole. In other words, there is a pattern that repeats at different scales.

using-self-similar-pattern-in-web-design

4. The Fibonacci sequence

The Fibonacci sequence is a sequence of numbers or shapes in which the new element is the sum of the previous two elements.

For example- 1,1,2,3,5,8 …

the-fibonacci-sequence-inwebsite-design

5. The Golden Ratio

The golden ratio is a pair of lengths in which the difference between the long and the short length is the same as the difference between the total length and the long length.

the-golden-ratio-explained

golden-ratio-in-web-design

In the above design, the left part of the banner and the right part of the banner are in the ratio of 1.618, making it pleasing for human eyes.

6. The Rule of Thirds

Divide the available canvas with two equally spaced horizontal and vertical lines. The idea is to place the most important information at the intersection of these lines, at points A, B, C and D in the figure below.

the-rule-of-third

rule-of-third-in-web-design

Placing the most important information on the co-ordinates A, B, C or D makes the design convey the information with more clarity.

7. Symmetry

strong-weak-symmetry

Our brains can process symmetrical designs easily. Even infants as young as four months can identify symmetry. Research shows that people have a higher preference for vertical and horizontal symmetry compared to diagonal symmetry.

symmetry-in-web-design

8. Pseudo Neglect and our preference for left over right

Our brain has a tendency to pay more attention to visuals present in our left visual field than in the right. It is because signals from the right eye are sent to the left side of our brain (designed to understand languages and logic) and signals from the left eye are sent to the right side of the brain (designed to decode visuals).

Hence, designs in which images are placed to the left and words to the right look more appealing to the people.

images-to-the-left-text-to-the-right-web-design

Which bar looks darker?

whic-bar-is-darker

9. Perceptual subitizing and our preference for integrated visuals

Perceptual subitizing is our ability to instantly compute how many things are there in a design – how many individual elements make up a design without counting them one by one. This ability is linked to human’s hunter-gatherer past. The ability to instantly size up whether a group of predators or prey animals in a distance determined our ancestors’ survival. All they needed to know was whether there were one, two, three, four or many animals. Knowing the difference between seven or eight prey was not as critical as knowing the difference between one and three.

An average human being can instantly compute the count of elements in a design but only up to four.

A design with a minimal number of individual graphical regions that are positioned in an integrated way is easier for a user to process and decode compared to designs which have many unintegrated elements in it.

integration-of-elements-in-web-design

Here is a free tool to check visual vitals of your website.

Visual Mind AI

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