Wiki source code of Export Format Selection
Last modified by Vincent Massol on 2024/11/19 16:14
Show last authors
| author | version | line-number | content |
|---|---|---|---|
| 1 | {{toc/}} | ||
| 2 | |||
| 3 | = The Problem = | ||
| 4 | |||
| 5 | There are a few problems with the current [[Export Modal>>xwiki:Documentation.UserGuide.Features.Exports]] shown when you click on "More Actions > Export" menu: | ||
| 6 | |||
| 7 | * The export type is known only at the end, when the user clicks on the corresponding export button. This means we cannot customize the tree (document selection) based on the export type. For instance: | ||
| 8 | ** For some export types it's important to see hidden documents, while for others it's important to not see them | ||
| 9 | ** The document order is relevant for some export types while for others it doesn't matter | ||
| 10 | ** For some export types we wan to export only the current document by default, while for other export types we may want to include by default all child pages (and their descendants) | ||
| 11 | * There are two many export buttons (one for each export type). It doesn't scale if the number of export types is large (e.g. if we want to enable export for multiple office formats, all supported by the Office server) | ||
| 12 | ** The buttons don't have an icon which would help to quickly identity the export type (most common file types have a recognizable icon) | ||
| 13 | * The accordion we currently use promotes by default only export types that don't support multi-page export (the rest are hidden / collapsed) | ||
| 14 | |||
| 15 | = Requirements = | ||
| 16 | |||
| 17 | Whatever implementation we choose for selecting the export format, I think we need to cover the following requirements: | ||
| 18 | |||
| 19 | * The UI must scale when the number of available export formats is large. | ||
| 20 | * Select the export format before selecting the wiki pages to export. Otherwise put, allow each export type to have a custom UI for selecting the wiki pages and other export options. | ||
| 21 | * Be able to associate an icon, a label and a hint to each export format. | ||
| 22 | * Mobile friendly / responsive UI | ||
| 23 | |||
| 24 | = Solutions = | ||
| 25 | |||
| 26 | == Export Menu == | ||
| 27 | |||
| 28 | A possible solution is to choose the export format from the menu. There are multiple ways to do this but in general they share the following characteristics: | ||
| 29 | |||
| 30 | * (% class="label label-success" %)##**+**##(%%) access speed (i.e. reduced number of clicks and little mouse movement) | ||
| 31 | * (% class="label label-danger" %)##**-**##(%%) limited space (i.e. the hint will have to be displayed on hover) | ||
| 32 | |||
| 33 | === Collapsible Export Menu === | ||
| 34 | |||
| 35 | * (% class="label label-success" %)##**+**##(%%) only 2 clicks needed to trigger the export | ||
| 36 | * (% class="label label-success" %)##**+**##(%%) very little mouse movement needed | ||
| 37 | * (% class="label label-success" %)##**+**##(%%) mobile friendly | ||
| 38 | * (% class="label label-success" %)##**+**##(%%) only 1 click to get back (collapse) in case of mistake (unintentional click), and no mouse movement needed | ||
| 39 | * (% class="label label-warning" %)##**~~**##(%%) the More Actions menu becomes very large (up to 9 additional menu items if we connect the Office Server and install the LaTeX Exporter extension) | ||
| 40 | * (% class="label label-danger" %)##**-**##(%%) not suited for grouping export formats into categories (office/other formats) | ||
| 41 | * (% class="label label-warning" %)##**~~**##(%%) the submenu items have to be styled differently (border, indent, smaller font size, background color) | ||
| 42 | * (% class="label label-danger" %)##**-**##(%%) no space for additional information (only icon and label); we can use the hint on mouse hover, but not on mobile | ||
| 43 | |||
| 44 | |=Desktop|=Mobile | ||
| 45 | |((( | ||
| 46 | {{html5video attachment="export-collapsible-menu-desktop.webm" width="420" /}} | ||
| 47 | )))|((( | ||
| 48 | {{html5video attachment="export-collapsible-menu-mobile.webm" width="420" /}} | ||
| 49 | ))) | ||
| 50 | |||
| 51 | === Nested Export Menu === | ||
| 52 | |||
| 53 | * (% class="label label-success" %)##**+**##(%%) only 2 clicks needed to trigger the export (even 1 click if using mouse hover, but not on mobile) | ||
| 54 | * (% class="label label-success" %)##**+**##(%%) very little mouse movement needed | ||
| 55 | * (% class="label label-warning" %)##**~~**##(%%) on mobile we would have to display the nested Export menu on top of the More Actions menu due to lack of horizontal space | ||
| 56 | * (% class="label label-success" %)##**+**##(%%) only 1 click to get back in case of mistake (unintentional click), and no mouse movement needed | ||
| 57 | * (% class="label label-success" %)##**+**##(%%) enough space to list all export formats (up to 9 menu items) | ||
| 58 | * (% class="label label-success" %)##**+**##(%%) suited for grouping export formats into categories (office/other formats) | ||
| 59 | * (% class="label label-success" %)##**+**##(%%) use the same styles for the submenu items | ||
| 60 | * (% class="label label-warning" %)##**~~**##(%%) we could display additional hint below the menu item label, but it makes the menu too long | ||
| 61 | |||
| 62 | |=Desktop|=Mobile | ||
| 63 | |((( | ||
| 64 | {{html5video attachment="export-nested-menu-desktop.webm" width="420" /}} | ||
| 65 | )))|((( | ||
| 66 | {{html5video attachment="export-nested-menu-mobile.webm" width="420" /}} | ||
| 67 | ))) | ||
| 68 | |||
| 69 | === Sequential Export Menu === | ||
| 70 | |||
| 71 | * (% class="label label-success" %)##**+**##(%%) only 2 clicks needed to trigger the export | ||
| 72 | * (% class="label label-warning" %)##**~~**##(%%) requires significant mouse movement | ||
| 73 | * (% class="label label-success" %)##**+**##(%%) mobile friendly | ||
| 74 | * (% class="label label-warning" %)##**~~**##(%%) only 1 click to get back in case of mistake (unintentional click) BUT requires mouse movement | ||
| 75 | * (% class="label label-success" %)##**+**##(%%) enough space to list all export formats (e.g. up to 9 menu items) | ||
| 76 | * (% class="label label-danger" %)##**-**##(%%) not suited for grouping export formats into categories (office/other formats), because we need to reserve the menu header for "Export" | ||
| 77 | * (% class="label label-success" %)##**+**##(%%) use the same styles for the submenu items | ||
| 78 | * (% class="label label-warning" %)##**~~**##(%%) we could display additional hint below the menu item label, but it makes the menu too long | ||
| 79 | |||
| 80 | |=Desktop|=Mobile | ||
| 81 | |((( | ||
| 82 | {{html5video attachment="export-sequential-menu-desktop.webm" width="420" /}} | ||
| 83 | )))|((( | ||
| 84 | {{html5video attachment="export-sequential-menu-mobile.webm" width="420" /}} | ||
| 85 | ))) | ||
| 86 | |||
| 87 | == Export Modal == | ||
| 88 | |||
| 89 | Using a modal is another solution, and it can be described by: | ||
| 90 | |||
| 91 | * (% class="label label-warning" %)##**~~**##(%%) 2 clicks needed to trigger the export, if we consider that the format options listed on the Export modal trigger the export directly on click | ||
| 92 | * (% class="label label-danger" %)##**-**##(%%) a lot of mouse movement needed | ||
| 93 | * (% class="label label-success" %)##**+**##(%%) mobile friendly | ||
| 94 | * (% class="label label-danger" %)##**-**##(%%) 2 clicks to get back in case of mistake (unintentional click), and a lot of mouse movement needed | ||
| 95 | * (% class="label label-success" %)##**+**##(%%) enough space to list all export formats (up to 9 menu items) | ||
| 96 | * (% class="label label-success" %)##**+**##(%%) suited for grouping export formats into categories (office/other formats) | ||
| 97 | * (% class="label label-success" %)##**+**##(%%) reuse the XWiki Select widget styles to present the export formats, but we need to trigger the export directly on click | ||
| 98 | * (% class="label label-warning" %)##**~~**##(%%) enough space to display additional information (hint) but it makes it harder to visually scan the entire list of export formats (in some cases there could even be a vertical scroll) | ||
| 99 | |||
| 100 | |=Desktop|=Mobile | ||
| 101 | |((( | ||
| 102 | {{html5video attachment="export-modal-desktop.webm" width="420" /}} | ||
| 103 | )))|((( | ||
| 104 | {{html5video attachment="export-modal-mobile.webm" width="420" /}} | ||
| 105 | ))) | ||
| 106 | |||
| 107 | = Evaluation = | ||
| 108 | |||
| 109 | * if we want to favor fast action then I think we should choose between Collapsible menu and Nested menu | ||
| 110 | ** if we want to favor fast action and we think we need export format grouping then we should choose Nested menu | ||
| 111 | * for a compromise between access speed and available space we should choose Sequential menu | ||
| 112 | * if showing additional information (hints) and filtering is more important than access speed then we should choose the modal |
