<?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>selene tan &#187; interface design</title>
	<atom:link href="http://selenetan.com/tag/interface-design/feed/" rel="self" type="application/rss+xml" />
	<link>http://selenetan.com</link>
	<description>reaching for the moon and sky</description>
	<lastBuildDate>Wed, 16 Feb 2011 06:22:02 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.2.1</generator>
		<item>
		<title>Simple Sudoku and Modes of Thinking</title>
		<link>http://selenetan.com/2010/02/simple-sudoku-and-modes-of-thinking/</link>
		<comments>http://selenetan.com/2010/02/simple-sudoku-and-modes-of-thinking/#comments</comments>
		<pubDate>Wed, 17 Feb 2010 21:34:00 +0000</pubDate>
		<dc:creator>selene</dc:creator>
				<category><![CDATA[Blog]]></category>
		<category><![CDATA[interface design]]></category>
		<category><![CDATA[pattern recognition]]></category>
		<category><![CDATA[puzzle]]></category>
		<category><![CDATA[sudoku]]></category>

		<guid isPermaLink="false">http://selenetan.com/?p=62</guid>
		<description><![CDATA[A while back, I found Simple Sudoku, a freeware Sudoku puzzle maker/solver. It generates puzzles for you to solve, and also has a lot of features to make it easier to solve them. After playing way too much Sudoku in it, I realized why it makes things so much easier. On the surface, Sudoku is [...]]]></description>
			<content:encoded><![CDATA[<p>A while back, I found <a href="http://angusj.com/sudoku/">Simple Sudoku</a>, a freeware <a href="http://en.wikipedia.org/wiki/Sudoku">Sudoku</a> puzzle maker/solver. It generates puzzles for you to solve, and also has a lot of features to make it easier to solve them. After playing way too much Sudoku in it, I realized why it makes things so much easier. On the surface, Sudoku is all about logical deduction&#8211;the 9 in this square means you can eliminate 9&#8242;s elsewhere in the row and column, and so on. However, at higher levels, Sudoku is actually about pattern recognition, and that is what Simple Sudoku reveals.</p>
<p><span id="more-62"></span></p>
<p>One feature of Simple Sudoku is that it automatically shows the candidates for a square. This takes away the tedium of having to manually eliminate the obvious candidates, like 9&#8242;s in a row that already has a 9. Still, the candidates sometimes look like a mess.<br />
Simple Sudoku solves this with a feature called candidate filtering. What it does is highlight all squares that might be a particular number, e.g. all possible 9&#8242;s. This makes it easy to see, for example, when there&#8217;s only one possible 9 left in a column.</p>
<div class="separator" style="clear: both; text-align: center;"><a style="margin-left: 1em; margin-right: 1em;" href="http://selenetan.com/asherarpg/uploaded_images/simple_sudoku_lone_6-782602.jpg"><img src="http://selenetan.com/asherarpg/uploaded_images/simple_sudoku_lone_6-782598.jpg" border="0" alt="A screenshot of Simple Sudoku that shows candidate filtering on 6's. A now-obvious lone 6 in the rightmost column has been circled." width="263" height="320" /></a></div>
<div style="margin-left: auto; margin-right: auto; text-align: center; width: 60%;">A screenshot of Simple Sudoku that shows candidate filtering on 6&#8242;s. A now-obvious lone 6 in the rightmost column has been circled.</div>
<p>Candidate filtering is good for slightly more advanced deductions, as well. Let&#8217;s say you have one 3&#215;3 cell where all the possible 6&#8242;s are in the same row. You can eliminate 6 as a candidate from the rest of the row. Or, visually, you can do this:</p>
<div class="separator" style="clear: both; text-align: center;"><a style="margin-left: 1em; margin-right: 1em;" href="http://selenetan.com/asherarpg/uploaded_images/simple_sudoku_eliminate_row-733225.jpg"><img src="http://selenetan.com/asherarpg/uploaded_images/simple_sudoku_eliminate_row-733217.jpg" border="0" alt="The same screenshot of Simple Sudoku with filtering on 6's. In the upper-right 3x3 cell, an arrow is drawn from the row of 6's across the row, showing that you can eliminate the other 6's." width="263" height="320" /></a></div>
<div style="margin-left: auto; margin-right: auto; text-align: center; width: 60%;">The same screenshot of Simple Sudoku with filtering on 6&#8242;s. In the upper-right 3&#215;3 cell, an arrow is drawn from the row of 6&#8242;s across the row, showing that you can eliminate the other 6&#8242;s.</div>
<p>There is an advanced Sudoku technique called <a href="http://www.sadmansoftware.com/sudoku/technique12.htm">coloring</a> or <a href="http://www.sudoku129.com/puzzles/tips_43.php">linked candidates</a>. It involves forming a chain of candidate squares where you know that some of the squares contain the candidate, and the rest do not. However, which set of squares contains the candidate is unknown at the start. The technique involves &#8220;coloring in&#8221; the candidate squares in an alternating pattern, e.g. with blue and pink. If any pink square contains the number, then all pink squares will contain the same number, and all blue squares will not. The reverse is true as well.</p>
<p>The technique can be difficult to understand from a description, but in Simple Sudoku, it&#8217;s really easy to do. Filter candidates so that, say, all 5&#8242;s are shown. Find a place where there are only two 5 candidates in a row, column, or large cell. Color one of the squares pink, and one blue. Then continue the chain as long as you can find links where there are only two 5&#8242;s. If you see two pink neighboring each other, then the pinks don&#8217;t have 5&#8242;s and the blues are the ones with 5&#8242;s.</p>
<div class="separator" style="clear: both; text-align: center;"><a style="margin-left: 1em; margin-right: 1em;" href="http://selenetan.com/asherarpg/uploaded_images/simple_sudoku_coloring_anim-749095.gif"><img src="http://selenetan.com/asherarpg/uploaded_images/simple_sudoku_coloring_05a-2-716669.jpg" border="0" alt="" width="263" height="320" /></a></div>
<div style="margin-left: auto; margin-right: auto; text-align: center; width: 60%;">A screenshot showing two neighboring pink squares. Click to view an animation of the process.</div>
<p>Coloring turns a painstaking deduction problem into a simple pattern-recognition problem. Going through the chain of logic step-by-step takes a while and can be prone to error, but marking squares as colors is easy. And on the computer, it&#8217;s easily reversible. I&#8217;ll often start coloring squares even when &#8220;simpler&#8221; deductions can be made because in Simple Sudoku, coloring <em>is</em> a simple deduction.</p>
<p>In general, as you get better at a type of logic puzzle, you start recognizing common sequences of deductions. Internally, you formulate a series of rules: &#8220;If <em>this</em>, then do <em>that</em>.&#8221; What Simple Sudoku and other good puzzle interfaces do is 1) Make it easier to notice common deductions, and 2) Make it easier to spot the &#8220;If this&#8221; part of your rules.</p>
]]></content:encoded>
			<wfw:commentRss>http://selenetan.com/2010/02/simple-sudoku-and-modes-of-thinking/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Information Access in Avalon Code</title>
		<link>http://selenetan.com/2009/05/information-access-in-avalon-code/</link>
		<comments>http://selenetan.com/2009/05/information-access-in-avalon-code/#comments</comments>
		<pubDate>Wed, 27 May 2009 06:27:00 +0000</pubDate>
		<dc:creator>selene</dc:creator>
				<category><![CDATA[Blog]]></category>
		<category><![CDATA[information design]]></category>
		<category><![CDATA[interface design]]></category>

		<guid isPermaLink="false">http://selenetan.com/?p=49</guid>
		<description><![CDATA[Recently I&#8217;ve been playing a DS RPG called Avalon Code. It&#8217;s an action RPG where the world is about to end, and you&#8217;re the Chosen One who&#8217;s been granted the Book of Prophecy to populate the new world. It&#8217;s your duty to use the Book to gather information about all the things that will be [...]]]></description>
			<content:encoded><![CDATA[<p>Recently I&#8217;ve been playing a DS RPG called Avalon Code. It&#8217;s an action RPG where the world is about to end, and you&#8217;re the Chosen One who&#8217;s been granted the Book of Prophecy to populate the new world. It&#8217;s your duty to use the Book to gather information about all the things that will be in the new world by &#8220;code scanning&#8221; them, which you do by hitting them with the Book of Prophecy. (Apparently the new world is going to have a lot of monsters.)</p>
<p>When you code scan something, it adds a page to the book that describes the object and shows its &#8220;codes&#8221;. Codes are blocks of different shapes and sizes that represent various qualities, such as Fire, Snake, or Justice. The codes are arranged on a grid (the &#8220;mental map&#8221;), and you can &#8220;rewrite&#8221; the codes by swapping them around.</p>
<div style="text-align: center;"><a href="http://selenetan.com/asherarpg/uploaded_images/avaloncode_codesgrid-743936.jpg" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img style="cursor: pointer; display: block; height: 153px; margin: 0px auto 10px; text-align: center; width: 220px;" src="http://selenetan.com/asherarpg/uploaded_images/avaloncode_codesgrid-743930.jpg" border="0" alt="The Sword page and the 4 hot-swap code slots" /></a><em><span style="font-size: x-small;">The Sword page and the 4 hot-swap code slots.</span></em></p>
</div>
<p>You&#8217;ll find item bases scattered through the game, and you modify them by swapping codes. The above picture shows the Sword base with one Fire code, making it a &#8220;Fire Sword&#8221;. There are also recipes for specific items, e.g. the set of codes you&#8217;ll need to make the Sword into a &#8220;Champion Gladius&#8221;.</p>
<p>Making the recipes is a painstaking process. You have 4 slots of &#8220;holding&#8221; space to transfer codes between pages &#8212; all other codes have to be on a page. So if you decide you want that Champion Gladius, you have to:<span id="more-49"></span></p>
<ol>
<li>Look through all of your pages to see if you have enough codes to make it</li>
<li>Empty the Sword of codes not in the recipe and dump them on other pages</li>
<li>Transfer the desired codes onto the Sword, 4 at a time</li>
</ol>
<p>Like I said, painful. I wound up entering a list of all my codes and their pages into a spreadsheet with columns for code type, size, and which page it&#8217;s on. Basically, a database. For step 1, I sort the columns by code type and size, and look through them to see if I have sufficient codes. Then comes the transfer process.</p>
<p>There are two issues with transferring: keeping the database synchronized, and locating the pages referenced in the database. The first is just tedious. The &#8220;proper&#8221; way would be to update the database for each transfer between page and hot-swap bar, but I usually skip recording the transfer to the swap bar and just change the code&#8217;s location from source page to destination page.</p>
<p>When attempting to locate pages, I often find myself wishing the book were a densely-linked website.</p>
<div style="text-align: center;"><a href="http://selenetan.com/asherarpg/uploaded_images/avaloncode_toc-797978.jpg" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img style="cursor: pointer; display: block; height: 155px; margin: 0px auto 10px; text-align: center; width: 220px;" src="http://selenetan.com/asherarpg/uploaded_images/avaloncode_toc-797970.jpg" border="0" alt="The Table of Contents" /></a><em><span style="font-size: x-small;">The Table of Contents</span></em></div>
<p>There are a few ways to navigate the book:</p>
<ol>
<li>Click on either of the bottom corners (where the page numbers are) to turn the page in that direction. Hold down the corner to make the pages keep turning until you let go.</li>
<li>Click on one of the labeled buttons at the top of the screen: &#8220;Index&#8221; goes to the table of contents, &#8220;Player&#8221; goes to the player info page, &#8220;Data&#8221; goes to the save/load screen, and &#8220;Map&#8221; goes to the map of the current area.</li>
<li>The Table of Contents page has a list of links to broad sections, like &#8220;Monsters&#8221; and &#8220;Weapons&#8221;. The first page of each section is a table of contents with links to sub-sections, e.g. &#8220;Sword&#8221; and &#8220;Bomb&#8221; for Weapons.</li>
<li>The four colored buttons at the top are &#8220;Spirit Bookmarks&#8221; which you can place on any page that doesn&#8217;t already have a bookmark. Clicking the button will take you directly to that page. By default the Spirit Bookmarks are placed on the pages of their respective spirits.</li>
</ol>
<p>Some issues:</p>
<ol>
<li>When holding down a corner to keep flipping pages, the pages don&#8217;t load until you let go &#8212; all you see is a blank page. I can understand not loading all the information, but at least loading the page titles would have been helpful.</li>
<li>There&#8217;s no button to go to the section table of contents from a page.</li>
<li>Pages don&#8217;t indicate which subsection they&#8217;re in. This is largely an issue with the monsters, since it&#8217;s not immediately obvious whether something like the &#8220;Wood Bone&#8221; monster is a &#8220;Construct&#8221;, &#8220;Undead&#8221;, or &#8220;Humanoid&#8221;. (The number of monsters doesn&#8217;t help.)</li>
</ol>
<p>So what would my ideal user interface for this system look like? There would be more views of the data, for one:</p>
<ol>
<li>Text-only lists of pages (items, codes, monsters, etc.), with options to sort alphabetically or by page type. Entries would link to the page.</li>
<li>Lists of available codes, sortable by code type, size, or assigned page. A bonus would be small images of the code blocks, since they have different shapes.</li>
<li>Breadcrumbs or tree-style navigation, so you can always see what category a page is in and quickly navigate up and down the hierarchy.</li>
</ol>
<p>Here&#8217;s a mockup of one way to make code browsing more pleasant:</p>
<div style="text-align: center;"><a href="http://selenetan.com/asherarpg/uploaded_images/codebrowsemockup01-774942.jpg" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img style="cursor: pointer; display: block; height: 225px; margin: 0px auto 10px; text-align: center; width: 320px;" src="http://selenetan.com/asherarpg/uploaded_images/codebrowsemockup01-774940.jpg" border="0" alt="An item page with an added pop-up code browser" /></a><span style="font-style: italic;">An item page with an added pop-up code browser<br />
</span></div>
<p>This is an item page. I&#8217;ve added a window with a scrollable list of available size 3 Silver codes. Breadcrumbs let you go up to search for a different size of Silver codes, or a different code type altogether. Each entry in the list states what page it&#8217;s on, and shows the shape of the code. The idea is that you can drag a code straight from the list onto the page you&#8217;re viewing. There&#8217;s still a swap area so you can rotate the code before placing it.</p>
<p>As for browsing, I think the game would benefit from (at least) one level of &#8220;go back&#8221;, so you can always return to the page you were just looking at. With that functionality available, clicking on a page name in the code browser list should take you to the page. This is useful if there&#8217;s more than one code of a particular type on a page and you&#8217;re wondering which one to take. Then you can just click the back button and go back to the page for the item you&#8217;re trying to assemble.</p>
<p>And here&#8217;s a mockup of page browser:</p>
<div class="separator" style="clear: both; text-align: center;"><a style="margin-left: 1em; margin-right: 1em;" href="http://selenetan.com/asherarpg/uploaded_images/pagebrowsemockup01-751880.jpg"><img src="http://selenetan.com/asherarpg/uploaded_images/pagebrowsemockup01-751877.jpg" border="0" alt="" width="320" height="240" /></a></div>
<div class="separator" style="clear: both; text-align: center;"><em>An item page with added page browser</em></div>
<p>I&#8217;ve added a page browser window that pops up like the code browser. It&#8217;s a simple, scrollable tree-style navigation list. There are headings for the major categories; double-click one of them, or click on the &#8220;expand&#8221; icon next to it, and the list will expand to show the subcategories. Double-click a subcategory or click its &#8220;expand&#8221; icon, and it&#8217;ll show a list of pages. Click on a page name to go to that page.</p>
<p>This strays pretty far from the book interface model that Avalon Code is trying to use, but you do a lot of things with the Book of Prophecy that you would never do with a real book. If I did want to stick closer to the book model for browsing, just two improvements would go a long way:</p>
<ol>
<li><span style="font-weight: bold;">Alphabetize the pages within categories.</span> Dictionaries and encyclopedias are easy to browse because they use a well-known, easy-to-remember ordering. You know if you open a dictionary to the middle you&#8217;ll be in the M&#8217;s. I do wonder if the pages have a similarly meaningful order in the original Japanese, that wasn&#8217;t carried over during the localization.</li>
<li><span style="font-weight: bold;">When flipping pages by holding down one of the corners, show page titles.</span> The flipping-pages action is similar to &#8220;leafing&#8221; through a book, but with no information during the page-flipping, it&#8217;s like leafing through a book with your eyes closed. Sure, you might get to the right page if you&#8217;re lucky, but it&#8217;s more likely you&#8217;ll have to stop and peek several times.</li>
</ol>
<p>In the end, Avalon Code has some pretty neat game elements, but I can&#8217;t help but wish for a better interface.</p>
]]></content:encoded>
			<wfw:commentRss>http://selenetan.com/2009/05/information-access-in-avalon-code/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

