Improving CMSUI toolbar w/metadata + edit bar + notifications

classic Classic list List threaded Threaded
17 messages Options
Alexander Limi Alexander Limi
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Improving CMSUI toolbar w/metadata + edit bar + notifications

I've done a pass at improving the grouping and display of the toolbar and related stuff, and I'm starting to get pretty happy with it. Did this as an HTML prototype, so I'm aware that not everything lines up pixel-perfect, but should be a decent representation. The goal was to avoid the collapse/expand all the time, and surface relevant information as part of the UI.

As a reminder, here's current CMSUI:

Screen%20shot%202011-07-17%20at%2023.13.08.png

I moved the global actions to the site bar, added metadata panel on the right, notification bar on the bottom, and tightened up the space usage a bit (although we probably want to add a few more pixels). I also added more icons to the item=specific bar see how it scales:

Screen%20shot%202011-07-17%20at%2023.08.58.png

With the visual editor / Deco tile UI, it could look something like this (again, don't read too much into the implementation of the buttons):

Screen%20shot%202011-07-17%20at%2023.10.10.png

…and as a final experiment, here's how it could look with a single-line UI — didn't add all the icons, but you get the point:

Screen%20shot%202011-07-17%20at%2021.56.19.png
Feedback welcome. :)

--
Alex Limi · +limi · @limi · limi.net




_______________________________________________
UI mailing list
[hidden email]
https://lists.plone.org/mailman/listinfo/plone-ui
Alexander Limi · http://limi.net

Laurence Rowe Laurence Rowe
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Improving CMSUI toolbar w/metadata + edit bar + notifications

Alexander Limi wrote
I've done a pass at improving the grouping and display of the toolbar and
related stuff, and I'm starting to get pretty happy with it. Did this as an
HTML prototype, so I'm aware that not everything lines up pixel-perfect, but
should be a decent representation. The goal was to avoid the collapse/expand
all the time, and surface relevant information as part of the UI.

As a reminder, here's current CMSUI:

[image: Screen%20shot%202011-07-17%20at%2023.13.08.png]


I moved the global actions to the site bar, added metadata panel on the
right, notification bar on the bottom, and tightened up the space usage a
bit (although we probably want to add a few more pixels). I also added more
icons to the item=specific bar see how it scales:

[image: Screen%20shot%202011-07-17%20at%2023.08.58.png]


With the visual editor / Deco tile UI, it could look something like this
(again, don't read too much into the implementation of the buttons):

[image: Screen%20shot%202011-07-17%20at%2023.10.10.png]


…and as a final experiment, here's how it could look with a single-line UI —
didn't add all the icons, but you get the point:

[image: Screen%20shot%202011-07-17%20at%2021.56.19.png]

Feedback welcome. :)
Without the collapse/expand I do fear that the current design with icons will be too high for those with non-Mac laptops without high res screens. If icons for the main button bar are desired then I think we should seriously consider the inline icons of the top bar for the main bar.

I'm not sure what moving the workflow colour indication away from the workflow button gains us, it  just seems to use  up a lot of space.

I think a dismissable full width notification bar like Firefox / Chrome would work better as the iframe has to be full width anyway. (And you can't sneak undo back in so easily ;)

Any reason for the more button to open up a dialogue box (presumably from the ellipsis) rather than a dropdown menu/bubble? The dropdown menu/bubble could even open on hover.

What would it look like when you don't have editing permissions for the context? This might not be known on initial page load, only once the edit bar iframe is loaded.

Laurence
Geir Bækholt-2 Geir Bækholt-2
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Improving CMSUI toolbar w/metadata + edit bar + notifications

In reply to this post by Alexander Limi

On 18. juli 2011, at 21:06, Alex Limi wrote:

I've done a pass at improving the grouping and display of the toolbar and related stuff, and I'm starting to get pretty happy with it. Did this as an HTML prototype, so I'm aware that not everything lines up pixel-perfect, but should be a decent representation.
As a reminder, here's current CMSUI:


Thanks! Useful suggestions. My feedback inline.



I moved the global actions to the site bar, added metadata panel on the right, notification bar on the bottom, and tightened up the space usage a bit (although we probably want to add a few more pixels). I also added more icons to the item=specific bar see how it scales:

Screen%20shot%202011-07-17%20at%2023.08.58.png


The undo feature is something we all want, but it takes a bunch of infrastructure investment, so we cannot include it with this. I assume its inclusion here is just meant as an example of a notification, and not an assumption of the feature. If it is a notification, i'd like it to look more "present" and less blending into the background. If the site underneath runs sunburst, this notification will blend into the site, and not with the menu.  The placement of it works great. Will it also work with a longer message?

I think the tightening up helped a lot. Perhaps a little bit too eager? (those few pixels you mentioned, probably) :-)

I think listing the metadata separately works a lot better than as labels. — But i'd like to separate it better visually, probably with a vertical line or a separate box or something.
We don't have timedeltas yet, so until we get that implemented in a general way, we need to use absolute dates. I want the timedeltas too! Can we find a volunteer?

Workflow coloring works great.  I would, however, like to have the color for "published" to be the 'default' scheme (no background, white text) as there is no need to signal a call for action. Private and pending should still have backgrounds.

I am not yet convinced that moving the "site" buttons to the top bar is the right thing to do. But — i don't have a much better proposal for a place to put them either. It feels like this part needs a bit more rethinking. You are making us move in the right direction, but i still think we have  a bit to go before we have found the perfect solution for it.



With the visual editor / Deco tile UI, it could look something like this (again, don't read too much into the implementation of the buttons):

Screen%20shot%202011-07-17%20at%2023.10.10.png

Yeah. Agree. We need better-looking buttons, but the bar can easily work in something close to this way. There is still also the option of floating menus if there is a good implementation that works. 
We have to consider whether the main bar should be disabled while editing. This is the same thing as when using the "structure" overlay. It may be confusing and disruptive to have both active at the same time.
We should perhaps also consider using a different color style for the editing bar.


…and as a final experiment, here's how it could look with a single-line UI — didn't add all the icons, but you get the point:

Screen%20shot%202011-07-17%20at%2021.56.19.png

This works really well. I assume this is the version most will be using after a while. I still like the demo-value/discoverability of the icons. Plone needs a bit more graphics.
— But having the non-icon view available as a personal preference is a good option. 




-- 
Geir Bækholt




_______________________________________________
UI mailing list
[hidden email]
https://lists.plone.org/mailman/listinfo/plone-ui
sisi nutt-2 sisi nutt-2
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Improving CMSUI toolbar w/metadata + edit bar + notifications

In reply to this post by Laurence Rowe
Nice work sir!

I think the groupings are much better, very clear and straight
forward, I like that it's all more compact but still works. I'd have a
bit more breathing room for all the text top and bottom. Probably just
increasing the line height really. But perhaps that's what you mean by
more pixels? I like both views (icons vs text) and I like the meta
data. Not sure about the dark green against the dark blue though. I
really like the wee inline icons at the top. Not so much the design of
the icons, just that they are there for quick scanning.

A couple of quesions:
There is not much space for the breadcrumbs, you and Geir talked about
that right? What was the conclusion?
I like the notification bar, but I think the grey might get lost. It's
annoying if you don't notice a delete notification for instance.

To further Laurence's question below about screen real estate: does
the bar stay persistent at the top of the screen when scrolling? And
if so, can it just be the edit functions, when in edit mode? If it
does scroll out of view, then I think it's fine staying the height it
is and without inline icons, but I would want my edit bar to be
persistent. Maybe that interaction is already there though? It would
be nice to have a looksee at the prototype when you feel it's ready
:-)

It could be nice though to see a mockup with a slimmed down mainbar
with inline icons. Would there still be enough space for the meta
data?

Cheers,
sisi

On 18 July 2011 23:33, Laurence Rowe <[hidden email]> wrote:

>
> Alexander Limi wrote:
>>
>> I've done a pass at improving the grouping and display of the toolbar and
>> related stuff, and I'm starting to get pretty happy with it. Did this as
>> an
>> HTML prototype, so I'm aware that not everything lines up pixel-perfect,
>> but
>> should be a decent representation. The goal was to avoid the
>> collapse/expand
>> all the time, and surface relevant information as part of the UI.
>>
>> As a reminder, here's current CMSUI:
>>
>> [image: Screen%20shot%202011-07-17%20at%2023.13.08.png]
>>
>>
>> I moved the global actions to the site bar, added metadata panel on the
>> right, notification bar on the bottom, and tightened up the space usage a
>> bit (although we probably want to add a few more pixels). I also added
>> more
>> icons to the item=specific bar see how it scales:
>>
>> [image: Screen%20shot%202011-07-17%20at%2023.08.58.png]
>>
>>
>> With the visual editor / Deco tile UI, it could look something like this
>> (again, don't read too much into the implementation of the buttons):
>>
>> [image: Screen%20shot%202011-07-17%20at%2023.10.10.png]
>>
>>
>> …and as a final experiment, here's how it could look with a single-line UI
>> —
>> didn't add all the icons, but you get the point:
>>
>> [image: Screen%20shot%202011-07-17%20at%2021.56.19.png]
>>
>> Feedback welcome. :)
>>
>
> Without the collapse/expand I do fear that the current design with icons
> will be too high for those with non-Mac laptops without high res screens. If
> icons for the main button bar are desired then I think we should seriously
> consider the inline icons of the top bar for the main bar.
>
> I'm not sure what moving the workflow colour indication away from the
> workflow button gains us, it  just seems to use  up a lot of space.
>
> I think a dismissable full width notification bar like Firefox / Chrome
> would work better as the iframe has to be full width anyway. (And you can't
> sneak undo back in so easily ;)
>
> Any reason for the more button to open up a dialogue box (presumably from
> the ellipsis) rather than a dropdown menu/bubble? The dropdown menu/bubble
> could even open on hover.
>
> What would it look like when you don't have editing permissions for the
> context? This might not be known on initial page load, only once the edit
> bar iframe is loaded.
>
> Laurence
>
> --
> View this message in context: http://plone.293351.n2.nabble.com/Improving-CMSUI-toolbar-w-metadata-edit-bar-notifications-tp6595977p6596508.html
> Sent from the User Interface & Design mailing list archive at Nabble.com.
> _______________________________________________
> UI mailing list
> [hidden email]
> https://lists.plone.org/mailman/listinfo/plone-ui
>
_______________________________________________
UI mailing list
[hidden email]
https://lists.plone.org/mailman/listinfo/plone-ui
Geir Bækholt-2 Geir Bækholt-2
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Improving CMSUI toolbar w/metadata + edit bar + notifications

In reply to this post by Laurence Rowe
On 18-07-2011 23:33, Laurence Rowe wrote:
> Without the collapse/expand I do fear that the current design with icons
> will be too high for those with non-Mac laptops without high res screens. If
> icons for the main button bar are desired then I think we should seriously
> consider the inline icons of the top bar for the main bar.

I am not married to the expand/collapse-button. If we can find efficient
ways of using the UI without having to click too many buttons, i think
that will probably improve the experience.

As for the vertical space, a possible option is to have a personal
preference to switch to a more compact bar when you are past the
demo/learning stage.


> I'm not sure what moving the workflow colour indication away from the
> workflow button gains us, it  just seems to use  up a lot of space.

Moving all the metadata away from the buttons gives us more clarity as
to what is metadata and what is buttons. The buttons also get better
descriptions.

For example i just realised that in a new site, the permissions button
would have the label "admin", which would be terribly confusing to a new
user.


--
Geir Bækholt
www.jarn.com/baekholt

_______________________________________________
UI mailing list
[hidden email]
https://lists.plone.org/mailman/listinfo/plone-ui
Geir Bækholt-2 Geir Bækholt-2
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Improving CMSUI toolbar w/metadata + edit bar + notifications

In reply to this post by sisi nutt-2
On 19-07-2011 00:18, sisi nutt wrote:
> To further Laurence's question below about screen real estate: does
> the bar stay persistent at the top of the screen when scrolling? And
> if so, can it just be the edit functions, when in edit mode? If it
> does scroll out of view, then I think it's fine staying the height it
> is and without inline icons, but I would want my edit bar to be
> persistent. Maybe that interaction is already there though?

The bar stays persistent when scrolling.


--
Geir Bækholt
www.jarn.com/baekholt

_______________________________________________
UI mailing list
[hidden email]
https://lists.plone.org/mailman/listinfo/plone-ui
Dan Jacka Dan Jacka
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Improving CMSUI toolbar w/metadata + edit bar + notifications

In reply to this post by Alexander Limi
Alexander Limi wrote
I've done a pass at improving the grouping and display of the toolbar and
related stuff, and I'm starting to get pretty happy with it. Did this as an
HTML prototype, so I'm aware that not everything lines up pixel-perfect, but
should be a decent representation. The goal was to avoid the collapse/expand
all the time, and surface relevant information as part of the UI.

As a reminder, here's current CMSUI:

[image: Screen%20shot%202011-07-17%20at%2023.13.08.png]


I moved the global actions to the site bar, added metadata panel on the
right, notification bar on the bottom, and tightened up the space usage a
bit (although we probably want to add a few more pixels). I also added more
icons to the item=specific bar see how it scales:

[image: Screen%20shot%202011-07-17%20at%2023.08.58.png]


With the visual editor / Deco tile UI, it could look something like this
(again, don't read too much into the implementation of the buttons):

[image: Screen%20shot%202011-07-17%20at%2023.10.10.png]


…and as a final experiment, here's how it could look with a single-line UI —
didn't add all the icons, but you get the point:

[image: Screen%20shot%202011-07-17%20at%2021.56.19.png]

Feedback welcome. :)

--
Alex Limi · +limi <http://profiles.google.com/limi> · @limi · limi.net

_______________________________________________
UI mailing list
[hidden email]
https://lists.plone.org/mailman/listinfo/plone-ui
Hi,

Two points about workflow UI:

1) I hope we keep the existing workflow dropdown. Click-'State'-for-dropdown,-click-new-state-name to change workflow state works very well. A list of colour-coded available states is much easier to deal with than the 'Change state' radio buttons + comments + dates, even if they are in an overlay form.

2) The workflow tool supports multiple workflows but you have to roll your own UI to get at any state variable other than the default (review_state). Seems like CMSUI is a perfect opportunity to add UI support for multiple workflows OOTB. Martin's 'hidden gems' article (http://www.martinaspeli.net/articles/dcworkflows-hidden-gems) illustrates how useful such a capability might be.

So, simpler and more complex please. ;-)

Dan
Alexander Limi Alexander Limi
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Improving CMSUI toolbar w/metadata + edit bar + notifications

On Tue, Jul 19, 2011 at 4:41 PM, Dan Jacka <[hidden email]> wrote:
1) I hope we keep the existing workflow dropdown.
Click-'State'-for-dropdown,-click-new-state-name to change workflow state
works very well. A list of colour-coded available states is much easier to
deal with than the 'Change state' radio buttons + comments + dates, even if
they are in an overlay form.

The goal is to make this just as efficient. Don't mistake what's currently in the workflow overlay with the final version. Having large click targets and shortcuts where possible should make this just as efficient, if not more so.
 
2) The workflow tool supports multiple workflows but you have to roll your
own UI to get at any state variable other than the default (review_state).
Seems like CMSUI is a perfect opportunity to add UI support for multiple
workflows OOTB. Martin's 'hidden gems' article
(http://www.martinaspeli.net/articles/dcworkflows-hidden-gems) illustrates
how useful such a capability might be.
 
Yes, it's a good thing to keep in mind, and something we should be better at supporting eventually. It's definitely a niche feature, so it'll come later. That doesn't mean I don't think we should support it well — I'd love to have separate translation workflow that is independent of publishing workflow, for instance.

So, simpler and more complex please. ;-)

That's how we roll — simpler *and* more powerful than the competition. :)

Thanks for the feedback!

--
Alex Limi · +limi · @limi · limi.net




_______________________________________________
UI mailing list
[hidden email]
https://lists.plone.org/mailman/listinfo/plone-ui
Alexander Limi · http://limi.net

Alexander Limi Alexander Limi
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Improving CMSUI toolbar w/metadata + edit bar + notifications

In reply to this post by sisi nutt-2
On Mon, Jul 18, 2011 at 3:18 PM, sisi nutt <[hidden email]> wrote:
Nice work sir!

Thanks!
 
I'd have a bit more breathing room for all the text top and bottom.

Yes, me too. This was a quick prototype, lots of stuff that needs a bit more whitespace and alignment.
 
I really like the wee inline icons at the top. Not so much the design of
the icons, just that they are there for quick scanning.

Yes, they help anchor the options.
 
There is not much space for the breadcrumbs, you and Geir talked about
that right? What was the conclusion?

If the breadcrumbs end up taking too much space (also note that most people won't have the Site Config link, and I'd personally like to put it in the menu under the person's name), we can shorten them using JS and have an expandable "…" in the middle.
 
I like the notification bar, but I think the grey might get lost. It's
annoying if you don't notice a delete notification for instance.

Yeah, gray is only for "Info" level notifications, not warnings or errors. But I do want to pull the notifications into the blue bar to ensure that we don't overlay content. This was an experiment, and I want to do a better version.
 
To further Laurence's question below about screen real estate: does
the bar stay persistent at the top of the screen when scrolling? And
if so, can it just be the edit functions, when in edit mode?

Yeah, we could scroll the non-edit related things off the screen, good idea. We had that behavior in one of the first versions of Deco, the format bar would scroll up, but then attach itself to the top of the viewport.
 
It could be nice though to see a mockup with a slimmed down mainbar
with inline icons. Would there still be enough space for the meta
data?

Yes, I included the metadata in the last screenshot. Shouldn't be a problem overall, we can also leave out the labels in a lot of cases.

--
Alex Limi · +limi · @limi · limi.net




_______________________________________________
UI mailing list
[hidden email]
https://lists.plone.org/mailman/listinfo/plone-ui
Alexander Limi · http://limi.net

Geir Bækholt-2 Geir Bækholt-2
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Improving CMSUI toolbar w/metadata + edit bar + notifications

In reply to this post by Dan Jacka
On 20-07-2011 01:41, Dan Jacka wrote:
> 1) I hope we keep the existing workflow dropdown.
> Click-'State'-for-dropdown,-click-new-state-name to change workflow state
> works very well. A list of colour-coded available states is much easier to
> deal with than the 'Change state' radio buttons + comments + dates, even if
> they are in an overlay form.

Personally, i think the quick-change menu we have today is overrated. In
my experience, it makes the lives of plone-developers click-testing
empty sites easier. It does not, however help real users.
They first need information about workflows in the learning phase. We
can help them better with more screen real estate.
Then they need the ability to do good workflow practices and use
changenotes/comments etc. — Which we can also encourage with more screen
real estate.

I still think Alex is right: we don't neccesarily have to increase the
number of clicks. We can do this without radiobuttons and forms if we
think a bit about how we design it.

I have some ideas. I'll try to make a mockup of how this could work.

I have to admit i have not thought about ways to represent multiple
workflows in the UI.
--
Geir Bækholt
www.jarn.com/baekholt

_______________________________________________
UI mailing list
[hidden email]
https://lists.plone.org/mailman/listinfo/plone-ui
Laurence Rowe Laurence Rowe
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Improving CMSUI toolbar w/metadata + edit bar + notifications

On 20 July 2011 22:47, Geir Bækholt <[hidden email]> wrote:

> On 20-07-2011 01:41, Dan Jacka wrote:
>>
>> 1) I hope we keep the existing workflow dropdown.
>> Click-'State'-for-dropdown,-click-new-state-name to change workflow state
>> works very well. A list of colour-coded available states is much easier to
>> deal with than the 'Change state' radio buttons + comments + dates, even
>> if
>> they are in an overlay form.
>
> Personally, i think the quick-change menu we have today is overrated. In my
> experience, it makes the lives of plone-developers click-testing empty sites
> easier. It does not, however help real users.
> They first need information about workflows in the learning phase. We can
> help them better with more screen real estate.
> Then they need the ability to do good workflow practices and use
> changenotes/comments etc. — Which we can also encourage with more screen
> real estate.
>
> I still think Alex is right: we don't neccesarily have to increase the
> number of clicks. We can do this without radiobuttons and forms if we think
> a bit about how we design it.
>
> I have some ideas. I'll try to make a mockup of how this could work.
>
> I have to admit i have not thought about ways to represent multiple
> workflows in the UI.

A couple of points on workflows...

When you have a complex workflow application you tend to want to make
the workflow state and actions more prominent than they are by
standard - I tend to use a workflow portlet for this rather than the
dropdown menu. I think it's fine not to handle displaying multiple
workflow variables in the standard UI.

We currently support having per-transition action urls which let you
display a transition specific form when you click on a transition
action. Not all workflows will have a comment field (though most will
I guess). Making the comment part of a transition form would be more
in keeping with the DCWorkflow model.

Laurence
_______________________________________________
UI mailing list
[hidden email]
https://lists.plone.org/mailman/listinfo/plone-ui
robgietema robgietema
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Improving CMSUI toolbar w/metadata + edit bar + notifications

In reply to this post by Alexander Limi
On Mon, Jul 18, 2011 at 9:06 PM, Alex Limi <[hidden email]> wrote:
I moved the global actions to the site bar, added metadata panel on the right, notification bar on the bottom, and tightened up the space usage a bit (although we probably want to add a few more pixels). I also added more icons to the item=specific bar see how it scales:

Screen%20shot%202011-07-17%20at%2023.08.58.png
This look really nice, I like the structure, site config and user on the right. I'm not sure the "add new..." is in the right location, somehow it should stand out more, not sure how tho. The metadata doesn't feel right like this, the rest of the ui is nice and clean and this is more like "wall of text". I like the status messages, but I think the default "yellow" for info, "orange" for warning and "red" for error works better. It would also be nice if we can somehow fit the messages inside menu, the problem with putting the messages below the menu is that it might overlap with links in the website.

With the visual editor / Deco tile UI, it could look something like this (again, don't read too much into the implementation of the buttons):

Screen%20shot%202011-07-17%20at%2023.10.10.png

I think the menu is way too high like this, I prefer to use a "floating, stick to tile, stay in viewport"-toolbar. The second toolbar will need to change to "save", "cancel", "pageproperties", "add tile" etc when editing using Deco.

…and as a final experiment, here's how it could look with a single-line UI — didn't add all the icons, but you get the point:

Screen%20shot%202011-07-17%20at%2021.56.19.png
+10 for this setup, this saves a lot of space. What I do like to have is the icons for all the actions. The status info is a lot better like this, maybe even use gray text to make it different from the clickable actions.

Some general feedback:
- will we stick with blue or change it to black like some of the screenshots which have been made?
- do we want a style applied to the button when it is pressed and that overlay is active?

--
Rob

_______________________________________________
UI mailing list
[hidden email]
https://lists.plone.org/mailman/listinfo/plone-ui
Alexander Limi Alexander Limi
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Improving CMSUI toolbar w/metadata + edit bar + notifications

On Fri, Jul 29, 2011 at 8:17 AM, Rob Gietema <[hidden email]> wrote:
This look really nice, I like the structure, site config and user on the right. I'm not sure the "add new..." is in the right location, somehow it should stand out more, not sure how tho.

Agreed, it's the part of the design that I'm the least happy with right now. I wanted to make sure it didn't imply that adding something was part of the page's interface, but rather a global operation. Suggestions welcome.
 
The metadata doesn't feel right like this, the rest of the ui is nice and clean and this is more like "wall of text".

I think it's important to have available in some form, didn't put too much time into the visual styling yet. It's more a "we need to figure out how to fit this in" reminder.
 
I like the status messages, but I think the default "yellow" for info, "orange" for warning and "red" for error works better. It would also be nice if we can somehow fit the messages inside menu, the problem with putting the messages below the menu is that it might overlap with links in the website.

Yeah, I want them to be inside the bars in most cases (info messages etc) — but there's also the interesting case where people aren't going to look up there for error messages that relate to their content. Those will probably have to always be inline or near the form element in question.
 
I think the menu is way too high like this, I prefer to use a "floating, stick to tile, stay in viewport"-toolbar.

Yup, it depends on how much we can slim it down. I like both approaches for different reasons; I like the close proximity of having the bar near the content being edited, but I like the predictability and the feeling of an "edit mode" that the bar along the top gives you, as well as the familiarity to people coming from Word/Pages and other word processors.
 
The second toolbar will need to change to "save", "cancel", "pageproperties", "add tile" etc when editing using Deco.

Yes, I do have a version that does that.

…and as a final experiment, here's how it could look with a single-line UI — didn't add all the icons, but you get the point:

+10 for this setup, this saves a lot of space. What I do like to have is the icons for all the actions. The status info is a lot better like this, maybe even use gray text to make it different from the clickable actions.

Gray on blue looks kind of crappy, unfortunately.

I think we should ship with the big buttons by default, and then users can switch the more minimal layout if they want to on a per-user basis. Being friendly and having a recognizable look out of the box is also important. :)
 
Some general feedback:
- will we stick with blue or change it to black like some of the screenshots which have been made?

I like the blue because it's more "Plone" than nondescript black, but I'm not very strongly opposed to black either.
 
- do we want a style applied to the button when it is pressed and that overlay is active?

Yes, probably. And on hover.

--
Alex Limi · +limi · @limi · limi.net




_______________________________________________
UI mailing list
[hidden email]
https://lists.plone.org/mailman/listinfo/plone-ui
Alexander Limi · http://limi.net

Geir Bækholt-2 Geir Bækholt-2
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Improving CMSUI toolbar w/metadata + edit bar + notifications

In reply to this post by Alexander Limi
On 18-07-2011 21:06, Alex Limi wrote:
> I've done a pass at improving the grouping and display of the toolbar
> and related stuff, and I'm starting to get pretty happy with it. Did
> this as an HTML prototype, so I'm aware that not everything lines up
> pixel-perfect, but should be a decent representation. The goal was to
> avoid the collapse/expand all the time, and surface relevant information
> as part of the UI.

Thanks for the feedback.

We ran a workshop at the Living Statues sprint, trying to address all
the issues raised. We have built on top of the current model and Limi's
proposed improvements, and we believe we have found a good solution.

Attached is a mockup of the new top-level menu.

It has the following core attributes:

* It is a single line and doesn't take up much vertical space.
* It has a personal actions panel (Bruce Wayne+arrow)  for account
info/personal preferences like Google's.
* The cogwheel to the right also holds a panel menu, currently only with
site configuration.

The "Edit this page" item expands a panel menu with all the operations
for the current item.

--
Geir Bækholt
www.jarn.com/baekholt

_______________________________________________
UI mailing list
[hidden email]
https://lists.plone.org/mailman/listinfo/plone-ui

03 expanded menu with Panel.png (155K) Download Attachment
Geir Bækholt-2 Geir Bækholt-2
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Improving CMSUI toolbar w/metadata + edit bar + notifications

In reply to this post by Alexander Limi


On 18-07-2011 21:06, Alex Limi wrote:
 > I've done a pass at improving the grouping and display of the toolbar
 > and related stuff, and I'm starting to get pretty happy with it. Did
 > this as an HTML prototype, so I'm aware that not everything lines up
 > pixel-perfect, but should be a decent representation. The goal was to
 > avoid the collapse/expand all the time, and surface relevant information
 > as part of the UI.

Thanks for the feedback.

We ran a workshop at the Living Statues sprint, trying to address all
the issues raised. We have built on top of the current model and Limi's
proposed improvements, and we believe we have found a good solution.

Attached is a mockup of the new top-level menu.

It has the following core attributes:

* It is a single line and doesn't take up much vertical space.
* It has a personal actions panel (Bruce Wayne+arrow)  for account
info/personal preferences like Google's.
* The cogwheel to the right also holds a panel menu, currently only with
site configuration.

The "Edit this page" item expands a panel menu with all the operations
for the current item.

--
Geir Bækholt
www.jarn.com/baekholt


_______________________________________________
UI mailing list
[hidden email]
https://lists.plone.org/mailman/listinfo/plone-ui

03 expanded menu with Panel.png (155K) Download Attachment
Nathan Van Gheem Nathan Van Gheem
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Improving CMSUI toolbar w/metadata + edit bar + notifications

Yay for the cog wheel! ;)

Looks really good and I'm all for taking up less vertical space.

On Fri, Sep 23, 2011 at 10:17 AM, Geir Bækholt <[hidden email]> wrote:


On 18-07-2011 21:06, Alex Limi wrote:
> I've done a pass at improving the grouping and display of the toolbar
> and related stuff, and I'm starting to get pretty happy with it. Did
> this as an HTML prototype, so I'm aware that not everything lines up
> pixel-perfect, but should be a decent representation. The goal was to
> avoid the collapse/expand all the time, and surface relevant information
> as part of the UI.

Thanks for the feedback.

We ran a workshop at the Living Statues sprint, trying to address all
the issues raised. We have built on top of the current model and Limi's
proposed improvements, and we believe we have found a good solution.

Attached is a mockup of the new top-level menu.

It has the following core attributes:

* It is a single line and doesn't take up much vertical space.
* It has a personal actions panel (Bruce Wayne+arrow)  for account
info/personal preferences like Google's.
* The cogwheel to the right also holds a panel menu, currently only with
site configuration.

The "Edit this page" item expands a panel menu with all the operations
for the current item.

--
Geir Bækholt
www.jarn.com/baekholt


_______________________________________________
UI mailing list
[hidden email]
https://lists.plone.org/mailman/listinfo/plone-ui



_______________________________________________
UI mailing list
[hidden email]
https://lists.plone.org/mailman/listinfo/plone-ui
Martin Aspeli Martin Aspeli
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Improving CMSUI toolbar w/metadata + edit bar + notifications

Return of THE COG!

On 23 September 2011 18:58, Nathan Van Gheem <[hidden email]> wrote:
Yay for the cog wheel! ;)

Looks really good and I'm all for taking up less vertical space.

On Fri, Sep 23, 2011 at 10:17 AM, Geir Bækholt <[hidden email]> wrote:


On 18-07-2011 21:06, Alex Limi wrote:
> I've done a pass at improving the grouping and display of the toolbar
> and related stuff, and I'm starting to get pretty happy with it. Did
> this as an HTML prototype, so I'm aware that not everything lines up
> pixel-perfect, but should be a decent representation. The goal was to
> avoid the collapse/expand all the time, and surface relevant information
> as part of the UI.

Thanks for the feedback.

We ran a workshop at the Living Statues sprint, trying to address all
the issues raised. We have built on top of the current model and Limi's
proposed improvements, and we believe we have found a good solution.

Attached is a mockup of the new top-level menu.

It has the following core attributes:

* It is a single line and doesn't take up much vertical space.
* It has a personal actions panel (Bruce Wayne+arrow)  for account
info/personal preferences like Google's.
* The cogwheel to the right also holds a panel menu, currently only with
site configuration.

The "Edit this page" item expands a panel menu with all the operations
for the current item.

--
Geir Bækholt
www.jarn.com/baekholt


_______________________________________________
UI mailing list
[hidden email]
https://lists.plone.org/mailman/listinfo/plone-ui



_______________________________________________
UI mailing list
[hidden email]
https://lists.plone.org/mailman/listinfo/plone-ui



_______________________________________________
UI mailing list
[hidden email]
https://lists.plone.org/mailman/listinfo/plone-ui
Loading...