Turn a study task into observable success criteria

After this lesson you will be able to write a task statement with a checkable success criterion and test a small prototype against it.

Start with one idea

An interface is the part of an app a person sees and uses. A task is what that person wants to finish. A success criterion is a clear check that shows the task worked. Start with “Find and complete one study activity,” then say what the person should see when they finish.

Begin with the task someone needs to complete

This course improves the study planner you built in Interactive Browser Apps, so keep that project folder at hand. Each project step adds to that same planner. When a lesson says “cumulative planner,” it means this project with your improvements so far.

A study planner exists to help someone choose work, practice it and see what remains. A visually attractive dashboard can still fail that task if the next action is unclear. Start with a learner's situation: Alex has twenty minutes, wants to practice HTML labels and needs to record whether that activity is complete. Do not assume every learner has a large screen, a pointer device or uninterrupted attention.

Write a task statement before sketching the interface. Name the starting situation, intended action and observable result. A useful success criterion says what the person can do and what feedback confirms it. “Looks professional” is an opinion; “can mark one activity complete and identify the remaining activity” can be checked.

Save this complete local prototype as task.html and open it in a browser. It uses only native HTML and JavaScript and does not store or transmit information.

<!doctype html><html lang="en"><head><meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1"><title>Study task prototype</title></head>
<body><main><h1>Your next study activity</h1>
<p>You have 20 minutes. Practice connecting a visible label to an input.</p>
<label><input id="complete" type="checkbox">I completed the labels exercise</label>
<p id="status" role="status">Activity remains in progress.</p>
<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label">Read the HTML label reference</a>
</main><script>
const complete = document.querySelector('#complete');
complete.addEventListener('change', () => {
  document.querySelector('#status').textContent = complete.checked
    ? 'Activity complete. Choose your next practice activity.'
    : 'Activity remains in progress.';
});
</script></body></html>

Expected behavior: checking the labeled control changes the status; unchecking restores the original meaning. A person can Tab to the checkbox and press Space. The reference link describes its destination. The prototype intentionally offers one activity so you can evaluate the task without unrelated navigation.

Practice and debugging

Add a second activity with a distinct estimate and completion control. Ask a study partner to find the twenty-minute task without explaining the interface first. If reviewing alone, follow written steps after a short break and record uncertainty rather than inventing user feedback.

Deliberately replace the checkbox's label with unexplained text such as Go. Observe that the action's meaning becomes uncertain even though the handler still works. Restore a specific label. As another challenge, change the status to Done without explaining what is done. Discuss how successful execution and understandable feedback are different checks.

Check yourself

1. Which evidence establishes the task succeeded?
2. Does a working click handler establish accessibility?
3. Should every hypothetical user need become a feature immediately?

Answers

1. The intended activity was found, its completion changed and the person understood the status.
2. No: controls also need semantics, labels and suitable keyboard behavior.
3. No: prioritize the brief and record assumptions for further review.

Save your progress

For the cumulative study-planner project, write three task statements and acceptance criteria. Choose one narrow flow to improve first. Record what makes the task difficult now, what you plan to change, and the result you will check. Use made-up names and activity details throughout your work.