SELF SERVICE 2.0
Back to current versionRestore this version

SELF SERVICE 2.0 #

The Self-Service 2.0 layout was designed and implemented with the following technical goals in mind:

  1. Should be free of the screen realty and browser-sizing issues, which plagued the former Self-Service layout.
  2. Should conform to current web-standards and trends.
  3. Should be compatible across standards-based browsers such as Microsoft Internet Explorer 7 and Mozilla FireFox 2.
  4. Prototype should conform to system standard screen resolution of 800x600.

Layout #

The first thing the user will notice is the layout itself. The over-crowding of boxes in the action bar, the row of ambiguous Business Role icons and side navigation bar have all been removed.

Maximizing Screen Realty #

Several things were done in the layout to maximize screen realty including trimming the Action Bar and Business Roles layouts and changing the side navigation bar into a pop-up.

The Business Roles layout is now a widget, which displays the current business role and displays a drop-down menu of all available business roles when a mouse pointer hovers over it.
The Action Bar layout has been trimmed down to only display application-level buttons. The form action buttons (Save, Revert and Print) were relocated to just above the top-right corner of the content area and will be visible when a form is open and hidden when the splash screen is displayed.

The Show Navigation menu button was relocated to the immediate left of the content title.

The Side Navigation bar has been replaced by a floating menu, which is hidden by default. The floating menu is “brought up” by clicking the Show Navigation button. The navigation menu floats over the content area and will display a sub-menu when your cursor hovers over an item in the parent menu. The floating menu is dismissed by clicking anywhere else in the layout.

Handling Various Browser Sizes and Screen Resolutions #

The former Self-Service layout was “liquid” as it would stretch or contract to fit the dimensions of the browser window. Various browser-sizes and screen resolutions often cause issues in such layouts including unwanted wrapping of web objects or over-expanded text-areas.
This issue is addressed and resolved in the prototype layout by making it a “fixed-width” type layout. Whether the browser size or screen resolution is at 800x600 or 1600x1200, there will be no contraction or expansion issues.
800x600 1024x768 1280x1024

Cross-Browser Compatibility and Web Standards #

Browser Compatibility and following Web Standards actually go hand-in-hand. In order to be compatible with Mozilla FireFox 2, all HTML, CSS and JavaScript had to conform to current Web Standards.
The process of ensuring browser compatibility also involved making the layout completely frameless and replacing all HTML TABLE elements with DIV and SPAN elements. In addition, all HTML is completely styled using CSS ensuring a clear separation between style and content.
Mozilla FireFox Microsoft Internet Explorer

Ditching the FRAME but keeping the functionality #

It is also worth mentioning that although we didn’t want to work with FRAME elements we wanted to keep the FRAME functionality as it is very convenient to keep the application header static.
The content area sizes and re-sizes itself dynamically relative to the height of the browser window to ensure that the full height of the browser window is utilized. This is best illustrated by viewing the layout in the 3 different resolutions in the previous section. In all 3 images, we see the content area dynamically sized relative to the browser window and never see the vertical scroll bar for the browser window, which allows the user to scroll through a form or splash menu but always keep the application header in view.

Frame action minus the FRAME. #

Self Service 2.0 Walk Through #

Technical Features #

Application #

Role Bar #

Side Menu #

Splash #

Better usage of loading animation #

Find Area #

Fonts #

Dialogs #

LOV’s #

Tabs #