Wiki source code of Multi Page Tours
Last modified by Vincent Massol on 2024/11/19 16:14
Show last authors
| author | version | line-number | content |
|---|---|---|---|
| 1 | Create multipage tours that direct the user to perform common tasks. | ||
| 2 | |||
| 3 | {{toc start="2"/}} | ||
| 4 | |||
| 5 | = Proposal = | ||
| 6 | |||
| 7 | == Help Improvements == | ||
| 8 | |||
| 9 | === Entry Point === | ||
| 10 | |||
| 11 | (% class="row" %) | ||
| 12 | ((( | ||
| 13 | (% class="col-xs-12 col-md-4" %) | ||
| 14 | ((( | ||
| 15 | * Initially, the new users are welcomed by the "Basic Interface Overview" tour, which currently is called "Homepage Tour" | ||
| 16 | * At the last step of the tour, users are encouraged to visit the "Documentation" link, which targets the [[Features>>xwiki:Documentation.UserGuide.Features]] page | ||
| 17 | * One change would be that, after the users finish the first tour, if they need more guidance they could head off to more tours | ||
| 18 | ))) | ||
| 19 | |||
| 20 | (% class="col-xs-12 col-md-4" %) | ||
| 21 | ((( | ||
| 22 | Before | ||
| 23 | [[{{image reference="entryBefore.png"/}}>>attach:entryBefore.png]] | ||
| 24 | ))) | ||
| 25 | |||
| 26 | (% class="col-xs-12 col-md-4" %) | ||
| 27 | ((( | ||
| 28 | After | ||
| 29 | [[{{image reference="entryAfter.png"/}}>>attach:entryAfter.png]] | ||
| 30 | ))) | ||
| 31 | ))) | ||
| 32 | |||
| 33 | === Help Homepage === | ||
| 34 | |||
| 35 | (% class="row" %) | ||
| 36 | ((( | ||
| 37 | (% class="col-xs-12 col-md-4" %) | ||
| 38 | ((( | ||
| 39 | * Help app will provide a dedicated section to Tours | ||
| 40 | * In order to limit the number of options we present and don't overwhelm the user, we compacted the "Features" entry to only 4 items | ||
| 41 | ** The "Page Editing" example link will be included as part of a tour | ||
| 42 | ** Merged the "Version Control" into the first section | ||
| 43 | ** Added a link that will showcase all the "Features" | ||
| 44 | ** Removed the "Import/Export" and "Content Organization" and rely on "more" | ||
| 45 | ))) | ||
| 46 | |||
| 47 | (% class="col-xs-12 col-md-4" %) | ||
| 48 | ((( | ||
| 49 | Before | ||
| 50 | [[{{image reference="helpHomeBefore.png"/}}>>attach:helpHomeBefore.png]] | ||
| 51 | ))) | ||
| 52 | |||
| 53 | (% class="col-xs-12 col-md-4" %) | ||
| 54 | ((( | ||
| 55 | After | ||
| 56 | [[{{image reference="helpHomeAfter.png"/}}>>attach:helpHomeAfter.png]] | ||
| 57 | ))) | ||
| 58 | ))) | ||
| 59 | |||
| 60 | === Tour Homepage === | ||
| 61 | |||
| 62 | (% class="row" %) | ||
| 63 | ((( | ||
| 64 | (% class="col-xs-12 col-md-4" %) | ||
| 65 | ((( | ||
| 66 | * Tour.WebHome is the homepage for the Tour app and is hidden by default since it's considered a technical application | ||
| 67 | * We don't plan to reuse the Tour.WebHome, but to create a dedicated entry in the Help space for Tours | ||
| 68 | * Tour Application will be independent of Help, so people could remove the Help content, but still be able to create their own tours | ||
| 69 | ))) | ||
| 70 | |||
| 71 | (% class="col-xs-12 col-md-4" %) | ||
| 72 | ((( | ||
| 73 | Before | ||
| 74 | [[{{image reference="toursHomeBefore.png"/}}>>attach:toursHomeBefore.png]] | ||
| 75 | ))) | ||
| 76 | |||
| 77 | (% class="col-xs-12 col-md-4" %) | ||
| 78 | ((( | ||
| 79 | After | ||
| 80 | [[{{image reference="toursHomeAfter.png"/}}>>attach:toursHomeAfter.png]] | ||
| 81 | ))) | ||
| 82 | ))) | ||
| 83 | |||
| 84 | === Help Tours === | ||
| 85 | |||
| 86 | (% class="row" %) | ||
| 87 | ((( | ||
| 88 | (% class="col-xs-12 col-md-4" %) | ||
| 89 | ((( | ||
| 90 | * A list with all the Tours will be available, but without the technical columns | ||
| 91 | * We also promote the suggested tours for beginners | ||
| 92 | * Help Application will have a dependency to the Tour Application | ||
| 93 | * Click on a tour name will automatically launch the tour | ||
| 94 | ))) | ||
| 95 | |||
| 96 | (% class="col-xs-12 col-md-4" %) | ||
| 97 | ((( | ||
| 98 | Before | ||
| 99 | |||
| 100 | - | ||
| 101 | ))) | ||
| 102 | |||
| 103 | (% class="col-xs-12 col-md-4" %) | ||
| 104 | ((( | ||
| 105 | After | ||
| 106 | [[{{image reference="toursHelpAfter.png"/}}>>attach:toursHelpAfter.png]] | ||
| 107 | ))) | ||
| 108 | ))) | ||
| 109 | |||
| 110 | == MultiPage Tours == | ||
| 111 | |||
| 112 | === Tour: Creating a page === | ||
| 113 | |||
| 114 | (% class="row" %) | ||
| 115 | ((( | ||
| 116 | (% class="col-xs-12 col-md-6" %) | ||
| 117 | ((( | ||
| 118 | |||
| 119 | ))) | ||
| 120 | |||
| 121 | (% class="col-xs-12 col-md-6" %) | ||
| 122 | ((( | ||
| 123 | {{gallery}} | ||
| 124 | image:T1_S1.png | ||
| 125 | image:T1_S2.png | ||
| 126 | image:T1_S3.png | ||
| 127 | image:T1_S4.png | ||
| 128 | image:T1_S5.png | ||
| 129 | image:T1_S6.png | ||
| 130 | image:T1_summary.png | ||
| 131 | {{/gallery}} | ||
| 132 | ))) | ||
| 133 | ))) | ||
| 134 | |||
| 135 | === Tour: Editing a page === | ||
| 136 | |||
| 137 | (% class="row" %) | ||
| 138 | ((( | ||
| 139 | (% class="col-xs-12 col-md-6" %) | ||
| 140 | ((( | ||
| 141 | * "Edit a page" could be listed as a separate tour or integrated with "Create a page" tour | ||
| 142 | ))) | ||
| 143 | |||
| 144 | (% class="col-xs-12 col-md-6" %) | ||
| 145 | ((( | ||
| 146 | {{gallery}} | ||
| 147 | image:T2_S1.png | ||
| 148 | image:T2_S2.png | ||
| 149 | image:T2_S3.png | ||
| 150 | image:T2_S4.png | ||
| 151 | image:T2_S5.png | ||
| 152 | image:T2_S6.png | ||
| 153 | image:T2_summary.png | ||
| 154 | {{/gallery}} | ||
| 155 | ))) | ||
| 156 | ))) | ||
| 157 | |||
| 158 | === Tour: Customise the look & feel === | ||
| 159 | |||
| 160 | (% class="row" %) | ||
| 161 | ((( | ||
| 162 | (% class="col-xs-12 col-md-6" %) | ||
| 163 | ((( | ||
| 164 | |||
| 165 | ))) | ||
| 166 | |||
| 167 | (% class="col-xs-12 col-md-6" %) | ||
| 168 | ((( | ||
| 169 | {{gallery}} | ||
| 170 | image:T3_S1.png | ||
| 171 | image:T3_S2.png | ||
| 172 | image:T3_S3.png | ||
| 173 | image:T3_S4.png | ||
| 174 | image:T3_S5.png | ||
| 175 | image:T3_S6.png | ||
| 176 | image:T3_S7.png | ||
| 177 | image:T3_S8.png | ||
| 178 | image:T3_S9.png | ||
| 179 | image:T3_S10.png | ||
| 180 | image:T3_summary.png | ||
| 181 | {{/gallery}} | ||
| 182 | ))) | ||
| 183 | ))) | ||
| 184 | |||
| 185 | === Conclusions === | ||
| 186 | |||
| 187 | (% class="row" %) | ||
| 188 | ((( | ||
| 189 | (% class="col-xs-12 col-md-12" %) | ||
| 190 | ((( | ||
| 191 | Problems encountered so far: | ||
| 192 | |||
| 193 | * [[TOUR-59>>https://jira.xwiki.org/browse/TOUR-59]]: currently we can have only 1 tour per page. Ideally most of the tours should start on the Main.WebHome, since that's the wiki's Home. The current limitation ask that each tour has it's own starting page. That's why the tours are created on various pages on Sandbox; | ||
| 194 | * [[TOUR-57>>https://jira.xwiki.org/browse/TOUR-57]]: we would need this Bootstrap Tour parameter in order to let the user click on the content menu "Create" button and continue the tour in the new location. Currently if he clicks on "Create" the tour ends, because the tour is not registered to the page. Another example: on the same page, in order to press on the "Drawer" and to highlight the "Administration" link; | ||
| 195 | * [[TOUR-62>>https://jira.xwiki.org/browse/TOUR-62]]: on the Create step we would need to validate that the user entered a page title; | ||
| 196 | * [[TOUR-61>>https://jira.xwiki.org/browse/TOUR-61]]: since the user entered a personalised page title we need to know what that it is in order to continue the tour at that location; | ||
| 197 | * Tours content can be improved, I mostly focused on what we can do technically; | ||
| 198 | ))) | ||
| 199 | ))) |
