Intro

The UI shell serves as a centralized user interface hub, designed to streamline user interactions and boost productivity. It is the starting point for users to initiate conversations with Joule, providing a platform for intuitive and natural communication. The UI shell encompasses adaptable workspaces, known as spaces, which cater to various tasks and support collaboration. It also integrates jobs, allowing users to automate routine processes while maintaining control over crucial decisions. Bringing these elements together, the UI shell creates a cohesive digital environment that meets diverse workflow needs efficiently.

UI shell

Anatomy

UI Shell

1. Main Navigation: Provides access to all core experiences. It appears on every page and lets users navigate to each core experience’s entry page. It supports responsive layouts across breakpoints.

2. Pane Bar: Manages layout by letting users toggle the list pane (left) and supporting pane (right). It also hosts experience‑specific actions provided by each core experience.

UI shell anatomy

Main Navigation

Behavior and Interaction

Main Navigation

Users navigate the UI shell through the main navigation located on the left side. The Joule Work logo serves as a link to initiate a new conversation with Joule. The main navigation is organized into a primary section, where users access core experiences, and a secondary section, which includes notifications, the user menu, and options to collapse or expand the navigation. Users can customize the displayed core experiences in the primary section via account settings. Hovering over icons reveals menu item titles, while expanding the main navigation consistently shows the items with their icons, titles, and any applicable create actions. In the primary section, core experiences display their content across up to three panes on the right, while secondary items, such as notifications and the user menu, trigger an anchored popover. Only one core experience remains active at any time.

Pane Management of the Core Experiences

When users navigate to a core experience, the content is organized into three panes. The list pane on the left typically displays a list of created conversations, spaces, jobs, or solutions. Selecting an item from this list opens it in the main pane, which occupies most of the screen width. The supporting pane on the right allows users to either engage in a conversation with Joule (for spaces, jobs, or development) or view details selected in the focus pane, such as from a space or conversation. When the supporting pane is closed, a floating Joule input appears at the bottom center of the main pane, allowing users to enter prompts. Upon entering a prompt, the supporting pane opens automatically to continue the dialogue. Users may also access this pane using the conversation icon button in the header section of the main pane bar. If the supporting pane is displaying a conversation, it remains open even as users navigate to a different core experience.

Pane bar to open and close side panes

Pane management view with three open panes

Pane management view with two open panes and the list pane closed

Each pane features a dedicated pane bar that offers orientation and pane-level controls. The leading slot consistently displays context with a title and, when necessary, breadcrumbs. The trailing slot, which is optional, contains actions that impact the entire pane's content. Pane bars are used for wayfinding and high-level controls, such as opening or closing adjacent panes, switching the supporting pane between conversation and details modes, or initiating actions on the currently focused entity, such as creating or renaming items. Avoid placing body content, inline editors, or list/grid filters that belong in the pane content, as well as global shell or account settings, in a pane bar. Actions should not span multiple panes. The list pane bar reflects hierarchy and list utilities; the main pane bar represents the active object or workspace and may display its immediate actions, noting that the main pane itself cannot be closed. The supporting pane bar, which supports either conversation or details, should only contain controls pertinent to that side pane, excluding primary workflow commands. Bars are layout-managed and responsive. Keep actions concise and organized, with identity on the left and secondary actions on the right, deferring any lengthy or task-specific elements to the pane content or an in-pane menu.

Notifications

Events from core experiences can trigger a fly-in notification. These notifications are listed in the notifications popover, which can be accessed from the main navigation. In collapsed mode, a dot indicator signals new notifications, while in expanded mode, a counter badge provides the alert. Users can click on notification items to navigate to the related event, such as inspecting a newly created space or addressing a job that requires attention, or to clear the notifications.

Notifications list

User Menu

The user menu includes profile information (avatar, email address, account), settings, skills, My Apps, help tours, AI notice, and a sign-in/sign-out button.

User menu

Settings

When users access the settings, they are displayed as a list in the list pane and as content in the main pane. The UI shell offers basic settings related to appearance, such as dark or light themes, language selection, and accessibility features like keyboard shortcuts. Any additional settings for core experiences are directly implemented.

Settings page showing keyboard shortcuts for accessibility

My Apps

"My Apps" can be accessed through the user menu, providing a centralized overview of all the user's applications, which open in a new tab. At the top, it shows a "Recently Used" section displaying up to 12 of the most recently used apps. The main section is organized into different tabs. By default, it shows all of the user's apps, which they can star to add to their "Favorites" tab, with a limit of 18 apps. Product-specific tabs, such as "SuccessFactors", group all apps related to the respective product. A dedicated "Joule Studio" tab lists all apps created within Joule Studio.

"My Apps" page showing recently used apps and all of the user's apps