> For the complete documentation index, see [llms.txt](https://docs.claimr.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.claimr.io/ux-requirements/user-progress-ux-requirements.md).
# User progress UX requirements
## **Understanding User progress**
Displaying user progress is crucial for motivating users and encouraging continued participation in your campaigns. By showing users their achievements, points earned, and overall progress, you can create a more engaging and rewarding experience.
Users can be in one of two states:
* **Logged in:** When users are logged in, they see personalized information, such as their name, points, and progress bar. They also have the option to log out.
* **Logged out:** When users are not logged in, they see basic information and are encouraged to log in or sign up.
## **Logged in state**
This state should clearly indicate that the user is currently logged in to their account and provide relevant information and actions related to their profile and progress.
Example: Logged in state
#### **1. User name**
* Display the user's name prominently to provide a personalized experience.
* Use a legible font and appropriate font size for easy readability.
#### **3. User points**
* Show the accumulated points the user has earned within the campaign or quest.
* Use a clear numerical representation and label (e.g., "Points: 150").
* Display the points prominently, potentially using a larger font size or distinct color.
#### **2. User progress bar**
* Visually represent the user's overall progress toward completing the campaign or quest.
* Choose an easily understandable progress indicator (e.g., bar, percentage).
* Use colors and animations to make the progress bar visually engaging and dynamic.
* Ensure the progress bar is accessible to screen readers and provides alternative text descriptions.
#### **3. User points**
* Show the accumulated points the user has earned within the campaign or quest.
* Use a clear numerical representation and label (e.g., "Points: 150").
* Display the points prominently, potentially using a larger font size or distinct color.
#### **4. Log out button**
* Allow users to log out of their account securely.
* Use clear labeling (e.g., "Log out") and consider using a recognizable icon.
* Typically located near the user's name or profile information.
* Implement a confirmation dialog to prevent accidental logouts.
## **Logged out state**
This state should clearly indicate that the user is not logged in and provide a clear path to log in or sign up.
#### **1. Log in button**
Example: Log in state
Include a prominent "Log in" button to allow existing users to access their accounts. This button should be visible and accessible.
#### **2. Title**
Display a clear and concise title that explains the purpose of the section. For example, you could use "Welcome to \[Campaign name]" or "Sign in to continue."
#### **3. Brief description**
Provide a brief explanation of the benefits of logging in or the features users can access once logged in. This could include things like:
* Accessing personalized campaigns and quests.
* Tracking progress and earning rewards.
* Connecting with other users.
#### **Additional considerations:**
* Use clear messaging and visual cues to differentiate this state from the logged-in state.
* Consider adding a "Sign up" button for new users, a preview of campaign features, or a link to your Privacy Policy.
* Hide personalized elements like the user's name, points, and progress bar until they are logged in.
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:
```
GET https://docs.claimr.io/ux-requirements/user-progress-ux-requirements.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.