Designing the edges of a task.
Ada Form is a fictional interaction designer created for this original portfolio. The studies focus on continuity: how a person understands what has happened, what remains open and where to return.
The work begins with a small observation and turns it into a concrete interface question. It does not claim user research results, client launches or measured improvements. The prototypes are things to test, not proof that the answer is settled.
Three habits
- Describe the state before asking for another action.
- Make exits and recovery part of the main flow.
- Keep the language as precise as the control.
About the demonstrations
Each case includes a local confirmation interaction with reset. It illustrates the wording and state change; it does not save documents, contact collaborators or connect to another service.
Contact
Use your own details when adapting this template.
Example address: ada@adaform.example
Return to studies →
`));fs.writeFileSync(`${out}/assets/CREDITS.txt`,'Ada Form: original fictional portfolio, case narratives and vector interface studies. Research reference https://nelson.co via https://desengs.com/minimum/. No reference identity, employer claims or artwork reused. Geist font license included.');const prompt=fs.readFileSync(`${src}/PROMPT.md`,'utf8');fs.writeFileSync(`${out}/PROMPT.md`,prompt);fs.writeFileSync('public/prompts/ada-form.md',prompt);return{prompt};}if(process.argv[1]?.endsWith('/ada-form/build.mjs'))await buildAdaForm();
```
## Detailed review of the three state transitions
The Return demonstration begins in a neutral state with the action enabled. Activating Continue here changes the confirmation to a sentence that names Delivery details and the unresolved date check. The action becomes disabled because the local demonstration has already reached its result. This disabled state must remain visually legible; do not reduce the opacity of its text until it becomes unreadable. Reset is still enabled and returns the demonstration to the neutral sentence. The user can then repeat the action. This is a two-state presentation with explicit recovery, not a simulated asynchronous workflow.
The Soft close demonstration uses the same small interaction contract but different meaning. Its result explicitly says that a draft is saved and that leaving does not mark it approved. Keep that distinction intact in the button label, explanatory paragraph and result. Do not replace the text with Done, Success or All set. Those phrases remove the very uncertainty the study is examining. The case is about language at an exit, so the confirmation text is the central artifact rather than incidental feedback beneath an image.
Nearby names the saved passage's source in the result. The source title is fictional and should be kept as plain text. The interface does not need a fake link to an article that does not exist. A functioning local study can be honest about its boundary while still making the content decision concrete. The confirmation should wrap naturally on a narrow phone and remain in the reading flow. Do not use a disappearing toast for the primary result, because a reader may need time to compare it with the preceding explanation.
For every study, check that Reset changes both the text and disabled state. A test that only sees the new message could miss a permanently disabled button. Likewise, a test that only checks enabled state could miss stale confirmation text. Inspect the actual rendered state after each action. Keep the result region's minimum height large enough that the surrounding essay does not jump sharply when a longer sentence appears. On phones the region can be taller because wrapping is expected. This is a small stability measure, not an invitation to put the entire case in a fixed-height panel.
Finally, review the relation between the artwork and the live control. The artwork introduces the question and gives it a visual setting; the HTML demonstration lets the visitor inspect a single consequential response. They should not contradict each other. If a future adaptation changes the action name or result, update the SVG, caption, case narrative and data together. The exact source is included to make those dependencies visible. A portfolio feels considered when its smallest labels agree across the image, explanation and working interaction.
