The goal was to create an interface that would be easy for the developers to deploy and the users to use: “The bug reporting tool should be easy to use and understand. The goal of any communication tool is to keep everyone on the same page and in tune with each other and the effort at hand.” [13, p. 192]

The floater interface is built using a combination of PHP and JavaScript. The server- side scripting language (PHP) creates a suitable client-side script (JavaScript) that is executed by the browser. This combination of server-side and client-side scripting makes it possible to receive information from an external database without adding server-side scripting to the tracked system.

The floater is displayed to the user as a layer floating in the browser window. The default view (shown in Figure 9) holds the following items:

• Project name
• Report a bug (link)
• View bugs (link)

If the user wishes to report a bug, the first step is to click the view bugs link. This opens a browser window with a listing of bugs logged for the specific page. The bug listing window is shown in Figure 10.

Figure 9 - Floater interface mockup (floater closed)

Figure 10 - Floater interface mockup (view bugs)

If the bug has not yet been reported, the user clicks the report a bug link. It opens a reporting form (shown in Figure 11). If the user decides not to report the bug, the close link is used to return the floater to the default state.

If the user tries to submit the form without the required fields, an alert box is shown (shown in Figure 12).

Figure 11 - Floater interface mockup (floater opened)

Figure 12 - Floater interface mockup (missing fields)

If a user successfully submits a report, a confirmation is opened (shown in Figure 13).

Figure 13 - Floater interface mockup (successful submit)

The basic flow of the floater application is shown in Figure 14.

Figure 14 – Simplified floater process flow

The visual design closely resembles the administration interface. The aim was to keep the footprint of the floater element as small as possible.

Screen captures of the final interface are shown in APPENDIX B.