Software Application User Interface Graphics Design Project January 2010

Meshstro Application Notes: Meshstro – formerly called Smarter Documents – is a Microsoft Outlook plug-in that connects the contents of your inbox with documents on the desktop and related information from social networks and internet public databases to provide an information web contextually binding together information within communications, stored documents and files, internet databases, news feeds and social networking. Meshstro allows users to rapidly find the information they need wherever it is without having to switch between applications to find it. This solution brings together email and desktop search, information discovery and contextual management. This image shows an old version of the application ‘Look & Feel’ - later in this Powerpoint – the application designs shown reflect the look we are striving for.

Three Primary Application ‘Views’ SPINE SIDEBAR VIEW Notes: Meshstro comprises of three primary user ‘views’ of information: Spine Sidebar View Preview PREVIEW

Design Project General Requirements Items Requiring Design: We are looking for designs for 5 main graphical elements to be used within a new software application called Meshstro: Button Base – to be used across the application in different sizes according to location of use – the button needs to house different icons [see below] within it accordingly to it’s specific usage in any one single location. A Set of Icons to be housed with the button – only one icon at any one time. These need to be designed to accommodate the various button base sizes. Additionally a number of these icons will be used standalone i.e. not housed within the button. An Image Frame to house an image which optionally may be adorned with a set of smaller ‘badges’ reflecting information about an adjacent informational item portrayed alongside the frame. Indexer Status Control - shows indexing activity status and the % of completion. Can be 'Pressed' to pause indexing or restart indexing from a paused state. A Scroll Bar allowing users to scroll information lists vertically. Currently the designs shown in this PowerPoint are temporary they are shown only as examples of what we are seeking. However the overall Design / ‘Look & Feel’ of the application is final so all designed elements need to fit with this application style including their use of color. The following pages show provide further details for each graphical element.

Button Base Design Specifications Notes: Button Base comprises of a rounded square background with an icon centered within [See Icon Design Specifications] Required in 3 sizes: 26x26 pixels, 20x20 pixels & 16x16 pixels. The icons within them are: 20x20 pixels, 16x16 pixels & 12x12 pixels respectively. Button together with the inset icon needs to reflect 4 states: Press, Hover, Not-selected [i.e. normal] & Disabled. Button Base [3sizes: 26x26 pixels, 20x20 pixels & 16x16 pixels] Example Icon [3sizes: 20x20 pixels, 16x16 pixels & 12x12 pixels] States [Press, Hover, Not-selected [i.e. normal] & Disabled]

Set of Icons Design Specifications Notes: We are looking for 26 different icons being designed. [see List of Icon Set] All these icons will be used within the button base [See Button Base Design Specifications] and stand alone The stand alone version of any icon is the same icon rotated counter-clockwise ~ 30%. All icons need to be in 3 sizes: 20x20 pixels, 16x16 pixels & 12x12 pixels. Icon in Button Example Button Base[3sizes: 26x26 pixels, 20x20 pixels & 16x16 pixels] Icon [3sizes: 20x20 pixels, 16x16 pixels & 12x12 pixels] Stand Alone Icon Example Icon [3sizes: 20x20 pixels, 16x16 pixels & 12x12 pixels] Rotated counter clockwise ~ 30 degrees

Locations of Buttons / Icons SPINE SIDEBAR VIEW Send Message Book Appointment Search Back Button Open Address Book Message Search Google* Conversation Open LinkedIn* Person Open Facebook* Organization Open Twitter* Document Open WikiPedia* Sort Listed Items Search within Minimize List / Restore Maximize List / Restore Channels Dashboard Actions Favorites Web Page Settings ‘In the News’ Help ‘On the Way’ ‘Tell a Friend’ * will insert company logo into button base Feedback Open/Close

Icon Set Search Message Conversation Person Document Organization Channels Dashboard Tasks Favorites Settings Help ‘Tell-a-Friend’ Feedback Open/Close Sidebar Back Button Appointments Location Address Book Search Within List Show More Options Minimize/Restore List Maximize/Restore List Web Page ‘On-the-Web’ ‘In-the-News’ Notes: The specific location(s) for each of these icons is shown following this page on one page / icon

Search Button

Message Button

Conversation Button

Person Button

Document Button

Organization Button

Channels, Tasks, Favorites & Dashboard Buttons Both these product features have not be implemented yet. Channels : Folder to store & share inbox data with others Dashboard: Larger composite view of information Tasks: Aggregated view of pending tasks for a person or project Favorites: Indicates item is a favorite – i.e. person, document or organization The usage, size & state model from an button design perspective is the same as for Person, Message, Conversation, Document or Organization icons with locations on the Spine, in several Sidebar & Preview locations.

Settings Button

Help Button

‘Tell a Friend’ Button

Feedback Icon

Open/Close Sidebar Button

Back Button

Appointments Icon

Location Icon

Address Book Icon

Header Control Bar Buttons Notes: We are looking for 4 Buttons as follows: Search Within List Show More Options Minimize/Restore List Maximize/Restore List

Web Page Icon

‘In the News’ Icon

‘On the Web’ Icon

Image Frame Design Specifications Notes: The Frame need to be in 2 sizes: 72x56 pixels & 36x28 pixels. The Frame houses a square image [photo or graphic] which optionally has two additional ‘badge’ images attached on the right hand side The image inside can be two sizes: 48x48 pixels & 24x24 pixels. The attached badges have two sizes: 24x24 pixels & 12x12 pixels. There are 6 badge designs required: indicates text list is a Message indicates Message [in text list] has an attachment indicates Message [in text list] that has been forwarded indicates Message [in text list] that has been replied to indicates Message [in text list] is part of a conversation [i.e. message thread] [The very right-hand side badge only] suggests that clicking this badge will lead user elsewhere example may be an icon like this ‘ > ’ The Frame needs to reflect 3 states which are triggered as follows: The mouse is not inside the Frame or the boundary of the adjacent Text List > normal state The mouse is not inside the Frame but is within the boundary of the Text List > Frame needs to change to encourage user to move and hover over it – [See the Yahoo Messenger ‘Friends Icon ‘ frame in the Friends list for the idea we are looking for.] The mouse is hovered over the Frame > Frame needs to change to reflect it is now selected. Text List List Image Badge [2 sizes: 24x24 pixels & 12x12 pixels] Image [2 sizes: 48x48 pixels & 24x24 pixels] Frame [2 sizes: 56x72 pixels & 28x36 pixels]

Image Frame Locations SIDEBAR VIEW PREVIEW Image Frame Appointments ‘Location/Map’ Message Sender Photo Frame

Indexer Status Control Design Specifications Notes: The Indexer Status Control show the indexing activity status and the % of completion [the application indexes the contents of the inbox]. The Control can be pressed to pause indexing & then pressed again to restart indexing from a paused state. We are looking for a symbols similar to these II & u within the design – a la DVD play / pause controls The Control has 2 sizes: 64x64 pixels & 20x20 pixels. The Control needs to reflect 4 states each for both indexing active & paused : Press, Hover, Not-selected [i.e. normal] & Disabled.

Scroll Bar Design Specifications Notes: Scroll bar has 4 components: Scroll Up, Scroll Down, Slider Bar & Background The Scroll bar is 16 pixels wide and its height is proportional to the list length Scroll Up, Scroll Down, Slider Bar all need to reflect 3 states: Press, Hover, Not-selected [i.e. normal]. SIDEBAR VIEW Scroll Bar Scroll Up/down [ 1size: 16x16 pixels] Background [ width 16 pixels – height proportional to list length] Slider Bar [ width 16 pixels – height proportional to list length]

END