PaleoScope GUI Development

Introduction

paleoscope-gui-01

PaleoScope, a master’s research projects completed as part of the Biomedical Communications degree, was originally conceived as a web-based interface for visualizing 3D models of fossil specimens. The goal was to simulate the experience of examining a real specimen in an augmented way without the constraints of the physical specimen, such as fossil components embedded in rock, and in a format that is accessible to anyone, anywhere in the world. Due to time constraints and lack of usable fossil CT scan data, it was decided that a CT scan of an extant organism (a snake cranium) would be used to develop the prototype application; to better fit the specimen, the project name was ultimately changed to OsteoScope.

The following section is a summary of developing the PaleoScope’s graphical user interface (GUI). Although the scope of the project was significantly streamlined from this original design, this was an invaluable process in the application development process by establishing a the core functions and appearances that were ultimately included in the final OsteoScope prototype.

Designing the Graphical User Interface (GUI)

Step One – Functionality Planning

The first step in designing the application was to decide what functions to include; this process was done with the project supervisory committee and content expert. Since the basic function of the interface was for users to interact with a 3-D object, the most important fundamental functions to include were navigational functions: orbit, zoom, and pan. A more specialized navigation suggested by the content expert was “explode,” which enabled the user to take apart the cranium in its component pieces to view internal structures. Additional functions that were discussed included labels for each individual bone, changing bone colours and opacity.

Step 2: Organizing the functions in a hierarchy

The next step involved arranging all the functions in an logical, hierarchical manner in order to begin organizing the interface’s menus. For examples, the core navigational functions should have a prominent place on the interface to allow the user to easily toggle between navigation modes. The secondary functions – colour, opacity, and labels – could be grouped in a side menu that could be hidden from sight when not in use.

Step 3: Building the application wireframe

A wireframe is an intermediate step in a GUI development process, which involves creating a skeletal framework of the interface, including laying out where interactive graphical elements – menus, button, etc. – will appear on the interface. Wireframing can be done on grid paper, or digitally using software such as Adobe Illustrator or InDesign. However, it is also possible to create some “mock interactivity” of the GUI’s functions, using tools such as Adobe Fireworks. With this software, you can overlay “hotspots” or buttons on an image of the GUI design that link to a different image of the GUI in which a function is activated. An interactive PDF document can then be exported, so that the result is a wireframe that mimics the functions to be included in the application. It is a useful way to demonstrate the application or website’s functions before development begins, and also enables potential bugs to be discovered.

As an example, this is a portion of PaleoScope’s interactive wireframe that demonstrates the orbit function.

paleoscope-wireframe-orbit-01

This is the “Home” page of the wireframe, showing the GUI in default where no functions are activated. A breadcrumb menu is located at the bottom of the interface to navigate between pages. The green areas indicated hotspots buttons that have been mapped out in Fireworks. If the user clicks on the orbit button, they will be taken to the Orbit page.

paleoscope-wireframe-orbit-02

Here, there is a new rectangular hotspot to the right of the cranium; this hotspot represents a vertical mouse-drag action. If they click on it, they will be taken to the Orbit Action page, which shows the cranium rotated vertically in response to the vertical mouse-drag.

paleoscope-wireframe-orbit-03

Clicking on the Orbit Notes breadcrumb will bring the user to a page containing textual description about the Orbit function.

paleoscope-wireframe-orbit-04

At any point, the user may click on other hotspots to demonstrate other functions, or return to the Home page via the breadcrumb menu.

The functional PaleoScope wireframe is available for download here.

Step 4: Refining the GUI appearance

With the functionalities finalized with the wireframe, the fine-tuning of the GUI appearance can begin. It is useful to begin this step with a stylesheet that contains colour palettes, menu elements, icon designs, etc. Below is the GUI design for PaleoScope (PDF with annotations is available here).

In a typical project development workflow, this would more or less be the final appearance of the application. However, due to time limitations, this design was not fully implemented in the OsteoScope working prototype. If the project was further developed, this GUI design would be used to guide the stylistic appearance of the application.