Archive for December, 2012

The Quick Find Feature

The Reference Column is convenient, but it seemed to be missing a little something.  Looking up things referenced on the current page is all well and good, but what about comparing new things to old things?  If the card wasn’t already there, you could try to find it via other cards, but more likely you just left the page.  That gave me the idea (which was obvious in hindsight) to add a quick search to the bar.

At first I considered having the search be kind of its own thing, so if you searched for something, it would replace the list with the results.  However, that brought up a number of UI questions, so instead when you search for something, it just adds those cards to the current list, and scrolls to the first one.  To see further results, just click “Quick Find” (or press enter) again, and it will scroll to each one in turn.  These search results are produced the same way as the normal site search, and in the same order, so the best matches should be first.

I am hoping this covers all the obvious uses of the Reference Column.  I played through FF1 over the weekend using my walkthrough as a test run, and it seems pretty solid.  Of course, I wrote the thing, so I’m still looking for feedback from anyone else who uses this feature.  It’s good, but can it be even better?


Introducing the Reference Column

As a web developer with really large monitors, the fact that most websites are limited to 1000px wide has always bothered me.  I understand why this is, and my websites are no exceptions, but it does seem like a waste.  I wanted to do something useful with that extra space, but since a lot of people (read: people with iPads) don’t have it, it had to be something nonessential.  To that end, I borrowed the concept from the card comparison tool to create the reference column.

If you have enough space (you’ll need about 1350px across, so most notebooks should qualify), a new column will automatically be created on the right side of every page.  This column starts off blank, but is quickly populated with cards for everything linked to on that page.  So far this is really just an alternate form of the existing card hover feature, although it is possible to leave a card up for general viewing.  The fun really starts when you look at the card you wants in the reference column, though.  Every time you do, all the cards it references are added to the list, and so on down the line.  Any time you click a link on a card in the column, it will scroll right to that card, allowing you to make cross-references quickly that once required several page views.  Sure, it’s not great for my ad revenue, but it certainly is convenient.

The biggest problem with this feature was determining how it should be used.  Initially, I had the idea that every link on a page should scroll the reference column.  If you actually wanted to visit the page, you could either click the card in the column, or click the link a second time.  At times when you don’t want to leave the page, this was fine, but on guide menu pages, it was a user interface nightmare.  Worst of all, some pages – like standard tables – could really go either way.

To solve all these issues, I added a checkbox that toggles the column’s behavior.  It is located at the bottom of the column, next to the convenient help link.  The checkbox that causes all links to affect the reference column is usually off.  The only pages where it is on by default are card pages and walkthrough pages (which so far are only found in the FF1 and Golvellius guides).  These are the pages where you are most likely going to be cross-referencing many different cards.  You can also turn it on if you want to use it on table pages.  Maybe you want to compare a particular item or monster with others from the table – now that’s easier than ever.  It’s like the card comparison tool is built into every page.

I suspect I will be tweaking this functionality a lot in the near future, so any feedback would be appreciated.  I think this is a very cool feature, but only if people bother to use it.  I want to do anything I can to encourage that.

Nifty New Card Comparison Tool

When I decided to use a card-based design for the site many months ago, one of the first ideas that popped into my head was to have a scrolling “rolodex” of cards.  Basically the idea would be to show one card, but let you easily scroll to others.  The two problems with this idea were that I really wasn’t sure what would be the best way to do it, and I had no idea what to do with it.  Well, both of those problems are now solved, so I present the Card Comparison Tool.  It defaults to comparing game cards, which you probably don’t want to do, but you can easily bring up lists of cards for any type on the site, then compare them side-by-side.  The better way to use this feature is to click the “Compare (this card) to other …” link on each card’s page.  You’ll find this link just below the card on the left side.  This will bring up a comparison, loading all cards of that type on both sides, and bringing up the card you were looking at as soon as it loads.

I really like this rolodex interface, and I am going to be setting up a Git repository and making it a bona fide plugin in the near future.  I’m still not really sure what to do with it – comparing cards looks cool, but I’m not sure it’s really that useful.  This would be a good UI for any card chooser tool, though.  I plan to implement it for GF lists in the FF8 Junction Workshop (which, incidentally, is now working again, and now works on touch devices).