cc:Mail for WWW, Address Book |
||
 Information Architecture Challenge:
Map the user action of addressing and addresses to screens for a web browser.  Solution:We mapped user actions and work flows and determined there were:
 User Experience Challenge:Design the user experience for cc:Mail for addresses and addressing within a web browser. Create a series of prototypes for usability testing of the design.  Solution:The Address Book screen changed dramatically over time. Initially we designed the Address Book to serve only as a directory, however, the lack of an embedded agent (a limitation of using HTML & CGI) we could not match type-ahead addressing. We experimented with a number of addressing screens, but eventually found it worked better to incorporate addressing a message into the Address Book. Adding addressing to tit, changed its behaviors considerably. The user now needed to both be able to add addresses to the address fields in a message without compromising the other functions of the address book: a simple and quick way to look at details of an entry, and a place to create and manipulate these entries. Subsequent usability tests revealed that there was a bit of a learning curve for this method of addressing, but it was a short learning curve which test subjects found that perfectly acceptable: Clicking on different targets for the detail and to select (icons for detail, text for select, for example) threw off most users initially but they generally caught on during the course of the test. We experimented with using the cc:Mail database as a more robust address book as shown here (the database would support entries beyond name and email address, but no customer was know to be utilizing this ability at the time. We wished to show off the potential for the power of the application in the prototypes.  Visual Design Challenge:Design customizable look and feel for address book screens. Create a screen layout which accommodates both addressing a message and acting as the Address Book of cc:Mail in a web browser.  Solution: We used web pallet colors, HTML forms with imagemap buttons globally to create a navigation area with an action bar. As with the mailbox screen the left-hand side of the middle frame, the search/select area, serves as a navigation area. We enhanced it by adding a search and an alphabetical quick link so the user could find address book entries more readily than painfully slow paging and scrolling. To reduce number mouse clicks (and hence page redraws), we created a selection/search area and a detail area. To view details the user clicked the icon in the search/select area. The user could select the entry by clicking on the name. Selecting would add a the entry to the addressing area on the right-hand side of the search/select area. The bottom frame serves as the detail/work area where both details for an entry and the forms to create, edit, etc. entries are drawn. Client: Lotus Development Corporation |
||
© copyright 2009, all rights reserved. |
Information Architecture
User Experience
Visual Design