cc:Mail for WWW, Compose |
||
 Information Architecture Challenge:
Map the user action of composing a message 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 message composition within a web browser. Create a series of prototypes for usability testing of the design.  Solution:The Compose screen changed the least of the cc:Mail for WWW screens over time. Initially we tried a design with and without frames. We also tested links launching new browser windows vs. redrawing in the same window. Early usability test results confirmed the teams preference: redrawing the same window, though slower, kept users oriented better. Some users desire a multiple-window approach. We determined those users could still “open link in new window” in the browser. Subsequent mock ups focused more on visual design, user interaction, layout and content organization. User testing and user requirements for easy “type-ahead” style addressing revealed both technical and design limitations of the web environment. In place of "type-ahead" addressing, we found moving addressing into the address book to be the only acceptable solution given the technical limitations of HTML, CGI & frames. The compose screen was unique both in requiring no user navigation and that it nearly all actions are user input. This made the layout look different from the other screens so search/selection area of the layout became the composition area (the message itself) while the detail area was was also removed, except during "pop up" actions like attach. During pop-up actions, the message was grayed out to reinforce that it was neither lost, nor the focus of user action. During these actions, the bottom frame became the user focus and assumed the role of the appropriate "pop up" action.  Visual Design Challenge:Design customizable look and feel for address book screens. Create a screen layout for composing a message in 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. The user could use the action buttons to address the message in the Address Book or attach files. We reinforced compose's unique status by using a different color scheme. We used the "action" color which reinforced the color of the action bar and all "pop ups" which were sent to the bottom frame as a HTML form. Client: Lotus Development Corporation |
||
© copyright 2009, all rights reserved. |
||
Information Architecture
User Experience
Visual Design