<?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>Luke HillmanLuke Hillman | Luke Hillman</title>
	<atom:link href="http://www.lukehillman.net/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.lukehillman.net</link>
	<description></description>
	<lastBuildDate>Fri, 04 Nov 2011 16:25:03 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.2</generator>
		<item>
		<title>Effective Solutions: Direct Deposit Form</title>
		<link>http://www.lukehillman.net/2011/10/direct-deposit-form/</link>
		<comments>http://www.lukehillman.net/2011/10/direct-deposit-form/#comments</comments>
		<pubDate>Sun, 16 Oct 2011 02:57:51 +0000</pubDate>
		<dc:creator>Luke</dc:creator>
				<category><![CDATA[Usability]]></category>

		<guid isPermaLink="false">http://www.lukehillman.net/?p=263</guid>
		<description><![CDATA[This should be filed under &#8220;general problem solving,&#8221; but I&#8217;m putting it in the usability category because it deals with a workflow issue. When I managed student employees, one of the biggest problems I had was getting them successfully enrolled in direct deposit. Now, being that we had a separate payroll department that handled all of the financial stuff, you&#8217;d think that would be a fairly simple task.  And it was&#8230; kinda. The standard form that Georgetown uses for direct deposit asks for every piece of information needed to initiate the service for an employee: name, bank name, account number, routing number. Most students have absolutely no problem supplying this information on their own. The problem arises when they submit the form &#8212; you see, Georgetown&#8217;s payroll department requires that applicants attach a voided check along with the form, because they don&#8217;t trust people to write down the correct bank info themselves.  This itself wouldn&#8217;t be a problem, if student employees actually had checks.  Apparently, a staggering number of banks do not provide paper checks with their checking accounts, preferring instead to simply issue a debit card and call it a day. Checks cost extra, so students typically forego them [...]]]></description>
			<content:encoded><![CDATA[<p>This should be filed under &#8220;general problem solving,&#8221; but I&#8217;m putting it in the usability category because it deals with a workflow issue. When I managed student employees, one of the biggest problems I had was getting them successfully enrolled in direct deposit. Now, being that we had a separate payroll department that handled all of the financial stuff, you&#8217;d think that would be a fairly simple task.  And it was&#8230; kinda.</p>
<p>The standard form that Georgetown uses for direct deposit asks for every piece of information needed to initiate the service for an employee: name, bank name, account number, routing number. Most students have absolutely no problem supplying this information on their own. The problem arises when they <em>submit</em> the form &#8212; you see, Georgetown&#8217;s payroll department requires that applicants attach a voided check along with the form, because they don&#8217;t trust people to write down the correct bank info themselves.  This itself wouldn&#8217;t be a problem, <em>if student employees actually had checks</em>.  Apparently, a staggering number of banks do not provide paper checks with their checking accounts, preferring instead to simply issue a debit card and call it a day. Checks cost extra, so students typically forego them (honestly, who needs paper checks anymore, anyway?).  The payroll department had its requirements, but I really wanted to help the students get their direct deposit: when you have 180 of them working for you, it&#8217;s kind of a pain to deal with paper paychecks every two weeks.</p>
<p>My solution, basically, was to give students a way of printing a check to submit with the direct deposit form. I added a second page to the original PDF direct deposit form with the image of a blank check on it. Using a simple bit of JavaScript, the second page pulls the student&#8217;s name and bank info from the first page and superimposes it into the image. A MICR-style font is embedded in the PDF so the bank info displays properly and includes the appropriate symbols for account and routing numbers.  After filling in the form and printing it out, students can simply cut out the check from the second page and attach it to the form. Works like a charm.  Ah, the things we do for bureaucracy&#8230;</p>
<p>Try it out!  <a title="Direct Deposit Form" href="http://www.lukehillman.net/content/wp-content/uploads/2011/10/direct_deposit.pdf">Download the form here</a> and open it with <a href="http://get.adobe.com/reader/">Adobe Acrobat Reader</a> (you actually do have to use Acrobat Reader specifically for this &#8212; other PDF readers don&#8217;t support the JavaScript I used to generate the image).</p>
]]></content:encoded>
			<wfw:commentRss>http://www.lukehillman.net/2011/10/direct-deposit-form/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Mobile Interface: SafeRides</title>
		<link>http://www.lukehillman.net/2011/10/mobile-interface-saferides/</link>
		<comments>http://www.lukehillman.net/2011/10/mobile-interface-saferides/#comments</comments>
		<pubDate>Fri, 14 Oct 2011 02:55:13 +0000</pubDate>
		<dc:creator>Luke</dc:creator>
				<category><![CDATA[Interface Design]]></category>

		<guid isPermaLink="false">http://www.lukehillman.net/?p=257</guid>
		<description><![CDATA[At Georgetown, the Department of Public Safety provides free escort van rides to students traveling to and from campus at night (known as &#8220;SafeRides&#8221;), as well as three shuttle loops which pick up from the main gates every 15 minutes or so.  Since students never know for sure when one of the shuttles is due to arrive, they tend to rely on the personal escort vans for quick transport.  Traditionally, requests have been made over the phone and are received by two dispatchers.  As you can imagine, a university with over six thousand undergrads can generate a pretty high call volume, and wait times for individual escort vans sometimes exceed half an hour. This mobile app is intended 1) to allow students to see how long they&#8217;ll have to wait for one of the loop shuttles, thus taking some of the load off of the individual escort vans, and 2) to allow ride requests to be made instantly, securely, and with a minimum of human error (no more unintelligible pickup locations). This interface would be more or less the same on an iphone or an android-based device; small adjustments would be made for the droid&#8217;s typical hard-coded menu buttons.  The [...]]]></description>
			<content:encoded><![CDATA[<p>At Georgetown, the Department of Public Safety provides free escort van rides to students traveling to and from campus at night (known as &#8220;SafeRides&#8221;), as well as three shuttle loops which pick up from the main gates every 15 minutes or so.  Since students never know for sure when one of the shuttles is due to arrive, they tend to rely on the personal escort vans for quick transport.  Traditionally, requests have been made over the phone and are received by two dispatchers.  As you can imagine, a university with over six thousand undergrads can generate a pretty high call volume, and wait times for individual escort vans sometimes exceed half an hour.</p>
<p>This mobile app is intended 1) to allow students to see how long they&#8217;ll have to wait for one of the loop shuttles, thus taking some of the load off of the individual escort vans, and 2) to allow ride requests to be made instantly, securely, and with a minimum of human error (no more unintelligible pickup locations).</p>
<p>This interface would be more or less the same on an iphone or an android-based device; small adjustments would be made for the droid&#8217;s typical hard-coded menu buttons.  The native app carries the advantages of being location aware and having access to the phone&#8217;s number (collected automatically to provide the dispatchers with a number to call to communicate ride information if necessary), but a web app would be essentially identical.</p>
<p><a href="http://www.lukehillman.net/content/wp-content/uploads/2011/10/saferides_app_wireframe.pdf"><img class="alignnone size-full wp-image-258" title="saferides_wireframe" src="http://www.lukehillman.net/content/wp-content/uploads/2011/10/saferides_wireframe.jpg" alt="" width="610" height="895" /></a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.lukehillman.net/2011/10/mobile-interface-saferides/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Prototype Scheduler GUI</title>
		<link>http://www.lukehillman.net/2011/06/prototype-scheduler-gui/</link>
		<comments>http://www.lukehillman.net/2011/06/prototype-scheduler-gui/#comments</comments>
		<pubDate>Wed, 22 Jun 2011 16:57:57 +0000</pubDate>
		<dc:creator>Luke</dc:creator>
				<category><![CDATA[Interface Design]]></category>

		<guid isPermaLink="false">http://www.lukehillman.net/?p=249</guid>
		<description><![CDATA[In an effort to make my scheduler program a bit more usable (in its present form, it&#8217;s anything but &#8212; command line only, lots of restrictions on input file types), I decided to design a graphical interface for it.  This is the final result.  As I worked on it, I had the current student employee managers at my department sit down and click through it. It&#8217;s been through several iterations; what you see below is the product of several hours of usability testing.  I eventually decided on a design based on four vertical tabs &#8212; one tab for each task that scheduling requires: defining shifts, adding/editing employee availabilities, setting global scheduling parameters, and finally building the schedule.  Earlier versions of the design combined some of these tasks and used horizontal tabs. I discovered that the horizontal tab layout seemed to evoke information consumption in the mind of the user (perhaps due to the popularity of horizontal tabs in web design?), whereas the vertical tab design seems to evoke checklists and required steps. So, vertical is more intuitive. UI Project: Shift Scheduler If you have Balsamiq Mockups installed on your system, you can download the BMML files here and click through [...]]]></description>
			<content:encoded><![CDATA[<p>In an effort to make my <a href="http://www.lukehillman.net/2011/06/code-sample/">scheduler program</a> a bit more usable (in its present form, it&#8217;s anything but &#8212; command line only, lots of restrictions on input file types), I decided to design a graphical interface for it.  This is the final result.  As I worked on it, I had the current student employee managers at my department sit down and click through it. It&#8217;s been through several iterations; what you see below is the product of several hours of usability testing.  I eventually decided on a design based on four vertical tabs &#8212; one tab for each task that scheduling requires: defining shifts, adding/editing employee availabilities, setting global scheduling parameters, and finally building the schedule.  Earlier versions of the design combined some of these tasks and used horizontal tabs. I discovered that the horizontal tab layout seemed to evoke <em>information consumption </em>in the mind of the user (perhaps due to the popularity of horizontal tabs in web design?), whereas the vertical tab design seems to evoke <em>checklists</em> and <em>required steps.</em> So, vertical is more intuitive.</p>
<div id="__ss_9526360" style="width: 425px;"><strong style="display: block; margin: 12px 0 4px;"><a title="UI Project: Shift Scheduler" href="http://www.slideshare.net/lshillman/ui-project-shift-scheduler" target="_blank">UI Project: Shift Scheduler</a></strong> <iframe src="http://www.slideshare.net/slideshow/embed_code/9526360" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" width="425" height="355"></iframe></div>
<p>If you have Balsamiq Mockups installed on your system, you can <a href="http://dl.dropbox.com/u/9678048/scheduler_wireframe.zip">download the BMML files here</a> and click through an interactive version.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.lukehillman.net/2011/06/prototype-scheduler-gui/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Social Network Analysis</title>
		<link>http://www.lukehillman.net/2011/06/social-network-analysis/</link>
		<comments>http://www.lukehillman.net/2011/06/social-network-analysis/#comments</comments>
		<pubDate>Tue, 21 Jun 2011 22:29:39 +0000</pubDate>
		<dc:creator>Luke</dc:creator>
				<category><![CDATA[Social Sciences]]></category>

		<guid isPermaLink="false">http://www.lukehillman.net/?p=235</guid>
		<description><![CDATA[Amongst my weaponry are such diverse elements as fear, surprise, and social network analysis. Applied properly, SNA is a great technique for gathering user data for later use in user-centered design. It can allow you to understand what your user segments are, how they&#8217;re connected, and, if you make some unfounded-but-logical assumptions, what their goals might be. When I was learning various techniques for building a complete picture of a network, I realized I already knew most of the standard ones (surveys, journaling, content analysis of emails, etc).  So rather than rehashing all that for my final project, I decided to experiment with a more automated method of data collection so I could focus on the graph metrics.  I used a pre-existing corpus to which I&#8217;d already had substantial exposure: J.R.R.  Tolkien&#8217;s Lord of the Rings trilogy. Using a pre-defined list of characters great and small, plus any aliases they used in the books, I searched the text for the phrase &#8220;name1 and name2,&#8221; hypothesizing that characters with connections would appear in that phrase at least somewhere in the trilogy.  The number of hits on each phrase provided the edge width.  It was, if I do say so, surprisingly accurate. [...]]]></description>
			<content:encoded><![CDATA[<p>Amongst my weaponry are such diverse elements as fear, surprise, and social network analysis. Applied properly, SNA is a great technique for gathering user data for later use in user-centered design. It can allow you to understand what your user segments are, how they&#8217;re connected, and, if you make some unfounded-but-logical assumptions, what their goals might be.</p>
<p>When I was learning various techniques for building a complete picture of a network, I realized I already knew most of the standard ones (surveys, journaling, content analysis of emails, etc).  So rather than rehashing all that for my final project, I decided to experiment with a more automated method of data collection so I could focus on the graph metrics.  I used a pre-existing corpus to which I&#8217;d already had substantial exposure: J.R.R.  Tolkien&#8217;s <em>Lord of the Rings </em>trilogy. Using a pre-defined list of characters great and small, plus any aliases they used in the books, I searched the text for the phrase &#8220;<em>name1 </em>and <em>name2</em>,&#8221; hypothesizing that characters with connections would appear in that phrase at least somewhere in the trilogy.  The number of hits on each phrase provided the edge width.  It was, if I do say so, surprisingly accurate.</p>
<p>Once I had the list of connections, I imported them into <a href="http://nodexl.codeplex.com/">NodeXL</a> to calculate metrics and generate a visualization.  The final graph yielded results both expected and surprising, which are detailed in this presentation I gave on it:</p>
<div class="prezi-player">
<p><!-- .prezi-player { width: 550px; } .prezi-player-links { text-align: center; } --><object id="prezi_cestru-wsvyj" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="550" height="400" name="prezi_cestru-wsvyj"><param name="movie" value="http://prezi.com/bin/preziloader.swf" /><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="bgcolor" value="#ffffff" /><param name="flashvars" value="prezi_id=cestru-wsvyj&amp;lock_to_path=0&amp;color=ffffff&amp;autoplay=no&amp;autohide_ctrls=0" /><embed id="preziEmbed_cestru-wsvyj" type="application/x-shockwave-flash" width="550" height="400" src="http://prezi.com/bin/preziloader.swf" name="preziEmbed_cestru-wsvyj" allowfullscreen="true" allowscriptaccess="always" bgcolor="#ffffff" flashvars="prezi_id=cestru-wsvyj&amp;lock_to_path=0&amp;color=ffffff&amp;autoplay=no&amp;autohide_ctrls=0"></embed></object></p>
<p><a href="http://prezi.com/cestru-wsvyj/middle-earth-social-network-analysis/">Middle Earth Social Network Analysis</a> on <a href="http://prezi.com">Prezi</a></p>
<div class="prezi-player-links">
<p>If you&#8217;d like to experiment with this stuff yourself, everything I used (well, except for the LOTR text) is free:</p>
<ul>
<li>Download my bash script for finding pairs of characters <a href="http://dl.dropbox.com/u/9678048/sna/findpairs.sh">here</a>.
<ul>
<li>To use the script, simply open the  file in a text editor and replace the character list therein with your  own. Character names should be separated by spaces. Then run the script  (make sure you&#8217;ve set your executable permissions &#8212; <strong>chmod 755 findpairs.sh</strong> should do the trick) and in a short while you&#8217;ll have a huge list of connections. Special thanks to <a href="http://pamelatoman.net">Pam</a> for her guidance on *nix scripting.</li>
</ul>
</li>
<li>Download the resulting output for Tolkien&#8217;s <em>Lord of the Rings</em> <a href="http://dl.dropbox.com/u/9678048/sna/output.txt">here</a>.</li>
<li>Download a prettier, MS Excel version of the above output <a href="http://dl.dropbox.com/u/9678048/sna/characters_and_connections.xlsx">here</a>.
<ul>
<li>Note:  the format is MS Office 2007/2010 (xlsx). There are three sheets in the  file: a list of all possible edges, actual existing connections, and the  complete character list I used (including aliases).</li>
</ul>
</li>
<li>Download my NodeXL file <a href="http://dl.dropbox.com/u/9678048/sna/lotr_nodexl.xlsx">here</a>.</li>
</ul>
</div>
</div>
]]></content:encoded>
			<wfw:commentRss>http://www.lukehillman.net/2011/06/social-network-analysis/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Code Sample</title>
		<link>http://www.lukehillman.net/2011/06/code-sample/</link>
		<comments>http://www.lukehillman.net/2011/06/code-sample/#comments</comments>
		<pubDate>Tue, 21 Jun 2011 16:18:32 +0000</pubDate>
		<dc:creator>Luke</dc:creator>
				<category><![CDATA[Information Architecture]]></category>

		<guid isPermaLink="false">http://www.lukehillman.net/?p=222</guid>
		<description><![CDATA[I&#8217;m not primarily a programmer, but I can code (and when I get into The Zone, I love it). At one of my previous jobs, I needed a program to produce a schedule for about 170 employees based on their availability and how many desks we needed filled on any given shift.  By hand, this took over a week of full-time work.  This program does it in less than a second. I wrote it in C++. The program reads in a CSV of employee availabilities (shifts are hard-coded, for now) and outputs 1) a schedule with as many desks filled as possible, and 2) a summary of each employee&#8217;s availability after scheduling. Download the source here.]]></description>
			<content:encoded><![CDATA[<p><img class="size-medium wp-image-223 alignnone" title="code_sample_image" src="http://www.lukehillman.net/content/wp-content/uploads/2011/06/code_sample_image-300x179.jpg" alt="" width="300" height="179" /></p>
<p>I&#8217;m not primarily a programmer, but I can code (and when I get into The Zone, I love it). At one of my previous jobs, I needed a program to produce a schedule for about 170 employees based on their availability and how many desks we needed filled on any given shift.  By hand, this took over a week of full-time work.  This program does it in less than a second.</p>
<p>I wrote it in C++. The program reads in a CSV of employee availabilities (shifts are hard-coded, for now) and outputs 1) a schedule with as many desks filled as possible, and 2) a summary of each employee&#8217;s availability after scheduling.</p>
<p><a title="Download source code" href="http://dl.dropbox.com/u/9678048/scheduler.tar.gz">Download the source here</a>.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.lukehillman.net/2011/06/code-sample/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Thesis: Second Life TPVs (forthcoming)</title>
		<link>http://www.lukehillman.net/2011/06/thesis/</link>
		<comments>http://www.lukehillman.net/2011/06/thesis/#comments</comments>
		<pubDate>Tue, 21 Jun 2011 16:02:56 +0000</pubDate>
		<dc:creator>Luke</dc:creator>
				<category><![CDATA[Social Sciences]]></category>

		<guid isPermaLink="false">http://www.lukehillman.net/?p=219</guid>
		<description><![CDATA[After much toil, I finally finished my thesis, User-Centered Design in Virtual World Interfaces: A Human Factors Perspective on Third-Party Second Life Viewers at the end of April and was awarded distinction after my defense.  As promised, I will soon be sharing the results with the SL community.  At the moment, the thesis is currently under review for publication (so I shouldn&#8217;t post it here), but if you&#8217;re interested in reading a draft, contact me and I&#8217;ll send you one.]]></description>
			<content:encoded><![CDATA[<p><img class="size-medium wp-image-220 alignnone" title="thesis_image" src="http://www.lukehillman.net/content/wp-content/uploads/2011/06/thesis_image-300x179.jpg" alt="" width="300" height="179" /></p>
<p>After much toil, I finally finished my thesis, <em>User-Centered Design in Virtual World Interfaces: A Human Factors Perspective on Third-Party Second Life Viewers</em> at the end of April and was awarded <em>distinction</em> after my defense.  As promised, I will soon be sharing the results with the SL community.  At the moment, the thesis is currently under review for publication (so I shouldn&#8217;t post it here), but if you&#8217;re interested in reading a draft, contact me and I&#8217;ll send you one.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.lukehillman.net/2011/06/thesis/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Sample Usability Evaluations</title>
		<link>http://www.lukehillman.net/2011/06/sample-usability-evaluations/</link>
		<comments>http://www.lukehillman.net/2011/06/sample-usability-evaluations/#comments</comments>
		<pubDate>Tue, 21 Jun 2011 15:37:00 +0000</pubDate>
		<dc:creator>Luke</dc:creator>
				<category><![CDATA[Usability]]></category>

		<guid isPermaLink="false">http://www.lukehillman.net/?p=216</guid>
		<description><![CDATA[Over the past few years, I&#8217;ve been asked to do in-depth usability evaluations of various systems &#8212; web sites, desktop software, mobile apps.  In fact, usability standards are one of the key points that my recent academic studies have touched on.  The following are sample evaluations.  As such, they were unsolicited and appear below for your exclusive perusal so you can get an idea of how I work. Bing Travel Windows Media Player eRepublik USAA, GoDaddy Feedback is always welcome!  If you have a particular type of system or software you&#8217;d like to see reviewed here, feel free to contact me and let me know.]]></description>
			<content:encoded><![CDATA[<p><img class="size-medium wp-image-217 alignnone" title="usability_evals" src="http://www.lukehillman.net/content/wp-content/uploads/2011/06/usability_evals-300x175.jpg" alt="" width="300" height="175" /></p>
<p>Over the past few years, I&#8217;ve been asked to do in-depth usability evaluations of various systems &#8212; web sites, desktop software, mobile apps.  In fact, usability standards are one of the key points that my recent academic studies have touched on.  The following are sample evaluations.  As such, they were unsolicited and appear below for your exclusive perusal so you can get an idea of how I work.</p>
<ul>
<li><a href="http://dl.dropbox.com/u/9678048/usability%20evals/bing_travel_eval.pdf">Bing Travel</a></li>
<li><a href="http://dl.dropbox.com/u/9678048/usability%20evals/WMP%20evaluation.pdf">Windows Media Player</a></li>
<li><a href="http://dl.dropbox.com/u/9678048/usability%20evals/erepublik%20eval.pdf">eRepublik</a></li>
<li><a href="http://dl.dropbox.com/u/9678048/usability%20evals/hillman_usability_review_reduced.pdf">USAA, GoDaddy</a></li>
</ul>
<p>Feedback is always welcome!  If you have a particular type of system or software you&#8217;d like to see reviewed here, feel free to contact me and let me know.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.lukehillman.net/2011/06/sample-usability-evaluations/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>UI Project: Simple Report-Writing System</title>
		<link>http://www.lukehillman.net/2011/06/ui-project-simple-report-writing-system/</link>
		<comments>http://www.lukehillman.net/2011/06/ui-project-simple-report-writing-system/#comments</comments>
		<pubDate>Thu, 16 Jun 2011 03:25:33 +0000</pubDate>
		<dc:creator>Luke</dc:creator>
				<category><![CDATA[Interface Design]]></category>

		<guid isPermaLink="false">http://www.lukehillman.net/?p=253</guid>
		<description><![CDATA[I work in a campus police department. For years, officers have written crime reports on Microsoft Access, which, while okay, isn&#8217;t particularly suited to the task.  It can only be used on one computer at a time and is needlessly complicated for the straightforward information typically collected in a report. I was asked to come up with a design for 1) a simplified system, 2) that would be usable by multiple officers simultaneously, and which would also be 3) accessible from many locations, possibly even outside of the main command center.  Also important to this particular project were accessibility standards; many officers complained of headaches related to eye strain after spending significant time in front of a bright monitor (the MS Access system used a white background with black text). The first step was to sit down with a few officers and listen to them describe common reports and things they didn&#8217;t like about the MS Access system.  Once I had a rough idea, I started sketching some screens on graph paper while they looked on.  This was the first iteration of the simple system: Incident Report Wireframe on Prezi After some interactive testing, we eventually decided that the first [...]]]></description>
			<content:encoded><![CDATA[<p>I work in a campus police department. For years, officers have written crime reports on Microsoft Access, which, while okay, isn&#8217;t particularly suited to the task.  It can only be used on one computer at a time and is needlessly complicated for the straightforward information typically collected in a report. I was asked to come up with a design for 1) a simplified system, 2) that would be usable by multiple officers simultaneously, and which would also be 3) accessible from many locations, possibly even outside of the main command center.  Also important to this particular project were accessibility standards; many officers complained of headaches related to eye strain after spending significant time in front of a bright monitor (the MS Access system used a white background with black text).</p>
<p>The first step was to sit down with a few officers and listen to them describe common reports and things they didn&#8217;t like about the MS Access system.  Once I had a rough idea, I started sketching some screens on graph paper while they looked on.  This was the first iteration of the simple system:</p>
<div class="prezi-player">
<p><object id="prezi_cxw34t0f0owt" width="550" height="400" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="flashvars" value="prezi_id=cxw34t0f0owt&amp;lock_to_path=0&amp;color=ffffff&amp;autoplay=no&amp;autohide_ctrls=0" /><param name="src" value="http://prezi.com/bin/preziloader.swf" /><embed id="prezi_cxw34t0f0owt" width="550" height="400" type="application/x-shockwave-flash" src="http://prezi.com/bin/preziloader.swf" allowfullscreen="true" allowscriptaccess="always" flashvars="prezi_id=cxw34t0f0owt&amp;lock_to_path=0&amp;color=ffffff&amp;autoplay=no&amp;autohide_ctrls=0" /></object></p>
<div class="prezi-player-links">
<p><a title="                                                          This was an early-stage design, heavily screen-reliant.                                                      " href="http://prezi.com/cxw34t0f0owt/incident-report-wireframe/">Incident Report Wireframe</a> on <a href="http://prezi.com">Prezi</a></p>
</div>
</div>
<p>After some interactive testing, we eventually decided that the first design was too &#8220;screen-happy.&#8221; Rather than presenting a &#8220;main menu&#8221; after an officer logged in, we decided that it would be more efficient to immediately display the list of recent reports and include a link somewhere to add a new report (I say <em>link</em> instead of <em>button</em> because at this point, we had decided that the application would be primarily web-based to facilitate greater accessibility). I did a quick sketch of the home screen after login in Balsamiq:</p>
<p><a href="http://www.lukehillman.net/content/wp-content/uploads/2011/10/dps_reports.png"><img class="size-full wp-image-254 alignnone" title="dps_reports" src="http://www.lukehillman.net/content/wp-content/uploads/2011/10/dps_reports.png" alt="" width="420" height="386" /></a></p>
<p>From here, it was relatively easy to implement a PHP-based solution.  The final design uses a darker blue/gray/green color scheme, which is easier on the officers&#8217; eyes.  Editable text fields are highlighted by thick green rectangles upon mouseover. The report list includes a CSS style to highlight an entire record based on the cursor&#8217;s vertical position.  On the writing portion of the interface, the &#8220;submit report&#8221; button is huge and unmistakeable (a frequent complaint about the MS Access system).  A demo of the final interface can be seen <a href="http://www.lukehillman.net/incidentreports/viewreports.php">here (lacks some functionality)</a>.</p>
<p><a href="http://www.lukehillman.net/incidentreports/viewreports.php"><img class="alignnone size-large wp-image-255" title="reports_final" src="http://www.lukehillman.net/content/wp-content/uploads/2011/10/reports_final-1024x601.png" alt="" width="614" height="361" /></a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.lukehillman.net/2011/06/ui-project-simple-report-writing-system/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

