Task UX requirements

This section outlines the UX design requirements for presenting tasks within your claimr quests, ensuring clarity and user-friendliness throughout the task lifecycle.

Understanding Tasks

Tasks are specific actions or objectives that users need to complete within a quest. They are the building blocks of quests and contribute to the overall user journey within a claimr campaign.

Tasks can exist in 3 various states

Example: Completed, active, and locked task

1. Completed: The user has successfully finished it.

2. Active: Currently available and ready for the user to complete.

3. Locked: Currently unavailable, possibly due to prerequisites or time constraints. The reason for being locked should be clear to the user.

4. Pending: Waiting for an external event or action (like a payment confirmation or approval) before it can be completed.

Active tasks

This section focuses on the UX requirements for tasks that are currently active and available for users to complete.

Example: Active task

Task header

Provides a concise and informative title for the task, summarizing its objective.

• Clarity: Use action-oriented language and avoid jargon.

• Prominence: Display the title with visual emphasis.

Task description

Provides clear instructions on what the user needs to do to complete the task.

• Clarity: Use simple language and break down complex tasks into smaller, manageable steps.

Task body

• Purpose: This is where you provide the main content or details of the task, including any necessary information, instructions, or visuals.

• Visual clarity: Use headings, subheadings, bullet points, and other formatting elements to organize the content and make it easy to scan.

• Visual aids: Incorporate relevant visuals, such as images or videos, to enhance understanding and engagement.

• Conciseness: Keep the content focused and avoid unnecessary information.

CTA button

Provides a clear action button for users to engage with the task (e.g., "Start task," "Complete," "Submit").

• Clarity: Use action-oriented and concise language.

• Visual prominence: Make the button stand out with contrasting colors or clear affordances.

Locked tasks

This section focuses on the UX requirements for tasks that are currently locked and unavailable to users.

Example: Locked task

Task state indicators

Clearly communicates that the task is locked and unavailable for completion.

• Visual Clarity: Use distinct visual cues to indicate the locked state. This could include:

  Color: Use a different color for locked tasks (e.g., gray or a less prominent color).

  Icons: Use a lock icon or a similar visual symbol to represent the locked state.

  Blurring or dimming: Consider blurring or dimming the task's content to visually reinforce that it's inaccessible.

• Placement: Position the indicators prominently, ideally near the task title or in a location that is easily noticeable.

Task description

Provides a brief description of the locked task, explaining what it entails and how to unlock it.

• Conciseness: Keep the information brief and focused.

• Visual hierarchy: Use design elements to guide the user's eye.

Completed Tasks

This section focuses on the UX requirements for tasks that have been successfully completed by the user.

Example: Completed task

Task state indicators

Clearly communicates that the task has been completed.

• Visual clarity: Use distinct colors, icons, or labels to indicate the completed state.

• Accessibility: Ensure high contrast and consider screen reader compatibility.

• Placement: Position indicators prominently near the task title.

Task header

Displays the title of the completed task.

Completion message

Provides feedback to the user acknowledging their completion of the task. This can include congratulatory messages, information about rewards earned, or prompts to proceed to the next task or quest.

Example: Completion message

• Clarity: Use positive and encouraging language.

• Informative: Communicate the outcome of completing the task.

Pending Tasks

This section focuses on the UX requirements for tasks that are currently pending, meaning they are waiting for an external event or action before they become available or completed.

Task state indicators

Clearly communicates that the task is pending and not yet ready for the user to interact with.

• Visual Clarity: Use distinct visual cues to indicate the pending state. This could include:

  • Color: Use a specific color for pending tasks (e.g., yellow or orange).

  • Icons: Use an hourglass icon, a clock icon, or a similar visual symbol to represent waiting or pending action.

  • Labels: Add a clear "pending" label to the task.

• Placement: Position the indicators prominently in a location that is easily noticeable.

Task description

Provides a brief description of the pending task, explaining what it entails and what needs to happen for it to become active or complete.

• Clarity: Use concise and straightforward language to explain the pending state and the reason for it.

• Informative: Clearly communicate what the user needs to do or what event they are waiting for (e.g., "Waiting for payment confirmation," "Pending approval").

• Visual Hierarchy: Use design elements like font size, color, and spacing to guide the user's eye to the most important information.