Team:Wellesley Desyne/zTree

From 2013.igem.org

(Difference between revisions)
 
(46 intermediate revisions not shown)
Line 12: Line 12:
<!-- Title Area -->
<!-- Title Area -->
<li class="name">
<li class="name">
-
<h1><a href="#">WHCI</a></h1>
+
<h1><a href="https://2013.igem.org/Team:Wellesley_Desyne">WHCI</a></h1>
</li>
</li>
<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
Line 66: Line 66:
<div class="row">
<div class="row">
<div class="large-12 columns">
<div class="large-12 columns">
-
<h2><img src="https://static.igem.org/mediawiki/2013/0/03/Wellesley_logo.png">Wellesley HCI iGEM 2013</h2>
+
<a href="https://2013.igem.org/Team:Wellesley_Desyne" class="header-link"><h2><img src="https://static.igem.org/mediawiki/2013/0/03/Wellesley_logo.png">Wellesley HCI iGEM 2013</h2></a>
</div>
</div>
</div>
</div>
Line 84: Line 84:
<div class="panel">
<div class="panel">
<h4>TOOL OVERVIEW</h4>
<h4>TOOL OVERVIEW</h4>
-
<p>zTree is an interactive, 3D visualization of the Registry of Standard Biological Parts that draws upon Parc’s Cone Trees visualization technique for representing hierarchical information.  
+
<br>
-
The top of the hierarchy represents a particular library, with nodes drawn like index cards to represent a generic part type, marked using Synthetic Biology Open Language, or a concrete  
+
<div style="float:right;"><img src="https://static.igem.org/mediawiki/2013/d/d4/Wellesley_ztree_logo.png"></div>
-
biological part. In zTree, a user can browse or search for a part of interest, display the data sheet for the part, and export any selected parts to a plain text file, which can be imported  
+
<p>zTree is an interactive, 3D visualization of the <a href="http://parts.igem.org/Main_Page">Registry of Standard Biological Parts</a> that draws upon <a href="http://www2.parc.com/istl/groups/uir/publications/items/UIR-1991-06-Robertson-CHI91-Cone.pdf">Parc’s Cone Trees</a> visualization technique for representing hierarchical information.  
 +
The top of the hierarchy represents a particular library, with nodes drawn like index cards to represent a generic part type&mdash;marked using <a href="http://www.sbolstandard.org/">Synthetic Biology Open Language (SBOL)</a> symbols&mdash;or a concrete biological part.  
 +
 
 +
<p>In zTree, a user can browse or search for a part of interest, display the data sheet for the part, and export any selected parts to a plain text file, which can then be imported  
into other programs for further use. The program also features an action log for user testing.</p>
into other programs for further use. The program also features an action log for user testing.</p>
</div>
</div>
Line 92: Line 95:
<h4>Implementation</h4>
<h4>Implementation</h4>
-
<p>zTree built in <a href="http://unity3d.com/" target="_blank">Unity</a>, a game engine, using the <a href="https://support.zspace.com/entries/21614256-zSpace-SDK-Releases" target="_blank">zSpace SDK</a> programmed in C#. The meshes were rendered in Blender and the data is pulled via the <a href="http://parts.igem.org/Registry_API" target="_blank">Registry API</a>. zTree was implemented for the <a href="https://zspace.com/the-zspace-system/ target="_blank"">zSpace system</a>, a 3D holographic display that provides six degrees of freedom when interacting with objects on screen. The display takes advantage of binocular vision and motion parallax to render a realistic image.  </p>
+
<p>zTree was built in <a href="http://unity3d.com/" target="_blank">Unity</a> using the <a href="https://support.zspace.com/entries/21614256-zSpace-SDK-Releases" target="_blank">zSpace SDK</a> programmed in C#. The meshes were rendered in Blender and the data are pulled via the <a href="http://parts.igem.org/Registry_API" target="_blank">Registry API</a>. zTree was implemented for the <a href="https://zspace.com/the-zspace-system/ target="_blank"">zSpace system</a>, a 3D holographic display that provides six degrees of freedom when interacting with objects on screen. The display takes advantage of <a href="http://zspace.com/uiguidelines/#intro.htm?Highlight=motion">binocular vision and motion parallax</a>, two cognitive immersion cues, to render a realistic image.  </p>
-
 
+
-
 
+
<h4>Purpose</h4>
<h4>Purpose</h4>
-
<p>With a large data set, a 2D structure would not fit on the screen, forcing the user to scroll or resize; zTree maximizes screen real estate, thereby allowing the user to visualize the whole structure at once.
+
<p>2D representations of large data sets typically do not fit within the confines of a standard screen, forcing the user to scroll or resize to see the data in its entirety. zTree's use of 3D carousels maximizes screen real estate, thereby allowing the user to visualize the whole structure at once.
<ol class="list_default">Our goals for zTree this summer were twofold:
<ol class="list_default">Our goals for zTree this summer were twofold:
-
<li>Provide users with an intuitive, interactive way to navigate the Registry of Standard Biological Parts</li>
+
<li>Provide users with an intuitive, interactive way to navigate the Registry of Standard Biological Parts.</li>
-
<li>Make a modular enough solution so that the application can eventually be used for a wide array of data sets</li>
+
<li>Create a modular enough solution so that the application could eventually be used for a wide array of part registries and libraries.</li>
</ol>
</ol>
 +
<!--Start row-->
 +
<div class="row">
 +
<div class="large-4 large-offset-2 columns">
 +
                                  <img src="https://static.igem.org/mediawiki/2013/5/5d/Wellesley_zTree4.jpg" width="300" height="300" margin="100" align="center">
 +
                                  <figcaption class="caption">Users can search by part type, such as promoter or terminator, in the topmost carousel. </figcaption>
 +
                      </div>
 +
<div class="large-4 columns">
 +
<img src="https://static.igem.org/mediawiki/2013/6/6a/Wellesley_zTree3.jpg" width="300" height="300" margin="100" align="center">
 +
                                <figcaption class="caption">A second carousel appears beneath the first one, allowing the user to choose a more specific part type.</figcaption>
 +
</div>
 +
                        <div class="large-2 columns"></div>
 +
</div>
 +
<!--End row-->
-
<table width="800" align="center">
+
<!--Start row-->
-
 
+
<div class="row">
-
<tr align="center">
+
<div class="large-4 large-offset-2 columns">
-
<td align="center"><img src="https://static.igem.org/mediawiki/2013/5/5d/Wellesley_zTree4.jpg" width="300" height="300" margin="100" align="center"><br><br><div style="width: 300px"><figcaption width="300">Users can search by part type, such as promoter or terminator. </figcaption></div></td>
+
                                  <img src="https://static.igem.org/mediawiki/2013/1/1e/Wellesley_zTree2.jpg" width="300" height="300" margin="100" align="center">
-
 
+
                                  <figcaption class="caption">Choosing yet a more specific part type.</figcaption>
-
<td align="center"><img src="https://static.igem.org/mediawiki/2013/6/6a/Wellesley_zTree3.jpg" width="300" height="300" margin="100" align="center"><br><div style="width: 300px"><figcaption width="300">A second carousel appears beneath the first one to choose a more specific part type.</figcaption></div></td>
+
                      </div>
-
</tr>
+
<div class="large-4 columns">
-
 
+
<img src="https://static.igem.org/mediawiki/2013/1/17/Wellesley_zTree1.jpg" width="300" height="300" margin="100" align="center">
-
<tr align="center">
+
                                <figcaption class="caption">Users can then choose an individual part to view more information about it. They can also view the hierarchy of the part.</figcaption>
-
<td align="center"><img src="https://static.igem.org/mediawiki/2013/1/1e/Wellesley_zTree2.jpg" width="300" height="300" margin="100" align="center"><br><div style="width: 300px"><figcaption width="300">Choosing yet a more specific part type.</figcaption></div></td>
+
</div>
 +
                        <div class="large-2 columns"></div>
 +
</div>
 +
<!--End row-->
-
<td align="center"><img src="https://static.igem.org/mediawiki/2013/1/17/Wellesley_zTree1.jpg" width="300" height="300" margin="100" align="center"><br><div style="width: 300px"><figcaption width="300">Users can then choose a specific part to view more information about it. They can also view the hierarchy of the part.</figcaption></div></td>
+
<h4>Results</h4>
-
</tr>
+
-
 
+
-
</table>
+
-
 
+
-
<h4>RESULTS</h4>
+
<p>We conducted a preliminary usability study of zTree with 9 Wellesley College students. The study employed a within subjects design, aiming to compare how students accomplished a series of simple tasks on zTree versus the Registry of Standard Biological Parts website. The students were asked to browse for a specific part, estimate the number of parts in a category, and compare two different part types.
<p>We conducted a preliminary usability study of zTree with 9 Wellesley College students. The study employed a within subjects design, aiming to compare how students accomplished a series of simple tasks on zTree versus the Registry of Standard Biological Parts website. The students were asked to browse for a specific part, estimate the number of parts in a category, and compare two different part types.
<div style="float: right; padding: 20px; width: 450px;">
<div style="float: right; padding: 20px; width: 450px;">
<img src="https://static.igem.org/mediawiki/2013/c/c7/Wc_ztree_graph.png">
<img src="https://static.igem.org/mediawiki/2013/c/c7/Wc_ztree_graph.png">
-
<span style="padding-top: 10px;"><strong>FIGURE.</strong>Application chosen by participants as easiest to use, zTree or the Registry website, for individual subtasks.</span>
+
<div class="panel" style="margin-top:10px;">
 +
<figcaption style="font-size: 14px; line-height: 16px;"><strong>FIGURE. </strong>Application chosen by participants as easiest to use, zTree or the Registry website, for individual subtasks.</figcaption>
 +
</div>
</div>
</div>
Line 134: Line 148:
</ol>
</ol>
-
<p>After the study, participants were asked to choose the application that was easier to use, zTree or the Registry website, for individual subtasks. People generally found zTree more helpful than the registry in terms of visualizing the entire structure and understanding hierarchy (see Figure at right). User quotes provided further support for these findings. One user remarked, “It's great how easy it is to compare and view relationships of the different parts.” 4 of the 5 users also “Strongly Agreed” that the zTree application was visually appealing.
+
<p>After the study, participants were asked to choose the application that was easier to use, zTree or the Registry website, for individual subtasks. People generally found zTree more helpful than the Registry in terms of visualizing the entire structure and understanding hierarchy (see Figure at right).  
 +
<p>User quotes consistently provided support for these findings:
 +
<ul class="list_default">
 +
<li>“It's great how easy it is to compare and view relationships of the different parts.”</li>
 +
<li>"I really liked being able to browse through multiple hierarchies at once."</li>
 +
<li>"I liked the visual structure of the data. It made it really easy to understand the hierarchy of the information I was viewing."</li>
 +
</ul>
 +
 +
<p>6 of the 9 users also "Agreed" or “Strongly Agreed” that the zTree application was visually appealing. We also received constructive criticism and feedback, which have informed our future goals for zTree.
-
<h4>DEMO</h4>
 
-
<iframe width="640" height="360" align="center" src="//www.youtube.com/embed/wJKu_SNwV6E" frameborder="0" allowfullscreen></iframe>
 
 +
<h4>Demo</h4>
 +
<div style = "margin-left:auto;
 +
margin-right:auto; width:640px;">
 +
<iframe width="640" height="360" align="center" src="//www.youtube.com/embed/wJKu_SNwV6E" frameborder="0" allowfullscreen></iframe>
 +
</div>
<br><br>
<br><br>
-
<h4>FUTURE WORK</h4>
+
<h4>Future Work</h4>
-
<p> Most features desired for zTree were completely over the course of the summer. As the registry changed, the data sheet code needs to be updated. In the future we need to make the data sheets compliant with the registry API so that the program works with any future changes. Another iGEM team seems to be working on search function which we would like to integrate into the program. Some research has gone into which type of backgrounds for the zSpace eliminate ghosting so the team would also like to try to use one of those backgrounds to improve the visualization of their program. Using the pen to navigate and spin the carousels would be a good feature for the future as well. </p>
+
<ul class="list_default">
 +
<li>Animate carousels on and off screen</li>
 +
<li>Improve search function for specific parts</li>
 +
<li>Allow use of data sets from other databases</li>
 +
<li>Eliminate "ghosting" to improve visualization</li>
 +
<li>Allow use of pen for navigation and spinning of carousels</li>
 +
</ul>
</div>
</div>
Line 155: Line 186:
<script src="http://eastmaninteractive.com/igem/whci_zepto.js"></script>
<script src="http://eastmaninteractive.com/igem/whci_zepto.js"></script>
<script src="http://eastmaninteractive.com/igem/whci_foundation.js"></script>
<script src="http://eastmaninteractive.com/igem/whci_foundation.js"></script>
-
<script src="http://eastmaninteractive.com/igem/whci_foundation.alerts.js"></script>
 
<script src="http://eastmaninteractive.com/igem/whci_foundation.dropdown.js"></script>
<script src="http://eastmaninteractive.com/igem/whci_foundation.dropdown.js"></script>
-
<script src="http://eastmaninteractive.com/igem/whci_foundation.placeholder.js"></script>
 
-
<script src="http://eastmaninteractive.com/igem/whci_foundation.tooltips.js"></script>
 
<script src="http://eastmaninteractive.com/igem/whci_foundation.topbar.js"></script>
<script src="http://eastmaninteractive.com/igem/whci_foundation.topbar.js"></script>
<script>
<script>

Latest revision as of 17:30, 27 September 2013

Wellesley HCI iGEM Team: Welcome

zTree

TOOL OVERVIEW


zTree is an interactive, 3D visualization of the Registry of Standard Biological Parts that draws upon Parc’s Cone Trees visualization technique for representing hierarchical information. The top of the hierarchy represents a particular library, with nodes drawn like index cards to represent a generic part type—marked using Synthetic Biology Open Language (SBOL) symbols—or a concrete biological part.

In zTree, a user can browse or search for a part of interest, display the data sheet for the part, and export any selected parts to a plain text file, which can then be imported into other programs for further use. The program also features an action log for user testing.

Implementation

zTree was built in Unity using the zSpace SDK programmed in C#. The meshes were rendered in Blender and the data are pulled via the Registry API. zTree was implemented for the zSpace system, a 3D holographic display that provides six degrees of freedom when interacting with objects on screen. The display takes advantage of binocular vision and motion parallax, two cognitive immersion cues, to render a realistic image.

Purpose

2D representations of large data sets typically do not fit within the confines of a standard screen, forcing the user to scroll or resize to see the data in its entirety. zTree's use of 3D carousels maximizes screen real estate, thereby allowing the user to visualize the whole structure at once.

    Our goals for zTree this summer were twofold:
  1. Provide users with an intuitive, interactive way to navigate the Registry of Standard Biological Parts.
  2. Create a modular enough solution so that the application could eventually be used for a wide array of part registries and libraries.
Users can search by part type, such as promoter or terminator, in the topmost carousel.
A second carousel appears beneath the first one, allowing the user to choose a more specific part type.
Choosing yet a more specific part type.
Users can then choose an individual part to view more information about it. They can also view the hierarchy of the part.

Results

We conducted a preliminary usability study of zTree with 9 Wellesley College students. The study employed a within subjects design, aiming to compare how students accomplished a series of simple tasks on zTree versus the Registry of Standard Biological Parts website. The students were asked to browse for a specific part, estimate the number of parts in a category, and compare two different part types.

FIGURE. Application chosen by participants as easiest to use, zTree or the Registry website, for individual subtasks.
    The task list was devised to:
  1. Study the effect of zTree's carousel structure on the user’s ability to understand hierarchical relationships and estimate the size of the data space.
  2. Improve functionality and evaluate overall experience through qualitative user feedback and survey responses.

After the study, participants were asked to choose the application that was easier to use, zTree or the Registry website, for individual subtasks. People generally found zTree more helpful than the Registry in terms of visualizing the entire structure and understanding hierarchy (see Figure at right).

User quotes consistently provided support for these findings:

  • “It's great how easy it is to compare and view relationships of the different parts.”
  • "I really liked being able to browse through multiple hierarchies at once."
  • "I liked the visual structure of the data. It made it really easy to understand the hierarchy of the information I was viewing."

6 of the 9 users also "Agreed" or “Strongly Agreed” that the zTree application was visually appealing. We also received constructive criticism and feedback, which have informed our future goals for zTree.

Demo



Future Work

  • Animate carousels on and off screen
  • Improve search function for specific parts
  • Allow use of data sets from other databases
  • Eliminate "ghosting" to improve visualization
  • Allow use of pen for navigation and spinning of carousels