Rapid Keyboard event-driven Prototyping in Fireworks CS5


When working on the UX of websites, iterative prototypes are fairly straightforward, thanks to tools like Fireworks, Omnigraffle, and Axure.  However, in the last few years, I’ve been lucky enough to be exposed to projects that extend beyond traditional web interfaces – instead working across multiple devices, and primarily TV and Inflight Entertainment (IFE) interfaces.

TV and IFE interfaces are unique as they typically require remote-based interaction.  Remotes generally use what’s known as the Directional Pad or “D-Pad” (Up, Down, Left, Right and Select actions).  Sometimes different remotes have different buttons to cater for in the UX design, such as colour buttons, menu buttons.

One of the typical problems I’ve faced as a UX designer is how to rapidly iterate UI prototypes to test out remote-driven concepts.  People that work in this space will probably recognise the lack of software that caters to this style of prototyping. Unless you want to build a Flash of Flex prototype, which can be too high fidelity for your needs, or too expensive in terms of time and resources, there are few options.

So of course, I’ve tried and tested many work-arounds across many programs, and below I’ve outlined my preferred approach – what I happily call my super special secret – of course using my wireframing tool of choice – Fireworks CS5.

How to create keyboard event-driven prototypes in Fireworks CS5

When to use it:

This style of prototyping works best as low-fidelity prototyping,and preferably controlled scenario driven prototyping.  I’ve used this method successfully for both internally iterating and testing UI concepts, as well as to express concepts and solutions to clients. I’ve also used it in Scenario based usability testing.

As you’ll soon see, the nature of this style of prototyping is based on linear state driven wireframing.  It’s not efficient or suggested as a method for expressing an entire system end to end – rather, it’s best for testing specific scenarios or user flows, or compartmentalised interaction models.

What you’ll need:

  • Adobe Fireworks CS5
  • The ability to run Applescript (i.e, be on a Mac… sorry PC users ;) )
  • Plain text editor (or other script editor)
  • A basic understanding of Javascript and variables in programming will help you understand how the system works – but It’s VERY straightforward, so you don’t need to be a coding ninja.

Files you’ll need:

  • Example.png – an example Fireworks file you can take a look at to get an idea of how to set up your Fireworks files.
  • keyboard.js – the file that automagically interprets your keypresses
  • addJavascript – An AppleScript to tell all your HTML files where to find the JavaScript file.
  • Also included: an example keyboard driven prototype output from the Fireworks file

Download the required files as a Zip

Setting up your prototype

The beauty of this method of prototyping, is that if you’re already wireframing in Fireworks, it doesn’t take much more effort to put together a working prototype to test.  Take a look at the example Fireworks file – it’ll be the best way to understand how you need to be putting your Fireworks files together.

In the example file, I’ve used Apple TV 2′s main menu system as an example.  Imagine you want to test out or express the general interaction model – moving between the primary and secondary navigation, as well as “featured” content”.

This style of prototyping is a state-based linear driven prototype. Therefore, you’ll be manually creating each focus position you want to include in the prototype – each state in a separate page.  This may seem tedious – but trust me – it’s rapid.

For example, I set up 5 separate pages to mimic focus shifting horizontally between the primary navigation items:

It’s best to name each page something recognisable, as you’ll later be using these pages to hook up your keyboard interactions.

Setting up the “remote” keypresses

This prototyping style uses keyboard events to mimic remote key presses.  Depending on your needs, you can simply map remote presses to your keyboard, or, if you’re planning on doing any usability testing, or want to get the real sense of using a remote, you can typically pick up an IR based remote and receiver such as a standard media centre remote from a tech store.

There are three key steps to setting up your remote, and the good thing is, you only need to set this up once.

Step 1. Find out the keypresses you’ll need

You’ll need to figure out what remote keypresses you’ll need in your interaction model.

Typical keys are: Up, Down, Left, Right, Select (OK), and Back. Depending on the project, there may be other buttons you want to map, such as colour buttons, like Red, Yellow, Green and Blue, or a “Menu” or “Home” button.

Many of these have obvious keyboard parallels, such as the directional arrow keys on your keyboard, “Return” or “Enter” for “Select”, and “Backspace” for “Back”.  Where there aren’t any obvious ones, you’ll need to decide what keys you want to use.

Alternatively, if you have a media centre remote you want to map, then you need to figure out which keys you need in your prototype.

Tip: There’s nothing stopping you, but I personally would not waste time worrying about keys I won’t be needing in the prototype – and it’s pretty easy to add new keys as you need them.

Using your keyboard, or media centre remote, find out what the Javascript keycodes are for your desired keys, and make note of them.  I find the following site: Cambria Research a simple tool to do so.

Step 2. Make room for your Remote in your Fireworks file

In the Fireworks file in which you’ve got your state-based wireframes outlined, increase the size of the canvas on all pages, for placement of your virtual remote.  It’s up to you where you place it, but I prefer to place it below the wireframe.

Canvas size can be found in the Properties Panel.

It’s up to you how much room you’d like to leave, but adding about 100 pixels is more than enough.

Ensure you change the anchor appropriately – and uncheck “Current Page only” to apply the change to all pages.

Step 3. Create buttons in Fireworks

Select the first page in your prototype.

For each remote button you’ve identified above, create a button symbol in the space you’ve created.  I prefer to put the remote on a separate layer, to allow easy locking and management of these symbols.  You’ll only create these symbols once, and copy them to each page later.

(i) Draw the button

Draw something that represents your button. It’s best to keep it big enough to select easily, but small enough to remain discreet pieces in your prototype.  Depending on the end use, you may want to hide these from your final output.

(ii) Convert to Symbol

Select the pieces of your button and right click to bring up the contextual menu, and select “Convert to Symbol”.

 

Select type “Button” and give it a descriptive name, such as “leftButton”.  This name is only used to help you recognise your object in your layers panel.

 

(iii) Give your Button an ID

With the newly created button symbol selected, give the symbol an ID in the Properties panel.  Ensure you don’t have any spaces in the ID. This ID is IMPORTANT. It will be used in your Javascript code to identify the button.

Repeat the above steps for each key you need, and ensure each button symbol has a unique name.

At the end of this, the first page of your Fireworks file should look something like below, with each Button you’re going to need sliced and defined.

In the example file, the buttons we’ll be working with are a typical D-pad: up, down, left, right and OK.

Step 3. Edit your javascript file to match

The Javascript file is a keyboard event handler with some tricksy code to automagically retrieve link information that will be output by Fireworks’ HTML export function.  It’s easiest to update the provided Javascript file, where I’ve included embedded instructions.

(i) Define link variables

The link variable is a line of code which looks at the HTML code output by Fireworks to determine where to point the prototype, when that particular key event is received.

For each button you’ve defined in your prototype file, you will need a line of code to tell the Javascript where to look for the link information.  An example is shown below, used to define my variable “leftLink”.

var leftLink = document.getElementById("leftButton_s1").parentNode.getAttribute("href");

You can pick any variable name that makes sense to you.  The important part is to use the ID you gave your button in Fireworks in the definition (i.e. replacing “leftButton_s1″ with “yourButtonName_s1″).

IMPORTANT: You need to add “_s1″ to the end of the ID you gave your button.  This is because this is how Fireworks will output your Button when it automatically generates your HTML prototype.

Repeat for each button until all your buttons are defined.

(ii) Define keycodes

For each button, you’ll need to specify the JavaScript keycode you identified in Step 1.  This tells the JavaScript what keypresses (or remote presses) it should be expecting.

You can use any variable, so long as you match it up correctly in the next step (iii switch).  For example, for a standard keyboard’s left arrow key, it’s a keycode of 37:

arrowLeft = 37;

(iii) Add Switch cases

For each button, add a case in the Switch function, following the format shown.  You only need to update two words in the example below.  [arrowLeft] should be replaced with the keycode variable you defined in (ii). [leftLink] should be replaced with the associated link variable you defined in (i).

case arrowLeft:
document.location.href = leftLink;
break;

Once you’ve done this, save your modified JavaScript file. It should sit in its own folder called “js”.

Hooking up your prototype

The good news is, once you’ve finished laying the ground work, it’s actually quite straightforward from this point.  In fact, for many projects you’ll find yourself reusing previously created buttons, and only slightly modifying the Javascript file (as many remotes are the same).

Defining the links

Assuming you’ve laid the ground work, we’ll now be focusing on using the remote buttons we’ve laid out to define where each key press should take us, from each state.

We’ll use the standard link definition methods provided by Fireworks, and the button symbols we previously created, to do so.

For example, on my default page: Movies_Default, I know that pressing “UP” should take me to a state I called Movies_Feature.

So using the “Up” button I created earlier, I’ll define its link to be “Movies_Feature” in the Properties panel.  Because I’m using the inbuilt link feature of Fireworks, setting up these links is as simple as choosing the link from a prepopulated list.

Repeat this procedure for the other buttons that require actions from this state/page, for example, “DOWN” should take me to Movies_Genres, and “RIGHT” should take me to “TV_Default”.

I also know that “LEFT” and “OK” don’t have any actions – and that’s OK – not all buttons need a link, if there is no interaction needed for a button on that state, you don’t need to define anything.

Repeat for the remaining pages

Copy the Remote buttons, and paste onto your next page/state (ensuring its on the right layer), and repeat the process of defining your links.

Export as HTML prototype

Once you’ve finished putting in all your links, export the prototype as HTML and Images using Fireworks inbuilt HTML export function. Output the files into a new folder, ensuring this sits on the same level as your js folder.

Settings are:

  • Export: HTML and Images
  • HTML: Export HTML File
  • Slices:Export Slices
  • Pages: For first export, use “All Pages”. For subsequent updates, you can also highlight pages you want to export and use “Selected Pages”
  • Checkbox on: Include areas without slices AND Put Images in Subfolder

 

Run the AppleScript

The final step for newly exported HTML files is to run the included AppleScript called “addJavascript” – and select all your freshly exported HTML files.

This adds a piece of code to each HTML file, which shows it where to look for the Javascript file that makes the magic happen.  You’ll need to do this for any freshly updated HTML files, each time the prototype is updated.

Launch it

Lastly, launch the prototype in a browser. Using the keyboard or remote (as you’ve defined it), you should be able to navigate through the prototype with ease.

Here’s one I prepared earlier.

You can use up/down/left and right to navigate the menu.  You’ll also notice I’ve only partially hooked up navigation for the “Movies Feature”.

Iterate!

As with any good rapid prototyping method, the key to this one is you can iterate quickly and easily.  You can add new pages/states. Update the behaviour of the buttons – and use the prototype to test whether it feels “right”.  Once you’ve set up the first round, updating and iterating is as easy as re-exporting changed pages, and running the AppleScript against them.

A word of warning: As with all good hacks, it’s a little buggy. A couple of things to check if you’re having trouble: Make sure your code is clean. And COPY (don’t duplicate) the remote from page to page.

Happy Prototyping! :)