Updated inline edit demo wireframe

[Jonathan Hung]

Hi everyone,

After many discussions about the inline edit component, I have updated the
demo for this component. Attached is a wireframe visually describing the
interaction with the component in context of a hypothetical user account on
a model railroad fan forum.

The design uses a multi-line simple inline edit, but as a demo for Infusion
v1.3 we will implement these fields as a single line text field.

Longer Description:

The interface shows details of a user belonging to the "Model Railroad
Fanatics Forum" website. The following information is shown to the user:
- a status box giving instructions and the results of their last action
- Their screen name
- Their current status
- Information about the model train they own, including its: nickname,
model, manufacture year, condition, description, and any relevant notes.

Each field (with the exception of Screen Name which is uneditable, and
manufacture year which is a drop-down selector), is an inline edit component
and is indicated as such by a dotted underline and a pencil icon.

Hovering or keyboard focusing an editable field will show a thicker
highlight around the field. Subsequently pressing Enter or mouse clicking
the field will place the user into "Edit mode" for that field.

Once in Edit Mode, a user with a supported assistive technology will be
presented with an announcement giving a brief instruction on how to save
their edits when done. The user can then begin making changes to that field.
To save edits, the user exits Edit Mode by pressing Tab key, Enter key, or
by mouse clicking elsewhere on the page.

At this point the user can edit another field or undo their last editby
pressing the Undo Edit button associated with the field in question. Once
Undo Edit has been activated, it is replaced by Redo Edit allowing the user
to re-apply their changes to the text.

At the conclusion of each user action, the text in the status area will
update giving feedback on their last action.
- "Edit to _field name_ saved."
- "Undo edit successful."
- "Redo edit successful."


Future iteration of this demo should look less like a traditional form, but
for now this demo is sufficient to convey functionality of inline edit.

Any thoughts, comments, remarks are appreciated. Work on this demo will
start shortly.

Thanks!

- Jonathan.

---
Jonathan Hung / jhung at ocad.ca <jhung.utoronto at gmail.com>
IDRC - Interaction Designer / Researcher
Fax: (416) 977-9844
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <https://lists.idrc.ocad.ca/pipermail/fluid-work/attachments/20100930/58c56e66/attachment.htm>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: Inline-Edit-03.png
Type: image/png
Size: 732494 bytes
Desc: not available
URL: <https://lists.idrc.ocad.ca/pipermail/fluid-work/attachments/20100930/58c56e66/attachment.png>