<?xml version="1.0"?>
<?xml-stylesheet href="Training-to-slidy.xsl" type="text/xsl"?>
<training>
<training-material id="upa20090611"> 
  <title>User Interaction for the Semantic Web</title><presentation-info> 
  <conference-name>NYC SemWeb Meetup</conference-name><date>March
  2010</date></presentation-info> <authorinfo> <name>Duane Degler</name> 
  <company>www.designforcontext.com</company> 
  <e-mail>duane@designforcontext.com</e-mail></authorinfo> 
  <introduction id="intro"> 
	 <list> 
		<item>Semantic Web concepts and technologies have arrived !</item> 
		<item>But... How to incorporate them into the user experience ?</item> 
		<item>Posted on the web, so relax and enjoy<br/><br/><xlink
		  href="http://designforsemanticweb.com/">DesignForSemanticWeb.com</xlink></item>
		
	 </list> 
  </introduction><section role="slide cover title"> 
  <title>Where We Are Now</title> 
  <slide id="rdw"> 
	 <title>2009 &amp; 2010: Tim Berners-Lee TED talks</title> 
	 <list role="launch"> 
		<item>Tim Berners-Lee's
		  <xlink
		  href="http://www.ted.com/talks/tim_berners_lee_the_year_open_data_went_worldwide.html">2010
		  TED talk</xlink></item> 
		<item role="launch"><xlink href="http://linkeddata.org/">Linked
		  Data</xlink></item> 
		<item role="launch"><xlink
		  href="http://www.freebase.org/">Freebase</xlink></item> 
		<item role="launch"><xlink href="http://www.data.gov/">Data.gov</xlink>
		  and <xlink href="http://data.gov.uk/">Data.gov.uk</xlink></item> 
		<item role="launch">City government:
		  <xlink href="http://www.nyc.gov/data">NYC Data Mine</xlink>,
		  <xlink href="http://dps.dc.gov/">DC data public square</xlink></item> 
		<item><xlink href="http://www.appsfordemocracy.org/">Apps for
		  Democracy</xlink></item> 
		<item><xlink href="http://data.nytimes.com/">NY Times
		  topics</xlink></item>
		<item role="launch"><xlink
		  href="http://go.worldbank.org/1SF48T40L0">World Bank</xlink></item> 
		<item role="launch"><xlink
		  href="http://aws.amazon.com/publicdatasets/">Amazon's &gt;1Tb</xlink></item> 
		<item role="launch"><xlink
		  href="http://www.wikipedia.org/">Wikipedia</xlink> and
		  <xlink href="http://dbpedia.org">DBpedia</xlink></item> 
	 </list><figure id="rawdatanow" align="center" valign="top"> 
	 <caption></caption><graphic
	 alt="Raw Data Now slide in Tim Berners-Lee TED talk"
	 name="images/rawdatanow.png" width="608" height="440"/></figure> 
	 <para>2009:
		<xlink
		 href="http://www.ted.com/talks/tim_berners_lee_on_the_next_web.html">http://www.ted.com/talks/tim_berners_lee_on_the_next_web.html</xlink>,
		11:00</para> 
  </slide> 
  <slide> 
	 <title>But...</title><quoted-block> 
	 <para>"After 10+ years of work into various aspects of the Semantic Web...
		<br/>I am now fully convinced (read: no longer in denial) that most of the
		remaining challenges to realize the Semantic Web vision have nothing to do with
		the underlying technologies... <br/>Instead, it all comes down to <b>user
		interfaces and usability</b>."</para><quoted-from>Ora Lassila, <i>"Semantic Web
	 Soul Searching"</i><br/>Wilbur-and-O blog, March 19, 2007<br/><xlink
	 href="http://www.lassila.org/blog/archive/2007/03/semantic_web_so_1.html">http://www.lassila.org/blog/archive/2007/03/semantic_web_so_1.html</xlink></quoted-from></quoted-block>
	 
  </slide> 
  <slide> 
	 <title>Focus on <i>described relationships</i></title> 
	 <figure id="ontology1"><caption></caption><graphic
	 name="images/whatis-ontology0.png"
	 alt="Blank graph network illustration, to show applying names to lines and objects"
	 width="810" height="564"/><graphic name="images/whatis-ontology1.png"
	 alt="Ontology image where named relationships identify what a graph is about"
	 width="810" height="564"/><graphic name="images/whatis-ontology2.png"
	 alt="Ontology network relationship graph with both node labels and line labels"
	 width="810" height="563"/><graphic name="images/whatis-ontology3.png"
	 width="810" height="564" alt="adding new nodes to an ontology"/></figure> 
	 <para role="incremental" align="center">Subject &gt; Predicate <i>(the name
		of the line)</i> &gt; Object</para> 
  </slide> 
  <slide> 
	 <title>About this "Web 3.0" stuff...</title> 
	 <list> 
		<item>Is it the Data Web? 
		  <list> 
			 <item>Open Linked Data 
				<list> 
				  <item><i>Lots</i> of structured data</item> 
				  <item>More common syntax</item> 
				  <item>More self-describing</item> 
				</list> </item> 
			 <item> Models that represent data domains</item> 
			 <item>Increasing number of tools for data display, translation and
				manipulation</item> 
			 <item>Plenty of enthusiasm</item> 
		  </list></item> 
	 </list> 
  </slide> 
  <slide> 
	 <title>Web 3.0 is about more than <i>data</i></title> 
	 <list role="launch"> 
		<item>Contextual, e.g. <xlink
		  href="http://plum.csail.mit.edu/">PLUM</xlink></item> 
		<item>Mobile and location-aware, e.g. <xlink
		  href="http://siri.com/">Siri</xlink>, <xlink
		  href="http://www.wikitude.org/">Wikitude</xlink>, even Google
		  <xlink href="http://maps.google.com/">Search Nearby</xlink></item> 
		<item>Situated, e.g.
		  <xlink href="http://www.chumby.com/pages/learn_overview">Chumby</xlink>,
		  <xlink href="http://www.violet.net/index_en.html">Violet, Rabbit, et
		  al</xlink>, also <xlink href="http://www.w3.org/2005/Incubator/ssn/">W3C
		  Semantic Sensor Incubator</xlink>, Wikipedia
		  <xlink href="http://en.wikipedia.org/wiki/Semantic_Sensor_Web">Semantic Sensor
		  Web</xlink></item> 
		<item>Gestural, e.g. MS Surface or smart phones; see Wikipedia
		  <xlink href="http://en.wikipedia.org/wiki/Gesture_recognition">gesture
		  recognition</xlink></item> 
	 </list> 
	 <list> 
		<item><b>The Context Web</b> 
		  <list role="incremental"> 
			 <item>Personal</item> 
			 <item>Managed and scalable Social</item> 
			 <item>Mobile and location-aware</item> 
			 <item>Temporal</item> 
			 <item>Situated - sensors and the "Internet of Things"</item> 
			 <item>Multi-modal - gesture, voice, haptic, etc.</item> 
		  </list></item> 
	 </list> 
  </slide> 
  <slide> 
	 <title>User Experience architecture is <i>semantic</i></title> 
	 <quoted-block> 
	 <para>"As interface stands on the shoulders of infrastructure, tomorrow's
		user experience will rest on the foundation of today's Semantic Web
		technologies."</para><quoted-from>Peter Morville, <i>Ambient Findability</i>,
	 2005, p. 170</quoted-from></quoted-block> 
	 <para> </para><figure id="swuivision" align="left"> <caption><?xm-replace_text {caption}?></caption><graphic
	 name="images/swui_vision.png"
	 alt="SWUI 2008 vision of high-context web of data" width="639"
	 height="519"/></figure> 
  </slide> </section> <section id="interacting"> 
  <title>Example: Facet Interfaces</title> 
  <slide> 
	 <title>Faceted search and relationship browsing</title> 
	 <list role="launch"> 
		<item>Daniel Tunkelang:
		  <xlink
			href="http://www.morganclaypool.com/doi/abs/10.2200/S00190ED1V01Y200904ICR005">Faceted
		  Search</xlink></item> 
		<item>Marti Hearst: <xlink href="http://searchuserinterfaces.com/">Search
		  User Interfaces</xlink> and
		  <xlink href="http://flamenco.berkeley.edu/demos.html">Flamenco</xlink></item> 
		<item>Peter Morville and Jeff Callender:
		  <xlink href="http://searchpatterns.org/">Search Patterns</xlink></item> 
	 </list> 
	 <list> 
		<item>There are two types of interaction: 
		  <list> 
			 <item><b>Refinement</b> is about starting with large sets and
				narrowing... a <i>relevance </i>funnel</item> 
			 <item><b>Browsing</b> is about <i>exploring the structure</i> of data
				to find areas of interest</item> 
		  </list></item> 
		<item>Add semantic relationships - complexity, yet potential
		  elegance</item> 
	 </list> 
  </slide> 
  <slide> 
	 <title>Facet Refinement</title> 
	 <list role="launch"> 
		<item><xlink
		  href="http://www.zappos.com/search/shoes/filter/hide%3AproductTypeFacet/%22Shoes%22/gender/%22Womens%22/personalityFacet/%22Casual%22/categoryFacet/%22Shoes%22">Zappos</xlink>
		  (flat, reordering)</item> 
		<item><xlink href="http://www.amazon.com/">Amazon</xlink>
		  (hierarchy)</item> 
		<item><xlink href="http://www.ebay.com/">eBay</xlink> (layered)</item> 
		<item><xlink
		  href="http://siris-collections.si.edu/search/">Smithsonian</xlink> (query)
		  based on <xlink href="http://lucene.apache.org/solr/">Solr</xlink></item> 
		<item><xlink href="http://simile.mit.edu/exhibit">Exhibit</xlink>
		  (lightweight)</item> 
	 </list> 
	 <list> 
		<item>Drawn from instance data</item> 
		<item>Not often leveraging metadata relationships (if they exist)</item> 
	 </list> <figure id="basic_facets"><caption></caption><graphic
	 name="images/facets1.png" alt="basic facet architecture" width="682"
	 height="521"/></figure> 
  </slide> 
  <slide> 
	 <title>Facet Browsing</title> 
	 <list role="launch"> 
		<item><xlink href="http://www.delicious.com/">Delicious</xlink>
		  (user-generated)</item> 
		<item><xlink
		  href="http://flamenco.berkeley.edu/demos.html">Flamenco</xlink> (flexible,
		  simple)</item> 
		<item><xlink
		  href="http://ils.unc.edu/relationbrowser/index.php?page=demos">Relation
		  Browser</xlink> (linear)</item> 
		<item><xlink href="http://aqua.queenslibrary.org/">Aqua Browser</xlink>
		  (multi-modal)</item> 
	 </list> 
	 <list> 
		<item>Along with refinement, visualize relationships between elements
		  (can be explicit or derived)</item> 
	 </list> <figure id="browse_facets"><caption></caption><graphic
	 name="images/facets2b.png" alt="Adding a facet or model to existing interface"
	 width="682" height="522"/></figure> 
  </slide> 
  <slide> 
	 <title>Facet Browsing</title> 
	 <list role="launch"> 
		<item><xlink href="http://mspace.fm/">mSpace</xlink> (relating) and
		  <xlink href="http://research.mspace.fm/projects/mobile">mSpace
		  Mobile</xlink></item> 
		<item><xlink href="http://www.freebase.com/labs/parallax/">Parallax
		  browser</xlink> (path-centered)</item> 
	 </list> 
	 <list> 
		<item>Flexible - add new data types and relationships any time</item> 
		<item>Expose relationships for greater user control</item> 
	 </list> <figure id="semantic_facets"><caption></caption><graphic
	 name="images/facets3.png" alt="basic facet architecture" width="682"
	 height="521"/></figure> 
  </slide> 
  <slide> 
	 <title>mSpace and the user's mental model</title> 
	 <list role="launch"> 
		<item><xlink href="http://mspace.fm/">mSpace</xlink> and
		  <xlink href="http://research.mspace.fm/projects/mobile">mSpace
		  Mobile</xlink></item> 
	 </list><figure id="mspacequestions"><caption><?xm-replace_text {caption}?></caption><graphic
	 name="images/mspace_questions1.png"
	 alt="mSpace relationships model user questions" width="762"
	 height="147"/><graphic name="images/mspace_questions2.png"
	 alt="Changing order of mSpace columns reflects different questions" width="762"
	 height="278"/><graphic name="images/mspace_questions3.png"
	 alt="questions answered by the mSpace interface" width="762"
	 height="389"/></figure> 
  </slide> 
  <slide> 
	 <title>Adaptivity and process/application control</title> 
	 <list> 
		<item>What if the interface could be more adaptive? Responding to: 
		  <list> 
			 <item>Quantity of data</item> 
			 <item>Attributes of data and user's interactions</item> 
			 <item>Available and new predicate relationships it could
				leverage</item> 
			 <item>User-provided parameters and structures</item> 
		  </list></item> 
		<item><b>Context</b></item> 
	 </list> 
  </slide></section> <section id="dataweb"> 
  <title>Example: Visualization</title> 
  <slide> 
	 <title>Visualization: enticing... and challenging</title> 
	 <list role="launch"> 
		<item><xlink
		  href="http://www.ecoresearch.net/climate/">ecoResearch</xlink></item> 
	 </list> 
	 <list> 
		<item>Just because the data is a graph, does not <i>always</i> mean
		  graphs are a good choice for interaction</item> 
	 </list> <figure id="bfg"><caption><?xm-replace_text {caption}?></caption><graphic
	 name="images/bfg.jpg" alt="Star-map visualizations that are unreadable"
	 width="640" height="430"/></figure> 
  </slide> 
  <slide> 
	 <title>Debate Graph</title> 
	 <list role="launch"> 
		<item><xlink
		  href="http://www.debategraph.org/">debategraph.org</xlink></item> 
	 </list> 
	 <list> 
		<item>Clear structural relationships</item> 
		<item>Framework - community creates the content</item> 
		<item>Automatic rendering of visual relationships view</item> 
		<item>Object types are identified (color), but relationships not uniquely
		  typed</item> 
	 </list> <figure id="debategraph"><caption></caption><graphic
	 name="images/debategraph.png" width="705" height="405"
	 alt="DebateGraph.org UI"/></figure> 
  </slide> 
  <slide> 
	 <title>A lot is happening</title> 
	 <list role="launch"> 
		<item><xlink href="http://www.taggalaxy.de/">Tag Galaxy</xlink> and the
		  recent <xlink href="http://vizible.com/technology.html">OpenText
		  Vizible</xlink></item> 
		<item><xlink
		  href="http://www.cs.umd.edu/hcil/research/visualization.shtml">HCIL</xlink>
		  (LifeLines, FeatureLens, etc.)</item> 
		<item>NY Times (<xlink href="http://www.shancarter.com/">Shan
		  Carter</xlink>)
		  <xlink
			href="http://www.nytimes.com/ref/us/20061228_3000FACES_TAB2.html">casualties</xlink>,
		  <xlink
			href="http://elections.nytimes.com/2008/results/president/map.html">voting</xlink>,
		  <xlink
			href="http://www.nytimes.com/interactive/2009/01/17/washington/20090117_ADDRESSES.html">word
		  clusters</xlink>,
		  <xlink
			href="http://www.nytimes.com/interactive/2009/11/06/business/economy/unemployment-lines.html">unemployment</xlink></item>
		
		<item><xlink href="http://getpivot.com/">MS Pivot</xlink> (based on
		  SeaDragon),
		  <xlink
			href="http://www.ted.com/talks/gary_flake_is_pivot_a_turning_point_for_web_exploration.html"
			type="internal">Gary Flake video</xlink></item> 
		<item>IBM <xlink href="http://manyeyes.alphaworks.ibm.com">Many
		  Eyes</xlink></item> 
		<item><xlink
		  href="http://graphs.gapminder.org/world/#$majorMode=chart$is;shi=t;ly=2003;lb=f;il=t;fs=11;al=30;stl=t;st=t;nsl=t;se=t$wst;tts=C$ts;sp=6;ti=2007$zpv;v=0$inc_x;mmid=XCOORDS;iid=phAwcNAVuyj1jiMAkmq1iMg;by=ind$inc_y;mmid=YCOORDS;iid=phAwcNAVuyj2tPLxKvvnNPA;by=ind$i">GapMinder.com</xlink>
		  (Hans Rosling - see <xlink
		  href="http://www.ted.com/speakers/hans_rosling.html">TED talks</xlink>)</item> 
		<item>Google <xlink
		  href="http://www.google.com/insights/search">Insights</xlink></item> 
		<item><xlink href="http://www.number27.org/">Jonathan Harris</xlink>
		  (artist/designer, known for <xlink href="http://www.wefeelfine.org/">We Feel
		  Fine</xlink>)</item> 
	 </list> 
	 <list> 
		<item>Linked Data is an engine</item> 
		<item>Many styles of visualization interactions, e.g. 
		  <list> 
			 <item>Flat X : Y charting</item> 
			 <item>Scalable / zoomable views</item> 
			 <item>Overlays</item> 
			 <item>Parameter-filtered views</item> 
			 <item>Swappable data parameters</item> 
			 <item>Marking key points that link to outside references</item> 
		  </list></item> 
		<item>As I watch visualization interfaces mature over time, I see a
		  trend: <br/><b>Expose controls for the user</b></item> 
	 </list> 
  </slide> </section><section> 
  <title>Broader Considerations</title> 
  <slide> 
	 <title>Provenance and trust</title> 
	 <list role="launch"> 
		<item><xlink href="http://www.swotti.com/">Swotti</xlink>, video</item> 
		<item><xlink
		  href="http://www.wolframalpha.com/">WolframAlpha</xlink></item> 
		<item><xlink href="http://www.factual.com/">Factual</xlink></item>
	 </list> 
	 <list> 
		<item>Trust (in human terms) must be earned through user experience, as
		  it does with every technology shift 
		  <list> 
			 <item>Where did this data come from? How fresh is it?</item> 
			 <item>What manipulations have been done? By whom?</item> 
		  </list></item> 
	 </list> <quoted-block role="incremental"> 
	 <para>" The problem with data is that it's dead. We should bring it to life
		by thinking through all its relationships - both with other data and with the
		circumstances in the world that it's supposed to represent.
		"</para><quoted-from>Phil Agre, <i>"Living Data"</i>, Wired 2.11, Nov
	 1994</quoted-from></quoted-block> 
  </slide> 
  <slide> 
	 <title>Transparency and interpretation</title> 
	 <list role="launch"> 
		<item><xlink href="http://inference-web.org/">Inference
		  Web</xlink></item> 
		<item><xlink
		  href="http://www.w3.org/2005/ajar/tab">Tabulator</xlink></item> 
	 </list> 
	 <list> 
		<item>So the data is available and visible... what about the concepts and
		  interpretations?</item> 
		<item>The logic in ontologies means "indirect" connections between
		  question and answer</item> 
		<item>Transparency: <i>"How did you arrive at that answer?"</i></item> 
	 </list> 
  </slide> 
  <slide> 
	 <title>Sharing and privacy</title> 
	 <list role="launch"> 
		<item>Facebook, Google Buzz</item> 
		<item>FourSquare, Twitter, and PleaseRobMe</item> 
		<item>Paul Shabajee:
		  <xlink
			href="http://swui.webscience.org/swui06/papers/Shabajee/Shabajee.pdf">Informed
		  Consent on the Semantic Web</xlink></item> 
	 </list> 
	 <list> 
		<item>Building on the strengths of Web 2.0</item> 
		<item>Stronger relationships... between each other... between our data
		  "selves"</item> 
		<item>How do we know what we've given permission for?</item> 
		<item>In future, we're not just giving permission for data... we could
		  empower agents with responsiblity for <i>action</i> on our behalf</item> 
	 </list> <figure id="informedconsent"><caption>Paul Shabajee, University of
	 Bristol &amp; HP Labs, UK, 2006</caption><graphic
	 name="images/informedconsent.jpg" width="877" height="550"
	 alt="informed consent ideas from 2006, P. Shabajee"/></figure> 
  </slide> 
  <slide> 
	 <title>Agents</title><quoted-block> 
	 <para>“ Of course, having semi-autonomous agents roaming the Web doing
		things that the user may only be dimly aware of (if at all) is a frightening
		prospect… <br/><br/>The interaction designers who will be involved in creating
		these agents will also have to <b>design the means for users to supervise and
		control their agents</b>. This is a design challenge still waiting to be fully
		explored. ” </para><quoted-from>Dan Saffer, <i>designing for interaction</i>,
	 2007, p.203</quoted-from></quoted-block> 
  </slide></section> <section> 
  <title>Creating a Usable Semantic Web</title> 
  <slide> 
	 <title>Living Data</title><quoted-block> 
	 <para>" One proposal is to make every last hunk of computerized data its
		own <b>intelligent software agent</b>, storing information about itself and
		exchanging a stream of messages with all other relevant data.<br/><br/>Having
		done that, we'd then have to redefine the other basic concepts of computing so
		that those millions of operations per second <b>compute something meaningful -
		not just something that looks good</b>. "</para><quoted-from>Phil Agre,
	 <i>"Living Data"</i>, Wired 2.11, Nov 1994</quoted-from></quoted-block> 
  </slide> 
  <slide> 
	 <title>Many things we haven't talked about yet...</title> 
	 <list> 
		<item>Other user interaction models and designs that are emerging</item> 
		<item>Data entry and quality management</item> 
		<item>Vocabulary creation, integration, sense-making, and use in
		  design</item> 
		<item>Social Semantic Web</item> 
		<item>Personal and social implications and challenges</item> 
	 </list> 
	 <para><i>In the meantime:</i> <br/><xlink
		href="http://DesignForSemanticWeb.com">DesignForSemanticWeb.com</xlink><br/><xlink
		href="http://www.semantic-conference.com/">Semantic Technology
		Conference</xlink> in San Francisco (check out my tutorial on June
		22nd).</para> 
  </slide> 
  <slide> 
	 <title>So...</title><figure id="usabledesign"><caption><?xm-replace_text {caption}?></caption><graphic
	 name="images/rawdatanow.png" width="608" height="440"
	 alt="Raw Data Now"/><graphic name="images/usabledesign_blank.png"
	 alt="transition between images" width="608" height="440"/><graphic
	 name="images/usabledesignnow.png" alt="usable design now!" width="608"
	 height="440"/></figure> 
  </slide> </section> 
</training-material></training>

