Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

UXPA 2013 CARD: A Collaborative Tool for Rapid Task Analysis and Design

To create great design you need to understand how your users do their work. You can do that using CARD, a collaborative method that gets your team on the same page about your user's workflow. Apply it to desktop, web, or mobile apps. New to task analysis? Looking for new ways to collaborate with your developers? Or variations you can use with your work? This method is for you!

  • Login to see the comments

UXPA 2013 CARD: A Collaborative Tool for Rapid Task Analysis and Design

  1. 1. 1 Real-World CARD A Tool for Task Analysis & Design By Len Conte, Mark Ainscow, Debbie Cook, Stephen Reinach & Lissa Story Verify understanding of data from other packages in MATLAB T2 Gone outside boundary of current tool set T3 Has reached a pain threshold and needs to solve something T4 Developing an algorithm T6 Trying out MATLAB to see if it is satisfactory T7 Curious about some data T8 Triggers Boss has set a problem to solve T1 I do it in MATLAB because it‟s already open T21 Wing it! T15 Is the data in a local text file? Yes Other workflows not explored E.g. local binary, scanned from journal, live feed, etc. Also, problems specific to cell arrays not addressed START Open data in text editor Preprocess data (Optional) Copy from text editor, paste into MATLAB Google “MATLAB” and My File format Search DOC for correct read function Make fake (small) file with same format to test RESEARCH Choose proper import method for data format, content, size File -> Import Import wizard No Too Big? Yes Reduce size of file Out of memory error (graceful) Double-click on file in Current Directory Browser (MAT-file) T11 Appropriate “load” or “read” function TRY TO LOAD Use MATLAB tools for data-specific import process Can‟t right-click on file in Windows Explorer and get MATLAB-related functions Can‟t single-click import a file from the Editor Indications that load succeeded are easy to miss There is no indication that the load result is useful No “Load” fails (ok) but doesn‟t suggest alternatives (bad) Data loads? Header rows in text file which are not labels (metadata) Data type of imported data does not match type in file Yes *Search Doc for file suffixes *Tools directory for importers Go back to “Research” MATLAB doesn‟t crash – data is visible somewhere in MATLAB for checking Progress bar or spinning icon for confirmation Open imported arrays in array editor At some point you have to start and see what goes wrong Weak date support – no “date” data type WHOS, etc. in command window Inspect in Import Wizard, Array Editor, Workspace Browser CHECK DATA Correlate data in file with variables and strings in MATLAB Excel shows immediately and directly what was imported – MATLAB doesn‟t Checking imported data against file may require multiple tools *Hard to examine edges of large data sets (e.g. four corners of matrix) Data in MATLAB matches data in the file No Imported data correct(ed)? Yes Thumbnail views of data *Can‟t do simple visualization transforms in GUI – transpose, log, etc. *Tools for examining 3D data (sliders, slices) DATA (numbers) is properly loaded and plottable G3 Correct data “by hand” Go back to “Research” Metadata handled? Create and name variables in Array Editor METADATA Manage labels, notes, odd data types Name variables in Import Wizard, Workspace browser, Command line No provision for metadata (notes, etc) Use Scribe and labeling (later) Punt Metadata No Yes MAKE DATA PLOTTABLE Is the correctly imported data complete and plottable? Find NaNs and deal with them *Examine corners of data, look for gaps, same number of crows throughout, etc. Checking :>2D data a special problem Spreadsheet type editing of numerical data Metadata in MATLAB matches data in the file Metadata loaded and plottable G3 Two vectors are incommensurate >> plot(x,y) (command line) MAKE DATA “VISUAL” Create a new figure – launch plot tools Plot from Workspace Browser Go to Help on “plot” or “graph” Preconceived Idea or standard format T16, 17, 18, 19 Plot Picker(s) All data and labels plot? No way, dude Yes All necessary data and labels are in working figure Figure is ready for analysis G4 *Plot looks wrong, but it is right (distorted by outlier) Plotting labels on x axis is problematic *Hard to get data from a plot – no single point *Highlight single data item in plot and edit it Change scaling DOC and Help Demos and examples Numbers are right? Spreadsheet type editing of numerical data Processing with functions in command window Transform the data Remove outliers Review problem statement SHOW OFF THE DATA Do the numbers fit the plot? FIND AND TRY BETTER PLOT TYPES Reconsider data Yes No Plot picker(s) Change plot Plot adequately shows data? Try another Yes No All necessary data correctly represented in the plot *Transform data by reorganizing it instead of reducing or throwing data away G10 *Segregate noise G11 Data and labels are workable for analysis purposes Data is adequately visualized G7 So many plots, so little time Hard to find Plot Picker(s) *Switching families of displays is a short mental step, but a long process Frustrating number of iterations It‟s hard to know what the best is when you haven‟t seen it yet Replot from command line or picker SHOW THE SOLUTION Work with the data view to understand and explain the data Zoom and/or Pan Data tips Ginput Figure Property Editor Change View (Camera Toolbar) Get smaller subset or known data to work with Right View for understanding? No Yes Back to change the plot Really bad Review problem statement Is data within acceptable parameters? T10 Does Data match hypothesis? T9 Many modes for exploration Zoom and pan at the same time? How bad is it? Not so bad Plot Tools Command line Inspector Figure Toolbar LET ME COUNT THE WAYS TO WORK WITH THE PLOT Which tool should I use? Do they work together? Need to add explanations to data T19 Concerned with the appearance of the data T22 LEGEND AND COLORBAR Add legend and colorbar first so they don‟t mess up your plot later Add legend and/or colorbar Scribe ADDING WORDS Lay in the details of the message Add data to plot (commands to script) title, labels, dataticks, etc. Inserting annotation starts plot edit mode Start Plot Edit Mode Data Tips MOVING THINGS AROUND Organize for presentation Align figure and legend Align multiple figures Change View (Camera Toolbar) Commands expect HG proficiency Writing formatting code is HARD Text formatting is hard (subscript, superscript) *Log x-axis superscripts hard to read on MAC *Did not know about “Latek” It isn‟t obvious how to add Greek or scientific symbols to the text *Can‟t easily reset variables to colormap Plot Edit mode is hard to find It‟s still easier toi annotate in another application *No minimal, light grey (one pixel) gridlines *Polar plots!!! Equation editor like MS Word *Function to convert a colordef to line handles *Mouse down on line to convert color on it from list *No group legend (x legend entries with y lines each) *Not obvious you can edit legend text directly *Must do legends first because they dominate space Legends cannot be mxn *The manner in which we use handles within legends has changed in the last three releases *There are different modes of access to MATLAB figures, but only the first is obvious Message is clear? No Yes Communicate effectively to Boss G6 Tufte smiles G12 Looks professional G14 SAVE Next? AUTOMATION Unexplored Export or Print Needs to insert info into a document T5 Need data in an electronic format T20 Build something to do the same thing tomorrow G9 Generate M-code Edit/Save script until it works Code replicates the plot? Running a script? Not everything can be automated Lock Legend – Plot distance Don‟t know how big is too big until you fail Data is in MATLAB G1 No way to tie metadata to data Data plottable? Fig-file T12 Back to “research” Yes No Data is ready for presentation treatment Understand and accept the data G8 Camera Toolbar Unexplored workflow (Moving to another application) Unexplored Workflow (Exporting and Printing) Punt automation Automation doesn‟t offer the options I want Automated input code doesn‟t link up with automated figure code Unexplored workflow (Cut, copy, paste) Reconsider data Can‟t set defaults for new figures (e.g. “box off” Get Raw Data Into MATLAB Check Data Against File Bring In Labels, Names, Notes First Shot at a Plot Clean the Data Manipulate and Explore the Data Dress and Display the Data Get the Plot Out Yes Yes Yes No Automate Collaborative Analysis of Requirements for Design
  2. 2. 2 What Will We Do? Time Section 9:00 Introduction 9:20 Create a current workflow 10:30 Break 11:00 Create a current workflow (cont.) 12:30 Lunch 1:45 Create a future workflow 3:00 Break 3:30 Create a future workflow (cont.) 4:15 Share success story 4:45 Plan for CARD
  3. 3. 3 Why Care about CARD?  Get team on same page – consensus and shared understanding  Generate task analyses  Generate workflows  Clarify/generate requirements  Generate idea/vision of future projects  Prioritize features and requirements  Find issues that fall between the „cracks‟  Help get you to a design
  4. 4. 4 What Will You Learn? You‟ll learn to:  Use a task analysis tool called CARD  Apply best practices when using CARD  Identify when to use CARD and its variations
  5. 5. 5 What is „Task Analysis‟? An information gathering technique that helps us: • Understand how users perform work to accomplish goals • Move from requirements (the what) to design (the how)
  6. 6. 6 What are Some Task Analysis Methods?
  7. 7. 7 How to Choose? Low Effort Rich Data Builds Consensus Visual Generates New Workflow Questionnaire X Interview X Contextual Inquiry X X Reality Map X X CARD: Big Picture X X X CARD: Current X X X CARD: Future X X X X
  8. 8. 8  A tool for performing task analysis or design where users and stakeholders, guided by a facilitator, collaborate in construction of workflows. What is CARD? I think I’d rather manage a large software development project.
  9. 9. 9 Using CARD to Get to a Design Yes Yes Yes No No No Research users & their goals Your Method Your Task Analysis Method Future Design Scenario Current WorkFlow Big Picture (optional) Bluesky (optional) Future Workflow BRIDGE (optional) Your Method Do you understand users and their goals? Do you understand current workflow? Do you want to use CARD to get to a design? System Under Design Wireframes, click-thrus, paper prototypes, sketches, workflow designs, API’s
  10. 10. 10 Current Workflow
  11. 11. 11 Using CARD to Get to a Design Yes Yes No No Current WorkFlow Big Picture (optional) Do you understand users and their goals? Do you understand current workflow? Your MethodResearch users & their goals Your Task Analysis MethodCurrent Workflow
  12. 12. 12 Travelocity - Car Rental: Scenario  User: Stephen, an infrequent traveler who loves a good online deal.  Goal: Stephen will be traveling to Pasadena, CA, to attend the Tournament of Roses Parade Jan 1, 2014. He needs to rent a car while he is out there on vacation.  Task: Find the best rental car deal possible using discounts available to him. He has an Avis discount # and is also a AAA member.
  13. 13. 13 Travelocity - Car Rental: Video
  14. 14. 14 Anatomy of a Current Workflow Solution Task Pain Decision GoalDecisionTask SolutionPain Goal Time
  15. 15. 15 Travelocity - Car Rental: Constructing the Flow  User: Stephen, an infrequent traveler who loves a good online deal.  Goal: Stephen will be traveling to Pasadena, CA, to attend the Tournament of Roses Parade Jan 1, 2014. He needs to rent a car while he is out there on vacation.  Task: Find the best rental car deal possible using discounts available to him. He has an Avis discount # and is also a AAA member.
  16. 16. 16 Break
  17. 17. 17 Travelocity - Car Rental: Validate the flow  Pick someone to walk through the flow as „user‟ – Make sense? Everything covered?  Add phases and a title
  18. 18. 18 Travelocity - Car Rental: Debrief: Creating a Current Workflow  Doing – How‟d it go? – What did you find challenging? Easy? Puzzling?  Facilitation – What did you notice about our facilitating?
  19. 19. 19 Anatomy of a Current Workflow Title Phase/Activity Solution Task Pain Connection Decision Goal Double Box
  20. 20. 20 Supporting Materials (Optional)  Agenda  Ground rules  Description of target users  Scenario  Out of scope  Terminology  Legend  Parking Lot
  21. 21. 21 Who is Involved?  Participants – Real or surrogate users  Facilitator – Leads the activity  Sponsor (optional) – Champion  Observers (optional) – Role is similar to an observer at a usability session
  22. 22. 22 Why use CARD?  Provides visual model of the current work – Helps you see bottlenecks and other puddles of pain – Helps you see the length of the flow and its phases – Helps you see decision points  Collaborative  Creates buy-in  Scales to larger more complex workflows – Multi-user/swim lanes – Accommodates branching  Captures solutions
  23. 23. 23 Current Workflow: What Are Some Variations?  If you are familiar with the flow, you create it and validate it with the team.  Create current flows one on one with key participants. You do the consolidation.  Time box the activity (60 minutes)  Save time by having participants brainstorm tasks ahead of time.  Create the current flow on the whiteboard (no cards, no paper, no problem) Just do it!
  24. 24. 24 Lunch!
  25. 25. 25 Future Workflow
  26. 26. 26 No Research users and their goals Yes Yes Using CARD to Get to a Design Do you understand users and their goals? Yes No Your Method Use Cases Current WorkFlow Big Picture (optional)Current Workflow Could you use CARD to get to a design? Future Workflow Bluesky (optional)Future Workflow Do you understand current workflow?
  27. 27. 27 Travelocity - Car Rental: Create a Future Workflow 1. Individually brainstorm steps for a new future flow 2. At your tables as a group, construct a future workflow
  28. 28. 28 Break
  29. 29. 29 Travelocity - Car Rental: Create a Future Workflow (cont.) construct a future flow continued 3. Verify the new flow 4. Walk through the future flow (as the user) – Compare to your current flow  Did some (or all) of the pains go away?  Were any of the solutions incorporated into your workflow?
  30. 30. 30 Travelocity - Car Rental: Debrief: Creating a Future Workflow  How‟d it go? – What did you find challenging? Easy? Puzzling?  Facilitation – Was there anything different about our facilitation that you noticed?
  31. 31. 31 Travelocity - Car Rental: Debrief: Creating a Future Workflow  Future = Something you can build = „to be‟  Contrast with current workflow – Fewer pains – Shorter flow – Incorporates some solutions from current flow  You may still have solutions left over – Constraints may still exist  Facilitation Verify understanding of data from other packages in MATLAB T2 Gone outside boundary of current tool set T3 Has reached a pain threshold and needs to solve something T4 Developing an algorithm T6 Trying out MATLAB to see if it is satisfactory T7 Curious about some data T8 Triggers Boss has set a problem to solve T1 I do it in MATLAB because it‟s already open T21 Wing it! T15 Is the data in a local text file? Yes Other workflows not explored E.g. local binary, scanned from journal, live feed, etc. Also, problems specific to cell arrays not addressed START Open data in text editor Preprocess data (Optional) Copy from text editor, paste into MATLAB Google “MATLAB” and My File format Search DOC for correct read function Make fake (small) file with same format to test RESEARCH Choose proper import method for data format, content, size File -> Import Import wizard No Too Big? Yes Reduce size of file Out of memory error (graceful) Double-click on file in Current Directory Browser (MAT-file) T11 Appropriate “load” or “read” function TRY TO LOAD Use MATLAB tools for data-specific import process Can‟t right-click on file in Windows Explorer and get MATLAB-related functions Can‟t single-click import a file from the Editor Indications that load succeeded are easy to miss There is no indication that the load result is useful No “Load” fails (ok) but doesn‟t suggest alternatives (bad) Data loads? Header rows in text file which are not labels (metadata) Data type of imported data does not match type in file Yes *Search Doc for file suffixes *Tools directory for importers Go back to “Research” MATLAB doesn‟t crash – data is visible somewhere in MATLAB for checking Progress bar or spinning icon for confirmation Open imported arrays in array editor At some point you have to start and see what goes wrong Weak date support – no “date” data type WHOS, etc. in command window Inspect in Import Wizard, Array Editor, Workspace Browser CHECK DATA Correlate data in file with variables and strings in MATLAB Excel shows immediately and directly what was imported – MATLAB doesn‟t Checking imported data against file may require multiple tools *Hard to examine edges of large data sets (e.g. four corners of matrix) Data in MATLAB matches data in the file No Imported data correct(ed)? Yes Thumbnail views of data *Can‟t do simple visualization transforms in GUI – transpose, log, etc. *Tools for examining 3D data (sliders, slices) DATA (numbers) is properly loaded and plottable G3 Correct data “by hand” Go back to “Research” Metadata handled? Create and name variables in Array Editor METADATA Manage labels, notes, odd data types Name variables in Import Wizard, Workspace browser, Command line No provision for metadata (notes, etc) Use Scribe and labeling (later) Punt Metadata No Yes MAKE DATA PLOTTABLE Is the correctly imported data complete and plottable? Find NaNs and deal with them *Examine corners of data, look for gaps, same number of crows throughout, etc. Checking :>2D data a special problem Spreadsheet type editing of numerical data Metadata in MATLAB matches data in the file Metadata loaded and plottable G3 Two vectors are incommensurate >> plot(x,y) (command line) MAKE DATA “VISUAL” Create a new figure – launch plot tools Plot from Workspace Browser Go to Help on “plot” or “graph” Preconceived Idea or standard format T16, 17, 18, 19 Plot Picker(s) All data and labels plot? No way, dude Yes All necessary data and labels are in working figure Figure is ready for analysis G4 *Plot looks wrong, but it is right (distorted by outlier) Plotting labels on x axis is problematic *Hard to get data from a plot – no single point *Highlight single data item in plot and edit it Change scaling DOC and Help Demos and examples Numbers are right? Spreadsheet type editing of numerical data Processing with functions in command window Transform the data Remove outliers Review problem statement SHOW OFF THE DATA Do the numbers fit the plot? FIND AND TRY BETTER PLOT TYPES Reconsider data Yes No Plot picker(s) Change plot Plot adequately shows data? Try another Yes No All necessary data correctly represented in the plot *Transform data by reorganizing it instead of reducing or throwing data away G10 *Segregate noise G11 Data and labels are workable for analysis purposes Data is adequately visualized G7 So many plots, so little time Hard to find Plot Picker(s) *Switching families of displays is a short mental step, but a long process Frustrating number of iterations It‟s hard to know what the best is when you haven‟t seen it yet Replot from command line or picker SHOW THE SOLUTION Work with the data view to understand and explain the data Zoom and/or Pan Data tips Ginput Figure Property Editor Change View (Camera Toolbar) Get smaller subset or known data to work with Right View for understanding? No Yes Back to change the plot Really bad Review problem statement Is data within acceptable parameters? T10 Does Data match hypothesis? T9 Many modes for exploration Zoom and pan at the same time? How bad is it? Not so bad Plot Tools Command line Inspector Figure Toolbar LET ME COUNT THE WAYS TO WORK WITH THE PLOT Which tool should I use? Do they work together? Need to add explanations to data T19 Concerned with the appearance of the data T22 LEGEND AND COLORBAR Add legend and colorbar first so they don‟t mess up your plot later Add legend and/or colorbar Scribe ADDING WORDS Lay in the details of the message Add data to plot (commands to script) title, labels, dataticks, etc. Inserting annotation starts plot edit mode Start Plot Edit Mode Data Tips MOVING THINGS AROUND Organize for presentation Align figure and legend Align multiple figures Change View (Camera Toolbar) Commands expect HG proficiency Writing formatting code is HARD Text formatting is hard (subscript, superscript) *Log x-axis superscripts hard to read on MAC *Did not know about “Latek” It isn‟t obvious how to add Greek or scientific symbols to the text *Can‟t easily reset variables to colormap Plot Edit mode is hard to find It‟s still easier toi annotate in another application *No minimal, light grey (one pixel) gridlines *Polar plots!!! Equation editor like MS Word *Function to convert a colordef to line handles *Mouse down on line to convert color on it from list *No group legend (x legend entries with y lines each) *Not obvious you can edit legend text directly *Must do legends first because they dominate space Legends cannot be mxn *The manner in which we use handles within legends has changed in the last three releases *There are different modes of access to MATLAB figures, but only the first is obvious Message is clear? No Yes Communicate effectively to Boss G6 Tufte smiles G12 Looks professional G14 SAVE Next? AUTOMATION Unexplored Export or Print Needs to insert info into a document T5 Need data in an electronic format T20 Build something to do the same thing tomorrow G9 Generate M-code Edit/Save script until it works Code replicates the plot? Running a script? Not everything can be automated Lock Legend – Plot distance Don‟t know how big is too big until you fail Data is in MATLAB G1 No way to tie metadata to data Data plottable? Fig-file T12 Back to “research” Yes No Data is ready for presentation treatment Understand and accept the data G8 Camera Toolbar Unexplored workflow (Moving to another application) Unexplored Workflow (Exporting and Printing) Punt automation Automation doesn‟t offer the options I want Automated input code doesn‟t link up with automated figure code Unexplored workflow (Cut, copy, paste) Reconsider data Can‟t set defaults for new figures (e.g. “box off” Get Raw Data Into MATLAB Check Data Against File Bring In Labels, Names, Notes First Shot at a Plot Clean the Data Manipulate and Explore the Data Dress and Display the Data Get the Plot Out Yes Yes Yes No Automate Choose Data file from Current Directory Browser - Confirmation message - Progress bar - Better error handling Load preview to - Open in MATLAB - Make a guess on the file format and preview with suggested plot type Subsample large files for display and diagnostic purposes Data file Too Big? Will subsampled data do the job? Sheaf of solutions for oversize files Yes No Most recently used selected first for given data/file combinations (and plot)Smart Importing System tracks most frequently used, most recently used, and offer them preferentially Operations on paged (oversize) files in memory Data is in MATLAB G1 DATA (numbers) is properly loaded and plottable G3 Metadata loaded and plottable G3 Figure is ready for analysis G4 Augmented Import Tool Prioritize steps just taken for next use (mru, mfu with profile) Save a “profile” of he original file, and attach the importing steps Offer to save decisions made while importing a file Open variables created in workspace in Array Editor Offer to save imported data to a mat-file Offer to Save Everything Analysis routines elsewhere in MATLAB? Pass data to analysis module (Simulink, Stats tool, curve fitting, etc.) Use mru, mfu to suggest analysis modules Remember this path and this option Analyze Edit data in figure point-by point and by groups Replace original with transformed data and save both Yes No “Load” makes suggestions on failure *Data transformed by reorganizing it instead of reducing or throwing data away G10 *Noise segregated G11 Clean and Transform Data No Apply Simulink,Toolboxes, etc. Yes All data and metadata imported correctly and ready for analysis Check data in import wizard (all three views) Each file type requires a different “fixit” bag of tricks – lead user to them (e.g. allow importing data as smaller – non-double) type Flag and dump file names, column headers, case names, notes, etc. into metadata repository Allow user to collect catalog of (preferred) plots which are important to him Make a “date” data type Metadata repository Spreadsheet view – check numbers and labels Plot View – select best plot with plot picker view to scan and check data Text Editor – view for checking data against file Ability to collect lots of “profiles” from different users to selece/choose first load profiles Create Labels, etc., automatically from metadata Check all data and metadata Everything OK Data not importing correctly Plot not right for checking data Use mru, mfu to suggest import and plot preferences Data is “clean” - ready for observation and inference Live Plot Catalog Users add plots they have written, plots from MATLAB Central, etc. Winnows plot types by smarts about data, use history, and perhaps direct questions to user Thumbnails can be reasonable size if they are prioritized – less likely ones relegated to “More types” Click on one of a set of Thumbnail views to see preview of real data (like Excel) A hybrid figure window with choosing tools Users remove options they will never use – or designate favorites User chooses plot type and creates figure with plotted data and metadata Caveat: Thumbnails must be adequate size or they are useless. This puts a high priority on screening the large catalog so as to present a small group likely to contain the right plot well Supply relevant commands to command line Plot is suitable? No “Real” Thumbnails can be facilitated by a combination of background processing and immediately drawing users‟ (preliminary) selections Yes Live thumbnails can be confusing, inaccurate, error-prone, and confusing. Be careful Plot is for “telling a story” Plot is intended as part of a tool for downstream users e.g. building in the Slice-O-Matic (Unexplored) No Yes Zeigen und Reden (Show) Combine several Camera Toolbar modes into a scene view mode (Google Earth) Combine pan, zoom, rotate into a single explore mode Think about keeping modes as orthogonal as possible. If users want two modes at once, perhaps we need one mode with a property or a minor mode Camera toolbar is half about exploring and half about appearance One annotation mode that brings up a palette with arrow, double arrow, text, etc – these become sub-modes Data-space annotations Combine data cursors with other annotations Refactor text annotation More work needed on Legend – extra session for legend planned Metadata
  32. 32. 32 Who is Involved?  Participants – Real or surrogate users – Other team members  Facilitator – Leads the activity  Sponsor (optional)  Observers (optional) How Many Participants? • Optimal 3-5 - no more than 6
  33. 33. 33 Why Use CARD to Create a Future Workflow?  Provides a visual model of it – Helps you see newly arranged tasks – Helps you see the length of the new flow and its phases – Leverages solutions from current workflow  Collaborative  Creates buy-in  Validates that important pains have been solved  Helps generate requirements grounded in a “future vision”  Scales from small to large workflows
  34. 34. 34 Future Workflow: What are some Variations?  Focus on the “happy path”  Use a small group (1-3 participants)  Time box the activity (60 minutes)  Do it 1 on 1 with customer surrogates then validate with others
  35. 35. 35 Using CARD to Get to a Design Yes Yes Yes No No No Research users and their goals Future Design Scenarios Your Method Your Task Analysis Method Current Workflow Big Picture (optional) Bluesky (optional) Future Workflow BRIDGE (optional) Do you understand users, roles and goals? Do you understand current workflow? Big Picture (optional) Bluesky (optional) BRIDGE (optional) Could you use CARD to get to a design? Design Wireframes, click-thrus, paper prototypes, sketches, design cases, API’s
  36. 36. 36 CARD Case Study - EZDeploy
  37. 37. 37 Overview of the Builder Product JavaTM Application Wrapper MATLAB Code Bloated Library File
  38. 38. 38 Overview of the Builder Product Java TM Application Wrapper MATLAB Code Bloated Library File
  39. 39. 39 Overview of the Builder Product Enterprise Application Wrapper MATLAB Code Bloated Library File
  40. 40. 40
  41. 41. 41
  42. 42. 42
  43. 43. 43
  44. 44. 44
  45. 45. 45 The Plan Produce a current workflow…
  46. 46. 46 Who was Involved?  Participants – Selected customers who had called our technical support team (2) – Advanced support team (2)  Facilitator – UXer (1)  Sponsor – Development Lead (1)  Observers – Developers (~3) – Validation Team (~2) – Documentation Writer (1)
  47. 47. 47 Current workflow
  48. 48. 48 Immediate Results  Pain problem areas were identified as puddles of pink  The facilitators and internal surrogates worked with the customers to explore problem areas
  49. 49. 49 Immediate Results  The team (observers) enjoyed hearing the customers‟ perspective and were clamoring for more involvement  The team‟s beliefs were confirmed that the process involved the expertise of many types of users
  50. 50. 50 Immediate Results  Development team was able to identify quick fixes for areas of low hanging fruit
  51. 51. 51 What next?
  52. 52. 52
  53. 53. 53 The Next Phase - Construct the Future Workflow  Invited the same team as the current flow – But no customers (IP and Patent)  Developers participated in the design of the flow
  54. 54. 54 Future Workflow Builder Blue Sky Workflow – Configuration Segment Triggers Existing code base in C# or .NET Want to move something off my plate; give it to someone else Upgrade MATLAB Problem to solve - MATLAB by Design - MATLAB fastest route; high confidence Request to formalize or productize code. Specific examples include: -Move product from R&D to Manufacturing / commercialization - Request for prototype or proof of concept - Request for a solution or algorithm created in MATLAB Existing GUI that I want to turn into a Web application Add button to MATLAB IDE to evoke Deploytool. Show all the possible targets, then get the user to configure as necessary User pushes button on MATLAB IDE to start deploytool (user) Has deploytool already been configured (system) User selects which targets they would like to install (User) Check to see if Builder product is installed and bought Provide information with links in the doc etc to provide links Target may be a deployable CTF target. MathWorks Builder NE Acquisition process (User) Lots of manual steps, user needs to install the framework Does the user want to install the .NET framework? (User) Deploytool Guides User through installing .NET framework on their machine Let’s the user run preferences, and settings Probes system to give config options System will check configuration of machine to make sure all the components and files for .NET are installed User may not elect to install the framework. If the framework is not installed, the only deployable component will be the deployable CTF. Deploytool launches tests, system, runtime, verify, and config Did it pass the tests? Deploytool tells the user what is missing Go to A A Goals Machine configured with .NET framework Machine configured without .NET framework No No Yes Yes No User can create an “integration project” within the MATLAB IDE, or select an individual file to deploy (right mouse clicking or equivelent). User can select a target if in the integration project. Will only perform a bare syntax check during coding. Slightly different for different targets Selecting specific target will allow syntax check on M code if user wants to Triggers Existing code base in C# or .NET Want to move something off my plate; give it to someone else Upgrade MATLAB Problem to solve - MATLAB by Design - MATLAB fastest route; high confidence Request to formalize or productize code. Specific examples include: -Move product from R&D to Manufacturing / commercialization - Request for prototype or proof of concept - Request for a solution or algorithm created in MATLAB Existing GUI that I want to turn into a Web application User has written their code or has chosen the code they want to deploy. The code is arranged into an integration project. (User) User can create an “integration project” within the MATLAB IDE, or select an individual file to deploy (right mouse clicking or equivelent). Is the user creating a .NET assembly or generic CTF? (User) Create CTF (System) Assign M-Components to .NET classes (System) DepFun Licensing – Which M files deploy Which targets may wrap these M-Files Create the CTF? (System and user) Create CTF (System) DepFun Licensing – Which M files deploy Which targets may wrap these M-Files Under certain circumstances the CTF may not need to be created – e.g. If this is the second time around because a new target is specified. Create .NET Wrapper (System) Create Binary (System) .NET Assembly Yes No CTF Deployable .NET Assembly (and optional generic CTF component) CTF and Assembly packaged together Deployable generic CTF component Builder Blue Sky Workflow – MATLAB Programmer Segment The upper route will produce a generic CTF component only. It is thought that the person responsible for creating this will have no knowledge of .NET assemblies and will able to pass this component to the integrator. The integrator can then modify or edit the interface when they receive the component. No .NET framework needs to be installed and configured on the MATLAB programmer’s machine as the target is not specific. The only target available will be the generic CTF if no framework is installed. This route would be preferred by MATLAB programmers who have no experience with .NET The lower route will produce a .NET assembly and a generic CTF component if desired. It is thought that the person responsible for creating this will have a knowledge of the target language. Following this route is for the more expert programmer, and knows how to define the .NET interface within MATLAB. This would allow the user produce the .NET assembly that can be immediately incorporated into the enterprise model without modification. Deployable generic CTF component Deployable .NET Assembly (and optional generic CTF component) Does the integrator think that the interface is OK? Opens interface in GUI and makes changes as necessary GUI separate from MATLAB. Allows integrator to change interface as needed Create .NET Wrapper (System) Create Binary (System) No Yes The integrator can create any target, provided they have a MATLAB license for that target Integrate Assembly into enterprise system The lower route will produce a .NET assembly and a generic CTF component if desired. It is thought that the person responsible for creating this will have a knowledge of the target language. Following this route is for the more expert programmer, and knows how to define the .NET interface within MATLAB. This would allow the user produce the .NET assembly that can be immediately incorporated into the enterprise model without modification. The upper route will produce a generic CTF component only. It is thought that the person responsible for creating this will have no knowledge of .NET assemblies and will able to pass this component to the integrator. The integrator can then modify or edit the interface when they receive the component. No .NET framework needs to be installed and configured on the MATLAB programmer’s machine as the target is not specific. The only target available will be the generic CTF if no framework is installed. This route would be preferred by MATLAB programmers who have no experience with .NET Builder Blue Sky Workflow – Integrator Segment The integrator receives either Deployable CTF or .NET Assembly. It may be that in the case of the .NET Assembly, the Integrated assembly
  55. 55. 55 There was an Ah-Ha Moment  I have no idea what it was but the developers were really excited about it, and they were able to remove a chunk of the workflow which contained a lot of pink
  56. 56. 56 Customers tried to solve our problem for us… And the bloated library file? Size doesn‟t matter… We provided an automatic download in an installer for their customers… …believe it or not. “Make it smaller!” …and they were happy.
  57. 57. 57 Technical support set out on a project to understand and improve through root cause analysis (RCA) Before CARD… Our Previous Attempt at Dealing with Customer Support Calls
  58. 58. 58 Root Cause Analysis
  59. 59. 59  We had poorly defined categories  Our Root Cause Analysis method looked at one customer issue at a time  Which call were we supposed to pick? (~100/mo) Three Problems with Our Approach to Classifying Issues
  60. 60. 60 Our Categories Looked Like This… Flickr: jessicareeder
  61. 61. 61  “This was hard”  Lots of arguing about what was a category  Could something be in two categories?  Could the categories change?  “Why are we doing this?”  “I don‟t like you” Consequences of Our Process…
  62. 62. 62 Talked with the quality folks at MathWorks “Trouble organizing issues? Are you focusing on the evidence? Do you have a workflow?” Workflow? Did you say Workflow?? We Needed to Fix an Inefficient Process
  63. 63. 63 Why Categorize Against a Workflow? Workflows or other value stream maps provide a wonderful framework for categorizing evidence. Evidence tends to be less controversial.
  64. 64. 64 We Used CARD to Define Our Categories 1. Steps in the current flow became categories 2. Did it collaboratively with the development team to get buy in 3. Et voila! You have categories! Verify understanding of data from other packages in MATLAB T2 Gone outside boundary of current tool set T3 Has reached a pain threshold and needs to solve something T4 Developing an algorithm T6 Trying out MATLAB to see if it is satisfactory T7 Curious about some data T8 Triggers Boss has set a problem to solve T1 I do it in MATLAB because it‟s already open T21 Wing it! T15 Is the data in a local text file? Yes Other workflows not explored E.g. local binary, scanned from journal, live feed, etc. Also, problems specific to cell arrays not addressed START Open data in text editor Preprocess data (Optional) Copy from text editor, paste into MATLAB Google “MATLAB” and My File format Search DOC for correct read function Make fake (small) file with same format to test RESEARCH Choose proper import method for data format, content, size File -> Import Import wizard No Too Big? Yes Reduce size of file Out of memory error (graceful) Double-click on file in Current Directory Browser (MAT-file) T11 Appropriate “load” or “read” function TRY TO LOAD Use MATLAB tools for data-specific import process Can‟t right-click on file in Windows Explorer and get MATLAB-related functions Can‟t single-click import a file from the Editor Indications that load succeeded are easy to miss There is no indication that the load result is useful No “Load” fails (ok) but doesn‟t suggest alternatives (bad) Data loads? Header rows in text file which are not labels (metadata) Data type of imported data does not match type in file Yes *Search Doc for file suffixes *Tools directory for importers Go back to “Research” MATLAB doesn‟t crash – data is visible somewhere in MATLAB for checking Progress bar or spinning icon for confirmation Open imported arrays in array editor At some point you have to start and see what goes wrong Weak date support – no “date” data type WHOS, etc. in command window Inspect in Import Wizard, Array Editor, Workspace Browser CHECK DATA Correlate data in file with variables and strings in MATLAB Excel shows immediately and directly what was imported – MATLAB doesn‟t Checking imported data against file may require multiple tools *Hard to examine edges of large data sets (e.g. four corners of matrix) Data in MATLAB matches data in the file No Imported data correct(ed)? Yes Thumbnail views of data *Can‟t do simple visualization transforms in GUI – transpose, log, etc. *Tools for examining 3D data (sliders, slices) DATA (numbers) is properly loaded and plottable G3 Correct data “by hand” Go back to “Research” Metadata handled? Create and name variables in Array Editor METADATA Manage labels, notes, odd data types Name variables in Import Wizard, Workspace browser, Command line No provision for metadata (notes, etc) Use Scribe and labeling (later) Punt Metadata No Yes MAKE DATA PLOTTABLE Is the correctly imported data complete and plottable? Find NaNs and deal with them *Examine corners of data, look for gaps, same number of crows throughout, etc. Checking :>2D data a special problem Spreadsheet type editing of numerical data Metadata in MATLAB matches data in the file Metadata loaded and plottable G3 Two vectors are incommensurate >> plot(x,y) (command line) MAKE DATA “VISUAL” Create a new figure – launch plot tools Plot from Workspace Browser Go to Help on “plot” or “graph” Preconceived Idea or standard format T16, 17, 18, 19 Plot Picker(s) All data and labels plot? No way, dude Yes All necessary data and labels are in working figure Figure is ready for analysis G4 *Plot looks wrong, but it is right (distorted by outlier) Plotting labels on x axis is problematic *Hard to get data from a plot – no single point *Highlight single data item in plot and edit it Change scaling DOC and Help Demos and examples Numbers are right? Spreadsheet type editing of numerical data Processing with functions in command window Transform the data Remove outliers Review problem statement SHOW OFF THE DATA Do the numbers fit the plot? FIND AND TRY BETTER PLOT TYPES Reconsider data Yes No Plot picker(s) Change plot Plot adequately shows data? Try another Yes No All necessary data correctly represented in the plot *Transform data by reorganizing it instead of reducing or throwing data away G10 *Segregate noise G11 Data and labels are workable for analysis purposes Data is adequately visualized G7 So many plots, so little time Hard to find Plot Picker(s) *Switching families of displays is a short mental step, but a long process Frustrating number of iterations It‟s hard to know what the best is when you haven‟t seen it yet Replot from command line or picker SHOW THE SOLUTION Work with the data view to understand and explain the data Zoom and/or Pan Data tips Ginput Figure Property Editor Change View (Camera Toolbar) Get smaller subset or known data to work with Right View for understanding? No Yes Back to change the plot Really bad Review problem statement Is data within acceptable parameters? T10 Does Data match hypothesis? T9 Many modes for exploration Zoom and pan at the same time? How bad is it? Not so bad Plot Tools Command line Inspector Figure Toolbar LET ME COUNT THE WAYS TO WORK WITH THE PLOT Which tool should I use? Do they work together? Need to add explanations to data T19 Concerned with the appearance of the data T22 LEGEND AND COLORBAR Add legend and colorbar first so they don‟t mess up your plot later Add legend and/or colorbar Scribe ADDING WORDS Lay in the details of the message Add data to plot (commands to script) title, labels, dataticks, etc. Inserting annotation starts plot edit mode Start Plot Edit Mode Data Tips MOVING THINGS AROUND Organize for presentation Align figure and legend Align multiple figures Change View (Camera Toolbar) Commands expect HG proficiency Writing formatting code is HARD Text formatting is hard (subscript, superscript) *Log x-axis superscripts hard to read on MAC *Did not know about “Latek” It isn‟t obvious how to add Greek or scientific symbols to the text *Can‟t easily reset variables to colormap Plot Edit mode is hard to find It‟s still easier toi annotate in another application *No minimal, light grey (one pixel) gridlines *Polar plots!!! Equation editor like MS Word *Function to convert a colordef to line handles *Mouse down on line to convert color on it from list *No group legend (x legend entries with y lines each) *Not obvious you can edit legend text directly *Must do legends first because they dominate space Legends cannot be mxn *The manner in which we use handles within legends has changed in the last three releases *There are different modes of access to MATLAB figures, but only the first is obvious Message is clear? No Yes Communicate effectively to Boss G6 Tufte smiles G12 Looks professional G14 SAVE Next? AUTOMATION Unexplored Export or Print Needs to insert info into a document T5 Need data in an electronic format T20 Build something to do the same thing tomorrow G9 Generate M-code Edit/Save script until it works Code replicates the plot? Running a script? Not everything can be automated Lock Legend – Plot distance Don‟t know how big is too big until you fail Data is in MATLAB G1 No way to tie metadata to data Data plottable? Fig-file T12 Back to “research” Yes No Data is ready for presentation treatment Understand and accept the data G8 Camera Toolbar Unexplored workflow (Moving to another application) Unexplored Workflow (Exporting and Printing) Punt automation Automation doesn‟t offer the options I want Automated input code doesn‟t link up with automated figure code Unexplored workflow (Cut, copy, paste) Reconsider data Can‟t set defaults for new figures (e.g. “box off” Get Raw Data Into MATLAB Check Data Against File Bring In Labels, Names, Notes First Shot at a Plot Clean the Data Manipulate and Explore the Data Dress and Display the Data Get the Plot Out Yes Yes Yes No Automate
  65. 65. 65 How We Did it Looked at the first call Noted where in the workflow the user saw the issue Categorize it! Went to next call
  66. 66. 66 Resulting Graph
  67. 67. 67 Our Categorization Sessions…  Performed monthly  Lasted no longer than one hour  Categorized at a rate of 80-100 per hour
  68. 68. 68 Facilitation Challenges  Focus on the sole issue and where in the workflow, and nothing else  Facilitator had to watch the clock and come down on “discussion”  Development teams try to solve during the session. DON‟T LET THEM!
  69. 69. 69 How We‟ve Applied this Categorization Technique  Provided prioritization for enhancements – Have a good understanding of weak parts in the workflow  The enhancement effect – Visualize version specific graphs
  70. 70. 70 CARD‟s Impact on EZDeploy  EZDeploy goes live in six weeks  Provided us with a five year plan  The Deployment workflow was completely redesigned through CARD  Our future workflow from four years ago is very close to our current workflow  We will categorize against this workflow and measure the success/failure of any enhancements to the product over release cycles  Our workflows are robust and we‟ve proven it  Some teams don‟t want to do any product design and development without doing CARD first
  71. 71. 71
  72. 72. 72 Success Stories Q & A
  73. 73. 73 Planning
  74. 74. 74 Taking a Step Back: What UCD Activities Have You Conducted?  Focus groups  Contextual interviews  Brainstorming  Paper prototyping  Usability Testing  K-J Method (aka, Affinity Diagramming)
  75. 75. 75 How Do You Plan for Other Usability Activities?  Try to understand why you‟re doing the activity  Determine your goal(s)  Understand or think about users and their goals  Determine who to recruit  Decide which UCD method will be most effective  Create a plan for the activity, for example: – Test tasks – Interview questions  Figure out which stakeholder(s) to include
  76. 76. 76 Hands-on Activity: Planning a CARD Session Use the template provided to plan for your own CARD activity.  Think about a current or upcoming project where you might leverage CARD. Answer the following questions:  Why might CARD be a useful tool in this situation?  What questions did you ask to help decide?  Work individually to fill out the planning template we provided. – Capture any challenges this project might pose. – Identify specific strategies you plan to use to overcome these challenges.
  77. 77. 77 Hands-on Activity: Report out: Planning a CARD Session  What challenges did you identify?  What strategies did you come up with to deal with the challenges?  What was different about creating a CARD plan compared to a test or interview plan?
  78. 78. 78 What Makes CARD Different?  Capturing or designing a workflow  Facilitating multiple participants  Learning curve  Can be a considerable time investment  Often difficult to focus discussion  Stakeholders can be active participants, building the flow themselves Stakeholders‟ emotional engagement can be high!
  79. 79. 79 Lessons Learned Bottom line: CARD really is NOT all that different!  In the immortal words of Winston Zeddemore – “We have the tools, we have the talent”  Leverage the skills you already have!  Take into account higher levels of stakeholders‟ emotional engagement when planning. Just do it!
  80. 80. 80 Supporting Resources
  81. 81. 81 Supporting Resources Bridging User Needs to Object Oriented GUI Prototype via Task Object Design Chapter 2 User interface Design by Tom Dayton, Al McFarland, Joseph Kramer Workflow Modeling: Tools for Process Improvement and Application Development Chapter 8 Workflow Process Modeling by Alec Sharp and Patrick McDermott The Persona Lifecycle Chapter 10 Reality and Design Maps by Tamara Adlin and Holly Jamesen Carr Designing for the Digital Age by Kim Goodwin Chapter 16 Designing the Form Factor and Interaction Framework Mental Models by Indi Young Chapter 10 Create the Mental Model Layered Participatory Analysis: New Developments in the CARD Technique Michael J. Muller UPA 2005 The BRIDGE Len Conte, Eugenie Bertus, Scott Isensee
  82. 82. 82 CARD Tutorial Presenters  Len Conte – len.conte@mathworks.com  Mark Ainscow – mark.ainscow@mathworks.com  Debbie Cook – debbie.cook@mathworks.com  Stephen Reinach – stephen.reinach@mathworks.com  Lissa Story – lissa.story@mathworks.com

×