Anatomy
Learn about the individual parts of analytics Q&A.
Query builder
- Title: Text that instructs the user what to do
- Subtext: Explains the intent and purpose of the component
- Input field: Area for users to enter their questions; input suggestions appear based on what the user enters
- Text link: Initiates a modal with tips and examples for helping the user ask questions in the input field
- “Ask” button: When selected, it submits the user's question and redirects the user to the results page
Subcomponents within query builder
See usage guidance for heading
See usage guidance for input field
See usage guidance for text link
See usage guidance for typeahead
Results page
- Query builder: Appears at the top of the results page with the previously asked query; the query is directly associated with the details and data visualization that appears
- "Details" disclosure control: Bare button that shows or hides the details of the query result
- Details: Data related to the result of the query and data visualization chart
- Data result: The result of the query that appears as a type of data visualization chart or list
- Text link: Initiates a modal with tips and examples for helping the user ask questions in the input field; on the results page, it moves underneath the results instead of appearing within the query builder
Subcomponents within results page
See usage guidance for bare button
See usage guidance for typeahead
Usage
Use analytics Q&A so that users can ask queries about their data from anywhere. It gives users the ability to quickly analyze data by providing them with details and a data visualization chart.
You can add this component to any type of page in your experience where a user may want to ask questions about data.
Design recommendations
Learn how to apply anaytics Q&A in your design.
Alignment and positioning
Always place analytics Q&A in the main content area of the page and avoid placing it in a sidebar.
Currently, the content within the query builder part of the component only supports center alignment. Remember to take this into consideration when placing the component on a page.
UI text guidelines
These are some recommendations for using text within analytics Q&A:
- Use sentence case for all titles, labels, and column headers
- Keep all text labels informative and short to increase readability and scanning
- Keep content concise and purposeful to help a user understand options and actions, and move successfully through tasks to achieve their goals
- In the title, lead with the action the user should take
- The subtext should provide additional help or context to the user
Behavior
Learn how analytics Q&A behaves when the display changes or a user interacts with the component.
States
The query builder part of analytics Q&A has 2 states: default and active.
Default state
In the default state, an example query is displayed in the input field. You can customize this based on your individual use case.
Active state
In the active state, the user has entered text into the input field. Additionally, the button changes to the primary variant to show the user how to submit their query.
The subcomponents within analytics Q&A have their own states
In this example, analytics Q&A component ask button changed to primary variant in the active state.
Responsive behaviors
Analytics Q&A automatically resizes to fit the display.
When the display gets smaller, the title and subtext wraps. The elements within analytics Q&A always appear in the same order.
In this example, the analytics Q&A component appears in a smaller display.
Interactions
Prior to the user selecting the input field, placeholder text appears in the input field. When the user starts typing in the input field, the placeholder text disappears. They can then enter a query and submit it to go to the results page.
Viewing tips for writing a query
If the user wants to view suggestions before entering any text in the input field, they can select the bare button to open a tips modal. The modal appears and presents the user with tips and keywords for creating natural language queries.
In this example, the user is viewing the tips for creating a query to add in the input field.
Viewing query suggestions
Auto-suggested query options appear inside a panel once the user begins entering text into the input field. When a query is added by the user or selected from the list, the "Ask" button appears in the primary variant.
In this example, the user has started entering a query in the input field. A list of suggestions appears in the panel underneath it based on what they've entered.
Viewing results
When the user selects the button to submit their query, the current page is replaced with the query results page. A "Back" bare button appears at the top of the page if the user wants to go back to the previous page.
On the results page, users can ask new questions and generate new results. Users can also choose to show or hide the details. When the data visualization chart is visible, the user can also interact with it. These interactions depend on the type of data visualization chart and any custom interactions you have applied to the chart.
In this example, the user is searching for their number of open incidents.
Usability
Analytics Q&A complies with all internationalization and accessibility requirements.
Internationalization
Analytics Q&A supports 4 languages, including Spanish, French, German and English. If a language is not currently supported, the component is hidden from view.
Accessibility
Learn how to access the actionable elements of analytics Q&A through keyboard interactions and screen readers.
Analytics Q&A tab order
This is the high-level tab order for analytics Q&A.
This is the tab order for the analytics Q&A component.
Keyboard interactions
You can access the actionable elements of analytics Q&A with these keyboard keys:
- Tab: Moves through actionable elements in the component
- Shift + Tab: Moves focus back to the previous element
- Space or Enter: Initiates any actionable elements (like the button or text link)
- Arrow Up and Down: When focus is on options in the panel, it moves focus between the options