Theme

Story: 3.5.4. RJ. Help Center. Most Common Questions Accordion

Written by

in

Content

General info

The Most Common Questions Accordion displays a list of frequently asked questions (FAQs) to assist users in finding quick answers to common queries. Each question is displayed in a collapsible format, where clicking on a question expands it to show the detailed answer. The accordion component enhances the user experience by organizing information in a compact and user-friendly way, making it easy for users to find the information they need without navigating away from the Help Center.

User story

As a Help Center visitor
I want to see a list of the most common questions with answers in an expandable accordion format
So that I can quickly find answers to common issues without having to scroll through multiple pages.

Visual design:

https://www.figma.com/design/I5CXH7H3ICD0vfA1kPbcVf/ROCKEN-jobs-%2F-talent?node-id=54236-36303&t=oU8DZGxl3KlCWYRG-4

 

#

Acceptance Criteria

 

01

Scenario: Display Most Common Questions
Given the user navigates to the Help Center main page
When the page loads
Then the Most Common Questions accordion should be displayed below the Category Navigation section, with a list of at least 10 questions, as shown in the provided mockup.

 

image-20241006-161244.png

 

02

Scenario: Expand a Question
Given the user is viewing the Most Common Questions accordion
When the user clicks on a question
Then the selected question should expand to show the detailed answer, and any previously opened question should automatically collapse.

 

 

03

Scenario: Collapse a Question
Given the user is viewing an expanded question in the accordion
When the user clicks on the same question again
Then the answer should collapse, hiding the details.

 

 

04

Scenario: Answer Format
Given the user expands a question in the accordion
When the answer is displayed
Then the answer text should be formatted in a clear, readable manner, using bullet points or numbered lists if applicable, as shown in the mockup.

 

Comments

Leave a Reply

More posts