Proposed UX Changes: Story Profile
##Move element action icons inside the fieldset Currently, the copy & delete icons float outside of their respective elements, in a weird vertical alignment. We propose moving them inside the fieldset, and putting them in the more common (and internally consistent) horizontal arrangement. This forges a stronger spacial relationship, and might make them easier click targets, as they are bound by a contrasting color and sharp geometric shape.
Note: we call our WYSIWYG containers 'Enhanced Paragraphs', which you can see in the mockups. A bit silly, I know, but we already used 'Paragraph' for another element. Legacy support: bah!
Done in ccaafae.
Other minor changes:
- 'Add Element' icon now has the triangle seen on other drop-down icons. (Done in 39c570b)
Related stories/media now hidden when the parent element is collapsed.- Alternate, with text previews for related media/story
##Container Element Editing: clean, simple, & consistent
There are some quirks involved with container element editing, which makes the experience a little less than consistent across the broader UI. Some of the behavior is just plain weird, like how opening the twisty triangle on a container with both fields and related media/stories magically flips their position. Watch it a few times and you'll get a minor headache.
Also, container elements with related media and/or stories can take up tons of screen space; the mockup below moves them into "twisties" (collapsable regions), like elements.
Suggested Changes:
- Child fields/elements replace preview, at top of fieldset (no longer inverts their position on open, which is disorienting and weird). (Done in 286e01)
- Related stories/media now get twisties, just like elements (no, they aren't elements, but this is way more consistent). (Done in 286e01)
- Closed relations show preview of title and object type (thumbnail might work, depending on space). (Done in dbc033)
- Edit icon (upper right) opens twisty, pops up relation dialog. (Done in 289e7b)
Note: In the mockup above, the edit icon for related stories and media is slightly overloaded: if the "twisty" is already open, then the edit icon triggers the edit relation popup; otherwise, it should force the twisty open AND trigger the popup, so that the UI state stays sane. This could save time and support different user's mental models. If folks think it's weird, we could hide the edit button in the closed state, but that forces an extra click.
##Simplify the related media/story section of container elements.
Suggested Changes:
- Only show the full table of related object info once expanded. (Done in 286e01)
- UUID could probably move down, be removed, become a tooltip, etc. (Done in 35f208)
- Edit icon pops up relation dialog (maintain right corner convention). (Done in 286e01)
- Child elements would work the same as they do now (but icons inside), appearing in order above any related story/media blocks. (Done in 286e01)
- Related story/media blocks probably shouldn't be draggable. (Done in 286e01)