top of page
IMG_0557.JPG

Mental M  dels

When designing, certain elements and formats are intuitively easier to understand than others. This is due to the mental models that have formed in the viewers mind about what is expected and understandable. Specifically in websites, there is always an "expected" or "standard" format that has been formed through the use of many sites that utilize the same general structure. Designers should always try to keep there sites in line with existing mental models so it is easily understandable. 

Heading 4

Standard Elements in Site Layouts
  • Simplicity!!
  • Logo in Upper left corner
  • Search box on homepage
  • Absence of splash pages (introductory pages)
  • Horizontal breadcrumbs (secondary navigation tabs)
Website Standards Ensure that Users...
  • Know what to expect
  • know how features will look in the interface
  • know where to find features on site
  • Know how to operate each picture to achieve a goal
  • are not confused over unknown elements
  • don't miss important features 
  • don't experience surprises 
  •  have a sense of mastery that improves customer experience
  • Changing color of visited links (helps with navigation)
  • Shopping cart link in upper right corner
  • Placing neighboring topics close together
  • Using the label "Site map"
Typical Elements in Site layouts 
Patterns of reading
When first visiting a page readers will always scan the information. Websites need certain formats to ensure that the important information is relayed during this initial scan. Below are various ​patterns that show negative and positive website formats.
aface1.png

Jakobs Law

This law states that "because users
spend most of their time on other
sites, they expect your site to work
in the same way as the sites they
have already visited." When sites
deviate t0o much from the
expected format users will spend
less time on the site. ​
Z-Pattern
pattern1.jpeg
Top left -- Top right (sign up button) -- Middle (Image)--Helpful text

Use when you have minimal text or homepages
patern2.jpeg
F-Pattern
Scan First line, then second section, then, first words on left hand column 

This pattern is negative for users and businesses (try to prevent using headings and sub-headings!)
Layer Cake Pattern
pattern3.png
Scanning Headers and sub-heading
results in reading of specific texts

Use this pattern when writing
lots of text
aface2.png
Person reads all text

Use with information that
readers will be motivated to
read (ie. instructions)
Commitment pattern
bottom of page