Site hosted by Angelfire.com: Build your free website today!

cc:Mail for WWW, Mailbox

cc:Mail for WWW Mailbox Screen
IA Information Architecture Challenge:
Map the user action of reading and sorting messages to screens for a web browser.

IA Solution:
We mapped user actions and work flows and determined user action fell into three categories:
  • Reading a message
  • acting on a message (reply or foward)
  • managing messages
  • searching for a message
User Experience Challenge:
Design the user experience for cc:Mail for reading and sorting messages within a web browser. Create a series of prototypes for usability testing of the design.

The native client relied heavily on drag and drop functionality. We were limited to HTML, CGI and frames for the web client. Slow refresh rates and massive numbers of messages could make paging or scrolling impossibly slow.
Solution:
The Mailbox screen saw the most changes and most iterations over time. Early iterations we tried no frames and no global navigation area. We quickly determined, unlike native applications, in order to feel like an application, web applications needed a lot of visual reinforcement. We designed a banner which functioned as the appliction's global locator and navigation. Later we developed color schemes with defined highlighting schemes. We kept the banner visisble at all times by using frames.

The next several quick iterations experimented with the display of the list of folders and messages. We tried a list of folders where the folder‘s message list replaced the folder list when selected. This approached tested as disjointed and didn’t accommodate nested folders very well. We tried a merge list, displaying the message list inline with the messages. This led to very long scrolling lists and test left the users lost, and often left the action bar seeemingly inaccessible (at the top of a very long scrolled list).

Late design mock ups tested smaller numbers of messages with thier paging mechanisms and whether to use 2, 3 or 4 frames (one for folders, one for messages in the folder and one for message contents). By the time we built the early prototypes, we determined the three frame approach shown here (the middle frame ia a two-sided table) was our best option. Technical limitations of CGI and HTML forms handling in additon to limited screen real estate (adding another scroll bar robs us of precious space) prevented us from trying a separate frame for the folder list and message list.

Later usability tests focused on the action bar (which kept getting scrolled off the screen and forgotten), searching for messages, folder actions (creating, renaming, deleting, etc.), and general navigation. Ironically, our layout was so polished for the time that many test subjects expected drag and drop functionality in spite of never having seen it done in a web browser. We noted that this expectation did not prevent the users from accomplishing their tasks when filing mail, etc.

Loading all the messages in a folder (whose message count was not limited could be hundreds or thousands of messages) would take an unreasonable amount of time to draw. Addtionally the action bar would be lost as the user scrolled a very long list. By limiting the number of messages and devising a paging mechanism we could manage both these issues. We allowed the number of messages displayed to be set by the administrator on the server or they could even enable this as to be set as a user preference.

The native client allowed a message to open in a separate windoe. We created toggle widgets to toggle between the default split view, a view with only navigation (folder view) and another for reading messages individually (message view).


Visual Design Challenge:
Create a screen layout for the Mailbox window of cc:Mail in a web browser. The action bar, which is always on the screen in the native client could not be fixed in place and could be scrolled off the screen. Usablitity test revealed users often lost track of the action bar.

Solution: We globally used a color scheme from the web pallet colors, HTML forms with imagemap buttons in the navigation area as an action bar.

We defined the top frame as the banner, the middle frame as navigation area and bottom frame as detail area. The navigation are consisted of a left-hand side of the middle frame, the search/select area, serves as a navigation area (folders) and the right-hand side as the selection area (messages). The bottom frame serves as the detail area, the current message (highlighted in the navigation area).


To address the problem of users losing the action bar, we visually emphasized it with more vibrant color, more color contrast than the rest of the screen. This solved the problem in subsequent usablility tests.


Client: Lotus Development Corporation


© copyright 2009, all rights reserved.