• Save
Interface project dejavu_3
Upcoming SlideShare
Loading in...5
×
 

Interface project dejavu_3

on

  • 522 views

 

Statistics

Views

Total Views
522
Views on SlideShare
522
Embed Views
0

Actions

Likes
0
Downloads
0
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • Thanks for coming to my final presentation of summer internship. I had three tasks - brownbag session, report gallery v2 and this déjà vu conceptual UI design.
  • The main theme of this project was “user experience fabric” which is underlying all the custom applications and provides common capabilities ranging from simple copy&paste functionality to sophisticated wiki or usage forum page. Identifying user’s needs and designing how they would understand and interact with the fabric was the goal of this project.
  • Let’s take a look at a general IW tasks process. Supposing a user has a goal and a task consists of multiple applications to get to the goal. Like this. Each of these pieces could be ‘filing an expense report’, …
  • Although it looks straightforward, there are friction points along the task.
  • But common software experience
  • Possible common functionalities
  • Three levels of wayfinding objects. Each has different roles. No definitive way to draw an overview of App space The only way is generating it based on usage log
  • We‘re gonna start from sign post, the simplest case. Usually the goal of sign posts are offering supports for a single task, by adding directions and trails to the other functionalities. Hyperlinks and Direct information are examples.
  • Here’s the user scenario. Paul has his goal to file his expense in the personal expense app. It has the essential feature, but not flexible enough for putting multiple expense records quickly. So he wants to find a better way. Maybe wiki page can help. UX fabric provides a shortcut to the wiki page related to any current situation.
  • Now he knows that he can directly edit the submission form. However, downloading and opening it in PC is somewhat bothersome. UX fabric adds direct links to other apps matching with the document type. In this case Paul opens the form in Web office Excel. After completing the form, he can directly submit it to Personal Expense app where the document came from.
  • Now it’s done. Thanks to sign posts in UX fabric, Paul could easily use two Apps in combination with less friction.
  • Sign posts are simple and useful, but people often need something for more complex tasks. For example, (start animation) by searching document user can find an app he’s looking for. Then he wants to combine documents from two apps into one in adhoc report maker through a UX fabric showing recently viewed documents. The document result can be shared with others through another common functionality. Wiki or Forum can give this route as step-by-step instruction.
  • some side works have been done as well. For example, I explored possible UI formfactors for benchmarking. They are in the appendix of this deck.
  • A simple wireframe design of signposts and route support has been developed too.
  • Now we’re at the most interesting part – Map, the Overview of user’s activity on all the apps. There are two goals of using an activity map. The first one is for IT pros or managers who are intersted in the overview of how people work with apps. The second goal is for an information worker who actually uses a subset of the apps. He might be interested in other users’ tribal knowledge related to his current task. These two goals are achieved by visualizing usage log as an overview or a snapshot filtered by user,document and time. The visualization might have network diagram of force-directed layout with some animation.
  • This background scenario focuses on the second goal – getting tribal knowledge from other information workers who did the similar jobs as mine. So, Tim is trying to ramp up to Sam’s level of productivity quickly. He has a lunch with Sam, learned many things about Sam’s work. However, one hour talk wouldn’t be enough for it.
  • Fortunately for Tim, user experience fabric provides several artifacts showing Sam’s activity which are very useful for Tim. Wiki, Forum and Sam’s Artifact list are useful, but best of all,

Interface project dejavu_3 Interface project dejavu_3 Presentation Transcript

  • Conceptual design/prototype of
    Déjà vu application interface
    2010 Summer Internship Project
    TakYeon Lee
    SQLUX
  • 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…
  • 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.”
  • 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
  • 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…
  • 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
  • BACKGROUND STUDY > EXAMPLES OF USER EXPERINCE FABRIC
    TACTICAL
    They support…
    Examples in UX Fabric
    SIGN POST
    • Decision-making with minimal cost
    • HYPERLINK
    • OPEN IN POWERPIVOT
    • SHARE
    • CLOSE
    ROUTE
    • PROCEDURAL GUIDE
    • Stepwise Planning
    • Linear Status check
    “WAYFINDING SUPPORT”
    START
    APP
    YOU ARE HERE
    APP
    GOAL
    APP
    MAP
    • Non-Linear Multi-variable Planning
    • Matching goal, resource and route
    • MULTIPLE-TASK OVERVIEW
    No generalized solution
    Non-Trivial problem domain
    STRATEGIC
  • 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 …
  • 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]
  • 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.
  • 6. Filing completed
    The Personal Expense app is updated with his new submission.
    web editor
    Open in …
    wiki
    Submit to…
    Personal
    Expense
  • 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]
  • 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.
  • 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.
  • 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
  • [side work] Benchmarking UI formfactors
    * For detail, see Appendix.
  • [side work] Wireframe design
    * For detail, see Appendix.
  • 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
  • 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…)
  • Fortunately for Tim, his company uses Microsoft’s as it Application Platform…
    • Sam wrote a few wiki articlesrelated to the company’s custom “Sales trip planner”application…
    • Tim can look for answers and ask questions in application discussionforums…
    • Tim can search for any document or application artifact Sam created or interacted with…
    But, best of all…
    • Tim can use the Activity Mapto fully understand how Sam worked with the application platform.
  • How the map would look like…
    SOCIAL NETWORK
    SHOWING TRENDS OVER TIME
    BASED ON ACTIVITY
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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%)
  • 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
  • Focusing on specific document
    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
    Sam bacon
    ALL USER
    SALES TEAM
    Sam Bacon
    Lucio Iallo
    Kim Abercrombie
    Trip Budget
    Personal Expense
    May 21st Friday 3:32pm
    Sam Baconcreateda new Trip Budget
    • Open the document
    • Trace the document history
    • Show creation activities only
    Sam Bacon
    Sagiv Hadaya
    Summary Report
    CREATING
    VIEWING
    MANAGING
    COMMENTING
    WIKI
  • 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
  • DEMO TIME
  • 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?

  • Appendix.
    0. Goal Definition Context > Interaction > Product
    1. Taxonomy formfactors and tasks of app fabric UI
    2. Wireframe design app fabric UI
    3. Contribution
  • 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.
  • 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
  • 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.
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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.
  • DESIGN > Concept
    Appendix 2. Wireframe design
    Design Concept.
    1. Context-sensitive Side panel
    search
    wiki
    • MS Expense
    • déjà vu
    Opens up a new page / tab for the link
    data source
    >> 2 public source found
    Data sources usually don’t have clear titles, but directly related to obj(tables/numbers) in the App. ‘show them’ inserts data source links after objects.
    forum
    • Where do I send my receipt?
    • FAQ
    Reporting
    • Personal Expense 11/2008
    Others
  • DESIGN > Concept
    Appendix 2. Wireframe design
    Design Concept.
    1. Context-sensitive Side panel
    MS Expense
    wiki
    Contacts:
    [edit]
    x
    x
    x
    x
    CC 1010 Corporate, CC 8000 MSNBC: PROHELP
    CC 1429 MSLI: MSLIFIN
    CC 1654 MOLC: MOLCFIN
    CC 1548 Microsoft Online, Inc: MOIFIN
    wiki
    Contents
    Contacts
    What’s New
    FAQ
    Where do I send my receipts?
    Anti-Corruption Policy
    About
    [edit]
    What’s New:
    [edit]
    As a reminder:All employees are responsible for awareness of Anti-Corruption policy requirements and are accountable for compliance with the requirements.  Failure to comply may lead to disciplinary action, up to and including termination.  The link to the policy is Anti-Corruption Policy. If an employee has a question about whether an expense is appropriate under the Anti-Corruption Policy, he or she should ask their manager, their Finance or LCA contact, or may contact the Anti-Corruption alias (ANTICPT) before incurring the expense.
    MS Expense - Amex(T&E):
    Frequently Asked Questions (FAQ)
    Where do I send my receipts?
    Please Note: fee-related charges may not contain a description. Please access your account online for additional fee descriptions. You can register for access through Manage your Card Account, which is the online cardholder tool at http://www.americanexpress.com/checkyourbill.
    MS Expense - Procard:
    search
    wiki
    • MS Expense
    • déjà vu
    data source
    >> 2 public source found
    top search terms
    TechEd
    January
    hotel
    morale event
    college recruiting
    x
    x
    x
    x
    x
    forum
    • Where do I send my receipt?
    • FAQ
    Reporting
    • Personal Expense 11/2008
    Others
  • DESIGN > Concept
    Appendix 2. Wireframe design
    Design Concept.
    1. Context-sensitive Side panel
    search
    wiki
    • MS Expense
    • déjà vu
    data source
    >> 2 public source found
    forum
    • Where do I send my receipt?
    • FAQ
    >> Data source : Expense report_3005687757
    Reporting
    • Personal Expense 11/2008
    Others
  • 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
  • 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
  • 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
  • Appendix 3. Contribution
    What’s the value to Microsoft of this kind of feature?
    • This experience is an example of how to deliver a structured search interface that allows both insight driven exploration and typical task wayfinding as a core platform workload
    • 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)
    • As an out-of-the-box/application platform capability, wayfinding features such as this activity explorer would be Microsoft-unique and highly differentiated experiences clearly demonstrating the depth and completeness of the Microsoft platform
  • This powerpoint document was made by Tak Yeon Lee as the final report of his summer internship at Microsoft under supervision of his mentor Patrick Baumgartner.
    Contact authors for further information
    Tak Yeon Lee : reflect9@gmail.com
    Patrick Baumgartner : patb@microsoft.com