Hero Lab Online is designed to work across a broad range of devices in different sizes and capabilities. Many users prefer to use a laptop or tablet, while others prefer desktops and phones. Our goal is to ensure that users have access to Hero Lab on whatever device that works best for them. To accommodate this diversity, HLO adapts to the device it's being run on at any given time. As the display size gets progressively larger or smaller, the layout adjusts accordingly, collapsing elements when needed and stacking things as appropriate to the available space.

Three Panels

The overall interface has three primary regions. On the left is the navigation panel, which allows access to the different aspects of the campaign or character that's loaded. In the middle is the main panel, which is where users most frequently manipulate content. On the right is the side-panel, which enables viewing other character aspects and campaign elements while keeping the central main panel contents undisturbed.

Both the navigation and side panels can either overlay the main panel or be pinned in place . When pinned, a panel is always visible, and the main panel is shrunk in width, so the pinned panel appears alongside it. If both panels are pinned in place, then all three regions are always visible. When a panel is set to overlay, it obscures a portion of the main panel and can be dismissed to reveal the main panel beneath it. This behavior is toggled via the left/right-facing arrows in the upper left and right corners, allowing users to tailor the interface layout to suit their device and needs.

When the screen size is limited, the navigation and/or side panel may not be able to be pinned in place. However, the panels are still accessible via icons in the interface and behave as overlays when summoned.

Navigation Panel

The name of the currently loaded character or campaign always displays in the upper left corner of the navigation panel. If the character is a PC or cast member of a campaign, the campaign name is present. In this situation, clicking on the campaign name returns you to where you last were within the campaign when you initiated the full edit of the character.

Beneath the character or campaign name, each major aspect of the element is listed. Clicking on an aspect loads its details into the main panel, where it can be edited.

The navigation panel is currently rather simple, but its utility will grow as future enhancements are introduced into the product.

Side-Panel

The side-panel on the right displays a wide range of information and is valuable both during play and during preparation, providing different utility in each situation.

Outside of a campaign or game session, the side-panel offers an overview of the character shown in the main panel. The main panel shows different aspects of the character (e.g. skills, equipment, spells, etc.), while the side-panel presents a summary of the entire character. This makes it easy to refer back to other details when making choices and seeing the effects of choices across the character.

When a game session is underway, the side-panel serves two different purposes, one targeted at players and the other targeted at GMs. For players, their primary focus in the main panel will be the PC, so the stage can be viewed in the side-panel, keeping the player abreast of everyone involved in the current scene and their state.
While the stage is shown in the side-panel, clicking on a character's portrait area makes it easy to inspect and update the character's health and related details. Clicking anywhere else within the character entry loads the character into the main panel.

For GMs, the stage is typically the primary focus within the main panel, so the side-panel allows individual characters to be viewed without abandoning the critical context of the stage. When presenting characters, the side-panel breaks them into subsets, with one subset shown at a time. The subset to be viewed is selectable at the top of the side-panel. Actions such as die rolls, equipping weapons, toggling abilities, and consuming resources are also performed within the side panel.

Other Interface Conventions

Info Button

In various places throughout the interface, a small icon appears showing an 'i' within a circle . This typically occurs in the upper right corner of a block within the main panel. Clicking on this icon displays useful information about the options available.

Validation

In many groups, official rules are often not enforced due to "house rules". To readily accommodate this, Hero Lab uses a validation-based approach to character creation. When an aspect of the character doesn't conform to the official rules, a validation error is reported to flag the problem while still allowing the change to be made. The error is also highlighted in red to call attention to it. 

A complete list of all validation errors that exist are viewable in full via the clipboard icon at the top of the screen . A summary of the issues is accessible at the top of the character summary within the side-panel on the right.

Validation also signals aspects of the character that still need to be completed. The tabs on the left are highlighted in red when they contain errors and in yellow when there are things still to be completed during character creation.

Prompting

When first creating a campaign, prompts appear within the main panel to identify activities that have not yet been performed. The goal is to guide new users through the initial steps and point out where to take these actions.