Pop-up Timer: A Modest Redesign

From PikaDocs

By Brian Lawlor & Mark Sawyer
Legal Services of Northern California (http://www.lsnc.net/)


The time slip functions built into Pika include two modes: (1) a full-page time slip screen (activityT.html) and (2) a "timer" (activityM.html) that pops up as a smaller, separate window with a running time total in minutes that can be paused (activity-paused.html) and then re-activated as long as the pop-up window is open. The pop-up timer is a very handy extra to have when the user needs to run the clock, e.g., to track immediately the time on a phone call related to a case currently open in Pika.

In a recent exchange on the Pika Users list, there were some observations that the pop-up timer window tends to confuse users about how it works. In the Project Claire design, we've made some minor tweaks to the layout of the "timer" window, as well as the positioning and labeling of the submit buttons, and then used a little CSS trickery with opacity (http://www.mandarindesign.com/opacity.html) to provide a marked visual cue that the timer is inactive.

Admittedly, at the time of writing this article, we will have just begun using it, and so the utility of this design is yet to be proven. Yet in a burst of optimism about the future of the Pika timer, here is our design, first in the initial pop-up "active" mode ...


Active pop-up timer window


... and then in the "paused" mode ...


Inactive pop-up timer window


The repositioning of the various form elements is no big deal, largely just reflecting the idiosyncratic needs of LSNC. We'll not go there. But perhaps of broader interest are three specific design objectives that can be seen in the above images:

  • Repositioning the two submit buttons to sharply separate their two functions, by positioning each to the opposite sides of the window: On the left the button that activates or deactivates the timer; on the right the button that confirms that the user is done with the timer and closes the pop-up window.
  • Relabeling the two sets of buttons to make it clearer what their functions are: On the left, when the timer is in active mode, the button reads "Pause Timer"; when the time is inactive, the button reads "Resume Timer." On the right, the button has been labeled to read "I'm Done!"
  • Using CSS to change the appearance of the two timer states: In the active mode the page elements are in their default mode of display, and everything looks "active." In the inactive mode, different CSS is applied to change the background and text colors in the h2 element ("Timer ~ Paused") at the top of the window, and opacity to "gray-out" the page elements, providing a visual cue that the page is inactive.

Changing the CSS for the h2 is simple enough. In this design, the markup for the heading element in the active timer template (activityM.html) has a class attribute named "full-width": 

<h2 class="full-width">Pop-up Timer</h2>

In the inactive timer template (activityM-paused.html), the same header is used, with addition of an id attribute named "paused" to provide the CSS hook for redefining the colors used in that element - 

<h2 id="paused" class="full-width">Timer ~ Paused</h2>

The opacity effect is achieved by adding inline style properties that define how opaque the divs that enclose the various form elements should appear. Since IE and Firefox implement CSS opacity differently (and inconsistently), separate style properties are declared for each, the first being for IE and the second for Firefox: 

<div style="filter: alpha(opacity=50); -moz-opacity: 0.50; opacity: 0.50;">
...
</div>

With these changes, the user now has more, and more pronounced, visual cues of how to use the timer and what is its current state.

Related articles:

Retrieved from "http://pikasoftware.com/docs/index.php/Pop-up_Timer:_A_Modest_Redesign"