Designing the Graphical User Interface

We started the new Atlas of Switzerland (AoS) project with a comprehensive ten-years concept, where the graphical user interface (GUI) has been designated as an essential part of our interactive atlas. Thus, we incorporated the GUI design into the planning and realization process from the very beginning. To deal with the rather complex atlas structure, we followed an Interaction Design (IxD) approach. Basically, this IxD approach can be divided in four main phases: 1) Investigation, 2) Rough Design, 3) Detailed Design, and 4) Implementation. We completed the first three stages in collaboration with an IxD company dreipol GmbH, and we are now implementing the GUI elements and connecting them with the APSglobe.

Investigation

For the investigative phase we studied state-of-the-art GUI to get an overview and idea of possible GUI solutions from related fields. Subsequently, we defined the basic GUI structure by means of UCD techniques. Below, the single steps and tasks are discussed more in detail:

State-of-the-art studies of web atlases, geoportals, and virtual globes were conducted. To gain some experience with mobile device GUIs, IxD students of ZHdK designed clickable prototypes for tablets, based on material from the former AoS 3. An additional survey with “Digital Natives” took place to reveal hints concerning optimal atlas GUI layout structures for desktop applications, but also to learn more about the behavior of the young generation as a target audience.

Survey on desktop atlas GUIs Students were asked to get additional information about a map topic. The resulting surface density maps show clustered (left) or scattered click patterns (right) for the same task depending on GUI layout (Schnürer et al. 2015).

The evaluation of general requirements and atlas reference designs resulted in choosing Windows 8 Metro with a responsive design as a basis; a mock-up was created to prove its feasibility.

In the following, we formulated different use cases, including persona (student, journalist, retiree, hiker, etc.), scenarios (education, work, leisure time), and activities (e.g. comparing map layers, adding own data, customize the map).

Finally, a list of basic and advanced interactive atlas functions was defined. Since the new AoS edition will concentrate on visualizing and exploring 3D maps, only a limited number of functions is taken into account, as, e.g. to search for locations and themes, to set the time, to pick map information, to measure distances and areas, and to show multimedia elements.

Rough Design

The rough design phase is crucial for the whole atlas project. Here, the “Look and Feel” of the atlas is defined. It is likely that users stay longer on an atlas web site if the overall GUI design is appealing!

A kickoff meeting with the graphics designer company was organized to provide them with background information to the AoS project, and more specifically, to present all materials from the Investigation phase. During the next weeks, numerous versions of wireframes and moodboards, including fonts and color schemes, were created, accompanied by immediate feedback loops.

Wireframe (left) and Moodboard (right) of the start screen of the 3D Atlas of Switzerland.
Wireframe (left) and Moodboard (right) of the map screen of the 3D Atlas of Switzerland.

Overall GUI design was then applied on two main screens, the start screen and the map screen. Decisions on general screen layout, responsive design, typography, leading colors, etc. have to be represented in accompanying documents. Results of this phase are shown in the Design Direction Presentation (DDP). The DDP leads to a final decision on graphics and behavior. It had to be approved for release by the AoS team in order to fix the main appearance of the AoS – online.

Detailed Design

The intention of the detailed design phase is to get a clean graphical GUI layout and an interaction plan for further implementation.

For a detailed design, all screen layouts and single GUI elements had to be drawn in vector format. Layouts were created for different pages such as maps of the week, thematic categories, quick and advanced search, help and imprint. Animated sequences illustrated transitions from the start screen to the map screen and vice-versa. The detailed design of vector icons started from an existing icon library to save time and costs. And finally, the description of statuses (on/off) and interactive functions (e.g. distance measure tool) was always accompanied by pictorial examples, because a textual description could be misleading for software developers.

Detailed Design of the start screen with main categories (left) and quick search (right) of the 3D AoS – online.
Detailed Design of the map screen (left) and specifications of the distance measure tool (right) of the 3D AoS – online.

The output of this phase is the Detailed Design Documentation (DDD). The DDD serves as reference document for the implementation phase and contains the dimensions and behavioral description of every GUI element.

Implementation

One of the main goals of GUI implementation is to keep GUI resources low in order not to impede the rather complex 3D visualization processes. Therefore, we defined a short list of applicable technologies. The Chromium Embedded Framework (CEF)¹ served as a browser environment, while as a JavaScript framework vue.js was chosen. To guarantee a neat communication with the atlas back-end and its 3D visualization engine, data models and event interfaces were defined. Otherwise, our IxD front-end developers had free choice of CSS extension language; they decided to work with SASS. Github was used as a code repository in order to examine the implementation progress in regular time sequences.

Next, the deliverables for the IxD company were defined, consisting of basic structure and modules (single page layout, icon system, standard dropdown and buttons, etc.), content modules (search results, multimedia information, overlays, etc.), GUI modules (icons, dropdowns, buttons), animations (page, icon hover effects, etc.), and interfaces for the GUI components. After every module delivery, implementation testing was done as an iterative improvement process. To conclude this last phase, usability testing will be undertaken with groups of current AoS 3 users and atlas novices.
The final result will be an Operational GUI, working robustly and swiftly under different conditions. Ideally, the atlas GUI assists users in performing the tasks without imposing itself.