Show last authors
1 {{toc start="2"/}}
2
3 (% class="row" %)
4 (((
5 (% class="col-xs-12 col-sm-6" %)
6 (((
7 == Requirement ==
8
9 > Implement an option to display action name under icons
10
11 > Make wheel and 3dots menu more coherent
12
13 == Need ==
14
15 * O: Icons are floating in the air, not explicit for newbies that don't understand where to click.
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.
17 * O: [[Proposal>>http://d.pr/i/vFDq]]
18 * O: Fine on the Search and top navbar icons. Needed adjustment only on content menu
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
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
26 * O: Search could be expanded. Survey beginner and advanced users about this
27
28 == Notes ==
29
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.
31 * Investigate what are the usability reasons to delay tooltips
32
33 == Improvements ==
34
35 * Improve the labels for "Actions" to "Page Actions"
36
37 == Solutions ==
38
39 === Solution 1 ===
40
41 * Revert the icon-buttons and use labels. Rollback [[XWIKI-12189>>https://jira.xwiki.org/browse/XWIKI-12189]]
42 ** {{error}}##-{{/error}} Inconsistencies with the navbar icons (except if we plan to revert those too)
43 ** {{error}}##-{{/error}} Loses the skin modern styling
44
45 === Solution 2 ===
46
47 * Make configurable the display of buttons
48 ** {{error}}##-{{/error}} Harder to test
49
50 === Solution 3 ===
51
52 * Replace the HTML hints done with the "title" attribute with BS JS [[tooltips>>http://getbootstrap.com/javascript/#tooltips]] (example Watchlist)
53 ** {{error}}##-{{/error}} Increase loading times for the JS
54 ** {{success}}##+{{/success}} Faster response time to display hints
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)
59 )))
60
61 (% class="col-xs-12 col-sm-6" %)
62 (((
63 == Proposals ==
64
65 === Current ===
66
67 [[[[image:before.png||style="border:1px solid #E8E8E8" width="100%"]]>>attach:before.png]]
68
69 === Proposal 1: JS Tooltips ===
70
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
74 {{gallery}}
75 image:tooltips1.png
76 image:tooltips2.png
77 image:tooltips3.png
78 image:tooltips4.png
79 {{/gallery}}
80
81 === Proposal 2: Labeled actions ===
82
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}}
87 image:simpleUser.png
88 image:advancedUser.png
89 image:advancedExpanded.png
90 image:moreActions.png
91 image:moreActionsSelective.png
92 image:gradient.png
93 image:editMode.png
94 image:P2_noRightPanels.png
95 {{/gallery}}
96
97 === Proposal 3: Use Labels instead of Icons ===
98
99 {{gallery}}
100 image:P3_0_4.png
101 image:P3_0.png
102 image:P3_0_1.png
103 image:P3_1.png
104 image:P3_2.png
105 image:P3_noRightPanels.png
106 {{/gallery}}
107
108 === Proposal 4: Icons with background ===
109
110 {{gallery}}
111 image:P4_1_bigger.png
112 image:P4_noRightPanels.png
113 image:P4_noRightPanels_more.png
114 image:P4_noRightPanels_manage.png
115 {{/gallery}}
116 )))
117 )))
118
119 (% class="row" %)
120 (((
121 (% class="col-xs-12 col-sm-6" %)
122 (((
123 == Voting ==
124
125 We held a multiple channels voting for this issue:
126
127 1. (((
128 [[Devs Mailinglist>>http://markmail.org/message/64ruwrwxecd75br5]] (6 votes)
129 P2: 3 votes (50%)
130 P4: 3 votes (50%)
131 )))
132 1. (((
133 [[Users Mailinglist>>http://markmail.org/message/ubjebsao5vtewfkp]] (8 votes)
134 P2: 3 votes (37.5%)
135 P4: 5 votes (62.5%)
136 )))
137 1. (((
138 [[Open Source Designers>>https://discourse.opensourcedesign.net/t/explicit-actions/115]] (9 votes)
139 P2: 8 votes (88.9%)
140 P4: 1 vote (11.1%)
141 )))
142 1. (((
143 [[XWiki SAS>>https://docs.google.com/forms/d/1J68cfuA2TuVKeuNh63P4LUzHVW_G-QTPT-Hqkdo_dzA/viewform?edit_requested=true#responses]] (19 votes)
144 P2: 15 votes (83.3%)
145 P4: 3 votes (16.7%)
146 )))
147 1. (((
148 Total (42 votes)
149 P2: 65%
150 P4: 35%
151 )))
152 )))
153 )))

Get Connected