Atlas Interface Description

The primary design goal for this application is that "The interface must be kept simple and non-technical." In order to accomplish this the application should feel familiar to all classes of users. A common baseline of user experience that can be established is that of a website. The application should then be presented in that scheme as much as possible.

The atlas will have "Basic" and "Advanced" sets of functionality. The atlas interface must me designed in such a way that the advanced mode simply builds upon the basic mode. Advanced functionality is available to registered users and is accessed when they log in.

My primary inspiration for the site layout is a the "GeoPortal?" in development for the European Space Agency. It is essentially a site that features geographic layers and related information and uses Chameleon. A screenshot is attached for reference only. A demo version can be found here  http://sapienza.mapsherpa.com/geoportal/ and here  http://dev.sapienzaconsulting.com/geoportal/index.cfm

Design Approach

The Atlas application will be built using Chameleon. Chameleon is an application development toolkit built in PHP that interfaces with MapServer?. The user interface for an application built with Chameleon consists of HTML, CSS and JavaScript?. Chameleon will insert snippets of HTML into an application template that is typically designed in HTML 4.01 but may also be HTML 3.0 compliant. The cascading style sheets associated with various widgets are CSS 1 while any scripts are JavaScript? 1. The browser baseline for an application built with Chameleon is not just determined by what Chameleon outputs, but also how the application template is designed. It is suggested that the baseline should be set for MSIE 6.0 and FF 1.0 to take advantage of the layout control offered by CSS 2. Typically the doctype used would be HTML 4.01 Transitional  http://www.w3.org/TR/html4/loose.dtd. W3C validation could be performed, but any validation issues in various Chameleon widgets would have to be assessed on a case by case basis.

Chameleon widgets add HTML and JavaScript? of varying size and complexity depending on the widget. A zoom-in widget for example would add only an image and link as HTML but JavaScript? to control the button states and the zoom box among other things. A query results widget on the other hand could add substantial HTML to display results but little to no JavaScript?. Some widgets also have accompanying dialog templates which can add HTML and JavaScript? to the page. These templates are all deigned in a common way so modifying their styles is relatively simple. Changing the layout or functionality of a dialog template however essentially turns it into a new custom widget and it can no longer be easily maintained or updated which must be considered.

Interface Features

1. Header
2. Top menu
3. Left-side bar
4. Right-side bar
5. Map
6. Toolbar
7. Information Area
8. Footer

Basic Interface layout:

<img src="%ATTACHURLPATH%/atlas-basic-layout.png" alt="atlas-basic-layout.png" width='962' height='683' />

Header

Headers are common to most web sites. It will be used primarily to identify where users are and establish a graphic style for the atlas. It should include a site identifier such as the name of the site or logo if it exists. The header should remain the same for every page in the atlas.

Top Menu

The top menu can be incorporated into the header or be set apart from it graphically and appear just below the header. This menu will be used for the basic navigation outside the mapping application. It should remain the same for all pages in the atlas. Limiting the number of links in this menu is desirable. I suggest the top menu could contain links to:

• the home page
• basic information about the atlas
• help pages about the atlas application
• a link to the feedback form
• login and register links.

If there are many pages outside the atlas application the right or left side bar could be used as well or instead of the top menu.

Left-side Bar

The left-side bar is a fixed width bar that is the height of the entire page. It's role is to allow users to navigate the atlas like a web page. It could be divided into three main areas as follows:

• Regions
• Maps
• Other Atlas Links

It would be best to represent these atlas navigation blocks in a way that is familiar to web sites, and consistent between the blocks. The navigation blocks can be represented in a variety of way depending on how many there are and how many levels of hierarchy there are.

• Simple List - If there are only a few, and there are no sub levels, a simple list of links would be adequate.
• Simple Menu - If there are only a few, but there are also sub levels, then a flyout menu or an expanding menu may be more appropriate.
• Multi-level menu - If there are many regions, and many sub levels a flyout menu could be considered.
• A dropdown list might also be an option.

If there is a need for other Links in the atlas, a simple list of links would be appropriate.

An Expanding Menu:

<img src="%ATTACHURLPATH%/menu-expanding.png" alt="menu-expanding.png" width='125' height='223' /> A Fly-out Menu:

<img src="%ATTACHURLPATH%/menu-flyout.png" alt="menu-flyout.png" width='372' height='217' />

Right-side Bar

The right-side bar is also a fixed width bar that spans the height of the page. It's primary purpose it to contain the legend for the map, but it can also be used to contain links that need less prominence, like the list of stakeholders or other related sites.

The legend in the basic interface will consist of a list of layer names with a symbol representation. This should also remain like a simple list. The layer names could be linked to layer specific information that could be inserted into the information area when a linked layer name is clicked. If appropriate for a layer, a list of class names with symbol representations will appear under that layer. Class names will not be linked. If it helps in interpreting the map, layers could also be ordered into arbitrary groups.

The legend in the advanced interface adds functionality that turns it into a layer control. Some of the advanced tools will appear in a toolbar above the legend. Additional functionality will include:

• toggling layer visibility
  • layer visibility is controlled with a checkbox next to the layer name.
  • layer selections is controlled with a radio button next to the checkbox.
• adding additional layers from the atlas
  • a button in the legend toolbar launches an add layers dialog
• uploading data
  • a button in the legend toolbar launches an upload data dialog
• removing layers from the map
  • a button in the legend toolbar removes the selected layer
• promoting and demoting layers in the draw order
  • buttons in the legend toolbar promote and demote the selected layer

Example of a layer control from ESA Geo Portal:

<img src="%ATTACHURLPATH%/geoportal-legend.png" alt="geoportal-legend.png" width='303' height='246' />

Map

The map is the central part of the interface. It will be a fixed size. The mockup is 550 pixels by 350 pixels, but any size could be used. The entire interface could be designed so that it is optimized for an 800 x 600 display or a 1024 x 768 display simply by adjusting the size of the map.

The map could have a title above it if appropriate.

Toolbar

The toolbar could be located above or below the map, but is shown below the map in the layout. The toolbar allows access to the map navigation tools and query tool in the basic interface.

• Zoom In
• Zoom Out
• Zoom Full Extents
• Pan
• Query

In the advanced interface other tools will be added to the toolbar including the following tools which will all launch popup dialogs:

• export to PDF (Print)
• extract data
• filter layer
• add points (and labels via MapNotes? widget)
• Summary tools
  • These include Buffer, simple operations, proximity and summaries by area

Information Area

The information area is crucial to the application as it describes what the user is seeing on the map with words, images, links, charts, tables and any other media that an HTML page can handle. It can be a tabbed area with four tabs so users can always access the different information.

• Regional information tab
• Map information tab
• Layer information tab
• Results tab

Introductory information can replace the tabs when the application first loads. This information can always be retrieved when the user clicks the "Home" link in the main toolbar

Regional, map and layer information is each loaded into the appropriate tab when a region, map or layer is clicked is selected.

Query results and Summary tools results will be loaded into the results tab when those tools are used. If there are no query results in the results tab, some guiding information could tell the user what the area is for and how to get information in there. When a tab's content is changed that tab will become the active tab. Query results are in HTML returned from the query widget. Typically the results are in a table.

Footer

Footers are also commonly seen on web sites. Footers can contain copyright information, links to disclaimers, terms of use and other legal stuff. A footer is not required for the atlas, but are often a familiar way of ending a page, and offers another design elements that can be consistent with the header. -- Main.FredWarnock? - 14 Dec 2006