Skip to main content

Experience Design

Customizing Widget Tables in Axure

In UI design communication: General approaches and tips for Axure, I discussed the kind of content to include in a UI design specification and showed how to customize the information you annotate in Axure. This post discusses customizing the final specification. While this post describes using Axure to create a specification, the underlying organizational principles can be used in any context since easier to read and better organized specifications will benefit every team.
Because it would take a very long post to discuss each customization Axure supports, I’m focusing specifically on customizing the widget tables, which contain the bulk of the content in a generated specification.  If you are creating content for multiple audiences, and therefore, likely to be generating several documents from Axure, custom widget tables are essential.
Axure’s default template generates a single widget table containing all content. If you have customized the UI content at all, this table can be lengthy with very tiny columns. Dense, narrow tables are difficult to read. Lumping all information into a single “Widget Table” does not help the reader quickly understand what each piece of information relates to. As I stated previously, UI design specifications are about communication. When layout impedes understanding and usefulness, it should be adjusted.

Axure's default specification showing a single widget table

Specification showing a single widget table (Click to see larger image)


Breaking your content into several tables results in output that organizes the content meaningfully and can make for more readable tables.
Specification showing customized widget tables

Specification showing customized widget tables (Click to see larger image)


Here is how I created these custom widget tables.

Set up a custom generator

Generator Configuration window with custom generator

Generator Configuration window with custom generator


While not essential for customizing widgets, I find it useful to create a new generator where I define all the customizations for a project. Since I work with clients who have different documentation standards, having a custom generator for each project helps me ensure that the output is tailored to serve the specific needs for each team and that I use the right template for each project. This also provides a way to easily port complete sets of customizations across Axure files either using the configured RP file as a template or by importing the generator using the File > Import from RP File option.
Select the More Generators and Configuration option from the Generate menu in Axure to open the Generator Configurations window. To create a new generator, you can start with Axure’s default by duplicating the Word Spec 1 option or click select Word Specification from the Add menu. Highlight your new entry and rename it. Then click the Edit and Generate icon (the page and pencil) to open the Generate Specification window.

Configure widget tables

The left pane shows all the types of content you can customize. Click the Widget Properties link.

Generate Specification window, default Widget Properties

Generate Specification window, default Widget Properties


In this pane, you organize exactly how your information displays. You can configure tables and the content shown in each.

  • Add additional tables using the Add link. Doing this defines the overall organization of your content into chunks of meaningful information. I usually have widget tables that correspond to any Views of custom annotations that I have created. Unfortunately, Axure does not provide those Views as options to create widget tables.
  • Name each table using the Table Header field, using more specific headers than the default “Widget Table” to help readers understand content more quickly.
  • Select relevant content for each table from a list of Axure default options such as footnotes, labels, and tooltips and your customized annotations. Grouping similar information will speed reading and comprehension. Of course, just because content is available does not mean you have to include it if it does not help your team. One of the lengthiest pieces of information is the interactions, which describe each step in the interactions you create for your prototype. Rarely do I write for stakeholders who need to see the prototype implementation details, so I usually do not include this for the sake of brevity. On the other hand, you can repeat information across tables if it brings clarity. I usually include footnotes and labels to provide a common cross-reference in every table.
  • Select options for what widget information to show. This is a useful way to avoid empty, wasted space on the page:
    • Include rows only if widgets have useful annotations to reduce empty rows. Adding any annotations to a widget generates a footnote, but when you may only need a label to configure interactions (for example, when a common control is already documented on another screen), including a row with just a label takes space without providing meaningful information.
    • Restrict certain data according to selected criteria, which can be useful if you are generating multiple specifications for different readers (hint: create a custom generator for each group).
  • Select options to eliminate empty columns, also to avoid empty space when no information is available.
  • Relabel column headings for Axure content such as Footnote, Label, and Interactions.
  • Allow rows to break across pages. By default, Axure keeps rows intact, which I generally prefer, but if you need extensive descriptions on widgets, you might end up with one row per page.

The following shows an example of how I set up one of the tables that resulted in the customized specification shown earlier.

Generate Specification window, with custom Widget Properties

Generate Specification window, with custom Widget Properties


The customizations you make should reflect the needs of your particular team (or teams). Grouping and tailoring the information included in widget tables will help you provide more effective and usable UI design communication.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Karen Bachmann

More from this Author

Categories
Follow Us
TwitterLinkedinFacebookYoutubeInstagram