Quest card UX requirements
This section outlines the key design elements and considerations for creating effective and engaging quest cards in your ⚡️claimr campaigns.
Last updated
Was this helpful?
This section outlines the key design elements and considerations for creating effective and engaging quest cards in your ⚡️claimr campaigns.
Last updated
Was this helpful?
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.
Clearly communicate the current state of the quest: Active, Completed, or Locked.
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.
Provides a visual representation of the quest's theme.
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.
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.
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.
Visually represents the user's progress towards completing the quest.
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.
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.
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.
Prompts users to take action and start or continue the quest.
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.
Display any conditions or requirements that must be met before a user can start or continue a quest.
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.
Displays a timer for time-sensitive quests.
Clarity: Use a large, easy-to-read font and clear time units.
Urgency: Consider using color or animation to create a sense of urgency.
