Layout reorderer demo design update

[Jonathan Hung]

Hi everyone.

Attached is an illustration of a proposed update to the Layout Reorderer
demo.

The notable changes are:
- the use of a locked icon to indicate locked content.
- addition of instructions and description of usage.
- a top "drag bar" to movable content.
- an asymmetrical layout bearing resemblance to a website with 2 sidebars
and a main content area.

Accessibility question:
- How is this demo accessible to screen readers? I feel that the feedback
will need to be descriptive in order to convey the proper ordering and
relationships of objects as they are moved between columns.

Questions:
1.  Do you think locked content should have a more distinctive appearance?
2. What is your opinion of using a lock icon versus having the words
"Locked"?

Implementation question:
3. The lock icons in the content area will be implemented as background
images as to not interfere with ATs (in effect be invisible to screen
readers). However, the lock icon in the instructions will be "seen" by ATs.
It is potentially confusing that the instructions reference a lock image,
but the rest of the demo does not as far as the AT is concerned. How should
this be handled?


Thoughts on the overall design and comments to the above questions are
welcome!

- 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/20101005/f1ff0cab/attachment.htm>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: Reorderer.png
Type: image/png
Size: 53228 bytes
Desc: not available
URL: <https://lists.idrc.ocad.ca/pipermail/fluid-work/attachments/20101005/f1ff0cab/attachment.png>