On 18 Apr 2017, at 15:55, Ecaterina Moraru (Valica) <[email protected]> wrote:

On Sat, Apr 15, 2017 at 3:18 PM, Sergiu Dumitriu <[email protected]> wrote:

...

On 04/12/2017 01:47 PM, Ecaterina Moraru (Valica) wrote:

...

Hi devs,

Some users have complained that the content actions are too abstract / ambiguous and they don't see/understand them so they don't know how to Edit or Create content in the first minutes of interaction.

More details about this problem can be found at http://design.xwiki.org/xwiki/bin/view/Proposal/IdeaLabeledActions

There I've suggested 2 possible proposals: Proposal 1: JS Tooltips Proposal 2: Labeled actions

Which one do you prefer?

Thanks, Caty

P.S: This was a recurrent topic and we change several things over the years. I guess we will continue iterating until we reach the sweet spot :)

IMHO, 1 doesn't solve anything. The buttons already have classic tooltips, and adding "improved" tooltips adds little to the discoverability of the actions. If someone is looking for the "edit" button, they scan the screen for that text with their eyes, they wouldn't just hover everything with the mouse.

The complain here was the delay the normal tooltips have and that the users switch to another item before the tooltip is displayed.

...

So, the question is:

- is it better to clutter the screen to help a few first-time users that can't interpret the pencil icon? - is it OK to leave things as they are for a cleaner UI? - are there better icons to suggest these actions? And by changing them now, will current users be disoriented?

I can't think of other Font Awesome icons to better suggest 'Edit' and 'Create’.

But for the Delete/Rename/Copy we need to change the icon for sure since right now we’re using a “settings” type of icon which is quite misleading. Ideas: - http://fontawesome.io/icon/clone/ - http://fontawesome.io/icon/files-o/ - http://fontawesome.io/icon/file-o/ - http://fontawesome.io/icon/clipboard/ The Administer page should probably be moved elsewhere. Thanks -Vincent

...

The deciding factor is exactly how many users have a problem with the current UI. -- Sergiu Dumitriu http://purl.org/net/sergiu/

On Tue, Apr 18, 2017 at 5:44 PM, Ecaterina Moraru (Valica) < [email protected]> wrote:

On Tue, Apr 18, 2017 at 5:11 PM, Vincent Massol <[email protected]> wrote:

...

...

On 18 Apr 2017, at 15:55, Ecaterina Moraru (Valica) <[email protected]

wrote:

...

On Sat, Apr 15, 2017 at 3:18 PM, Sergiu Dumitriu <[email protected]>

wrote:

...

...

On 04/12/2017 01:47 PM, Ecaterina Moraru (Valica) wrote:

...

Hi devs,

Some users have complained that the content actions are too abstract

/

...

...

...

...

ambiguous and they don't see/understand them so they don't know how to Edit or Create content in the first minutes of interaction.

More details about this problem can be found at http://design.xwiki.org/xwiki/bin/view/Proposal/IdeaLabeledActions

There I've suggested 2 possible proposals: Proposal 1: JS Tooltips Proposal 2: Labeled actions

Which one do you prefer?

Thanks, Caty

P.S: This was a recurrent topic and we change several things over the years. I guess we will continue iterating until we reach the sweet spot :)

IMHO, 1 doesn't solve anything. The buttons already have classic tooltips, and adding "improved" tooltips adds little to the discoverability of the actions. If someone is looking for the "edit" button, they scan the screen for that text with their eyes, they wouldn't just hover everything with the mouse.

The complain here was the delay the normal tooltips have and that the users switch to another item before the tooltip is displayed.

...

So, the question is:

- is it better to clutter the screen to help a few first-time users that can't interpret the pencil icon? - is it OK to leave things as they are for a cleaner UI? - are there better icons to suggest these actions? And by changing them now, will current users be disoriented?

I can't think of other Font Awesome icons to better suggest 'Edit' and 'Create’.

But for the Delete/Rename/Copy we need to change the icon for sure since right now we’re using a “settings” type of icon which is quite misleading.

Ideas: - http://fontawesome.io/icon/clone/ - http://fontawesome.io/icon/files-o/ - http://fontawesome.io/icon/file-o/ - http://fontawesome.io/icon/clipboard/

The Administer page should probably be moved elsewhere.

How about the "More actions" labeled grouping from http://design.xwiki.org/xwiki/bin/download/Proposal/IdeaLabeledActions/P4_ noRightPanels_manage.png

I like it. Thanks, Marius

For these changes we need https://jira.xwiki.org/browse/XWIKI-14002 and https://jira.xwiki.org/browse/XWIKI-12595

Thanks, Caty

...

Thanks -Vincent

...

...

The deciding factor is exactly how many users have a problem with the current UI. -- Sergiu Dumitriu http://purl.org/net/sergiu/

While iterating on this issue, I've done some screenshots for a skin that would group the global and the content actions more close together. See http://design.xwiki.org/xwiki/bin/view/Proposal/KoelSkin My conclusion is that the content menu actions need some affordance that they are clickable, so we increase their discoverability. The simplest is using a background-color. Now all depends if we want the skin to be more cleaner (P4) or more explicit (P2). Thanks, Caty On Wed, Apr 19, 2017 at 7:43 PM, Vincent Massol <[email protected]> wrote:

Hi,

[snip ]

...

...

How about the "More actions" labeled grouping from http://design.xwiki.org/xwiki/bin/download/Proposal/

IdeaLabeledActions/P4_

...

...

noRightPanels_manage.png

I like it.

I like it too.

Thanks -Vincent

...

Thanks, Marius

...

For these changes we need https://jira.xwiki.org/browse/XWIKI-14002 and https://jira.xwiki.org/browse/XWIKI-12595

Thanks, Caty

...

Thanks -Vincent

...

...

The deciding factor is exactly how many users have a problem with the current UI. -- Sergiu Dumitriu http://purl.org/net/sergiu/

Hi, Note that P1 is basically already covered by the latest updates to Firefox where they seem to have lowered drastically the hover tooltip popup delays and have restyled the popups themselves (black background with white text), very close to BootStrap's default. Also note that Google's Chrome also has a very low delay for the tooltip. Re http://design.xwiki.org/xwiki/bin/download/Proposal/ IdeaLabeledActions/P4_noRightPanels_manage.png it is a nice solution to get rid of one extra button in the UI, though it is making the More Actions section longer. Even so, coupled with the labeled grouping, I find it nice as well. Re adding backgrounds, I`m not that fond of it, since it adds a lot of weight to an area that is already dominated by the breadcrumbs background, so it would be a bit too much, IMO. On the advantages side, AFAIK, backgrounds tend to make a button more touch-friendly (for mobile devices), since it clearly defines the touchable area and is more inviting that way. Thanks, Eduard On Thu, Apr 20, 2017 at 5:15 PM, Guillaume Delhumeau < [email protected]> wrote:

To me, P2 looks good, and even better with your new skin.

2017-04-20 14:23 GMT+02:00 Ecaterina Moraru (Valica) <[email protected]>:

...

While iterating on this issue, I've done some screenshots for a skin that would group the global and the content actions more close together. See http://design.xwiki.org/xwiki/bin/view/Proposal/KoelSkin

My conclusion is that the content menu actions need some affordance that they are clickable, so we increase their discoverability. The simplest is using a background-color. Now all depends if we want the skin to be more cleaner (P4) or more explicit (P2).

Thanks, Caty

On Wed, Apr 19, 2017 at 7:43 PM, Vincent Massol <[email protected]> wrote:

...

Hi,

[snip ]

...

...

How about the "More actions" labeled grouping from http://design.xwiki.org/xwiki/bin/download/Proposal/

IdeaLabeledActions/P4_

...

...

noRightPanels_manage.png

I like it.

I like it too.

Thanks -Vincent

...

Thanks, Marius

...

For these changes we need https://jira.xwiki.org/browse/XWIKI-14002

and

...

https://jira.xwiki.org/browse/XWIKI-12595

Thanks, Caty

...

Thanks -Vincent

> > >> The deciding factor is exactly how many users have a problem with the >> current UI. >> -- >> Sergiu Dumitriu >> http://purl.org/net/sergiu/

-- Guillaume Delhumeau ([email protected]) Research & Development Engineer at XWiki SAS Committer on the XWiki.org project

On Mon, Apr 24, 2017 at 3:33 PM, Vincent Massol <[email protected]> wrote:

...

On 24 Apr 2017, at 14:25, Eduard Moraru <[email protected]> wrote:

Hi,

Note that P1 is basically already covered by the latest updates to Firefox where they seem to have lowered drastically the hover tooltip popup delays and have restyled the popups themselves (black background with white text), very close to BootStrap's default. Also note that Google's Chrome also has a very low delay for the tooltip.

hmm I’m on chrome (v57) and it’s quite slow for me.

Yes, compared to what we have for watchlist which is instance. Firefox and Chrome (v58, but this should not matter) seem to have the same timings. I`ve managed to find the timings for Firefox: https://developer.mozilla.org/en-US/docs/Mozilla/Preferences/Preference_refe... (the issue that introduced it is also interesting to follow https://bugzilla.mozilla.org/show_bug.cgi?id=204786 ) ...so the default seems to actually be 500ms, which is quite fast, even if a bit over the observable "slow" threshold of 300ms. I mentioned the change because I`ve noticed the speed and styling changes on my Firefox instance. Side note: Just noticed a funny thing in Gmail that the main buttons on top (under the search bar) use JS tooltips, while the top-right buttons (profile, notifications, etc.) use standard browser tooltips, but the timings seem to be set on the JS tooltips to match the default ones. Thanks, Eduard

By slow I mean close to 2 seconds.

Thanks -Vincent

...

Re http://design.xwiki.org/xwiki/bin/download/Proposal/ IdeaLabeledActions/P4_noRightPanels_manage.png it is a nice solution to get rid of one extra button in the UI, though it is making the More Actions section longer. Even so, coupled with the labeled grouping, I find it nice as well.

Re adding backgrounds, I`m not that fond of it, since it adds a lot of weight to an area that is already dominated by the breadcrumbs background, so it would be a bit too much, IMO. On the advantages side, AFAIK, backgrounds tend to make a button more touch-friendly (for mobile devices), since it clearly defines the touchable area and is more inviting that way.

Thanks, Eduard

On Thu, Apr 20, 2017 at 5:15 PM, Guillaume Delhumeau < [email protected]> wrote:

...

To me, P2 looks good, and even better with your new skin.

2017-04-20 14:23 GMT+02:00 Ecaterina Moraru (Valica) <[email protected] :

...

While iterating on this issue, I've done some screenshots for a skin that would group the global and the content actions more close together. See http://design.xwiki.org/xwiki/bin/view/Proposal/KoelSkin

My conclusion is that the content menu actions need some affordance that they are clickable, so we increase their discoverability. The simplest is using a background-color. Now all depends if we want the skin to be more cleaner (P4) or more explicit (P2).

Thanks, Caty

On Wed, Apr 19, 2017 at 7:43 PM, Vincent Massol <[email protected]> wrote:

...

Hi,

[snip ]

...

> How about the "More actions" labeled grouping from > http://design.xwiki.org/xwiki/bin/download/Proposal/

IdeaLabeledActions/P4_

...

> noRightPanels_manage.png

I like it.

I like it too.

Thanks -Vincent

...

Thanks, Marius

> > > For these changes we need https://jira.xwiki.org/browse/XWIKI-14002 and > https://jira.xwiki.org/browse/XWIKI-12595 > > Thanks, > Caty > > >> Thanks >> -Vincent >> >>> >>> >>>> The deciding factor is exactly how many users have a problem with the >>>> current UI. >>>> -- >>>> Sergiu Dumitriu >>>> http://purl.org/net/sergiu/ >> >> >

-- Guillaume Delhumeau ([email protected]) Research & Development Engineer at XWiki SAS Committer on the XWiki.org project

Some conclusions: - We will merge the Actions and More actions menus in just one, with categories label, like in http://design.xwiki.org/xwiki/bin/download/Proposal/IdeaLabeledActions/moreA... - We need some background-color for the buttons in order to be more visible and let the users know they can interact with them In terms of what styling to choose, it would be nice if you could express you vote more clearly. Currently I know: P2: Guillaume, Olivier, Caty P4: ? I know Sergiu prefers the version without the text, and Marius and Vincent like some screenshot that showcases P4. Why I voted for P2? Although I like P4 in terms of style, I think in terms of usability P2 is much better. It looses from the consistency with the global menu icons, but goes more closely to the primary button display. I want the labels for "Edit" and "Create" since they are main actions we want all the user to find and perform, so it's better to have them explicit. What I would like us to do if we implement P2 is to provide a span around the labels, so that custom skins can easily make the label text hidden. Let me know what you think. Thanks, Caty On Tue, Apr 25, 2017 at 1:15 PM, oseres <[email protected]> wrote:

Hi, i m in favor of option 2 combining icons and text. I've already mentionned some studies that proved that it had a stong impact in terms if discoverability

-- View this message in context: http://xwiki.475771.n2.nabble. com/Proposal-UX-Explicit-content-actions-tp7603466p7603613.html Sent from the XWiki- Dev mailing list archive at Nabble.com.

On 18 Apr 2017, at 13:54, Marius Dumitru Florea <[email protected]> wrote:

On Wed, Apr 12, 2017 at 8:47 PM, Ecaterina Moraru (Valica) < [email protected]> wrote:

...

Hi devs,

Some users have complained that the content actions are too abstract / ambiguous and they don't see/understand them so they don't know how to Edit or Create content in the first minutes of interaction.

More details about this problem can be found at http://design.xwiki.org/xwiki/bin/view/Proposal/IdeaLabeledActions

There I've suggested 2 possible proposals: Proposal 1: JS Tooltips

...

Proposal 2: Labeled actions

Forcing labeled actions for all the users may annoy the power users. Some options:

* make it configurable (from the user profile) * show labels only for simple users * show labels when accessibility mode is enabled from the user profile

* modify the tour to make the user edit the home page (interactive tour), inviting him to click on the content actions buttons (at least the edit one). Proposal 3: Use Labels instead of Icons, as it’s done by wikipedia. Personally I don’t like proposal 2 or 3 and if they’re made configurable then it would be the same issue since we would need to pick a default and we would force regular xwiki users to have to change their settings which isn’t nice. Regarding simple vs advanced users, I’m not sure it’s the problem. I’ve experimented this over the week end (see my other mail) and the issue was locating this action bar and understanding it. But once it was understood it was very easy to use for the user and he actually liked that it wasn’t taking too much visual space. So I think it’s only a discoverability issue and not a regular usage issue. Another option would be that when the user hovers over the action icons in the default content for Main.WebHome, (for example if he tries to click on them), that we would highlight the content menu very visibly or something like that. Thanks -Vincent

Thanks, Marius

...

Which one do you prefer?

Thanks, Caty

P.S: This was a recurrent topic and we change several things over the years. I guess we will continue iterating until we reach the sweet spot :)

On Tue, Apr 18, 2017 at 3:19 PM, Vincent Massol <[email protected]> wrote:

...

On 18 Apr 2017, at 13:54, Marius Dumitru Florea < [email protected]> wrote:

On Wed, Apr 12, 2017 at 8:47 PM, Ecaterina Moraru (Valica) < [email protected]> wrote:

...

Hi devs,

Some users have complained that the content actions are too abstract / ambiguous and they don't see/understand them so they don't know how to Edit or Create content in the first minutes of interaction.

More details about this problem can be found at http://design.xwiki.org/xwiki/bin/view/Proposal/IdeaLabeledActions

There I've suggested 2 possible proposals: Proposal 1: JS Tooltips

...

Proposal 2: Labeled actions

Forcing labeled actions for all the users may annoy the power users. Some options:

* make it configurable (from the user profile) * show labels only for simple users * show labels when accessibility mode is enabled from the user profile

* modify the tour to make the user edit the home page (interactive tour), inviting him to click on the content actions buttons (at least the edit one).

Currently we just highlight the area in the Introductory tour in step 5. We could implement interactive tours (depends on http://jira.xwiki.org/browse/TOUR-52) and improve the Tour to showcase the actions in the step 1-2.

Proposal 3: Use Labels instead of Icons, as it’s done by wikipedia.

You can see how it would look like at http://design.xwiki.org/xwiki/bin/download/Proposal/IdeaLabeledActions/P3_0_... I think it has even lower discoverability / visibility because the screen is filled with text. The icons were more visible and easier to scan for. Also in the #tmMoreActions zone, if we remove all the icons, users will need to read them one by one, instead of scanning them by icon and select what's needed. See http://design.xwiki.org/xwiki/bin/download/Proposal/IdeaLabeledActions/P3_2.... I think icons help identify actions and once learned they increase the reaction time. An idea would be to optimize just some actions, see http://design.xwiki.org/xwiki/bin/download/Proposal/IdeaLabeledActions/moreA... The problem is that the importance of some actions depends on the user's persona (showcased Administrators).

Personally I don’t like proposal 2 or 3 and if they’re made configurable then it would be the same issue since we would need to pick a default and we would force regular xwiki users to have to change their settings which isn’t nice.

Regarding simple vs advanced users, I’m not sure it’s the problem. I’ve experimented this over the week end (see my other mail) and the issue was locating this action bar and understanding it. But once it was understood it was very easy to use for the user and he actually liked that it wasn’t taking too much visual space.

So I think it’s only a discoverability issue and not a regular usage issue.

I agree. Proposal 4: Icons with backgrounds So, I think the main problem is that our current actions are in a zone that is atypical for applications and they are floating in the air. So we need to mark that zone as interactive and increase its visibility. This can be done with a background-color similar to the breadcrumb, see http://design.xwiki.org/xwiki/bin/download/Proposal/IdeaLabeledActions/P4_1_... Note: Right panels Also there are so many things on the screen that compete for the new user's attention (for example the right panel zone which most users ignore). If the standard flavor would not have the rights panels, maybe the users will see them better, since they would be grouped right under the global actions, see http://design.xwiki.org/xwiki/bin/download/Proposal/IdeaLabeledActions/P4_no... In Vincent's example, Wikipedia's actions area is quite top level and grouped with the global actions, too. Thanks, Caty

Another option would be that when the user hovers over the action icons in the default content for Main.WebHome, (for example if he tries to click on them), that we would highlight the content menu very visibly or something like that.

Thanks -Vincent

...

Thanks, Marius

...

Which one do you prefer?

Thanks, Caty

P.S: This was a recurrent topic and we change several things over the years. I guess we will continue iterating until we reach the sweet spot :)