Component Master List: Elements of Information Structure

Component Master List Illustration

In this post, we will discuss Elements of Information Structure. We’ll use as an example to demonstrate how information is structured in such a way that all its elements are identifiable in singles and in groups.

Elements of Information Structure -
A screenshot of’s home page.

Elements of Information Structure

Contents of web sites and apps can be called “information” – these are words, phrases, symbols, and any representations of elements that give meaning to the user. All information, to be effective, must be properly structured. Imagine a web site that does not show easily the information the user needs – that web site might need to restructure its information by prioritizing the more important ones or what the users usually need.


An object is a singular element.

Elements of Information Structure - Object
Illustration 1. Objects are highlighted on screenshot.

Note: Some Objects are generalized like in the Navigation Items above. There are several components there (e.g., Apps, Notifications, Social, and Admin) which are listed generally as “Navigation Items”. Ideally, another illustration could show these interactions but for this post, we won’t go into that level.


A component is a combination of more than one object.

Elements of Information Structure - Component
Illustration 2. Components are highlighted on screenshot.

Note: Name is considered a Component due to its HTML markup grouping wherein the Name Component could also contain taglines and other objects related to the name of the web site.


A container is a UI element that contains objects and components. Examples of containers are pages or screens, dialog boxes, pop-overs, and panels to say the least. Container is very useful during interaction because it defines the confinements of the information that will be shown or hidden from the user’s view.

Elements of Information Structure - Container
Illustration 3. Container type is page.


A constructor is a default section in a web site or app. Generally, these three constructors apply to all web products: Masthead, Content, and Colophon. The Masthead contains the name of the web product, the main navigation and search functionality; the Content, well, contains the main content; the Colophon contains additional information of the web product.

Elements of Information Structure - Constructor
Illustration 4. Constructors are highlighted on screenshot.


One example of a sub-constructor is a sidebar which attaches to any of the three constructors. Sidebars are denoted by the HTML tag <aside>. It contains and supplementary information, widgets, and plug-ins.


A view is an instance of the web site or app. Usually this is also the name of the current page or screen container the user is in. It basically answers, “What page or screen is the user currently viewing?”

Elements of Information Structure - View
Illustration 5. View is highlighted on screenshot.


Each red label in the illustrations above can be used as official names of the objects and components. Team members working on the same project will now have a standard name for components and this could lessen the confusion when referring to the said components.


One response to “Component Master List: Elements of Information Structure”

  1. […] Elements of Interaction puts the context in Elements of Information Structure. It puts the connections among the objects and components in a user interface based on how users […]

Leave a Reply

Your email address will not be published. Required fields are marked *