Team:Wellesley HCI/MoClo Planner

From 2012.igem.org

(Difference between revisions)
 
(27 intermediate revisions not shown)
Line 55: Line 55:
       font-size: 12pt;
       font-size: 12pt;
     }
     }
-
 
+
table.image { width:100%; }
 +
table.image td, table.image tr, table.image tbody {
 +
width:100%;
 +
text-align:center;
 +
}
</style>
</style>
Line 68: Line 72:
<div id="bu-wellesley_wiki_content">
<div id="bu-wellesley_wiki_content">
-
<a href="https://2012.igem.org/Team:Wellesley_HCI"><img src="http://cs.wellesley.edu/~hcilab/iGEM2012/images/titleimage.png" width="300px" style="display:block; float:left;"></a>
+
<a href="https://2012.igem.org/Team:Wellesley_HCI"><img src="http://cs.wellesley.edu/~hcilab/iGEM2012/images/titleimage.png" width="300px" style="border:0px; display:block; float:left;"></a>
<!--Start NavBar-->
<!--Start NavBar-->
<ul id="nav">  
<ul id="nav">  
-
<li><a href="https://2012.igem.org/Team:Wellesley_HCI/Team">Team</a></li>  
+
<li><a href="https://2012.igem.org/Team:Wellesley_HCI/Team">Team</a>
 +
                <ul>
 +
                <li><a href="https://2012.igem.org/Team:Wellesley_HCI/Team">Team Members</a></li>
 +
<li><a href="https://2012.igem.org/Team:Wellesley_HCI/Notebook">Notebook</a></li>
 +
                        <li><a href="https://2012.igem.org/Team:Wellesley_HCI/Acknowledgement">Acknowledgement</a></li>
 +
<li><a href="https://2012.igem.org/Team:Wellesley_HCI/Tips_Tricks">Tips & Tricks</a></li>
 +
<li><a href="https://2012.igem.org/Team:Wellesley_HCI/Social">Fun</a></li>
 +
</ul>
 +
        </li>  
<li><a href="https://2012.igem.org/Team:Wellesley_HCI/Project_Overview">Project</a>
<li><a href="https://2012.igem.org/Team:Wellesley_HCI/Project_Overview">Project</a>
<ul>  
<ul>  
Line 78: Line 90:
<li><a href="https://2012.igem.org/Team:Wellesley_HCI/SynBio_Search">SynBio Search</a></li>  
<li><a href="https://2012.igem.org/Team:Wellesley_HCI/SynBio_Search">SynBio Search</a></li>  
<li><a href="https://2012.igem.org/Team:Wellesley_HCI/MoClo_Planner">MoClo Planner</a></li>  
<li><a href="https://2012.igem.org/Team:Wellesley_HCI/MoClo_Planner">MoClo Planner</a></li>  
-
<li><a href="https://2012.igem.org/Team:Wellesley_HCI/SynFluo">SynFluo</a></li>  
+
<li><a href="https://2012.igem.org/Team:Wellesley_HCI/SynFlo">SynFlo</a></li>  
                         <li><a href="https://2012.igem.org/Team:Wellesley_HCI/Downloads_Tutorials">Downloads & Tutorials</a></li>  
                         <li><a href="https://2012.igem.org/Team:Wellesley_HCI/Downloads_Tutorials">Downloads & Tutorials</a></li>  
</ul>
</ul>
</li>  
</li>  
-
<li><a href="#">Process</a>  
+
<li><a href="https://2012.igem.org/Team:Wellesley_HCI/Human_Practices">Human Practices</a>  
<ul>  
<ul>  
-
<li><a href="https://2012.igem.org/Team:Wellesley_HCI/Human_Practices">Human Practices</a></li>  
+
<li><a href="https://2012.igem.org/Team:Wellesley_HCI/Human_Practices">User Research</a></li>  
-
<li><a href="https://2012.igem.org/Team:Wellesley_HCI/Methodology">Methodology</a></li>  
+
                        <li><a href="https://2012.igem.org/Team:Wellesley_HCI/Methodology">Methodology</a></li>  
<li><a href="https://2012.igem.org/Team:Wellesley_HCI/Safety">Safety</a></li>  
<li><a href="https://2012.igem.org/Team:Wellesley_HCI/Safety">Safety</a></li>  
-
<li><a href="https://2012.igem.org/Team:Wellesley_HCI/Notebook">Notebook</a></li>
 
<li><a href="https://2012.igem.org/Team:Wellesley_HCI/Outreach">Outreach</a></li>
<li><a href="https://2012.igem.org/Team:Wellesley_HCI/Outreach">Outreach</a></li>
-
<li><a href="https://2012.igem.org/Team:Wellesley_HCI/Tips_Tricks">Tips & Tricks</a></li>
 
</ul>
</ul>
</li>
</li>
<li><a href="https://2012.igem.org/Team:Wellesley_HCI/Gold">Medal Fulfillment</a></li>  
<li><a href="https://2012.igem.org/Team:Wellesley_HCI/Gold">Medal Fulfillment</a></li>  
-
<li><a href="#">Additional Info</a>
+
-
<ul>
+
-
<li><a href="https://2012.igem.org/Team:Wellesley_HCI/Acknowledgement">Acknowledgement</a></li>
+
-
<li><a href="https://2012.igem.org/Team:Wellesley_HCI/Social">Fun</a></li>
+
-
</ul>
+
-
</li>
+
</ul>
</ul>
-
<!--End NavBar-->
+
<!--End NavBar-->  
 +
 
   
   
Line 116: Line 122:
</div>
</div>
-
<div id="overview">
+
 
<h1>Tool Overview</h1>
<h1>Tool Overview</h1>
<p>
<p>
-
The MoClo planner is a collaborative, touch-enabled software tool that simplifies information gathering and design steps of Golden Gate Modular Cloning; a hierarchical cloning method that relies on biological “parts” to create multi-gene constructs. Users can browse through a library of biological parts using filters, search for a specific part using the part’s name or registry ID (hyperlink this), access a data sheet for each part, and view relevant publications from Pubmed. The layered workspaces allows for efficient and organized transfer of information from one level of the cloning method to another without distracting from the primary workspace. Furthermore, the built-in primer designer allows for the generation of primer sequences and lab protocols without ever leaving the workspace.  
+
The MoClo planner is a collaborative, touch-enabled software tool that simplifies information gathering and design steps of Golden Gate Modular Cloning; a hierarchical cloning method that relies on biological “parts” to create multi-gene constructs. Users can browse through a library of biological parts using filters, search for a specific part using the part’s name or <a href="http://partsregistry.org/Main_Page">registry ID</a>, access a data sheet for each part, and view relevant publications from Pubmed. The layered workspaces allows for efficient and organized transfer of information from one level of the cloning method to another without distracting from the primary workspace. Furthermore, the built-in primer designer allows for the generation of primer sequences and lab protocols without ever leaving the workspace.  
</p>
</p>
 +
 +
<table class="image">
 +
<tr><td><img src="http://cs.wellesley.edu/~hcilab/iGEM2012/images/moclo/moclo1.png" width="900px" style="border:1px solid #000;"></td></tr>
 +
<caption align="bottom">
 +
An image of each of the layered workspaces in a partially viewable mode.
 +
</caption>
 +
</table>
 +
<h1>Implementation</h1>
<h1>Implementation</h1>
<p>
<p>
-
The MoClo planner is being implemented on a 40 inch Microsoft surface [Insert hyperlink]. The software tool is programmed using the Microsoft Surface SDK written in C#. Eugene is used to generate and regulate Level 1 permutation from Level 0 BioBricks. We also use Visual Sbol to visually represent the distinct parts in the standard way.
+
The MoClo planner is being implemented on a <a href="http://www.samsunglfd.com/product/feature.do?modelCd=SUR40">40 inch Microsoft Surface</a>. The software tool is programmed using the Microsoft Surface SDK written in C#. <a href="http://www.eugenecad.org/">Eugene</a> is used to generate and regulate Level 1 permutation from Level 0 BioBricks. We also use <a href="http://www.sbolstandard.org/">Visual SBOL</a> to visually represent the distinct parts in the standard way.
</p>
</p>
Line 132: Line 146:
<p>
<p>
-
Golden Gate Modular Cloning is a DNA construction method that allows for the assembly of any multi-gene construct from a library of biological parts. The method is hierarchical, allowing the user to link the standard biological parts (promoters, ribosome binding sites, coding sequences, and terminators) in order to create genes, and then use these genes to assemble multi-gene constructs.  
+
<a href="http://www.plosone.org/article/info:doi/10.1371/journal.pone.0016765">Golden Gate Modular Cloning</a> is a DNA construction method that allows for the assembly of any multi-gene construct from a library of biological parts. The method is hierarchical, allowing the user to link the standard biological parts (promoters, ribosome binding sites, coding sequences, and terminators) in order to create genes, and then use these genes to assemble multi-gene constructs.  
</p>
</p>
Line 140: Line 154:
The MoClo planner has three layered workspaces called the Level 0, Level 1, and Level 2 workspaces. Each workspace represents one level of the modular cloning method. Basic biological parts are handled in Level 0. The construction of genes is managed in Level 1. The assembly of multi-gene networks is done in Level 2. The user can work in multiple workspaces at a time. While working in any workspace, the user can arrange the workspaces to fit the screen so that each workspace is seen simultaneously.
The MoClo planner has three layered workspaces called the Level 0, Level 1, and Level 2 workspaces. Each workspace represents one level of the modular cloning method. Basic biological parts are handled in Level 0. The construction of genes is managed in Level 1. The assembly of multi-gene networks is done in Level 2. The user can work in multiple workspaces at a time. While working in any workspace, the user can arrange the workspaces to fit the screen so that each workspace is seen simultaneously.
</p>
</p>
 +
 +
<h3>Low-fidelity Prototype</h3>
 +
<center><iframe width="640" height="360" src="http://www.youtube.com/embed/IPr-D4vAGAM?rel=0" frameborder="0" allowfullscreen></iframe></center>
<h1>How It Works</h1>
<h1>How It Works</h1>
Line 146: Line 163:
The Level 0 workspace contains a library populated with over 2000 biological parts from the Registry of Standard Biological Parts. The user can utilize filters or search for a specific part using the part’s common name or registry id to browse the library. Each biological part is color-coded based on its type.
The Level 0 workspace contains a library populated with over 2000 biological parts from the Registry of Standard Biological Parts. The user can utilize filters or search for a specific part using the part’s common name or registry id to browse the library. Each biological part is color-coded based on its type.
</p>
</p>
 +
 +
 +
<table class="image">
 +
<tr><td><img src="http://cs.wellesley.edu/~hcilab/iGEM2012/images/moclo/moclo2.png" width="550px" style="border:solid 1px #000;"></td></tr>
 +
<caption align="bottom">
 +
A data sheet and multiple publication abstracts for part BBa_K658008.
 +
</caption>
 +
</table>
<p>
<p>
Line 154: Line 179:
Within the Level 1 and Level 2 workspaces, the user can utilize two methods of construct assembly: manual assembly and automatic assembly. Manual assembly allows the user to create specific constructs from specific parts whereas automatic assembly will generate all possible constructs from the selected biological parts.  
Within the Level 1 and Level 2 workspaces, the user can utilize two methods of construct assembly: manual assembly and automatic assembly. Manual assembly allows the user to create specific constructs from specific parts whereas automatic assembly will generate all possible constructs from the selected biological parts.  
</p>
</p>
-
 
+
<br>
 +
<a href="https://2012.igem.org/Team:Wellesley_HCI"><img src="http://cs.wellesley.edu/~hcilab/iGEM2012/images/moclo/primer.jpg" width="500px" style="display:block; float:left; margin: 5px; border:solid 1px #000;"></a>
 +
<br>
<p>
<p>
Information for each part is easily accessed by pulling up a data sheet and publications list from the element menu. The data sheet is populated with standard information about the part from the parts registry. The publications are fetched from Pubmed and parsed for abstracts and publication info.  
Information for each part is easily accessed by pulling up a data sheet and publications list from the element menu. The data sheet is populated with standard information about the part from the parts registry. The publications are fetched from Pubmed and parsed for abstracts and publication info.  
Line 163: Line 190:
</p>
</p>
-
<img style="float:right; width:500px; height:300px; margin:5px;" src="http://cs.wellesley.edu/~hcilab/public_html/iGEM_wiki/images/Team/Blank.png"/>
 
-
 
-
<table class="image">
 
-
<tr><td><img src="http://cs.wellesley.edu/~hcilab/public_html/iGEM_wiki/images/Team/Blank.png" height="500px" width="800px"></td></tr>
 
-
<caption align="bottom">
 
-
If you were to caption an image... this is how
 
-
</caption>
 
-
</table>
 
</div>
</div>
-
 
+
<br><br><br><br>
<div id="results">
<div id="results">
Line 179: Line 198:
<p>
<p>
-
MoClo Planner study results...
+
We conducted several user studies this summer and refined our evaluation and design to reflect the user feedback with each study. We had six groups of Wellesley undergraduates (who had exposure to introductory biology classes) (overall 12 users, all undergraduate students), the BU iGem team (overall 4 users, 2 undergraduate, 1 graduate, 1 postdoc), and four pairs from the MIT iGEM (overall 8 users, all undergraduate students) team working collaboratively. During our testing session users constructed a multi-gene network using MoClo Planner – the BU and MIT teams, each used the system to construct the biological parts they designed for their project. We collected data through observations and post-task questionnaires. We utilized three questionnaires: 1) a standard <a href="http://humansystems.arc.nasa.gov/groups/TLX/index.html"> NASA TLX</a> questionnaire to measure subjective task workload; 2) a standard engagement questionnaire to measure  task engagement; and 3) a subjective satisfaction questionnaire where users reported on their experience using the system.
 +
</p>
<p>
<p>
 +
<img src="http://cs.wellesley.edu/~hcilab/iGEM2012/images/moclo/MoCloEngagement.png" width="400px" style="/*display:block; float:left; border:none;*/"/>
 +
<img src="http://cs.wellesley.edu/~hcilab/iGEM2012/images/moclo/MoCloNASATLX.png" width="400px" style="/*display:block; float:left; border:none;*/"/>
 +
</p>
-
<br>
+
<p>
-
<center>
+
In general, users found the interface of the layered workspaces to be intuitive. This was reinforced in the NASA TLX and standard engagement questionnaire. The NASA TLX questionnaire indicated that users found the complexity of the program to be low while the Engagement questionnaire indicated a high perceived usability.
-
<img src="http://cs.wellesley.edu/~hcilab/public_html/iGEM_wiki/images/Team/Blank.png" height="350px" width="350px"> <p><i>An example of a collection showing parts, vectors, and features</i></center>
+
</p>
-
 
+
-
<p><i>A DNA sequence opened in sequence viewer with features highlighted.</i></center>
+
<br>
<br>
</div>
</div>
Line 194: Line 215:
<h1>Demo Video</h1>
<h1>Demo Video</h1>
-
<center><iframe width="560" height="315" src="http://www.youtube.com/embed/k4IYjg9ArQE" frameborder="0" allowfullscreen></iframe></center>
+
<center><iframe width="560" height="315" src="http://www.youtube.com/embed/PcGD4Xya4A8?rel=0" frameborder="0" allowfullscreen></iframe></center>
-
 
+
<br>
</div>
</div>
-
 
+
<div id ="publication">
 +
<h1>Publications</h1>
 +
<ul>
 +
<li>S. Liu; K. Lu; N. Seifeselassie; C. Grote; N. Francisco; V. Lin; L. Ding; C. Valdes; R. Kincaid; O. Shaer, <a href="http://cs.wellesley.edu/~hcilab/publication/2012ITS-MoCloDemo.pdf" target="_blank">MoClo Planner: Supporting Innovation in Bio-Design through Multi-touch Interaction</a>, <i>ITS'12, November 2012</i>
 +
</ul>
 +
<br>
 +
</div>
<div id="futurework">
<div id="futurework">
<h1>Future Work</h1>
<h1>Future Work</h1>
-
 
+
<ul>
-
MoClo Planner Future work...
+
<li>Integrate the applicaiton with Boston University's Clotho workflow to access the Clotho database and aplication suite.</li>
 +
<li>Send output of construct design to <a href="https://2011.igem.org/Team:BU_Wellesley_Software/Puppetshow">Puppetshow/puppeteer</a> for high throughput automated construction.</li>
 +
<li>Update the application design to support Level 2 primer design.</li>
 +
<li>Incorporate a visualization for destination vectors; modifying the templates for the level modules to take into account what plasmids are currently in the lab and available and backbone the construct is going into.</li>
 +
<li>Support Top-Down construct design workflow in order to allow a hybrid approach to construction and troubleshooting. Currently, the application supports a bottom-up approach from Level 0 to Level 2, we want to give the user the freedom to start at Level 2 and work in the details as they progress through their design.</li>
 +
</ul>
</div>
</div>

Latest revision as of 04:56, 4 April 2013

Wellesley HCI iGEM Team: Welcome


MoClo Planner

Tool Overview

The MoClo planner is a collaborative, touch-enabled software tool that simplifies information gathering and design steps of Golden Gate Modular Cloning; a hierarchical cloning method that relies on biological “parts” to create multi-gene constructs. Users can browse through a library of biological parts using filters, search for a specific part using the part’s name or registry ID, access a data sheet for each part, and view relevant publications from Pubmed. The layered workspaces allows for efficient and organized transfer of information from one level of the cloning method to another without distracting from the primary workspace. Furthermore, the built-in primer designer allows for the generation of primer sequences and lab protocols without ever leaving the workspace.

An image of each of the layered workspaces in a partially viewable mode.

Implementation

The MoClo planner is being implemented on a 40 inch Microsoft Surface. The software tool is programmed using the Microsoft Surface SDK written in C#. Eugene is used to generate and regulate Level 1 permutation from Level 0 BioBricks. We also use Visual SBOL to visually represent the distinct parts in the standard way.

Golden Gate Modular Cloning

Golden Gate Modular Cloning is a DNA construction method that allows for the assembly of any multi-gene construct from a library of biological parts. The method is hierarchical, allowing the user to link the standard biological parts (promoters, ribosome binding sites, coding sequences, and terminators) in order to create genes, and then use these genes to assemble multi-gene constructs.

The Interface

The MoClo planner has three layered workspaces called the Level 0, Level 1, and Level 2 workspaces. Each workspace represents one level of the modular cloning method. Basic biological parts are handled in Level 0. The construction of genes is managed in Level 1. The assembly of multi-gene networks is done in Level 2. The user can work in multiple workspaces at a time. While working in any workspace, the user can arrange the workspaces to fit the screen so that each workspace is seen simultaneously.

Low-fidelity Prototype

How It Works

The Level 0 workspace contains a library populated with over 2000 biological parts from the Registry of Standard Biological Parts. The user can utilize filters or search for a specific part using the part’s common name or registry id to browse the library. Each biological part is color-coded based on its type.

A data sheet and multiple publication abstracts for part BBa_K658008.

Drag-and-drop functionality is used to transfer information from one workspace to another.

Within the Level 1 and Level 2 workspaces, the user can utilize two methods of construct assembly: manual assembly and automatic assembly. Manual assembly allows the user to create specific constructs from specific parts whereas automatic assembly will generate all possible constructs from the selected biological parts.



Information for each part is easily accessed by pulling up a data sheet and publications list from the element menu. The data sheet is populated with standard information about the part from the parts registry. The publications are fetched from Pubmed and parsed for abstracts and publication info.

At any point in the design process, the user can launch the primer designer. Similar to the Level 1 and Level 2 workspaces, primers can be created manually or automatically. By including a built-in primer designer, the MoClo planner efficiently encompasses all steps of the design and build process.





Results

We conducted several user studies this summer and refined our evaluation and design to reflect the user feedback with each study. We had six groups of Wellesley undergraduates (who had exposure to introductory biology classes) (overall 12 users, all undergraduate students), the BU iGem team (overall 4 users, 2 undergraduate, 1 graduate, 1 postdoc), and four pairs from the MIT iGEM (overall 8 users, all undergraduate students) team working collaboratively. During our testing session users constructed a multi-gene network using MoClo Planner – the BU and MIT teams, each used the system to construct the biological parts they designed for their project. We collected data through observations and post-task questionnaires. We utilized three questionnaires: 1) a standard NASA TLX questionnaire to measure subjective task workload; 2) a standard engagement questionnaire to measure task engagement; and 3) a subjective satisfaction questionnaire where users reported on their experience using the system.

In general, users found the interface of the layered workspaces to be intuitive. This was reinforced in the NASA TLX and standard engagement questionnaire. The NASA TLX questionnaire indicated that users found the complexity of the program to be low while the Engagement questionnaire indicated a high perceived usability.


Demo Video


Publications


Future Work

  • Integrate the applicaiton with Boston University's Clotho workflow to access the Clotho database and aplication suite.
  • Send output of construct design to Puppetshow/puppeteer for high throughput automated construction.
  • Update the application design to support Level 2 primer design.
  • Incorporate a visualization for destination vectors; modifying the templates for the level modules to take into account what plasmids are currently in the lab and available and backbone the construct is going into.
  • Support Top-Down construct design workflow in order to allow a hybrid approach to construction and troubleshooting. Currently, the application supports a bottom-up approach from Level 0 to Level 2, we want to give the user the freedom to start at Level 2 and work in the details as they progress through their design.

Retrieved from "http://2012.igem.org/Team:Wellesley_HCI/MoClo_Planner"