As a follow-on to my recent post about form validation with conditions, I wanted to point out something important about the depth order of the widgets in my diagram: they’re backwards. Or, rather, they might seem backwards if you’ve got your Outline pane sorted front-to-back, which is the default sort order in Axure RP 8. (We talked about the evolution of the Outline pane previously on the blog, in our article about product debt.)

The “front to back” sort setting, which is new to version 8, mimics what you might see in other programs that feature layer lists. In this mode, the front-most widget—the one that will appear in front of any others it overlaps in your diagram—will be listed at the top of the Outline pane. This mode is useful when you’re focused on the visual design of your page.

The “back to front” sort setting lists your widgets from back-most to front-most in terms of depth order (also called layer order or “z-index”). I find this mode particularly useful when doing form design because I want to make sure that the tab order of my elements leads the user through my form from top to bottom and from left to right. Tab order in a web browser is dependent on z-index; hitting the tab key will give focus to the element on the page with the next-highest z-index value.

Animation of sorting and filtering in the outline pane in Axure RP

The sort order of the Outline pane can be toggled quickly via the “sort and filter” icon in the pane’s local toolbar. You’ve also got a number of filtering options in the resulting menu that are extra helpful when working with larger pages.

Share this: