1. Conceptual design/prototype of Déjà vu application interface 2010 Summer Internship Project TakYeon Lee SQLUX

2. BACKGROUND STUDY > PROJECT SCOPE Identify and design a compelling user experience(UX) fabric* capability for Microsoft’s next generation application platform *The term “user experience fabric” is used to define non-application specific capabilities provided by the app-platform and utilized by a user to better complete a given task. Examples from the traditional Windows OS range from the start menu, to copy/paste, to file management, to paint, notepad, and a calculator. However, in a next generation cloud-based application platform we can image much more…

3. BACKGROUND STUDY > USER EXPERINCE FABRIC Defining a user experience fabric… Suppose a user has a task and a goal and access to a set of custom applicationsto help them meet the goal App 4 App 1 App 3 App 2 An Apps could be … Filing an expense report, Customer Contact manager, or Report for data look-up App 5 App 6 A Task might be … “prepare a sales proposal for a new customer” with the goal being “win the customer and get a big bonus.”

4. BACKGROUND STUDY > USER EXPERINCE FABRIC Defining a user experience fabric… “A task may involve multiple apps. Friction between those apps might reduce IW productivity.” Friction. Asking co-workers for help Friction. Download the file, then upload to another App App 4 App 1 App 3 App 2 App 5 Friction. Search for the link to the App I have used App 6 Friction. Reading manual and FAQ

5. BACKGROUND STUDY > USER EXPERINCE FABRIC Defining a user experience fabric… “ the common software experiences which bridge individual applications to help the user complete their task and reduce friction” Use a wiki to find the “best” app to solve a problem… Import/Export data between custom apps… App 4 App 1 App 3 App 2 App 5 App 6 Use list of “frequently used apps” to return to in progress work… Post a question on a forum to learn from a co-worker…

6. BACKGROUND STUDY > USER EXPERINCE FABRIC “ Wayfinding support guides users to common functionalities & information as needed.” SEARCH by related Import App-Object Export Reporting SNAPSHOTS “Page” (within app) FORUM WAYFINDING SUPPORT WIKI Favorite Tool HELP SEARCH within Recently used tools App MY SITE User

8. HYPERLINK

9. OPEN IN POWERPIVOT

10. SHARE

12. Stepwise Planning

14. Matching goal, resource and route

15. MULTIPLE-TASK OVERVIEWNo generalized solution Non-Trivial problem domain STRATEGIC

16. web editor Open in … wiki Submit to… Personal Expense case A. Single Task GOAL Offering simplest supports for a single task HOW? Adding “directions” and “trails” to the other useful functionalities WHAT? Hyperlinks, Direct information …

17. 0. Planning task Paul wants to file his expenses in the Personal Expense app. His expense records are stored either in credit card report or cash receipts. 1. App interfaces are rigid, inefficient He wants to copy multiple records directly from other sources such as credit card transaction report (HTML), receipt images(JPEG) at once. However, the Personal Expense app only supports typing record one-by-one manually. 2. Wiki tells how other people went through Paul opens up MS Expense Wiki, and found alternative ways of filing expense more efficiently. UX fabricprovides a shortcut to the wiki page about [Personal Expense]

18. 3. Check out the form Following the wiki article, Paul found ‘Check out’ feature in the Personal Expense app. He chooses to use Web Editor because then he can take advantage of other AppFabric functionality too. UX fabric adds direct links to corresponding App. 4. Blending all data in Web Editor Paul can now copy and paste his records from other sources efficiently into the form. 5. Submitting the completed form When editing is finished, he can submit the form to the Personal Experience app where he got the form. Everything is done in the cloud without a single file in his computer. UX fabric adds direct links to corresponding App.

19. 6. Filing completed The Personal Expense app is updated with his new submission. web editor Open in … wiki Submit to… Personal Expense

20. web editor Open in … Submit to… Personal Expense Document Search Recently Viewed Documents AdHoc Report Maker share Team Budget Report case B.Multiple Tasks GOAL Supporting multiple tasks towards a specific goal HOW? By providing functionalities to connect multiple Apps WHAT? [Document Search] [Recently Viewed Documents] [Step-by-step instruction]

21. Continue from case A. scenario 6. Filing completed The Personal Expense app is updated with his new submission. 7. New Task : Adhoc report Paul now tries to compare data in different documents. “how much budget do I have left?” 8. Planning task His budget left can be calculated with Team Budget balance minus the his expense total. However, he doesn’t know where he can find the current team budget.

22. 9. Locating the data in Team budget App AppFabric search functionality locates where he can find current budget of his team. 10. Found the report He wants to use the data from multiple reports to figure out how much budget is left for him. 11. Importing recent documents in adhoc report When he opens up a new adhoc report, recently viewed reports are ready to be used.

23. 12. Blending all the data He can easily get data from multiple sources and make a new report 13. Sharing with others Any object can be shared with his contacts. web editor Open in … Submit to… Personal Expense Document Search Recently Viewed Documents AdHoc Report Maker share Team Budget Report

24. [side work] Benchmarking UI formfactors * For detail, see Appendix.

25. [side work] Wireframe design * For detail, see Appendix.

26. c. Activity Map GOALa. Overall understanding of how Apps have been used b. Acquiring other users’ tribal knowledge about App usage HOW? By visualizing usage log …as an overview …filtered by user/document/etc. WHAT? Network diagram + Activity animation Dynamic Pivot & Filtering Force-directed Layout

27. Background Scenario Tim has been assigned a new sales territory, previously assigned to Sam who just was promoted. Tim wants to understand what made Sam successful so that he can ramp up to Sam’s level of productivity quickly. So, Tim has lunch with Sam and chats about work. He learns a lot. Sam had clever routes for meeting with current customers and scheduling visits with prospective customers. Sam used incentives and price reductions to spur sales. Sam timed his expenses and budget “creatively” within company policy to maximize his budet. Now Tim has to start trying to do at least as well as Sam did… (hopefully better…)

29. Tim can look for answers and ask questions in application discussionforums…

31. Overview... May 2010 May 1st Sam Bacon created a new Personal Expense Lucio Iallo deleted several Summary Report artefacts May 9th Lucio Iallo checked out a Trip Budget Kim Abercrombie created a new Personal Expense Sagiv Hadaya commented on a Summary Report May 15th Lucio Iallo committed a Trip Budget Kim Abercrombie created a new Summary Report Sagiv Hadaya commented on a Trip Budget May 21st Sam Bacon made a wiki page about Personal Expense Sam Bacon created a new Summary Report Sam Bacon created a new Personal Expense Sam Bacon created a new Trip Budget May 25th Lucio Iallo checked out a Trip Budget Kim Abercrombie created a new Personal Expense Sagiv Hadaya commented on a Summary Report May 27th Lucio Iallo committed a Trip Budget Kim Abercrombie created a new Summary Report Sagiv Hadaya commented on a Trip Budget June 2010 June 1st Sam Bacon created a new Personal Expense Lucio Iallo deleted several Summary Report artefacts June 9th Lucio Iallo checked out a Trip Budget Kim Abercrombie created a new Personal Expense Sagiv Hadaya commented on a Summary Report June 15th Lucio Iallo committed a Trip Budget Kim Abercrombie created a new Summary Report Sagiv Hadaya commented on a Trip Budget ALL APPLICATION Choose suite… ALL USER Choose team… CREATING VIEWING MANAGING COMMENTING WIKI

32. Focusing on smaller [application / user] scope ALL APPLICATION FINANACE SUITE CONTOSO TRIP PLANNER ALL USER SALES TEAM Choose person… 2009 sales Sam Bacon Summary Report May 2010 May 1st Sam Bacon created a new Personal Expense Lucio Iallo deleted several Summary Report artefacts May 9th Lucio Iallo checked out a Trip Budget Kim Abercrombie created a new Personal Expense Sagiv Hadaya commented on a Summary Report May 15th Lucio Iallo committed a Trip Budget Kim Abercrombie created a new Summary Report Sagiv Hadaya commented on a Trip Budget May 21st Sam Bacon made a wiki page about Personal Expense Sam Bacon created a new Summary Report Sam Bacon created a new Personal Expense Sam Bacon created a new Trip Budget May 25th Lucio Iallo checked out a Trip Budget Kim Abercrombie created a new Personal Expense Sagiv Hadaya commented on a Summary Report May 27th Lucio Iallo committed a Trip Budget Kim Abercrombie created a new Summary Report Sagiv Hadaya commented on a Trip Budget June 2010 June 1st Sam Bacon created a new Personal Expense Lucio Iallo deleted several Summary Report artefacts June 9th Lucio Iallo checked out a Trip Budget Kim Abercrombie created a new Personal Expense Sagiv Hadaya commented on a Summary Report June 15th Lucio Iallo committed a Trip Budget Kim Abercrombie created a new Summary Report Sagiv Hadaya commented on a Trip Budget Sagiv Hadaya Trip Budget Personal Expense Lucio Iallo CREATING VIEWING MANAGING COMMENTING WIKI

33. Relationship [emerges/fades away] over time ALL APPLICATION FINANACE SUITE CONTOSO TRIP PLANNER May 2010 May 1st Sam Bacon created a new Personal Expense Lucio Iallo deleted several Summary Report artefacts May 9th Lucio Iallo checked out a Trip Budget Kim Abercrombie created a new Personal Expense Sagiv Hadaya commented on a Summary Report May 15th Lucio Iallo committed a Trip Budget Kim Abercrombie created a new Summary Report Sagiv Hadaya commented on a Trip Budget May 21st Sam Bacon made a wiki page about Personal Expense Sam Bacon created a new Summary Report Sam Bacon created a new Personal Expense Sam Bacon created a new Trip Budget May 25th Lucio Iallo checked out a Trip Budget Kim Abercrombie created a new Personal Expense Sagiv Hadaya commented on a Summary Report May 27th Lucio Iallo committed a Trip Budget Kim Abercrombie created a new Summary Report Sagiv Hadaya commented on a Trip Budget June 2010 June 1st Sam Bacon created a new Personal Expense Lucio Iallo deleted several Summary Report artefacts June 9th Lucio Iallo checked out a Trip Budget Kim Abercrombie created a new Personal Expense Sagiv Hadaya commented on a Summary Report June 15th Lucio Iallo committed a Trip Budget Kim Abercrombie created a new Summary Report Sagiv Hadaya commented on a Trip Budget ALL USER SALES TEAM Sam Bacon Trip Budget Sagiv Hadaya Personal Expense Summary Report Kim Abercrombie CREATING VIEWING MANAGING Lucio Iallo COMMENTING WIKI

34. Focusing on specific activity ALL APPLICATION FINANACE SUITE CONTOSO TRIP PLANNER May 2010 May 1st Sam Bacon created a new Personal Expense Lucio Iallo deleted several Summary Report artefacts May 9th Lucio Iallo checked out a Trip Budget Kim Abercrombie created a new Personal Expense Sagiv Hadaya commented on a Summary Report May 15th Lucio Iallo committed a Trip Budget Kim Abercrombie created a new Summary Report Sagiv Hadaya commented on a Trip Budget May 21st Sam Bacon made a wiki page about Personal Expense Sam Bacon created a new Summary Report Sam Bacon created a new Personal Expense Sam Bacon created a new Trip Budget May 25th Lucio Iallo checked out a Trip Budget Kim Abercrombie created a new Personal Expense Sagiv Hadaya commented on a Summary Report May 27th Lucio Iallo committed a Trip Budget Kim Abercrombie created a new Summary Report Sagiv Hadaya commented on a Trip Budget June 2010 June 1st Sam Bacon created a new Personal Expense Lucio Iallo deleted several Summary Report artefacts June 9th Lucio Iallo checked out a Trip Budget Kim Abercrombie created a new Personal Expense Sagiv Hadaya commented on a Summary Report June 15th Lucio Iallo committed a Trip Budget Kim Abercrombie created a new Summary Report Sagiv Hadaya commented on a Trip Budget ALL USER SALES TEAM Sam Bacon Trip Budget Sagiv Hadaya Personal Expense Summary Report Kim Abercrombie CREATING VIEWING MANAGING Lucio Iallo COMMENTING WIKI

35. Focusing on specific activity ALL APPLICATION FINANACE SUITE CONTOSO TRIP PLANNER May 2010 May 1st Lucio Iallo deleted several Summary Report artefacts May 9th Lucio Iallo checked out a Trip Budget Sagiv Hadaya commented on a Summary Report May 15th Sagiv Hadaya commented on a Trip Budget May 21st Sam Bacon made a wiki page about Personal Expense May 25th Lucio Iallo checked out a Trip Budget Sagiv Hadaya commented on a Summary Report May 27th Sagiv Hadaya commented on a Trip Budget June 2010 June 1st Lucio Iallo deleted several Summary Report artefacts June 9th Lucio Iallo checked out a Trip Budget Sagiv Hadaya commented on a Summary Report June 15th Sagiv Hadaya commented on a Trip Budget ALL USER SALES TEAM Sam Bacon Trip Budget Sagiv Hadaya Personal Expense Summary Report Kim Abercrombie SHOW ALL CREATING VIEWING MANAGING Lucio Iallo COMMENTING WIKI

36. Focusing on specific activity ALL APPLICATION FINANACE SUITE CONTOSO TRIP PLANNER May 2010 May 1st Lucio Iallo deleted several Summary Report artefacts May 9th Sagiv Hadaya commented on a Summary Report May 15th Sagiv Hadaya commented on a Trip Budget May 21st Sam Bacon made a wiki page about Personal Expense May 25th Sagiv Hadaya commented on a Summary Report May 27th Sagiv Hadaya commented on a Trip Budget June 2010 June 1st Lucio Iallo deleted several Summary Report artefacts June 9th Sagiv Hadaya commented on a Summary Report June 15th Sagiv Hadaya commented on a Trip Budget ALL USER SALES TEAM Sam Bacon Trip Budget Sagiv Hadaya Personal Expense Summary Report Kim Abercrombie SHOW ALL CREATING VIEWING MANAGING Lucio Iallo COMMENTING WIKI

37. Focusing on specific activity ALL APPLICATION FINANACE SUITE CONTOSO TRIP PLANNER ALL USER SALES TEAM May 9th Sagiv Hadaya commented on a Summary Report May 15th Sagiv Hadaya commented on a Trip Budget May 21st Sam Bacon made a wiki page about Personal Expense May 25th Sagiv Hadaya commented on a Summary Report May 27th Sagiv Hadaya commented on a Trip Budget June 2010 June 9th Sagiv Hadaya commented on a Summary Report June 15th Sagiv Hadaya commented on a Trip Budget Trip Budget Sagiv Hadaya Personal Expense Summary Report SHOW ALL CREATING VIEWING MANAGING Lucio Iallo COMMENTING WIKI

38. Focusing on specific application May 2010 May 1st Sam Bacon created a new Personal Expense Lucio Iallo deleted several Summary Report artefacts May 9th Lucio Iallo checked out a Trip Budget Kim Abercrombie created a new Personal Expense Sagiv Hadaya commented on a Summary Report May 15th Lucio Iallo committed a Trip Budget Kim Abercrombie created a new Summary Report Sagiv Hadaya commented on a Trip Budget May 21st Sam Bacon made a wiki page about Personal Expense Sam Bacon created a new Summary Report Sam Bacon created a new Personal Expense Sam Bacon created a new Trip Budget May 25th Lucio Iallo checked out a Trip Budget Kim Abercrombie created a new Personal Expense Sagiv Hadaya commented on a Summary Report May 27th Lucio Iallo committed a Trip Budget Kim Abercrombie created a new Summary Report Sagiv Hadaya commented on a Trip Budget June 2010 June 1st Sam Bacon created a new Personal Expense Lucio Iallo deleted several Summary Report artefacts June 9th Lucio Iallo checked out a Trip Budget Kim Abercrombie created a new Personal Expense Sagiv Hadaya commented on a Summary Report June 15th Lucio Iallo committed a Trip Budget Kim Abercrombie created a new Summary Report Sagiv Hadaya commented on a Trip Budget ALL APPLICATION FINANACE SUITE CONTOSO TRIP PLANNER ALL USER SALES TEAM Sam Bacon Trip Budget Sagiv Hadaya Personal Expense Summary Report Kim Abercrombie CREATING VIEWING MANAGING Lucio Iallo COMMENTING WIKI

39. Focusing on specific application May 2010 May 1st Sam Bacon created a new Personal Expense Lucio Iallo deleted several Summary Report artefacts May 9th Lucio Iallo checked out a Trip Budget Kim Abercrombie created a new Personal Expense Sagiv Hadaya commented on a Summary Report May 15th Lucio Iallo committed a Trip Budget Kim Abercrombie created a new Summary Report Sagiv Hadaya commented on a Trip Budget May 21st Sam Bacon made a wiki page about Personal Expense Sam Bacon created a new Summary Report Sam Bacon created a new Personal Expense Sam Bacon created a new Trip Budget May 25th Lucio Iallo checked out a Trip Budget Kim Abercrombie created a new Personal Expense Sagiv Hadaya commented on a Summary Report May 27th Lucio Iallo committed a Trip Budget Kim Abercrombie created a new Summary Report Sagiv Hadaya commented on a Trip Budget June 2010 June 1st Sam Bacon created a new Personal Expense Lucio Iallo deleted several Summary Report artefacts June 9th Lucio Iallo checked out a Trip Budget Kim Abercrombie created a new Personal Expense Sagiv Hadaya commented on a Summary Report June 15th Lucio Iallo committed a Trip Budget Kim Abercrombie created a new Summary Report Sagiv Hadaya commented on a Trip Budget ALL APPLICATION FINANACE SUITE CONTOSO TRIP PLANNER ALL USER SALES TEAM FINANCE SUITE > CONTOSO TRIP PLANNER Trip Budget > create in Contoso Trip Planner Trip Budget is an artefact that shows how much budget is left for the team and each individuals. Especially for sales team members, blahblah... USAGE PATTERN STATISTICS WIKI Top Users Popular Activities Lucio Iallo CREATING 6 VIEWING 63 Sam Bacon MANAGING 43 Kim Abercrombie COMMENTING 12 WIKI Jim Halpert 4 No Name No Name Resources Server Utilization Power Consumption

40. Focusing on specific application May 2010 May 1st Sam Bacon created a new Personal Expense Lucio Iallo deleted several Summary Report artefacts May 9th Lucio Iallo checked out a Trip Budget Kim Abercrombie created a new Personal Expense Sagiv Hadaya commented on a Summary Report May 15th Lucio Iallo committed a Trip Budget Kim Abercrombie created a new Summary Report Sagiv Hadaya commented on a Trip Budget May 21st Sam Bacon made a wiki page about Personal Expense Sam Bacon created a new Summary Report Sam Bacon created a new Personal Expense Sam Bacon created a new Trip Budget May 25th Lucio Iallo checked out a Trip Budget Kim Abercrombie created a new Personal Expense Sagiv Hadaya commented on a Summary Report May 27th Lucio Iallo committed a Trip Budget Kim Abercrombie created a new Summary Report Sagiv Hadaya commented on a Trip Budget June 2010 June 1st Sam Bacon created a new Personal Expense Lucio Iallo deleted several Summary Report artefacts June 9th Lucio Iallo checked out a Trip Budget Kim Abercrombie created a new Personal Expense Sagiv Hadaya commented on a Summary Report June 15th Lucio Iallo committed a Trip Budget Kim Abercrombie created a new Summary Report Sagiv Hadaya commented on a Trip Budget ALL APPLICATION FINANACE SUITE CONTOSO TRIP PLANNER ALL USER SALES TEAM FINANCE SUITE > CONTOSO TRIP PLANNER Trip Budget > create in Contoso Trip Planner Trip Budget is an artefact that shows how much budget is left for the team and each individuals. Especially for sales team members, blahblah... USAGE PATTERN STATISTICS WIKI Popular Usage pattern 165 (32%) Trip Budget 130 (28%) Trip Budget> Personal Expense 75 (16%)(Customer List , Trip Budget) > Personal Expense 42 (8%) (Web Excel, Customer List) > Trip Budget 8 (2%) Personal Expense > Trip Budget 2 (0.5%)Trip Budget > Personal Expense > Summary Report Best Match People use Trip Budget with artifacts below. Personal Expense in FINANCE SUITE > CONTOSO TRIP PLANNER (50%) MS WEB OFFICE EXCEL in App Fabric Toolbox (8%) Customer List in CUSTOMER DATABASE (8%)

41. Focusing on specific user May 2010 May 1st Sam Bacon created a new Personal Expense Lucio Iallo deleted several Summary Report artefacts May 9th Lucio Iallo checked out a Trip Budget Kim Abercrombie created a new Personal Expense Sagiv Hadaya commented on a Summary Report May 15th Lucio Iallo committed a Trip Budget Kim Abercrombie created a new Summary Report Sagiv Hadaya commented on a Trip Budget May 21st Sam Bacon made a wiki page about Personal Expense Sam Bacon created a new Summary Report Sam Bacon created a new Personal Expense Sam Bacon created a new Trip Budget May 25th Lucio Iallo checked out a Trip Budget Kim Abercrombie created a new Personal Expense Sagiv Hadaya commented on a Summary Report May 27th Lucio Iallo committed a Trip Budget Kim Abercrombie created a new Summary Report Sagiv Hadaya commented on a Trip Budget June 2010 June 1st Sam Bacon created a new Personal Expense Lucio Iallo deleted several Summary Report artefacts June 9th Lucio Iallo checked out a Trip Budget Kim Abercrombie created a new Personal Expense Sagiv Hadaya commented on a Summary Report June 15th Lucio Iallo committed a Trip Budget Kim Abercrombie created a new Summary Report Sagiv Hadaya commented on a Trip Budget ALL APPLICATION FINANACE SUITE CONTOSO TRIP PLANNER ALL USER SALES TEAM  Regional Sales Assistant Sam Bacon CREATING 12 72% VIEWING 20 42% MANAGING 3 5% COMMENTING 2 3% WIKI 0 0% Focus on Sam Bacon’s activity Favorite Artefacts Personal Expense (CREATE) 68% Trip Budget (MANAGE) 23% Summary Report (CREATE) 3% Sam Bacon Trip Budget Sagiv Hadaya Personal Expense contact organization activity summary Summary Report Kim Abercrombie CREATING VIEWING MANAGING Lucio Iallo COMMENTING WIKI

43. Trace the document history

44. Show creation activities onlySam Bacon Sagiv Hadaya Summary Report CREATING VIEWING MANAGING COMMENTING WIKI

45. Focusing on specific document  ALL APPLICATION FINANACE SUITE CONTOSO TRIP PLANNER Trip Budget _ Sales trip to South Korea_100… ALL USER SALES TEAM Sam Bacon  Show related documents as well Tracing activites arount ‘Trip Budget_Sales trip to South Korea 052910’ May 21th Sam Bacon created a new Trip Budget based on Regional Custormer document. May 25th Lucio Iallo viewed it. Lucio Iallo commentedon it. (5 similar activities) Sagiv Hadaya commented on a Trip Budget June 5th Sam Bacon edited it. Sam Bacon created a Personal Expense based on it. Kim Abercrombie created a new Summary Report based on 3 documents including it. June 6th Lucio Iallo vieweda Summary Report. Regional Customer List Sagiv Hadaya Sam Bacon Trip Budget Lucio Iallo Personal Expense Summary Report Kim Abercrombie CREATING VIEWING MANAGING COMMENTING WIKI

46. DEMO TIME

47. Discussion Is the map even needed? As an actual feature for end-users, may be not. But as a framework supporting routes and sign post design, definitely yes. The prototype looks pretty… but it doesn’t really make any sense. That’s the dillema of information visualization. If you’re not involved in small data points, the big picture hardly make sense. Users must be able to match and compensate the visualization with imaginary maps in their mind. To be fair, we should collect real usage log from a running application platform. Any crazier idea not shown here? …

48. Appendix. 0. Goal Definition Context > Interaction > Product 1. Taxonomy formfactors and tasks of app fabric UI 2. Wireframe design app fabric UI 3. Contribution

49. Appendix 0. Goal Definition Context > Interaction > Product When everything is in the cloud… User can call any document or functionality whenever needed without carrying them around. File management and software installation cost are minimized, and user’s task becomes more productive. User overload Web browser is already filled up with multiple-levels of tab interface. An additional layer of functionality should make sense to users intuitively.

50. Appendix 0. Goal Definition Context > Interaction > Product Emersive The interaction gradually fills up the gap between custom app capabilities and user’s workload. Subtle Intervention Almost invisible when not being used, proactively getting ready according to the context

51. Appendix 0. Goal Definition Context > Interaction > Product Simplicity The fabric minimizes configuration work on Apps, reuses existing solutions as possible. Flexible yet Consistent The fabric fits itself on different set of needs from different apps while keeping its consistency. Adaptation The fabric is NOT wrinkle-free. It remembers user’s past behavior and be ready to serve it better next time. While being used, the fabric accumulates indispensable user-generated data. Duality The fabric should be attached to App interfaces well so that users would feel them as two faces of one body.

52. Appendix 1. Taxonomy App<->Tool Interactivity Information Capacity Level of Contextuality Unlimited Very week (opening time only) New Tab/Page Object Peel-off Moderate (opening time and later[but limited]) Flexible (depends on the portion peeled-off) Side bar Page Docking panel Strong (can stay open and show dynamic information while interacting with the app) Moderate Side panel App Floating panel Limited (bigger glass will reduce app functionality) Very Strong (shows contextual info / function based on mouse cursor movement) Magnifying glass User

53. Appendix 1. Taxonomy specific ADVANCED SEARCH similar documents Object STANDARD Import Export Reports Page Level of Context FORUM Usage History KEYWORD SEARCH within Page/App WIKI HELP App MY SITE User broad

54. Appendix 1. Taxonomy New Tab/Page Peel-off Floating panel Magnifying glass Docking panel Side bar Side panel Information capacity Interactivity Development cost Level of context Object Page User App FORUM / WIKI / HELP My site Import / Export / Report Features suitable for each form-factor Favorite tools Search within… Search related by… Snapshots

55. DESIGN > Concept Appendix 2. Wireframe design Design Concept. 1. Context-sensitive Side panel Handle of minimized panel is always placed at the center of right/bottom side

56. DESIGN > Concept Appendix 2. Wireframe design Design Concept. 1. Context-sensitive Side panel Wiki MSExpense / Report Confirmation Information/Action linked to specific object (e.g. data source linked to table) are shown as tiny circles at the right side. Color represent different types (report/wiki/forum/…) Mouse hovering exposes more detail of the circle. Data Source Expense report_3005687757 Forum Where do I send my receipts? 1 replies Data Source Personal Expense 11/2008 Reporting Personal Expense 11/2008

57. DESIGN > Concept Appendix 2. Wireframe design Design Concept. 1. Context-sensitive Side panel When the panel is first pulled-out, it retrieves items relevant to this page. search Panel can be docked at right / bottom side of the app.

67. Appendix 2. Wireframe design SALES TRIP PLANNER May 2010 May 1st Dan Bacon created a new Personal Expense May 9th Lucio Iallo checked out a Trip Budget file made by Dan Bacon. Kim Absercrombie created a new Personal Expense May 9th Lucio Iallo checked out a Trip Budget file made by Dan Bacon. Kim Absercrombie created a new Personal Expense May 9th Lucio Iallo checked out a Trip Budget file made by Dan Bacon. Kim Absercrombie created a new Personal Expense June 2010 May 1st Dan Bacon created a new Personal Expense May 9th Lucio Iallo checked out a Trip Budget file made by Dan Bacon. Kim Absercrombie created a new Personal Expense May 9th Lucio Iallo checked out a Trip Budget file made by Dan Bacon. Kim Absercrombie created a new Personal Expense Dan Bacon Name Name Name Name Name Name Name Trip Budget Summary Report Personal Expense

68. Appendix 2. Wireframe design Relation Formula Filter ARTIFACT used by used by expense expense any finance. any artifact USAGE FREQUENCY TIME TYPE EDIT VIEW SAVE EXPORT USER My team me my team Everyone View mode 2008 2009 2010

69. Appendix 2. Wireframe design < usage > <APP NAME HERE> Relation Formula View mode same as Aa123 Aa123 Scranton sales report FY2010 TRIP Scranton sales report FY2010 TRIP Connectivity options Filter options Aa123 2008 2009 2010

71. Applications developed on a platform containing this type of experience would instantly gain the benefits of insight driven exploration and typical task wayfinding being attached to any application (corporate or self-service)