<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>REBECCA E SPITZER &#187; interface design</title>
	<atom:link href="http://www.rebecca-e-spitzer.com/blog/tag/interface-design/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.rebecca-e-spitzer.com/blog</link>
	<description>combining design, journalism, and technology. when i feel like it, anyways.</description>
	<lastBuildDate>Tue, 09 Mar 2010 23:18:45 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.2</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Dynamic Rehearsal Final Implementation</title>
		<link>http://www.rebecca-e-spitzer.com/blog/2009/12/dynamic-rehearsal-final-implementation/</link>
		<comments>http://www.rebecca-e-spitzer.com/blog/2009/12/dynamic-rehearsal-final-implementation/#comments</comments>
		<pubDate>Fri, 11 Dec 2009 16:51:31 +0000</pubDate>
		<dc:creator>Rebecca</dc:creator>
				<category><![CDATA[TUI]]></category>
		<category><![CDATA[dynamic rehearsal]]></category>
		<category><![CDATA[interface design]]></category>

		<guid isPermaLink="false">http://www.rebecca-e-spitzer.com/blog/?p=164</guid>
		<description><![CDATA[Well, after many hours of deliberations and redesigns, the final version of our Dynamic Rehearsal interface will be presented this afternoon! I&#8217;m quite pleased with the interface, and I think the elements are looking a hundred times better than the last implementation. There are still a lot of bugs  to be worked out of [...]]]></description>
			<content:encoded><![CDATA[<p><span class="drop">W</span>ell, after many hours of deliberations and redesigns, the final version of our Dynamic Rehearsal interface will be presented this afternoon! I&#8217;m quite pleased with the interface, and I think the elements are looking a hundred times better than the last implementation. There are still a lot of bugs  to be worked out of the interaction modules (and LOTS of things are just not currently implemented for lack of time) but what does work works well!</p>
<p>The main thing that we&#8217;re excited about is the dynamic generation of screen elements, like the timeline at the top of the rehearsal workspace and the list of notes for each rehearsal. Each user has a newly generated color that appears on their timeline, on their notes, and in the key at the bottom of the screen. The video works (you can pause and play again!) and there is a slider that allows to you skip to new portions of the video. You can pull an individual note out of the stack, and it appears to the left of your rehearsal workspace for later review. And it looks good!</p>
<p>Screencaps:<a href="http://www.rebecca-e-spitzer.com/blog/wp-content/uploads/2009/12/IMG_0445.JPG"><img class="alignnone size-large wp-image-169" title="IMG_0445" src="http://www.rebecca-e-spitzer.com/blog/wp-content/uploads/2009/12/IMG_0445-1024x768.jpg" alt="IMG_0445" width="620" /></a></p>
<p>Starting log-in screen (currently doesn&#8217;t have distinct user log-in codes, you just tap to start; we hope that in the future you can log in using the Surface as a fingerprint reader to automatically access your information.)</p>
<p> </p>
<p><a href="http://www.rebecca-e-spitzer.com/blog/wp-content/uploads/2009/12/IMG_0450.JPG"><img class="alignnone size-large wp-image-167" title="IMG_0450" src="http://www.rebecca-e-spitzer.com/blog/wp-content/uploads/2009/12/IMG_0450-1024x768.jpg" alt="IMG_0450" width="620" /></a></p>
<p>Overall look of all workspaces upon log-in, assuming four users are logged into the collaborative workspace.</p>
<p> </p>
<p><a href="http://www.rebecca-e-spitzer.com/blog/wp-content/uploads/2009/12/IMG_0452.JPG"><img class="alignnone size-large wp-image-172" title="IMG_0452" src="http://www.rebecca-e-spitzer.com/blog/wp-content/uploads/2009/12/IMG_0452-1024x768.jpg" alt="IMG_0452" width="620" /></a></p>
<p>Pulling an individual note out of the stack for review (The white highlight of the note marks it as &#8220;read&#8221; in the stack.)</p>
<p> </p>
<p><a href="http://www.rebecca-e-spitzer.com/blog/wp-content/uploads/2009/12/IMG_0451.JPG"><img class="alignnone size-large wp-image-171" title="IMG_0451" src="http://www.rebecca-e-spitzer.com/blog/wp-content/uploads/2009/12/IMG_0451-1024x768.jpg" alt="IMG_0451" width="620" /></a></p>
<p>Workspace for reviewing the most recent unread notes.</p>
<p> </p>
<p><a href="http://www.rebecca-e-spitzer.com/blog/wp-content/uploads/2009/12/IMG_0447.JPG"><img class="alignnone size-large wp-image-168" title="IMG_0447" src="http://www.rebecca-e-spitzer.com/blog/wp-content/uploads/2009/12/IMG_0447-1024x768.jpg" alt="IMG_0447" width="620" /></a></p>
<p>Panel to filter displayed notes by type or user; this button panel shows up when you tap on the timeline, allowing you to control what you&#8217;re reviewing.</p>
<p> </p>
<p><a href="http://www.rebecca-e-spitzer.com/blog/wp-content/uploads/2009/12/IMG_0448.JPG"><img class="alignnone size-large wp-image-166" title="IMG_0448" src="http://www.rebecca-e-spitzer.com/blog/wp-content/uploads/2009/12/IMG_0448-1024x768.jpg" alt="IMG_0448" width="620" /></a></p>
<p>Thumbnail spaces of past rehearsal. These are currently static, but in future implementations would have the ability to expand to the full size of the main rehearsal workspace we see to the right. This way, you&#8217;d be able to use all the real estate of the Surface size to review two rehearsal videos side by side for comparison.</p>
<p> </p>
<p><a href="http://www.rebecca-e-spitzer.com/blog/wp-content/uploads/2009/12/IMG_0449.JPG"><img class="alignnone size-large wp-image-165" title="IMG_0449" src="http://www.rebecca-e-spitzer.com/blog/wp-content/uploads/2009/12/IMG_0449-1024x768.jpg" alt="IMG_0449" width="620" /></a></p>
<p>Small key at the bottom of the Surface (can move to the opposite side depending on where you&#8217;re sitting) to show you who is logged in and what color refers to them.</p>
<p> </p>
<p> </p>
<p>Futhermore, there are other aspects of the project that are not clearly implemented at this stage; the project has a ubiquitous computing element consisting on a video camera that records rehearsals, RFID tags and readers to record when actors are onstage, and computerized pens that record notes being taken. Since there are no photos of the setup, here&#8217;s my small diagram:</p>
<p><a href="http://www.rebecca-e-spitzer.com/blog/wp-content/uploads/2009/12/implementationdiagram.png"><img class="alignnone size-full wp-image-173" title="implementationdiagram" src="http://www.rebecca-e-spitzer.com/blog/wp-content/uploads/2009/12/implementationdiagram.png" alt="implementationdiagram" width="620" /></a></p>
<p>We do HAVE each of the elements &#8211; a video camera, RFID tag readers, and the computerized pen, but none are linked together. The pen is the coolest part; it does indeed record the notes you&#8217;re taking! </p>
<p> </p>
<p> </p>
<p>All in all, I&#8217;m pleased with the amount of work we&#8217;ve accomplished in only a few weeks; we have a working interface that is aesthetically presentable! I was originally very wary of C#, which the Surface is programmed in, and did most of my design work in XAML, which can control the look of the interface. In spending the last week integrating my XAML snippets with the existing C# code, however, I&#8217;ve become much more familiar with both languages. Hurrah! Our presentation is in 30 minutes and I hope to have some good feedback and discussion with attendees and other presentation groups; if we do, I&#8217;ll certainly discuss it here. There is also a video describing the whole project that has yet to be uploaded to the web; when it is uploaded, I will certainly link to it here.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.rebecca-e-spitzer.com/blog/2009/12/dynamic-rehearsal-final-implementation/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>New Interface Elements for DR</title>
		<link>http://www.rebecca-e-spitzer.com/blog/2009/12/new-interface-elements-for-dr/</link>
		<comments>http://www.rebecca-e-spitzer.com/blog/2009/12/new-interface-elements-for-dr/#comments</comments>
		<pubDate>Wed, 09 Dec 2009 21:14:20 +0000</pubDate>
		<dc:creator>Rebecca</dc:creator>
				<category><![CDATA[TUI]]></category>
		<category><![CDATA[dynamic rehearsal]]></category>
		<category><![CDATA[interface design]]></category>

		<guid isPermaLink="false">http://www.rebecca-e-spitzer.com/blog/?p=157</guid>
		<description><![CDATA[After the interface of our original working implementation was proven terrible last week, I worked up some new elements for the next phase of implementation in Microsoft Blend, which is an XAML godsend when you want to spend 30 minutes doing a three hour project. It generates some additional markup to deal with in the [...]]]></description>
			<content:encoded><![CDATA[<p><span class="drop">A</span>fter the interface of our original working implementation was proven terrible last week, I worked up some new elements for the next phase of implementation in Microsoft Blend, which is an XAML godsend when you want to spend 30 minutes doing a three hour project. It generates some additional markup to deal with in the C# editor that we&#8217;re using for the Surface, but not a lot; I really enjoy using it.</p>
<p>At any rate, the central rehearsal review panel was redesigned to a vertical panel from a horizontal panel, which has pros and cons. The major problem with this is that the timeline across the top doesn&#8217;t have as much space to expand from side to side; a panoramic timeline is why we originally chose a horizontal interface. However, it turns out that resizing the timeline wasn&#8217;t as much of a problem as we thought it would be &#8211; it is slightly smaller, but still readable. The big plus side of moving to a vertical implementation is that we were able to get rid of the expanded timeline and move the notes under the video, which makes a lot of sense visually and frees up space elsewhere on the surface for other workspaces.</p>
<p>Those other workspaces are the previously discussed &#8220;Recent Notes&#8221; panel, which is actually smaller in our real implementation than pictured below, and the &#8220;Individual Note&#8221; panel, which is useful when a single note is pulled out of the stack for review. Additionally, I created a informational key to live at one edge of the Surface, providing data about the show itself and the list of current logged in users (and their colors).</p>
<p>The workspaces, as seen in Blend, not quite as implemented:</p>
<p><a href="http://www.rebecca-e-spitzer.com/blog/wp-content/uploads/2009/12/rehearsalScreen.jpg"><img class="alignnone size-full wp-image-160" title="rehearsalScreen" src="http://www.rebecca-e-spitzer.com/blog/wp-content/uploads/2009/12/rehearsalScreen.jpg" alt="rehearsalScreen" width="500" height="675" /></a></p>
<p><a href="http://www.rebecca-e-spitzer.com/blog/wp-content/uploads/2009/12/recentNotes.jpg"><img class="alignnone size-full wp-image-161" title="recentNotes" src="http://www.rebecca-e-spitzer.com/blog/wp-content/uploads/2009/12/recentNotes.jpg" alt="recentNotes" width="416" height="615" /></a></p>
<p><a href="http://www.rebecca-e-spitzer.com/blog/wp-content/uploads/2009/12/IndividualNote.jpg"><img class="alignnone size-full wp-image-158" title="IndividualNote" src="http://www.rebecca-e-spitzer.com/blog/wp-content/uploads/2009/12/IndividualNote.jpg" alt="IndividualNote" width="236" height="102" /></a></p>
<p><a href="http://www.rebecca-e-spitzer.com/blog/wp-content/uploads/2009/12/InfoKey.jpg"><img class="alignnone size-large wp-image-159" title="InfoKey" src="http://www.rebecca-e-spitzer.com/blog/wp-content/uploads/2009/12/InfoKey-1024x91.jpg" alt="InfoKey" width="600" /></a></p>
<p>These elements are somewhat different in the actual implementation, which we&#8217;re working out now. It&#8217;s coming along slowly but is starting to actually LOOK good as well as function well. When we&#8217;ve finished the coding tonight and tomorrow, there will be more accurate screencaps to share!</p>
]]></content:encoded>
			<wfw:commentRss>http://www.rebecca-e-spitzer.com/blog/2009/12/new-interface-elements-for-dr/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
