This is your heading

You can write here as much as you want, this text will always look nice, whether you write longer paragraphs or just a few words. Click here and try it out.

Micro-interactions: Annotated workflow status mockups

Here's an example of a workflow status bar design for a sales workflow in an e-commerce application, along with sticky notes that help explain the dynamics of the design.

At the top, we see a view-only version of the workflow, with a disclosure icon (>) that allows the user to see details of the workflow status in more detail. This layout could be used on a dashboard or on an overview screen for the Order.

The series of mockups below the view-only panel show an interactive version of the workflow status, in a bar design that also allows the user to set the current status. Sticky note annotations to the right of each state of the bar provide details about how the bar should work responsively (in different display conditions) as the workflow proceeds. The annotations are especially helpful for front-end engineers who implement this UI component.

The bottom mockup shows the popover that appears when the user clicks/taps the button displaying the current status of the workflow (in this case, "Sent to Warehouse"). This popover allows the user to manually change the status of the workflow (if current conditions allow that). The annotation sticky note describes rules for the display of the workflow in the popover, and the origin of the rule descriptions/help that are displayed in the lower right corner of the popover (such as those shown for the "Customer Review" step that the user is hovering over; this content is edited by a user who has used an Admin interface to set up the workflow itself).

Mobile interaction: Creating a new medical appointment

These mobile mockups show a simple navigation scheme for specifying all the details required to create a new medical appointment by a user who works for a healthcare provider.

Primary actions are in the header at the top of the screen (e.g. "Close appointment" and "Save appointment" on the New Appointment screen, or "Back" and "Search" on the Select Patient screen) and are thus easy to find. This layout is consistent across interactive screens in the app.

Note how the main screen provides an overview of all the information necessary to create the appointment, with each section of information on its own row. The screen displays only the primary value for each section, thus keeping information density low to avoid overwhelming the user, make scanning easier, and also to avoid scrolling.

The navigation scheme is a simple "right and left" slide from each overview section to each details screen and back. UI animation is used to slide the details screen in from right to left (and then slide the details screen back out from left to right when returning to the main screen). This animation helps the user grok the "geography" of the screens easily.

On the Select Patient screen, a list of recently viewed/touched patients appears as the default view. If the user is creating a new appointment for a patient whom they've recently interacted with, the Recent list saves the user from having to browse or search for that patient. The user could select the patient they need in as few as 3 taps.

Note the alphabet carousel on the "All" view of the Select Patient screen, which allows the user to quickly jump to a specific section of the list without having to scroll endlessly. This is another time-saver that is particularly valuable if the list of patients is large (as it is likely to be).

Finally, note that the patients in the lists are displayed as collapsible/expandable accordion rows, providing at-a-glance access to primary information (name, gender, date of birth) in the collapsed version, while hiding details that might be painful to wade through if displayed for every patient. A simple tap on a patient's row displays the next level of details for that patient, such as age, preferred name, maiden name, phone number, and address. If the user needs to see the patient's full details, such as previous procedures, prescriptions, etc., then a "Full Details" disclosure button is provided at the lower right of the record.

Navigation via user-defined bookmarks (tablet)

For applications containing many thousands or millions of objects, users often want to "continue where they left off" or quickly navigate to specific objects that they may work with frequently, such as an active client or a current sales quote. Most users are familiar with bookmarking URLs in web browsers, thus making this type of navigation feature easy for users to understand and use in applications.

This mockup shows a design for a bookmarking feature, in this case as viewed on a tablet. Throughout the application, the user can "bookmark" almost any object by tapping its "Bookmark me" icon. This causes the object to appear in the list displayed in the panel that drops down when the Bookmark icon in the application's header is tapped.

As shown here, the list can be grouped by object type and sorted by how recently each object was viewed/touched or by object name. The user can navigate instantly to any object in the list by simply tapping its row.

Assessing information security risk for products used by an organization

Healthcare organizations must continually assess their compliance with government regulations designed to protect patient information, such as HIPAA. This wireframed design allows a user to easily see which products are in use by their organization, along with each product's Importance and Risk Rating, which are stored in Clearwater's IRM | Vendor SaaS product.

Again, only primary information for each product (Vendor, Product name, Importance rating, and Risk rating) is shown by default, with details available by expanding the product's accordion row. For organizations with a large number of products in use, this allows the user to quickly spot products that need attention due to a high Risk rating (if coupled with a sufficiently high Importance rating).

When a product is selected in the list at left, the user can not only see details about the product inline in the table but also, using the panels on the right:

• Begin a new assessment of the product, and

• See all currently Active assessments for the product, who each assessment is assigned to, and each assessment's completion status.

This screen has high information density but uses information hiding and progressive disclosure to effectively communicate what the user needs while avoiding overwhelming the user with too much detail at once.

Equipment Record Details

Building on the above example, here's an Equipment Records details page for a manufacturer of battery packs for electric vehicles (EVs).

There's a large amount of data here, much of it actionable. Clean, consistent layout with lots of whitespace makes consuming the data comfortable and enjoyable. To help manage the large amount of data here, we provide a nav panel on the left containing an overview of the different categories of data, with direct links to each section, along with icons showing the status of the data in each section: complete (check mark) or incomplete (warning triangle).

Each details section on the right is collapsible, so that the user can hide data that isn't of interest at the moment. Actions are included in the context of the specific section to which it applies (such as the "Order Parts..." button in the Maintenance / Parts section).

Some data and actions use "hero"-style typography for at-a-glance visibility (such as the Status dropdown in the top section and the "Claims filed" number in the Warranty section).

Dashboard with Interactive Panels

This dashboard wireframe uses responsive panels to display data in a variety of ways: as hero values, in a bar chart, in a line chart, and in tabular grids. The panels are interactive -- for example, note the interactive elements in the upper-right corner of the # of Critical Risks panel (top row, 3rd from left) that appear on mouseover/hover (or via a tap on the panel when using a touch device such as a tablet), allowing the user to learn more about the panel (via the "i" icon button) and to use a hamburger menu to edit the settings for the panel.

Creating/editing a complex data structure

This mockup shows an interface for creating and editing a very complex data structure -- a service (or product) model containing a hierarchical segment configuration, a Bill of Materials (BOM), model rules, and versions of the model.

While the data being edited is extensive and complex, effective use of information hiding, progressive disclosure, direct manipulation, and inline editing in the UX design helps to manage this complexity for the user.

In the Configuration of the model on the left of the page, the user can:

• Expand and collapse the segment hierarchy to display details of segments of current interest and hide details of other segments.

• Display all details for a segment or option in the details pane on the right side of the page by simply clicking/tapping the segment or option name.

• Use direct manipulation via drag-and-drop handles on each segment to rearrange the model's hierarchy.

• Directly edit primary data (segment and option names) in the hierarchy display via inline editing.

• "Switch gears" to focus on other aspects of the model, such as the BOM, by using the tabs at the top of the model panel.

Contextual menus in a Search Results list

I believe that locating actions within the display context of the object to which the actions apply is a tenet of good layout. Here's an example of a Search Results list showing a multi-column layout, with contextual ("3-dot" or "ellipsis") popup menus for each item in the list.