# Quest card UX requirements

## Understanding Quest cards

Quest cards serve as the primary interface for users to interact with individual quests within your campaign. Each card should provide a clear overview of the quest's objectives, rewards, and progress, enticing users to embark on the journey.

## **Quest state indicators**

Clearly communicate the current state of the quest: Active, Completed, or Locked.

<figure><img src="https://2111509621-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FBtEHhi1fQEriwxTxRejw%2Fuploads%2FlUyhzI2qpiTHxlWg3Rpk%2FScreenshot%202024-11-29%20at%2003.20.34.png?alt=media&#x26;token=a28235c9-63ae-4c82-b42a-44f4dbab09f3" alt=""><figcaption><p>Quests at different states</p></figcaption></figure>

* **Visual Clarity:** Employ distinct colors, icons, or labels to differentiate between each state.
* **Accessibility:** Ensure the indicators are easily distinguishable for users with visual impairments.
* **Consistency:** Maintain a consistent visual style for state indicators across all quests.
* **Placement:** Position these indicators prominently on the quest card.

## **Image**

Provides a visual representation of the quest's theme.

<figure><img src="https://2111509621-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FBtEHhi1fQEriwxTxRejw%2Fuploads%2Fr6ADDtc3Dwaqvz730Wd1%2FScreenshot%202024-11-29%20at%2003.30.45.png?alt=media&#x26;token=f51a16dc-ffd9-4ed9-bfc8-253d7e5876a8" alt="" width="221"><figcaption><p>Example: Quest card with an image</p></figcaption></figure>

* **Relevance and quality:** Choose high-quality images that are relevant to the quest's content.
* **Size and aspect ratio:** Ensure the image is appropriately sized and cropped.
* **Accessibility:** Provide alternative text descriptions for images.

## Quest name

Clearly and concisely conveys the essence of the quest.

* **Clarity:** Use action-oriented language and avoid jargon.
* **Length:** Keep the title short enough to fit within the card's layout.
* **Hierarchy:** Use a larger font size and/or bolder font weight to distinguish the title.

## **Short quest description**

Provides a brief overview of the quest's objectives and rewards.

* **Conciseness:** Craft a succinct description.
* **Clarity:** Use plain language and avoid technical terms.
* **Enticement:** Use persuasive language to encourage participation.

## **User progress bar**

Visually represents the user's progress towards completing the quest.

<figure><img src="https://2111509621-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FBtEHhi1fQEriwxTxRejw%2Fuploads%2FAeB34bTqIpea5U5mfBHn%2FScreenshot%202024-11-29%20at%2003.32.03.png?alt=media&#x26;token=bff7eba7-b123-4c3d-a698-f4d479e4512f" alt="" width="375"><figcaption><p>Example: Quest name, user progress bar, rewards, and counter</p></figcaption></figure>

* **Clarity:** Use a clear and easily understandable progress indicator.
* **Visual feedback:** Provide updates to the progress bar as the user completes tasks.
* **Accessibility:** Ensure the progress bar is accessible to screen readers.

## **Counters**

Display numerical information related to the quest, such as the number of tasks completed or rewards earned.

* **Clarity:** Use clear labels and units of measurement.
* **Placement:** Position counters near relevant elements.

## **Rewards**

Showcase the rewards that users can earn by completing the quest.

* **Visual appeal:** Use high-quality images or icons to represent the rewards.
* **Clarity:** Clearly indicate the type and quantity of rewards offered.

## **CTA button**

Prompts users to take action and start or continue the quest.

<figure><img src="https://2111509621-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FBtEHhi1fQEriwxTxRejw%2Fuploads%2FiX25aphdnXSoJBRrkNfn%2FScreenshot%202024-11-29%20at%2003.43.38.png?alt=media&#x26;token=590890f0-8fd8-4248-b054-7b81a3c08c19" alt="" width="563"><figcaption><p>Example: CTA buttons for different states </p></figcaption></figure>

* **Clarity:** Use action-oriented language.
* **Visual prominence:** Make the button stand out.
* **Accessibility:** Ensure the button is easily clickable.
* **State differentiation:** Visually distinguish between active and inactive states.

## **Quest blockers and dependencies**

Display any conditions or requirements that must be met before a user can start or continue a quest.

<figure><img src="https://2111509621-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FBtEHhi1fQEriwxTxRejw%2Fuploads%2FAoZzWV3Y1w4rpZZrYQwS%2FScreenshot%202024-11-29%20at%2003.39.06.png?alt=media&#x26;token=a7168ea3-e1f7-4af8-938a-4ee4d27b83c7" alt="" width="234"><figcaption><p>Example: Quest card with dependencies </p></figcaption></figure>

* **Clarity:** Clearly communicate the blockers and any actions the user needs to take. Show any other quests that must be completed before this quest can be unlocked.
* **Visual cues:** Use icons or labels to visually distinguish blockers.

## **Countdown**

Displays a timer for time-sensitive quests.

<figure><img src="https://2111509621-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FBtEHhi1fQEriwxTxRejw%2Fuploads%2FPD4EGU4Dit1mONCWwVQB%2FScreenshot%202024-11-29%20at%2003.34.52.png?alt=media&#x26;token=1b12aa10-9c0a-44b7-88c1-49ab3f6f04d0" alt="" width="238"><figcaption><p>Example: Quest card with a countdown timer</p></figcaption></figure>

* **Clarity:** Use a large, easy-to-read font and clear time units.
* **Urgency:** Consider using color or animation to create a sense of urgency.
