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).
| 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 2 parts to it: how pages look and behave and how forms look and behave.
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:
The magical white border:
It's magical because it's actually an active element of the page, not just decoration.
Clicking on it hides all navigation and information regions,
then expands 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.)
Clicking on the white border again restores the navigational and informational regions,
the restores the data entry region to its usual, smaller size.
We call this "minimizing the data entry region",
but again, the window size doesn't change, and it doesn't disappear.
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 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 mandatory, optional, compound fields, conditionally mandatory and read-only.
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:
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:
Conditionally mandatory fields:
It's possible for a field to be "conditionally mandatory".
For example,
When a field is,
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.
If you currently have JavaScript turned on, you will see the form fields in this example change:
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:
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).