"SBA Look-and-Feel" Template Help

This page is in a new window (or in a new tab, if you're using a tabbed browser). To return to the page you were on, just close this window (or tab).

New Feature! The SBA now has standardized support for Access Keys to return to the General Login System's Choose Function page (if logged into GLS) and to skip navigational elements.

What is SBA Look-and-Feel?

SBA look-and-feel is a display template for all SBA pages that are generated, based on user input. There are 3 parts to this discussion:

  1. How SBA Look-and-Feel Pages Look and Behave
  2. How SBA Look-and-Feel Forms Look and Behave
  3. Special Topics

One of the major goals of SBA look-and-feel is to give you the largest possible view of the data entry region of the screen. This is accomplished 2 ways: (1) dynamically resizing the window contents every time you resize the window and (2) allowing you to show and hide the navigation and information regions of the window using the white border, so that the data entry region is almost the only thing you see.

Another major goal is consistency of appearance and behavior. The idea is, if you learn how to get around in any SBA application, what you learn will apply to all SBA applications.

Behind the scenes, SBA look-and-feel has facilities that ease the data entry and navigation process. For example, if you submit a form that contains several errors, the application can return you to the data entry form with a concise list of all errors (not just the first one), in the same order as the fields on the screen, and with the data entry form containing whatever you last entered.

Last but not least, another goal has been to minimize page load times by allowing the browser to cache as much as possible of the page. The look-and-feel facilities also help out this process by calculating and displaying page load times. This helps identify slow-loading pages so that their performance can be improved over time.

Part I: How SBA Look-and-Feel Pages Look and Behave

SBA look-and-feel pages respond automatically to resizing the page to give you the maximum possible work space. If supported by the application, they can have both text-only and graphical versions. Each page is divided into "regions", some of which are always present, and some of which are optional.

Text-only mode:
If the application supports switching to text-only mode, all larger graphics will be replaced by text-only equivalents. The only exceptions are tiny graphics in left-side navigation and some bottom-of-page hotlinks. (The purpose of text-only is to make pages load faster, and tiny graphics have no appreciable effect on page load times.)

List of Regions:

So that you can more easily follow along looking at a screen, these regions will be explained in top-down and left-to-right order:

The magical white border:
If you have JavaScript turned on, the white border has surprising properties. It's actually an active element of the page, not just "framing" decoration. When you mouse over it, it highlights as blue, showing that it's an active control. Clicking on it while it's blue hides all navigation and informational regions. It does this by expanding the data entry region to the maximum it can be within the current window size. We call this "maximizing the data entry region". But it only mazimizes within the current window size. (The window size itself doesn't change.)

Later, clicking on it again while it's blue restores the navigation and informational regions. It does this by shrinking the data entry region back to its usual, smaller size. We call this "minimizing the data entry region". But again, the window size doesn't change, and the data entry region itself doesn't disappear (the way minimizing a window would).

If you have JavaScript turned on, the following example will show how SBA Look-and-Feel Template's border and contents behave while maximizing and minimizing the data entry region:

Sometimes, if you change your mind and exit the border, but the mouse passes through a scroll bar, the scroll bar can "eat the event" (the fact that you exited the border). If this happens, the border will remain highlighted in blue. If this bothers you, you can always just go back into the border and exit it somewhere else, anywhere that there isn't a scroll bar. That will revert the border back to having a white background.

The SBA logo:
Unless hidden by clicking the white border, the SBA logo will be in the upper-left corner. It's a hotlink to the SBA Home Page. In text-only mode, it will be a text hotlink saying "SBA", not a graphic hotlink.

The main navigation region:
Unless hidden by clicking the white border, the main navigation region will be to the right of the SBA logo. It contains buttons or hotlinks which represent major actions within the application. (This is in contrast to the optional left-side navigation, which generally represents navigation within a portion of the application.) The first row contains buttons with standard meanings. Subsequent rows contain buttons with application-specific meanings. In the upper-right hand corner, there may also be a Loading/Ready indicator. In text-only mode, the color of its large background graphic will fill the region, and the button graphics will become a text hotlinks.

The main navigation region's Loading/Ready indicator:
In a frames-based application, the page may misbehave if you don't wait for all of the frames to load. The Loading/Ready indicator is often used in those circumstances. If present, you should wait until the very visible "Loading" text

turns into the faintly visible "Ready" text before attempting to enter data. (The reason why the "Ready" text is only faintly visible is to make it easier to ignore.) In text-only mode, the Loading/Ready indicator doesn't change, because it's always text-based.

The application name:
Unless hidden by clicking the white border, the application name will be immediately below the SBA logo. It's purpose is to remind you of what SBA application you're in, as a reorientation cue.

The information region:
Unless hidden by clicking the white border, there MAY be an information between the main navigation and data entry regions, which would be to the right of the application name. Here's why: Sometimes, in a multi-page application, the identifying information is in only one of its many pages. For example, in an SBA loan application, the name of the loan is given on the Application Info page. Suppose you were a loan officer entering data into the Business Financials page. If you have to take a phone call, or you are otherwise distracted, you might return to the application and realize that you've totally forgotten what loan you were working on. In situations like that, the appliation can choose to support having an information region. It's purpose is to remind you of what entity you're modifying, as a reorientation cue.

The left-side navigation region:
Unless hidden by clicking the white border, there MAY be a left-side navigation region to the left of the data entry region. Its purpose is to support multi-page data entry (to switch between pages) or multi-function environments (to switch between functions).

The data entry region:
About 90% of the time, the data entry region will be used for data entry forms. How SBA look-and-feel forms behave is discussed below. The remaining 10% of the time, it will contain welcome page information and/or logos, help screens perhaps, or other background text. This is region is where you will be doing most of your work. That's why it's always present, and that's why it can be maximized by hiding all the other regions.

The bottom-of-page hotlinks:
Unless hidden by clicking the white border, the bottom-of-page hotlinks are present because they have been mandated for all SBA Web pages. If the data entry region is not a separate file, this region will also contain the page's load time and possibly application version information. If the data entry region IS a separate file (using "frames"), then the page load time and version would appear in the data entry frame, where it will be more accurate representation of actual load time.

Part II: How SBA Look-and-Feel Forms Look and Behave

SBA look-and-feel forms provide multiple, redundant feedback cues to show you which fields are required, mandatory, optional, compound fields, conditionally mandatory and read-only.

Required fields:
Required fields are distinguished from mandatory in that, if a required field is not given, the form's data will not be accepted. If JavaScript is on, the form will not even submit. If JavaScript is off, the form's data will be rejected as incomplete by the server. Required fields currently have dark blue and italic labels. Their form elements are currently surrounded in dark blue. Example:

:

Mandatory fields:
Mandatory fields are distinguished from required in that, if a mandatory field is not given, the form's data might be accepted (or might not). Even if the form submission is accepted, a mandatory field must be given eventually. For example, in Electronic Lending, the loan amount must be given eventually. It may not be known at the time you save a given page's data, but it must be given before the loan application can be approved. To let you know that you will eventually have to give the loan amount, it's marked as mandatory.

Mandatory fields currently have bold labels. Their form elements are currently surrounded in baby blue. Example:

:

Optional fields:
Optional fields currently do not have bold labels. Their form elements are not surrounded in blue or gray. Example:

:
("doing business as ...")

Compound fields:
Rather than entering only one form element per line (a waste of screen space), some applications will group related subfields onto a single line. When this happens, the label on the left indicates whether the entire group is mandatory or optional, and the label above or below a subfield indicates that the subfield is mandatory or optional.

In this example, the point-of-contact name is optional, as indicated by the label to the left. But, IF GIVEN, the first and last name are mandatory, and the middle name and suffix are optional:

Point-of-Contact Name:

()

()

()

()

Conditionally mandatory fields:
It's possible for a field to be "conditionally mandatory". When this happens, every attempt is made to use Dynamic HTML to switch these cues to represent the current mandatory, optional or read-only status of the field. But if you have turned off JavaScript, the only way to see the current status of each field is to save the data.

For example, fixed interest rate loans require Initial Interest Rate, but variable interest rate loans require Spread over Prime. The following example of conditionally mandatory fields is "live". That is, if you currently have JavaScript turned on, you will see the text fields change their highlighting as you change which radio button is selected.

Interest Type
Interest Type:

Read-only fields:
Read-only fields currently do not have bold labels. Their values are surrounded in gray. Generally, they are plain background text, not form elements. It's sometimes more convenient for an application to display a read-only or disabled form element. But the fact that it's surrounded in gray indicates that its contents will not be saved or altered. Example:

Agency:
US Small Business Administration
:
President:
Dwight D. Eisenhower
Party
Party:

Part III: Special Topics

In addition to the topics above, there are also special looks and behaviors for accessibility, banded displays (read-only), banded displays (with form fields), calendar popups ("date pickers"), lookups, rich text fields, sortable tables and touch-based browsers.

Accessibility:
Certain "Access Keys" are defined in SBA Look-and-Feel pages. Not all browsers support using access keys, but if yours does, this is a list of the access keys currently defined:

Banded displays (read-only):
To make it easier to distinguish which fields are in same row of a table, the backgrounds typically alternate between gray and white. The shade of gray is slightly lighter than the gray used to identify read-only form fields. The alternation is typically in groups of 3, but can also sometimes alternate on every row. The following is an example of a gray and white alternation in groups of 3:

Banded displays (with form fields):
Alternating gray and white is appropriate when the rows are search results, for example, but less so when the rows contain checkboxes or radio buttons. As described above in Read-only fields, gray is also used to mean read-only. To avoid confusion, in the case of banded display of form fields, the backgrounds alternate between yellow and white instead. The following is an example of the same alternation in groups of 3, but using yellow and white because there are form fields:

Calendar popups ("date pickers"):
You may see a calendar icon to the right of a date field:

If so, clicking on the calendar icon opens a popup window containing a calendar. This allows you to pick a date using the mouse, rather than typing it into the date field. It's just an alternative mode of data entry, provided for those who find it more convenient. If you change your mind, just close the window. (The calendar icon above is active, if you'd like to try it out.)

Lookups:
Some forms have the ability to look up Zip codes, NAICS codes, Franchise codes, etc. When that happens, the lookup field preceeds the other fields that get looked up. Sometimes this seems backwards, especially in the case of Zip codes, which are typically given at the end of an address.

Rich text fields:
For some free-form text fields, the SBA now supports rich text editing. (There is considerably more system overhead to rich text than plain text, so not many text fields allow rich text at this time.)

To be on the safe side, if a field uses the rich text editor, always use the toolbar buttons for formatting. That is, don't use keyboard combinations, which may already have some other meaning in your browser. (For example, in Firefox, Ctrl-B doesn't mean "Bold". It means "Open/close the Bookmarks Pane".)

Sortable tables:
If a table's headers are hotlinks, it usually means that the table can be sorted by that hotlink. To keep the sorting behavior predictable, the first sort on any column is always ascending. Subsequent sorts on the same column reverse the order. The currently sorted column is highlighted in bold.

Note that, in this case, the column data for the current sort is highlighted in bold and red. This an optional extra behavior which is sometimes added to help remind you of the current sort order.

Also note that row numbers never get sorted or highlighted. However, if the header of the row number column ("#") is also a hotlink, as it is above, it sorts the table back into original order. (Subsequent sorts on original order result in reversing original order, as you would expect.)

If the very first thing you do to a sortable table is to sort it into original order, it would seem to do nothing. That's because the table is already in original order. (It actually DID do something, but the result was the same as what was already on the page.) This is necessary for the "first sort is always ascending" behavior to be predictable.

It's also possible for there to be a column that LOOKS like row numbers, but the numbers sort along with the rest of the data. In that case, it typically would have a different header, such as "Rank"

Touch-Based Browsers:
Touch-based browsers are often built-in applications of "multi-touch" mobile devices. They do not have a mouse cursor on the screen. Either your finger is touching the screen or it isn't, and if it is touching, it's generally being used to scroll the page.

Because there's no mouse cursor on the screen, there's no ability to "hover" the mouse cursor over a screen element and see its "tooltips". For this reason, we are working on a way for SBA Look-and-Feel pages to display tooltips.

This page is in a new window (or in a new tab, if you're using a tabbed browser). To return to the page you were on, just close this window (or tab).