Focused tasks

Focused task pages allow users to focus on specific tasks in a distraction-free environment, sometimes over several screens at a time. Examples include creating a project or installing a product.

Example

Focused task example

When to use this pattern

The most common use of the Focused task page is for single and multi-step processes. The visual structures are slightly different for each.

What happens if…

  • …the task is too small and requires only minimal information and user action, for example adding SSH keys: Consider using a Modal dialog to keep the interaction light-weight and to not lose context from the rest of a task

How to use this pattern

The container widths are available at 400px, 600px, 800px and 980px. Navigation is removed, apart from the Application header and the Page footer.

Single-step task

  • Heading: within the container, on the top left, using an <h2>. Immediately below, a 1px border spanning the whole width (minus 20px padding on each side)
  • Sub-heading within process: using the <h3> tag
  • Other content: follow the standard Atlassian Design Guidelines
  • Bottom of container: finish the content with a 1px border spanning the whole width (minus 20px padding on each side), then follow it with the buttons that apply to the whole container

Multi-step task

  • Process name: on the top left, above/outside the container, using the <h1> tag
  • Progress tracker: to the right of the process name, left-aligned
  • Name of step in process: on the top left, within the container, using the <h2> tag. Immediately below, a 1px border spanning the whole width (minus 20px padding on each side)
  • Headlines within process: using the <h3> tag
  • Other content: follow the standard Atlassian Design Guidelines
  • Bottom of container: finish the content with a 1px border spanning the whole width (minus 20px padding on each side), then follow it with the buttons that apply to the whole container
  • Buttons: Place the primary button with its left side aligned to the left side of any controls (like text entry fields, radio buttons, etc.) further up in the step to conclude the 'positive path' for the step
    • If a 'Previous' button exist, place it to the left of the primary button, while maintain the positioning of the primary button
    • The use of the 'Cancel' link button in the process will remove the user from the Focused task page and return them to the previous context – ask for confirmation via a Modal dialog if users are in danger of losing data