Last modified by Vincent Massol on 2024/02/26 17:54

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 )))

Get Connected