Dynamic Questionnaire Sidebar
Components
Trigger Element: A dropdown menu within the checklist form where question types are selected.
Sidebar Content: Contains input fields, checkboxes, and other relevant controls for setting question-specific rules and attachments.
Purpose
The Checklist Configuration Sidebar enables dynamic interaction within the checklist-building interface. It appears when a user selects a question type, providing specific configuration options that allow for detailed customization of each question tailored to the needs of technicians during their workflow.
Description and Usage
In a facility management application, a technician setting up a new work order checklist selects "Safety Confirmation" as a question type. The Checklist Configuration Sidebar appears, offering options to add a mandatory URL link for safety protocols and enable attachments for uploading relevant documents.
This sidebar component activates when a user chooses a question type from a dropdown menu within the checklist questionnaire interface. It serves to offer context-specific settings :
If question type is for example acknowledge , it displays acknowledgment rules, Answer Required, Attachments, and URL linking, thus facilitating a comprehensive setup for each question according to operational requirements.
If question type is for example Numeric Type , it displays additional input rules like Answer Required, Answer Persistent, Numeric Failure Criteria, Attachments, and URL linking, thus facilitating a comprehensive setup for each question according to operational requirements.
How to Use
The user writes their question in the Question Field
The user selects a question type from the dropdown in the main checklist interface.
The sidebar automatically appears, populated with relevant fields based on the selected question type.
The user completes the fields as necessary and uses the action buttons to save, discard, or add more configurations.
Usage
Use the Dynamic Questionnaire side bar when users need to specify detailed configurations for questions within a checklist, such as safety checks, procedural confirmations, or any scenario where conditional logic is required.
Alignment
Visual Alignment
Placement: The sidebar should consistently appear on the right side of the screen, providing a natural workflow from left to right (or right to left in RTL languages), aligning with Western reading patterns.
Proximity: Related elements within the sidebar should be grouped closely to reinforce their relationship and reduce cognitive load.
Consistency: Ensure that the sidebar maintains consistent styling across different types and instances to avoid confusion and maintain brand integrity.
Best Practices
Minimize Clutter: Only display options in the sidebar that are relevant to the selected question type to avoid overwhelming the user.
Progressive Disclosure: Use collapsible sections or tooltips to provide additional information without taking up screen real estate.
Feedback Mechanisms: Provide instant feedback for actions taken within the sidebar, such as a confirmation message when settings are saved or an error message when an invalid URL is entered.
Accessibility Considerations: Ensure all interactive elements are accessible, with keyboard shortcuts, screen reader support, and sufficient color contrast.
Accessibility
All elements within the sidebar must be accessible with keyboard shortcuts and navigable via screen readers.
Acknowledgement Type
Numeric Type
Enter Question Here
Enter Question Here
Empty State (Default State) - With Two Questions
Empty State (Default State) - With One Questions
Enter question here
Question
Question Type
Acknowledgment
Enter question here
Question
Question Type
Acknowledgment
Enter Question Here
Question Rules For Acknowledgment Type
Question Rules For Acknowledgment Type
Question Rules For Acknowledgment Type
Attachments
Answer Persistent
Answer Required
Answer Required
Required
Upload attachment
Required
Upload attachment
“No Acknowledgement” Results in Failure
“No Acknowledgement” Results in Failure
Attachments
Attachments
View URL Required
1
1
2
3
2
3
Opened
Closed
Sidebar Collapsable Header
Toggles for Various Settings
Secondary section of the side bar
Selected and Unselected States
Selected State (Blue):
Function: Indicates that a particular option or setting is currently active or chosen, when the question is in selected state, and Question Type is chosen (Acknowledge, Selector, Text Entry, or Numeric Type) the dynamic questionnaire side bar appears.
Style: A blue color (#EAF1FA) is used to highlight the selected item or option, drawing user attention and confirming selection. This color should be consistent across all selectable elements in the sidebar to maintain visual harmony and intuitiveness.
Unselected State (Gray):
Function: Shows that an option is not active or has not been chosen, when it’s not active, the side bar does not appear
Style: A neutral gray color (#F7F7F7) is used for unselected items. This color provides a clear contrast to the blue selected state, making it easy for users to distinguish between active and inactive choices. Gray should also signal interactivity, indicating that the item can be selected to change its state.