# Group UX requirements

## Understanding **Groups**

<figure><img src="https://2111509621-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FBtEHhi1fQEriwxTxRejw%2Fuploads%2FVhHdOME8aG9LZiYqmAw6%2FScreenshot%202024-11-29%20at%2002.11.22.png?alt=media&#x26;token=2c8c5ea1-ed98-436e-a872-9f0f04a6ae94" alt="" width="563"><figcaption><p>Example: Quest group with its title and description</p></figcaption></figure>

A group in claimr is a collection of related quests that contribute to the overall campaign objective. Grouping quests helps users understand the structure of your campaign and navigate through related challenges.

## **Group state indicators**

Like individual tasks, quest groups in claimr can also have different states, which should be clearly communicated to the user through visual cues and messaging.

Possible states for a quest group:

* **Active:** The quest group is currently accessible, and users can participate in its quests. This is often indicated by a distinct visual style, such as a brightly colored header or a prominent "Active" label.

<figure><img src="https://2111509621-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FBtEHhi1fQEriwxTxRejw%2Fuploads%2FbqFN1maZDPt744GCGQjG%2FScreenshot%202024-10-22%20at%2017.50.01.png?alt=media&#x26;token=59472f78-81bd-4509-822e-373dfdafa11e" alt="" width="563"><figcaption><p>Active quest group example</p></figcaption></figure>

* **Completed:** The user has successfully completed all the quests within this group. This might be visually represented with a checkmark, a trophy icon, or a "Completed" label.

<figure><img src="https://2111509621-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FBtEHhi1fQEriwxTxRejw%2Fuploads%2FJ2O859gZeTdmmR8GxiDE%2FScreenshot%202024-10-22%20at%2018.05.47.png?alt=media&#x26;token=08508841-e6dc-40f8-9514-3315797116ac" alt="" width="563"><figcaption><p>Completed quest group example</p></figcaption></figure>

* **Locked:** The quest group is currently inaccessible due to certain conditions. There are a few common reasons for a group to be locked:

  <figure><img src="https://2111509621-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FBtEHhi1fQEriwxTxRejw%2Fuploads%2F0zpv5EMM3aI5H2YlK5jg%2FScreenshot%202024-10-22%20at%2018.06.16.png?alt=media&#x26;token=365a886b-27ba-417d-8dd6-65f3e6cfc6d1" alt="" width="563"><figcaption><p>Locked: not enough points quest group example</p></figcaption></figure>

  * **Not enough points:** Users need to earn a specific number of points or complete other quests to unlock this group. This is often visually indicated with a lock icon or a progress bar showing how many points are still needed.
  * **Timer:** The quest group is locked until a specific time or date. This can be represented with a timer or a countdown clock, clearly showing when the group will become available.
* **Inactive (Upcoming):** The quest group is not yet active but will become available at a scheduled time in the future. This can be indicated with a "Coming Soon" label or a date and time for when the group will become active.
* **Inactive (Past):** The quest group is no longer active and is not available for participation. This might be visually de-emphasized or have a label indicating it's expired or past.

**Design Requirements:**

* **Visual Clarity:** Use distinct colors, icons, or labels to clearly differentiate between each state.
* **Accessibility:** Ensure the indicators are easily distinguishable for users with visual impairments, utilizing sufficient contrast and screen-reader-friendly descriptions.
* **Consistency:** Maintain a consistent visual style for state indicators across all quest groups and individual quests within your campaign.
* **Informative tooltips or labels:** Consider using tooltips or concise labels to provide additional context or information about the reason for a locked state (e.g., "Unlocks after completing \[Quest Name]").

## **Group header**

Provides a clear and concise title for the group, summarizing its theme or focus.

* **Clarity:** Use descriptive and easily understandable language.
* **Visual prominence:** Make the header visually distinct to differentiate it from individual quests.

## **Group description**

Provides additional context or information about the group.

* **Conciseness:** Keep the description brief and focused.
* **Informative:** Clearly convey the theme or purpose of the group.

## **Quest cards**

Each quest within the group is represented by a quest card.

* **Visual clarity:** Use clear visuals and labels to distinguish between different quest states.
* **Information hierarchy:** Prioritize important information.
* **Engagement:** Design visually appealing cards.

To find more, read [quest-card-ux-requirements](https://claimr-io.gitbook.io/claimr-help-center/ux-requirements/quest-card-ux-requirements "mention").&#x20;

## **Navigation and layout**

Present the quests within a group clearly and in an organized manner, allowing for easy navigation and exploration.

* **Logical grouping:** Group related quests together visually.
* **Clear hierarchy:** Establish a clear visual hierarchy between the group header, description, and individual quest cards.
* **Responsive design:** Ensure the group layout adapts well to different screen sizes and devices.

### **Layout options**

* **Grid layout:** Arrange quest cards in a grid format. This is ideal for showcasing multiple quests simultaneously and allowing users to quickly scan and compare options.
* **Slider layout:** Present quest cards in a horizontal slider. This is suitable for limited space or when you want to emphasize a sequential flow of quests.

<figure><img src="https://2111509621-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FBtEHhi1fQEriwxTxRejw%2Fuploads%2F7HLF1TlyRUp5QP55d5Mx%2FScreenshot%202024-09-02%20at%2016.43.30.png?alt=media&#x26;token=5de1e01d-749f-4985-a672-8050a1c328ff" alt="" width="536"><figcaption><p>Example: Slider layout </p></figcaption></figure>
