Skip to Content
Last modified by Vincent Massol on 2024/11/19 16:14
Show last authors
1 {{toc start="2"/}}
2
3 == Requirements ==
4
5 {{usecase}}
6 Display the application type (blog, etc.)
7 {{/usecase}}
8
9 {{usecase}}
10 Display the event type (create, edit, delete, comment)
11 {{/usecase}}
12
13 {{usecase}}
14 Display individual and combined events. The grouping can be done by page, by user, by time, etc.
15 {{/usecase}}
16
17 {{usecase}}
18 Provide links to the event changes / details
19 {{/usecase}}
20
21 == User vs. Event Focused ==
22
23 * Grouping is per page / per event type
24
25 (% class="row" %)
26 (((
27 (% class="col-xs-6 col-md-2" %)
28 (((
29
30 )))
31
32 (% class="col-xs-6 col-md-4" %)
33 (((
34 === User Focused ===
35 )))
36
37 (% class="col-xs-6 col-md-4" %)
38 (((
39 === Event Focused ===
40 )))
41
42 (% class="col-xs-6 col-md-2" %)
43 (((
44
45 )))
46 )))
47
48 (% class="row" %)
49 (((
50 (% class="col-xs-6 col-md-2" %)
51 (((
52 * Users are highlighted
53 * Type Order
54 ** User avatar is primary
55 ** Event type is secondary
56 ** App type is tertiary
57
58 * Issue: participants avatars not displayed when grouped
59 )))
60
61 (% class="col-xs-6 col-md-4" %)
62 (((
63 [[[[image:userFocused.png||style="border:1px solid #E8E8E8" width="auto"]]>>attach:userFocused.png]]
64 )))
65
66 (% class="col-xs-6 col-md-4" %)
67 (((
68 [[[[image:eventFocused.png||style="border:1px solid #E8E8E8" width="auto"]]>>attach:eventFocused.png]]
69 )))
70
71 (% class="col-xs-6 col-md-2" %)
72 (((
73 * Events are highlighted
74 * Type Order
75 ** User avatar is missing
76 ** Event type is primary
77 ** App type is secondary
78
79 * Issue: no avatar is displayed, relying on reading the user names
80 )))
81 )))
82
83 (% class="row" %)
84 (((
85 (% class="col-xs-6 col-md-2" %)
86 (((
87 {{warning}}
88 [[Prototype UC>>https://jsfiddle.net/risherry/x7fq5m1c/embedded/#Result]]
89 {{/warning}}
90
91 * Issue with cropped user names
92 ** avatar helps with recognition
93 ** full user name in the event description
94 * Avatars aligned
95
96 * Participants avatars displayed on details expand
97 * Explicit event types
98 )))
99
100 (% class="col-xs-6 col-md-4" %)
101 (((
102 [[[[image:userFocusedDetails.png||style="border:1px solid #E8E8E8" width="auto"]]>>attach:userFocusedDetails.png]]
103 )))
104
105 (% class="col-xs-6 col-md-4" %)
106 (((
107 [[[[image:eventFocusedDetails.png||style="border:1px solid #E8E8E8" width="auto"]]>>attach:eventFocusedDetails.png]]
108 )))
109
110 (% class="col-xs-6 col-md-2" %)
111 (((
112 {{warning}}
113 [[Prototype EC>>https://jsfiddle.net/risherry/n7n7vrdf/embedded/#Result]]
114 {{/warning}}
115
116 * Issue with cropped event types
117 ** event icon helps with recognition
118 ** event description lists a single event type
119 * Event icons aligned
120
121 * Participants avatars displayed on details expand
122 * Short / more cryptic event types
123 )))
124 )))
125
126 (% class="row" %)
127 (((
128 (% class="col-xs-6 col-md-2" %)
129 (((
130 * Removing cropping make the missing elements more explicit, but breaks a bit the layout
131 )))
132
133 (% class="col-xs-6 col-md-4" %)
134 (((
135 [[[[image:userCentered_uncropped.png||style="border:1px solid #E8E8E8" width="auto"]]>>attach:userCentered_uncropped.png]]
136 )))
137
138 (% class="col-xs-6 col-md-4" %)
139 (((
140 [[[[image:eventCentered_uncropped.png||style="border:1px solid #E8E8E8" width="auto"]]>>attach:eventCentered_uncropped.png]]
141 )))
142
143 (% class="col-xs-6 col-md-2" %)
144 (((
145 * Removing cropping make the missing elements more explicit, but breaks a bit the layout
146 )))
147 )))
148
149 == Other Iterations ==
150
151 === Description with small avatars ===
152
153 (% class="row" %)
154 (((
155 (% class="col-xs-6 col-md-2" %)
156 (((
157 * {{warning}}[[Prototype>>https://jsfiddle.net/risherry/hkqp8er3/9/embedded/#Result]]{{/warning}}
158 * Added small avatars for participants so that it's not needed to expand
159 * The issue is that the UI gets crowded with lots of small visual attention grabbers
160 )))
161
162 (% class="col-xs-6 col-md-4" %)
163 (((
164 [[[[image:userCentered_smallAvatars.png||style="border:1px solid #E8E8E8" width="auto"]]>>attach:userCentered_smallAvatars.png]]
165 )))
166
167 (% class="col-xs-6 col-md-4" %)
168 (((
169 [[[[image:eventCentered_smallAvatars.png||style="border:1px solid #E8E8E8" width="auto"]]>>attach:eventCentered_smallAvatars.png]]
170 )))
171
172 (% class="col-xs-6 col-md-2" %)
173 (((
174 * {{warning}}[[Prototype>>https://jsfiddle.net/risherry/ybw6z1ps/embedded/result/#Result]]{{/warning}}
175 * Also used grouping messages + displayed only avatars without the user name in order to try to simply the UI
176 )))
177 )))
178
179 (% class="row" %)
180 (((
181 (% class="col-xs-6 col-md-2" %)
182 (((
183 * This variant showcases small avatars in description and also uses the event focused description layout
184 )))
185
186 (% class="col-xs-6 col-md-4" %)
187 (((
188 [[[[image:userCentered_smallAvatars_reverse.png||style="border:1px solid #E8E8E8" width="auto"]]>>attach:userCentered_smallAvatars_reverse.png]]
189 )))
190
191 (% class="col-xs-6 col-md-4" %)
192 (((
193 [[[[image:eventCentered_smallAvatars_details.png||style="border:1px solid #E8E8E8" width="auto"]]>>attach:eventCentered_smallAvatars_details.png]]
194 )))
195
196 (% class="col-xs-6 col-md-2" %)
197 (((
198
199 )))
200 )))
201
202 === Description with avatars on left ===
203
204 (% class="row" %)
205 (((
206 (% class="col-xs-6 col-md-2" %)
207 (((
208
209 )))
210
211 (% class="col-xs-6 col-md-4" %)
212 (((
213 [[[[image:userCentered_description_avatarsleft.png||style="border:1px solid #E8E8E8" width="auto"]]>>attach:userCentered_description_avatarsleft.png]]
214 )))
215
216 (% class="col-xs-6 col-md-4" %)
217 (((
218 [[[[image:eventCentered_description_avatarsleft.png||style="border:1px solid #E8E8E8" width="auto"]]>>attach:eventCentered_description_avatarsleft.png]]
219 )))
220
221 (% class="col-xs-6 col-md-2" %)
222 (((
223
224 )))
225 )))
226
227 === Type icon with small avatars ===
228
229 (% class="row" %)
230 (((
231 (% class="col-xs-6 col-md-2" %)
232 (((
233
234 )))
235
236 (% class="col-xs-6 col-md-4" %)
237 (((
238
239 )))
240
241 (% class="col-xs-6 col-md-4" %)
242 (((
243 [[[[image:typeIcons_avatars.png||style="border:1px solid #E8E8E8" width="auto"]]>>attach:typeIcons_avatars.png]]
244 )))
245
246 (% class="col-xs-6 col-md-2" %)
247 (((
248 * {{warning}}[[Prototype>>https://jsfiddle.net/risherry/rj9daxeu/embedded/result/#Result]]{{/warning}}
249 * Type Order
250 ** User avatar is secondary
251 ** Event type is primary
252 ** App type is tertiary
253 )))
254 )))
255
256 (% class="row" %)
257 (((
258 (% class="col-xs-6 col-md-2" %)
259 (((
260
261 )))
262
263 (% class="col-xs-6 col-md-4" %)
264 (((
265
266 )))
267
268 (% class="col-xs-6 col-md-4" %)
269 (((
270 [[[[image:typeIcons_avatars_details.png||style="border:1px solid #E8E8E8" width="auto"]]>>attach:typeIcons_avatars_details.png]]
271 )))
272
273 (% class="col-xs-6 col-md-2" %)
274 (((
275
276 )))
277 )))
278
279 === Applications events ===
280
281 (% class="row" %)
282 (((
283 (% class="col-xs-6 col-md-2" %)
284 (((
285 * Type Order
286 ** User avatar is primary
287 ** Event type is secondary
288 ** App type is tertiary
289
290 * The app type is very small and almost unreadable
291 )))
292
293 (% class="col-xs-6 col-md-4" %)
294 (((
295 [[[[image:user_app.png||style="border:1px solid #E8E8E8" width="auto"]]>>attach:user_app.png]]
296 )))
297
298 (% class="col-xs-6 col-md-4" %)
299 (((
300 [[[[image:event_app.png||style="border:1px solid #E8E8E8" width="auto"]]>>attach:event_app.png]]
301 )))
302
303 (% class="col-xs-6 col-md-2" %)
304 (((
305 * Type Order
306 ** User avatar is missing
307 ** Event type is primary
308 ** App type is secondary
309 )))
310 )))
311
312 (% class="row" %)
313 (((
314 (% class="col-xs-6 col-md-2" %)
315 (((
316
317 )))
318
319 (% class="col-xs-6 col-md-4" %)
320 (((
321
322 )))
323
324 (% class="col-xs-6 col-md-4" %)
325 (((
326 [[[[image:event_app_primary.png||style="border:1px solid #E8E8E8" width="auto"]]>>attach:event_app_primary.png]]
327 )))
328
329 (% class="col-xs-6 col-md-2" %)
330 (((
331 * For applications we could change the type priority order and showcase the app icon as primary
332 )))
333 )))
334
335 (% class="row" %)
336 (((
337 (% class="col-xs-6 col-md-2" %)
338 (((
339
340 )))
341
342 (% class="col-xs-6 col-md-4" %)
343 (((
344
345 )))
346
347 (% class="col-xs-6 col-md-4" %)
348 (((
349 [[[[image:event_app_primary_extension.png||style="border:1px solid #E8E8E8" width="auto"]]>>attach:event_app_primary_extension.png]]
350 )))
351
352 (% class="col-xs-6 col-md-2" %)
353 (((
354 * Who is the event sender? The Blog App or the Extension Manager?
355
356 * The Blog app is not mentioned in the icons, just in the event description. The layout will be generic for all the upgradable applications.
357 )))
358 )))
359
360 (% class="row hidden" %)
361 (((
362 (% class="col-xs-6 col-md-2" %)
363 (((
364
365 )))
366
367 (% class="col-xs-6 col-md-4" %)
368 (((
369 [[[[image:.png||style="border:1px solid #E8E8E8" width="auto"]]>>attach:.png]]
370 )))
371
372 (% class="col-xs-6 col-md-4" %)
373 (((
374 [[[[image:.png||style="border:1px solid #E8E8E8" width="auto"]]>>attach:.png]]
375 )))
376
377 (% class="col-xs-6 col-md-2" %)
378 (((
379
380 )))
381 )))

About

About

Support

Platform

User Guide

Admin Guide

Developer Guide

Projects

XWiki

Extensions

Other

Contribute

Status

Practices

Under the Hood

Get Involved

Get Connected