Wiki source code of Idea: Explicit Content Actions
Last modified by Vincent Massol on 2024/02/26 17:54
Hide last authors
author | version | line-number | content |
---|---|---|---|
1.2 | 1 | {{toc start="2"/}} | |
2 | |||
36.2 | 3 | (% class="row" %) | |
4 | ((( | ||
5 | (% class="col-xs-12 col-sm-6" %) | ||
6 | ((( | ||
1.2 | 7 | == Requirement == | |
8 | |||
1.4 | 9 | > Implement an option to display action name under icons | |
1.2 | 10 | ||
1.5 | 11 | > Make wheel and 3dots menu more coherent | |
12 | |||
1.2 | 13 | == Need == | |
14 | |||
15 | * O: Icons are floating in the air, not explicit for newbies that don't understand where to click. | ||
1.5 | 16 | * O: The user doesn't know what kind of action he will find and the difference of the items under wheel and tree dots menus. | |
1.19 | 17 | * O: [[Proposal>>http://d.pr/i/vFDq]] | |
1.18 | 18 | * O: Fine on the Search and top navbar icons. Needed adjustment only on content menu | |
1.20 | 19 | * O: users don't always understand the meaning of icons (and what the icon designer wanted to mean) + all studies lead to the same conclusion about labels | |
20 | * O: user doesn't know what category of items are contained in the 2 menus | ||
1.18 | 21 | * The content menu is floating in the air | |
22 | * Problematic wiki concept since people don't know pages can be edited and they are not invited to do it. Adding text to the icon could make them less cryptic and invite users to use them | ||
23 | * Some users might not know where to find some actions (between the 2 menus) | ||
24 | * Edit mode could adjust the menu and use other/no actions | ||
25 | * Edit needs a label | ||
1.21 | 26 | * O: Search could be expanded. Survey beginner and advanced users about this | |
1.2 | 27 | ||
1.7 | 28 | == Notes == | |
29 | |||
1.9 | 30 | * Older versions had the labeled actions, see [[screenshots>>design:Proposal.ActionMenuProposal3||anchor="HContentMenu"]]. The change was done in [[7.2+>>https://jira.xwiki.org/browse/XWIKI-12189]] in the try to simplify and modernise the UI. | |
1.22 | 31 | * Investigate what are the usability reasons to delay tooltips | |
1.7 | 32 | ||
1.10 | 33 | == Improvements == | |
34 | |||
35 | * Improve the labels for "Actions" to "Page Actions" | ||
36 | |||
1.2 | 37 | == Solutions == | |
38 | |||
39 | === Solution 1 === | ||
40 | |||
1.10 | 41 | * Revert the icon-buttons and use labels. Rollback [[XWIKI-12189>>https://jira.xwiki.org/browse/XWIKI-12189]] | |
1.15 | 42 | ** {{error}}##-{{/error}} Inconsistencies with the navbar icons (except if we plan to revert those too) | |
43 | ** {{error}}##-{{/error}} Loses the skin modern styling | ||
1.2 | 44 | ||
45 | === Solution 2 === | ||
46 | |||
1.11 | 47 | * Make configurable the display of buttons | |
1.13 | 48 | ** {{error}}##-{{/error}} Harder to test | |
1.2 | 49 | ||
50 | === Solution 3 === | ||
51 | |||
1.14 | 52 | * Replace the HTML hints done with the "title" attribute with BS JS [[tooltips>>http://getbootstrap.com/javascript/#tooltips]] (example Watchlist) | |
1.13 | 53 | ** {{error}}##-{{/error}} Increase loading times for the JS | |
54 | ** {{success}}##+{{/success}} Faster response time to display hints | ||
1.14 | 55 | ||
56 | ==== Solution 3.1 ==== | ||
57 | |||
58 | * JS that looks at all the title attributes and displays them with the BS JS tooltips (Suggested by Enygma) | ||
1.25 | 59 | ))) | |
60 | |||
36.2 | 61 | (% class="col-xs-12 col-sm-6" %) | |
62 | ((( | ||
1.26 | 63 | == Proposals == | |
1.25 | 64 | ||
6.4 | 65 | === Current === | |
66 | |||
67 | [[[[image:before.png||style="border:1px solid #E8E8E8" width="100%"]]>>attach:before.png]] | ||
68 | |||
1.27 | 69 | === Proposal 1: JS Tooltips === | |
70 | |||
6.2 | 71 | * The current HTML [["title">>https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/title]] attributes have a delay that is browser dependant | |
72 | * If we want to make the tooltip appear faster we can use the Bootstrap Tooltips | ||
73 | |||
1.28 | 74 | {{gallery}} | |
1.29 | 75 | image:tooltips1.png | |
76 | image:tooltips2.png | ||
77 | image:tooltips3.png | ||
78 | image:tooltips4.png | ||
1.28 | 79 | {{/gallery}} | |
1.25 | 80 | ||
1.27 | 81 | === Proposal 2: Labeled actions === | |
82 | |||
9.2 | 83 | * Provide label for the critical actions "Edit" and "Create" | |
84 | * Combine "Page actions" and "More actions", but make them more explicit by providing categories description | ||
85 | |||
86 | {{gallery}} | ||
10.2 | 87 | image:simpleUser.png | |
88 | image:advancedUser.png | ||
89 | image:advancedExpanded.png | ||
90 | image:moreActions.png | ||
23.3 | 91 | image:moreActionsSelective.png | |
10.2 | 92 | image:gradient.png | |
93 | image:editMode.png | ||
31.2 | 94 | image:P2_noRightPanels.png | |
9.2 | 95 | {{/gallery}} | |
96 | |||
18.6 | 97 | === Proposal 3: Use Labels instead of Icons === | |
98 | |||
99 | {{gallery}} | ||
33.2 | 100 | image:P3_0_4.png | |
31.4 | 101 | image:P3_0.png | |
22.2 | 102 | image:P3_0_1.png | |
18.6 | 103 | image:P3_1.png | |
104 | image:P3_2.png | ||
31.2 | 105 | image:P3_noRightPanels.png | |
18.6 | 106 | {{/gallery}} | |
107 | |||
28.2 | 108 | === Proposal 4: Icons with background === | |
109 | |||
110 | {{gallery}} | ||
111 | image:P4_1_bigger.png | ||
31.2 | 112 | image:P4_noRightPanels.png | |
33.3 | 113 | image:P4_noRightPanels_more.png | |
34.2 | 114 | image:P4_noRightPanels_manage.png | |
28.2 | 115 | {{/gallery}} | |
1.25 | 116 | ))) | |
117 | ))) | ||
36.7 | 118 | ||
119 | (% class="row" %) | ||
120 | ((( | ||
121 | (% class="col-xs-12 col-sm-6" %) | ||
122 | ((( | ||
123 | == Voting == | ||
36.8 | 124 | ||
125 | We held a multiple channels voting for this issue: | ||
37.1 | 126 | ||
127 | 1. ((( | ||
128 | [[Devs Mailinglist>>http://markmail.org/message/64ruwrwxecd75br5]] (6 votes) | ||
36.8 | 129 | P2: 3 votes (50%) | |
130 | P4: 3 votes (50%) | ||
36.10 | 131 | ))) | |
37.1 | 132 | 1. ((( | |
133 | [[Users Mailinglist>>http://markmail.org/message/ubjebsao5vtewfkp]] (8 votes) | ||
36.8 | 134 | P2: 3 votes (37.5%) | |
135 | P4: 5 votes (62.5%) | ||
36.10 | 136 | ))) | |
37.1 | 137 | 1. ((( | |
138 | [[Open Source Designers>>https://discourse.opensourcedesign.net/t/explicit-actions/115]] (9 votes) | ||
36.8 | 139 | P2: 8 votes (88.9%) | |
140 | P4: 1 vote (11.1%) | ||
36.10 | 141 | ))) | |
37.1 | 142 | 1. ((( | |
143 | [[XWiki SAS>>https://docs.google.com/forms/d/1J68cfuA2TuVKeuNh63P4LUzHVW_G-QTPT-Hqkdo_dzA/viewform?edit_requested=true#responses]] (19 votes) | ||
36.8 | 144 | P2: 15 votes (83.3%) | |
145 | P4: 3 votes (16.7%) | ||
36.7 | 146 | ))) | |
37.1 | 147 | 1. ((( | |
148 | Total (42 votes) | ||
36.12 | 149 | P2: 65% | |
150 | P4: 35% | ||
36.7 | 151 | ))) | |
36.10 | 152 | ))) | |
36.12 | 153 | ))) |