Wiki source code of Notifications Improvements 9.x - Types
Last modified by Vincent Massol on 2024/02/26 17:54
Show last authors
author | version | line-number | content |
---|---|---|---|
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 | ))) |