Referring back to the first post in the series, you’ll see near the bottom a list of screens, both new and existing.

The next step in developing the Character Module is to take the userflows and the list of affected screens and distill it to a table of just what exactly needs to be on each of those screens. This table is known as the Interface Requirements for the project.

I find a spreadsheet to be the easiest format to maintain. Each screen will get its own section (or tab, if I was in excel). I tend to use a streamlined version for my own projects, with only five headings: Item, Type, Text, Role, and Comments.

It’s important not to skip this step. It’s tempting to jump straight into visual design, but separating out the types of elements needed on a screen first can improve the usability of your design by letting you group controls right from the beginning where appropriate and ensuring that you don’t get 3/4 through a design and realize you’ve missed an entire userflow’s worth of elements that you then have to bodge into the rest of the design.

In this case the requirements list for screen one was fairly lengthy, so I am only showing screens 2-5 here:

Let’s use just Screen 2 for discussion. Screen 2 is a list of all the characters in the system. The page will have two primary sections: the filters at the top, and the list of characters. You can see that I’ve then broken each of these sections down based on what type of element was in the section. The filters are a series of controls for use in controlling which records are shown, and each control has an entry for the text relating to it. All of the elements on this page are viewable by the public but some controls or information may display to only registered users or only to admins. The records list consists of a row of controls in the headings, the list itself, and then further controls at the bottom for controlling which page you are on.

All of the other screens have been broken down in a similar fashion.

Now that I have this table of requirements, I can go on to the next step, which is to create wireframes for each screen.