Introduction to BLAF Page Templates
Last Updated
19-Feb-2004
General Description
Page templates are a combination of components on a page that create a template. Each component within a template on a page
may have customizable aspects to fit the needs of the individual application.
This document describes basic elements of a page template.
Guideline Attributes
Spec Version # - 3.1
Spec Contributors - Betsy Nute
UI Models - all models
Example Products - all products
Related Guidelines - Introduction
to BLAF Guidelines, Introduction to Page Flows,
All Components
Interaction and Usage Specifications
Object Centric Pages vs. Action Oriented Pages
- BLAF Applications follow an object-centric page model, where the information hierarchy is architected
around the display of objects or functional groupings of multiple objects. For instance, a tab may be labelled "Orders."
When selected, a BLAF Object List Page template is drawn, displaying a list of purchase orders. The page title is a noun phrase
representing the object type, purchase orders. The actions or functions that can be taken against
these objects are within the page itself, typically represented by action/navigation buttons.
- When viewing a specific object, for example, a purchase order, there may be an action/navigation button that navigates the user
to more an action oriented page, such as "Set Delivery Date." This transactional page, is general centered around a property of the primary
object, and the user is changing or updating data related to that property. The page title is typically action oriented. When finished, the user typically returns to
the page that instantiated the action.
- For related BLAF guidelines see:
BLAF Page Screen Layout: Use of Sections, Subsections, Subsubsections
- Each BLAF page template should have a page title representing the total functionality of the page.
- A BLAF page should be broken into sections or groups of information for readability and ease of scanning content. Their may be subsections within sections
if necessary.
- If there are many sections on a page, and the page becomes vertically long, a UI component named "Quick Links", provided at the top of the
page, can give a table of contents, or list of the sections within the page. Each section name is clickable and anchor the user to the specific
section within the page. For more details on vertical scrolling options, see next bullet item below.
- For related BLAF guidelines see:
BLAF Page Orientation: Vertical Scrolling vs. Horizontal Scrolling
- Horizontal scrolling should be avoided when ever possible. Usability studies have shown that pages that
horizontally scroll beyond the window size are problematic for users in completing their task(s). Important information
may be off the screen, thus making it hard to find and/or complete the task at hand.
- Vertical scrolling pages are much more common on the web, and/or are not as problematic for users. Still,
a very long page (many many screens worth) can be cumbersome for a user to navigate to information, and/or get an overall picture of the
tasks that need to be accomplished on the page. In BLAF, there are several UI components that help avoid very long vertical pages. Quick Links mentioned above provide an overview of the
sections at the top of a long page, as well as anchor the user to each section. Even with Quick Links, a page may be too long, and be better
suited to be broken up into multiple pages. Several UI components exist to help the user navigate quickly to other sections on different pages, namely
side navigation and subtab navigation.
- For related BLAF guidelines see:
BLAF Page Screen Density: Light Information/Transactional Pages vs. Very Dense Information/Transactional Pages
- BLAF pages can be relatively light on content or can be dense. Regardless of density, a page should still be organized
with many of the principles above. For instance, the removal of section headers or subsections may "tighten" a screen, but make it
difficult for a user to easily locate elements within a screen. These basic page layout principles should never be ignored for sake of
a denser screen. Usability of the page can suffer as a consequence.
- Assessing the Target User and Application Usage Frequency - To determine the appropriate level of density of
content per page, it's important to first understand the target user of the application as well as the frequency of usage.
- Light Density Screens: An infrequently used application, and/or a user with little domain expertise may benefit from a lighter density page. If a user
performs a task infrequently, say every couple of months, a user must reorient him/herself to the page, it's contents and
functionality every time he/she sees the page. In these situations, a screen with less density, clear headers, subheader, instructions, etc.,
is crucial for successful and speedy task completion.
- High Density: A frequently used application (daily, weekly), and a user with high domain expertise may be fine
with a higher density screen, since he/she becomes very familiar with the layout of the pages, and placement of content and frequently
used functionality within the application. Many methods exist in BLAF to create a high density screen, including 2 column layouts for label/data
pairs, adjacent headers with subsequent content, content containers with related information adjacent to task-critical information, etc.
- High Density, Aggregate Content Pages: Some common templates in BLAF provide high density screens
with overview information and/or aggregate content from the entire application. These pages allow the user to
quickly make decisions based on content status and perform tasks of high frequencies. Some examples of BLAF Pages that follow this
model are Portal pages and Home pages.
- For related BLAF guidelines see:
The general page template is comprised of common required components that
should be used consistently throughout all pages in BLAF applications.
Content within the general page template maybe customizable based on
the specific guidelines to fit the needs of the application specific functionality
and requirements. Below are the components that make up the basic BLAF Page template shell:
- Branding - Product identify of the entire application
- Global Buttons - Content Sections available throughout the application
- Tab/Navigation - Information architecture and content structure of the application (may include side navigation and subtabs.)
- Locator Elements (i.e., Breadcrumbs, Train) - Components that denote sense of place to the user.
- Page Title/Header - Specific title of the entire content of the page.
- Page Level Action/Navigation Buttons - Action/Navigation buttons related to the entire page.
- Page Contents Bottom Line (Ski) - Visual closing line ending application content on the page.
- Repeated Page Level Action/Navigation Buttons
- Page Footer - Repeated high level information architecture and copyright information/privacy/application version information. Repeated navigation is for quick access when the user is scrolled to the bottom of the screen.
Many applications across divisions not only share the common BLAF Page Template Shell, but also share common
functionality and content that can be identified as a specific BLAF Page Template.
For instance an Object List Template is the recommended layout for displaying
a list of objects to a user (i.e., a list of purchase orders, list of
customers, list of database tables, etc.). Within a given page template
there may be several valid options; for instance, optional sections of
information based on the application's functional requirements and the
user's needs. The context within this template structure may also be different
in some cases (i.e., one table shows purchase orders, one shows expense
reports).
A BLAF page template may also be defined as just a portion of content on
a page. The layout of the content may be prescribed, yet the context optional
(i.e., a one column label/data layout versus a 2 column label/data layout)
or both layout and context may be fixed (i.e., display of common information
such as name, address, and phone number.) Examples of these types templates
are:
- Content Layout Templates
- Common Formats
- Scheduling Templates
Visual Specifications
For more information regarding BLAF Page templates, see:
- Basic BLAF Page Template Shell
- Full Page Content Page Templates
- Portions of Sections of Content as Page Template
Open/Closed Issues
Open Issues
none.
Closed Issues
none