“People's behavior makes sense if you think about it in terms of their goals, needs, and motives” - Thomas Mann
What is your name? Where were you born and raised? Do you speak multiple languages? How many siblings do you have?
How do you prepare every morning? What kind of clothes do you wear? How do you style your hair? How do you accessorize?
How did you arrive at where you are? What do you love to do? Who influenced you? Why did you decide to become you?
There is a Hierarchy of Six Website User Needs that supports human-computer interaction and behavior. In the same context, your answers from the questions above can be summed up into three main parts of User Experience (UX) that are motivated by those user needs. The basic theory of web design and development are separated into three layers that make up a whole website:
- Model / Structure / Content Layer
- First paragraph of questions above presents facts and data about a person or identity of a product or company that attracts through basic knowledge
- In website terms, these includes the structural hierarchy of HTML tags to display data such as images (img), texts/contents (p, b, ul, ol, li, etc) and other forms of media
- Information and contents come from you, the Client, while the Developer populates the HTML tags and translated to its real media
- View / Style / Presentation Layer
- Second paragraph of questions presents the style, physical aspects, fashion trends and anything that can be seen with the naked eye that attracts through physical means
- In website terms, these includes the design of the website and Cascading Style Sheets (CSS) to compose the look and layout of the Model / Content Layer
- Done by the UX or Graphics Designer to provide comps and style guides to be approved by you and given to the Developer to theme the Front-end of your website
- Controller / User Interaction / Behavioral and Functional Layer
- The third paragraph of questions presents the behavioral experiences and purpose of the person to attract through meaningful interactions and decision-making qualities
- In website terms, these includes using Javascript as Front-end interaction, PHP as Back-end language logic controller, and MySQL to store memory / data
- Programmed by the Developer to automate the Content and Presentation Layers For the Client and allow site visitors to interact with your website
Without the Model Layer, there will be no data or identity. Without the View Layer, there will be no physical form. Without the Controller Layer, there will be no unique personality, or purpose because it will be difficult to interact or communicate without the ability to think and create memories.
As you can observe, even when these 3 layers are separated into different parts, they are very much integrated. But why must these components be separated?
Why Does the W3C Recommend The Separation?
More organized and easier to maintain
- External stylesheets (CSS) and scripts (Javascript, PHP, MySQL) are placed in their own directories / folders
- Faster page loads
- Only needs to load the CSS and script files once to apply it to multiple pages since the browser caches them the first time they are loaded
- Easier to make changes and updates
- Allows consistency of styles for multiple pages and less tedious work because it only needs to be updated once instead of doing it multiple times.
- Very useful for large sites with thousands of pages.
- Better SEO support
- Search Engine bots rank sites with fast page loads higher.
- Search Engine bots have a simpler time to scan the Content Layer of your pages when everything is plain contents with no inline CSS styles.
- Backwards compatible
- Older browsers that do not display CSS3 styles well must at least load the HTML contents first so it can still be indexed by Search Engine bots
- Graceful degradation
- Even if JavaScript is disabled in the browser and interactions are turned off, at least all the contents and styles are showing properly
Ultimately, the three layers allow interdependence of components necessary to make the website function as best as it can no matter what the visitors’ browser conditions require. Thus, enabling Developers to follow the user needs of Accessibility, Stability, Usability, Functionality and Flexibility.
“To manage a system effectively, you might focus on the interactions of the parts rather than their behavior taken separately.” – Anonymous
