Rules to Arrange Elements on Website for Clarity

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.

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.

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.

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.

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.

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:

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:

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.