Mailing List Archive: Bric2 UX Tweaks: Move element action icons inside the fieldset

Bric2 UX Tweaks: Move element action icons inside the fieldset

fulekia at denison

Apr 4, 2011, 8:22 AM

Post #1 of 16 (6318 views)

------------------------------------------------------------------------
Move element action icons inside the fieldset [STORY PROFILE]
------------------------------------------------------------------------

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!

Re: Bric2 UX Tweaks: Move element action icons inside the fieldset [ In reply to ]

david at kineticode

Apr 5, 2011, 11:19 AM

Post #2 of 16 (6222 views)

On Apr 4, 2011, at 8:22 AM, Aaron Fuleki wrote:

> 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.

+1

> 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!

You didn't attach a screenshot or link to one.

> Other minor changes:
> * 'Add Element' icon now has the triangle seen on other drop-down icons.

+1

> * Related stories/media now hidden when the parent element is collapsed.

+1

David

Re: Bric2 UX Tweaks: Move element action icons inside the fieldset [ In reply to ]

mhenderson at adams

Apr 6, 2011, 7:56 AM

Post #3 of 16 (6219 views)

On 4/4/11 9:22 AM, Aaron Fuleki wrote:
> * Related stories/media now hidden when the parent element is collapsed.
From my experience, most user errors come from forgetting to relate a
story/media. Since these elements are now hidden, would it be possible
to show with an icon if no story/media has been related when the element
is collapsed. Possibly a small page/image with a red "X" through it?
This would help to quickly identify an element that may be throwing an
error.

Excited about these changes, thanks Aaron.

Mike

--
Mike Henderson
Web Applications Developer | Adams State College
mhenderson@adams.edu | 719.587.7684

Re: Bric2 UX Tweaks: Move element action icons inside the fieldset [ In reply to ]

david at kineticode

Apr 6, 2011, 9:10 AM

Post #4 of 16 (6210 views)

On Apr 6, 2011, at 7:56 AM, Mike Henderson wrote:

> On 4/4/11 9:22 AM, Aaron Fuleki wrote:
>> * Related stories/media now hidden when the parent element is collapsed.
> From my experience, most user errors come from forgetting to relate a story/media. Since these elements are now hidden, would it be possible to show with an icon if no story/media has been related when the element is collapsed. Possibly a small page/image with a red "X" through it? This would help to quickly identify an element that may be throwing an error.

Yes, it would be my preference to show a thumbnail when the element is closed as well as open.

Best,

David

Re: Bric2 UX Tweaks: Move element action icons inside the fieldset [ In reply to ]

fulekia at denison

Apr 6, 2011, 11:00 AM

Post #5 of 16 (6193 views)

>> From my experience, most user errors come from forgetting to relate a story/media. Since these elements are now hidden, would it be possible to show with an icon if no story/media has been related when the element is collapsed. Possibly a small page/image with a red "X" through it? This would help to quickly identify an element that may be throwing an error.
>
> Yes, it would be my preference to show a thumbnail when the element is closed as well as open.

Hmm. We see that problem with our users as well. Some templates have error checking in them, but users don't always preview, and almost never check the job status (we use queued publishing).

I like the suggestion, but I don't want to clutter the nice, clean look of the collapsed container element; the story profile is just too noisy.

I'll try a couple of mockups and see what people think.

-Aaron

P.S. There totally needs to be a way to define and enforce related media/story requirements in the UI. That would solve roughly 60% of our help desk calls.

---------------------------------
Aaron Fuleki
Senior Web Architect
Denison University
740.587.5752
---------------------------------

Re: Bric2 UX Tweaks: Move element action icons inside the fieldset [ In reply to ]

david at kineticode

Apr 6, 2011, 11:53 AM

Post #6 of 16 (6209 views)

On Apr 6, 2011, at 11:00 AM, Aaron Fuleki wrote:

> Hmm. We see that problem with our users as well. Some templates have error checking in them, but users don't always preview, and almost never check the job status (we use queued publishing).
>
> I like the suggestion, but I don't want to clutter the nice, clean look of the collapsed container element; the story profile is just too noisy.

I think it's essential for scanning over to see what's in subelements. That is, it goes along with the single line of text from the first text field.

> I'll try a couple of mockups and see what people think.

Feel free to try other sizes; we can always adjust the size in CSS, regardless of the THUMBNAIL_SIZE configuration setting. It should be square, though.

Best,

David

Re: Bric2 UX Tweaks: Move element action icons inside the fieldset [ In reply to ]

fulekia at denison

Apr 12, 2011, 12:53 PM

Post #7 of 16 (6191 views)

> I think it's essential for scanning over to see what's in subelements. That is, it goes along with the single line of text from the first text field.

I added an alternate mockup with text previews of related stories/media when the container element is closed (first mockup on the wiki page).

https://github.com/bricoleurs/bricolage/wiki/Proposed-UX-Changes:-Story-Profile

What do folks think of that? It still allows for a quick scan of what all's in a container element, but not so honkin' big.

If we're getting closer to consensus, then Denison would like to sponsor some of these tweaks, so please let us know what you think!

-Aaron

---------------------------------
Aaron Fuleki
Senior Web Architect
Denison University
740.587.5752
---------------------------------

Re: Bric2 UX Tweaks: Move element action icons inside the fieldset [ In reply to ]

bret at pectopah

Apr 12, 2011, 1:24 PM

Post #8 of 16 (6183 views)

Hi Aaron,

Mostly I think it's great. I would love to see the thumbnail (even a
smaller one) when it's closed, though. Somehow the picture feels more
helpful than the image title.

Liking the changes,

Bret

On Tue, 2011-04-12 at 15:53 -0400, Aaron Fuleki wrote:
> > I think it's essential for scanning over to see what's in subelements. That is, it goes along with the single line of text from the first text field.
>
> I added an alternate mockup with text previews of related stories/media when the container element is closed (first mockup on the wiki page).
>
> https://github.com/bricoleurs/bricolage/wiki/Proposed-UX-Changes:-Story-Profile
>
> What do folks think of that? It still allows for a quick scan of what all's in a container element, but not so honkin' big.
>
> If we're getting closer to consensus, then Denison would like to sponsor some of these tweaks, so please let us know what you think!
>
> -Aaron
>
> ---------------------------------
> Aaron Fuleki
> Senior Web Architect
> Denison University
> 740.587.5752
> ---------------------------------
>

--
Bret Dawson
Producer
Pectopah Productions Inc.
(416) 895-7635
bret@pectopah.com
www.pectopah.com

Re: Bric2 UX Tweaks: Move element action icons inside the fieldset [ In reply to ]

fulekia at denison

Apr 12, 2011, 1:28 PM

Post #9 of 16 (6190 views)

On Apr 12, 2011, at 4:24 PM, Bret Dawson wrote:
> Mostly I think it's great. I would love to see the thumbnail (even a
> smaller one) when it's closed, though. Somehow the picture feels more
> helpful than the image title.

I'm playing with that right now, actually. I think a 20-30 pixel thumb could still show enough detail to be useful (well, for images that aren't random noise algorithms or something).

At this point I'm just trying to find a aesthetic that works well, without drawing more damned lines around things to correlate them :-)

-Aaron

---------------------------------
Aaron Fuleki
Senior Web Architect
Denison University
740.587.5752
---------------------------------

RE: Bric2 UX Tweaks: Move element action icons inside the fieldset [ In reply to ]

adam at RFXTechnologies

Apr 14, 2011, 11:25 AM

Post #10 of 16 (6178 views)

I like the new look very much.
Have you considered moving the "Add Element button to same region as the Copy and Delete? This would be a continuation of the Icon layout from the Desks, and it could further compress the size of a page with a lot of elements.

Adam

> -----Original Message-----
> From: devel@lists.bricolagecms.org [mailto:devel@lists.bricolagecms.org] On
> Behalf Of Aaron Fuleki
> Sent: Tuesday, April 12, 2011 4:29 PM
> To: devel@lists.bricolagecms.org
> Subject: Re: Bric2 UX Tweaks: Move element action icons inside the fieldset
>
> On Apr 12, 2011, at 4:24 PM, Bret Dawson wrote:
> > Mostly I think it's great. I would love to see the thumbnail (even a
> > smaller one) when it's closed, though. Somehow the picture feels more
> > helpful than the image title.
>
> I'm playing with that right now, actually. I think a 20-30 pixel thumb could still
> show enough detail to be useful (well, for images that aren't random noise
> algorithms or something).
>
> At this point I'm just trying to find a aesthetic that works well, without drawing
> more damned lines around things to correlate them :-)
>
> -Aaron
>
> ---------------------------------
> Aaron Fuleki
> Senior Web Architect
> Denison University
> 740.587.5752
> ---------------------------------

Re: Bric2 UX Tweaks: Move element action icons inside the fieldset [ In reply to ]

david at kineticode

Apr 14, 2011, 5:37 PM

Post #11 of 16 (6195 views)

On Apr 14, 2011, at 11:25 AM, Adam Wilson wrote:

> I like the new look very much.
> Have you considered moving the "Add Element button to same region as the Copy and Delete? This would be a continuation of the Icon layout from the Desks, and it could further compress the size of a page with a lot of elements.

Yeah, I was just looking at that. I had to hunt around for the select list to add items to a long page, because it was way at the bottom. Maybe there should be one at the top and one at the bottom once there are more than 2-3 subelements. I hesitate to just have one at the top, as one usually is working at the bottom of an element and adding stuff as one writes.

Or so I assume. What's the experience of people who actually develop content with Bricolage on a regular basis?

Best,

David

Re: Bric2 UX Tweaks: Move element action icons inside the fieldset [ In reply to ]

bret at pectopah

Apr 14, 2011, 5:58 PM

Post #12 of 16 (6170 views)

Holy cow is that ever a great idea.

How about two spots, with two different behaviours?

Using the one at the bottom adds the new element to the bottom of the
element list, and using the one at the top puts it at the top.

Most of the Bricolage content editors I work with don't write in the UI.
Instead they copy and paste, and then edit the document to add treats
such as pictures and related links. So having the option of putting a
new element at either the top or the bottom would spark all kinds of
happiness, I'm sure.

Cheers,

Bret

On Thu, 2011-04-14 at 17:37 -0700, David E. Wheeler wrote:
> On Apr 14, 2011, at 11:25 AM, Adam Wilson wrote:
>
> > I like the new look very much.
> > Have you considered moving the "Add Element button to same region as the Copy and Delete? This would be a continuation of the Icon layout from the Desks, and it could further compress the size of a page with a lot of elements.
>
> Yeah, I was just looking at that. I had to hunt around for the select list to add items to a long page, because it was way at the bottom. Maybe there should be one at the top and one at the bottom once there are more than 2-3 subelements. I hesitate to just have one at the top, as one usually is working at the bottom of an element and adding stuff as one writes.
>
> Or so I assume. What's the experience of people who actually develop content with Bricolage on a regular basis?
>
> Best,
>
> David

--
Bret Dawson
Producer
Pectopah Productions Inc.
(416) 895-7635
bret@pectopah.com
www.pectopah.com

Re: Bric2 UX Tweaks: Move element action icons inside the fieldset [ In reply to ]

fulekia at denison

Apr 14, 2011, 6:09 PM

Post #13 of 16 (6184 views)

bret++

---------------------------------
Aaron Fuleki
Senior Web Architect
Denison University
740.587.5752
---------------------------------

On Apr 14, 2011, at 8:58 PM, Bret Dawson wrote:

> Holy cow is that ever a great idea.
>
> How about two spots, with two different behaviours?
>
> Using the one at the bottom adds the new element to the bottom of the
> element list, and using the one at the top puts it at the top.
>
> Most of the Bricolage content editors I work with don't write in the UI.
> Instead they copy and paste, and then edit the document to add treats
> such as pictures and related links. So having the option of putting a
> new element at either the top or the bottom would spark all kinds of
> happiness, I'm sure.
>
>
> Cheers,
>
> Bret
>
>
>
>
> On Thu, 2011-04-14 at 17:37 -0700, David E. Wheeler wrote:
>> On Apr 14, 2011, at 11:25 AM, Adam Wilson wrote:
>>
>>> I like the new look very much.
>>> Have you considered moving the "Add Element button to same region as the Copy and Delete? This would be a continuation of the Icon layout from the Desks, and it could further compress the size of a page with a lot of elements.
>>
>> Yeah, I was just looking at that. I had to hunt around for the select list to add items to a long page, because it was way at the bottom. Maybe there should be one at the top and one at the bottom once there are more than 2-3 subelements. I hesitate to just have one at the top, as one usually is working at the bottom of an element and adding stuff as one writes.
>>
>> Or so I assume. What's the experience of people who actually develop content with Bricolage on a regular basis?
>>
>> Best,
>>
>> David
>
> --
> Bret Dawson
> Producer
> Pectopah Productions Inc.
> (416) 895-7635
> bret@pectopah.com
> www.pectopah.com
>

Re: Bric2 UX Tweaks: Move element action icons inside the fieldset [ In reply to ]

david at kineticode

Apr 14, 2011, 7:25 PM

Post #14 of 16 (6182 views)

On Apr 14, 2011, at 5:58 PM, Bret Dawson wrote:

> How about two spots, with two different behaviours?
>
> Using the one at the bottom adds the new element to the bottom of the
> element list, and using the one at the top puts it at the top.

You don't think that would be confusing and weird?

David

RE: Bric2 UX Tweaks: Move element action icons inside the fieldset [ In reply to ]

adam at RFXTechnologies

Apr 14, 2011, 7:36 PM

Post #15 of 16 (6177 views)

I was thinking of having two as well, but was worried that would be a bit confusing.

Since we are throwing out ideas, instead of adding to the top or bottom depending on the icon, you could have another icon that is an up arrow that throws the indicated element to the top of the story.
I do know that I have some users who complain that it is difficult to get new elements to the top of the page when it is a long page. Especially if there are very large elements already on the page. I just use my scroll wheel to deal with this, but not everyone has that option.

Adam

> -----Original Message-----
> From: devel@lists.bricolagecms.org
> [mailto:devel@lists.bricolagecms.org] On Behalf Of David E. Wheeler
> Sent: Thursday, April 14, 2011 10:26 PM
> To: devel@lists.bricolagecms.org
> Subject: Re: Bric2 UX Tweaks: Move element action icons inside the
> fieldset
>
> On Apr 14, 2011, at 5:58 PM, Bret Dawson wrote:
>
> > How about two spots, with two different behaviours?
> >
> > Using the one at the bottom adds the new element to the bottom of the
> > element list, and using the one at the top puts it at the top.
>
> You don't think that would be confusing and weird?
>
> David

Re: Bric2 UX Tweaks: Move element action icons inside the fieldset [ In reply to ]

zdravko.balorda at siix

Apr 14, 2011, 11:16 PM

Post #16 of 16 (6179 views)

Adam Wilson wrote:
> I like the new look very much.
> Have you considered moving the "Add Element button to same region as the Copy and Delete? This would be a continuation of the Icon layout from the Desks, and it could further compress the size of a page with a lot of elements.
>
> Adam

Yes, this compressing of long pages would be great! Perhaps an option would
be to leave the icon where it is, but to drop this icon on closed elements.
That is, one could add elements but will have to open the element first.

Zdravko