Wiki source code of Search Interface
Last modified by Vincent Massol on 2024/11/19 16:13
Show last authors
| author | version | line-number | content |
|---|---|---|---|
| 1 | = Search Interface Improvements = | ||
| 2 | |||
| 3 | Jira: http://jira.xwiki.org/jira/browse/XE-395 | ||
| 4 | Requirements: [[http:~/~/incubator.myxwiki.org/xwiki/bin/view/Mockups/Search+Interface#requirements>>http://incubator.myxwiki.org/xwiki/bin/view/Mockups/Search+Interface#requirements]] | ||
| 5 | Analysis: [[http:~/~/incubator.myxwiki.org/xwiki/bin/view/Mockups/Search+Interface#analysis>>http://incubator.myxwiki.org/xwiki/bin/view/Mockups/Search+Interface#analysis]] | ||
| 6 | Mockups:[[http:~/~/incubator.myxwiki.org/xwiki/bin/view/Mockups/Search+Interface#mockups>>http://incubator.myxwiki.org/xwiki/bin/view/Mockups/Search+Interface#mockups]] | ||
| 7 | Proposal: [[http:~/~/dev.xwiki.org/xwiki/bin/view/Design/NewSearchInterface>>http://dev.xwiki.org/xwiki/bin/view/Design/NewSearchInterface]] | ||
| 8 | |||
| 9 | == (% id="requirements" %)0. Requirements (%%) == | ||
| 10 | |||
| 11 | The aim of this proposal is to suggest and implement an overhaul to the current XWiki search interface. | ||
| 12 | |||
| 13 | Search in XWiki has the following components: | ||
| 14 | |||
| 15 | * Search panel | ||
| 16 | * Search page (query field only) | ||
| 17 | * Search page (with results displayed) | ||
| 18 | |||
| 19 | Search results currently use the default XWiki.Results template. This template uses a table to display results. It's not very user friendly. It has gained negative feedback from some of our customers (Aelia) that do not deem it user friendly enough. Users from the company were expecting results to be be more google-like (unsurprisingly). | ||
| 20 | |||
| 21 | ===== 1.Aims ===== | ||
| 22 | |||
| 23 | This project will be considered a success if the 3 following criteria are met: | ||
| 24 | |||
| 25 | * Cati starts feeling comfortable about XWiki development at the end of the project | ||
| 26 | * The project is completed in a relatively short timeframe (4 to 6 weeks) | ||
| 27 | * Users can find relevant results faster than with the current interface | ||
| 28 | |||
| 29 | ===== 2.Users ===== | ||
| 30 | |||
| 31 | Users have 3 main ways to end up on any given wiki page: | ||
| 32 | |||
| 33 | * Browsing (through the index or one of the menus) | ||
| 34 | * Referral (from another website or a wiki page) | ||
| 35 | * Search | ||
| 36 | |||
| 37 | Users resort to search when: | ||
| 38 | |||
| 39 | * They're not quite sure what they're looking for | ||
| 40 | * They know what they're looking for but cannot access it through navigation (ex: no menu pointing to the page) | ||
| 41 | |||
| 42 | The aim of the search experience is to let users access the content they're looking for as fast as possible. Overall speed is the leading criteria (from the moment the user starts looking for the search box to the moment he can read the content he was looking for). | ||
| 43 | |||
| 44 | We're targetting users that have a working knowledge of the internet (used to browse google, news site, online shops) but do not have a technical background (people from marketing, sales, HR, accounting...). | ||
| 45 | |||
| 46 | ===== 3. Food for thought ===== | ||
| 47 | |||
| 48 | **~1. Options** | ||
| 49 | |||
| 50 | * Quick Search (Look at the "Quick Find" panel at the top left on the intranet for an example) | ||
| 51 | * Google-like search results | ||
| 52 | * Table search results | ||
| 53 | * Simple + Advanced search ? | ||
| 54 | * Filters | ||
| 55 | * We'll probably try to integrate [http://www.compass-project.org/>http://www.compass-project.org/] underneath to generate better Lucene search results | ||
| 56 | ** "Compass simplifies common usage patterns of Lucene such as google-style search" | ||
| 57 | ** We might be able to get results in context (search term highlighted + surrounding content) using Compass -> keep it in mind in the proposal | ||
| 58 | * Other | ||
| 59 | |||
| 60 | **2.Stuff to keep in mind** | ||
| 61 | |||
| 62 | Here's a list of XWiki-specific items that may need to be taken into account while rebuilding the search: | ||
| 63 | |||
| 64 | * Spaces / Wikis | ||
| 65 | * Attachments | ||
| 66 | * Access rights => some users may not be allowed to see some documents | ||
| 67 | * Page names vs page titles | ||
| 68 | * Page versioning | ||
| 69 | * Applications (XObjects) | ||
| 70 | * Lucene scoring | ||
| 71 | * Ratings | ||
| 72 | * Comments | ||
| 73 | |||
| 74 | ===== 4. Process ===== | ||
| 75 | |||
| 76 | * Create a JIRA issue describing the task in the relevant JIRA project | ||
| 77 | * Assess XWiki Enterprise's current search implementation | ||
| 78 | * Understand its shortcomings compared with user expectations | ||
| 79 | ** Check with Guillaume is not enough information about user expectations has been provided | ||
| 80 | ** You can draw inspiration about the expected user from [this page>http://intranet.xpertnet.biz/xwiki/bin/view/Products/Users_Reader] (I know it's not a public document) | ||
| 81 | * Suggest one or more potential interface designs to improve it | ||
| 82 | * Propose and discuss this interface on the [email protected] list to get feedback | ||
| 83 | * Update the proposal with feedback from the list | ||
| 84 | * Once the debate seems to be coming to an end, send a \[Vote\] email | ||
| 85 | * Implement the selected search interface | ||
| 86 | ** Clean the velocity code | ||
| 87 | ** Clean the HTML code | ||
| 88 | ** Write cross-browser CSS (make sure it works in IE6) | ||
| 89 | *** Keep in mind that this CSS needs to be easy to modify for cutomer projects | ||
| 90 | *** If possible, use a skin extension to store the CSS code | ||
| 91 | ** If javascript is needed, make it cross-browser and store its code in a JS Extenstion | ||
| 92 | * Get the code reviewed by a XWiki developer (JV, Anca, Raluca, Oana, Jérôme or Sergiu) | ||
| 93 | * Integrate their feedback and make sure to follow XWiki Applications development best practices | ||
| 94 | * Export the XWiki document as an XML file. Clean it (author, version) | ||
| 95 | * Provide the resulting file as a patch attached to the JIRA issue | ||
| 96 | * Beg for a developer to apply it | ||
| 97 | * Go out and party ;-) | ||
| 98 | |||
| 99 | == (% id="analysis" %)1. Analysis: Look of the current implementation (%%) == | ||
| 100 | |||
| 101 | image:XWiki-Main-LuceneSearch1235994036615.png | ||
| 102 | |||
| 103 | === Aims === | ||
| 104 | |||
| 105 | The aim of the new design is to provide a more **fast **way for the user to find the page he is looking for. This can be done if the scanning through context is done as fast as possible. | ||
| 106 | The search page is for every user (starting with readers through admins), so the page should not be perceived different than a standard website (the concept of space and wiki should be transparent).\\ | ||
| 107 | |||
| 108 | === Standardization === | ||
| 109 | |||
| 110 | - Search Results: I need to know how many types of Search XWiki has in their product (XWatch has a different type of search because there are feed entries) so the searches can have a common UI (same ). | ||
| 111 | - Pagination (up and down): for all the places pagination appears, we can use the same format. [[Examples>>http://ui-patterns.com/collection/pagination]] of pagination. [[More>>http://students.info.uaic.ro/~evalica/patterns/]] patterns. | ||
| 112 | See also: | ||
| 113 | - http://code.xwiki.org/xwiki/bin/view/Macros/PagedViewLinksMacro | ||
| 114 | - http://code.xwiki.org/xwiki/bin/view/Snippets/PaginateSearchSnippet\\ | ||
| 115 | |||
| 116 | === Types of results === | ||
| 117 | |||
| 118 | "Quick Search" should be integrated as a prestep operation. \\ | ||
| 119 | |||
| 120 | 1. Table search results (the current version - with filters and column scanning - good for sorting if I can't find the page in one go (require 2 steps - refining) ) | ||
| 121 | 1. "Google-like search results" => Instead of tables show the results as a list of items (that have characteristics like Title, Author, Date, Description (for the "surrounding content") ) See** I Solution** | ||
| 122 | 1. Extended "Tree" view - per groups See **II Solution** | ||
| 123 | 1. | ||
| 124 | |||
| 125 | === Problems === | ||
| 126 | |||
| 127 | In the current version of the interface we have the following: | ||
| 128 | |||
| 129 | - we don't have the word we are looking __highlighted __(in bold for example) so that the user can faster visually scan; | ||
| 130 | - the Filter function is in __gray__ - looking liked a disabled feature; | ||
| 131 | **+** it's a bit too cluttered. I have to many information showed and I don't know where to look first, there is no part highlighted (all elements have the same importance - look the same) | ||
| 132 | - the most relevant piece of information is where? the title? why it exist pages that don't have a page title? | ||
| 133 | - the searching is done within what? (page titles, content, tags, authors, etc) | ||
| 134 | - why the page title is "Lucene Search" - who is Lucene? Why do I care as a user? | ||
| 135 | - is there the possibility to have 100% Lucene score? | ||
| 136 | - align "query" input in left side - for better readability (momentarily is in the center) | ||
| 137 | - do we need to keep the word searched in the "Search Panel"? | ||
| 138 | - do we need to know how many versions the page has? | ||
| 139 | - do we need to know how many translations the page has? | ||
| 140 | - keep in mind if you want to integrate user rating for the page. | ||
| 141 | - the filter within a pagination filters only the displayed results, not all the results. If I want to see all pages modified by me I have to go on all pagination pages and apply the author filter; | ||
| 142 | - to take in consideration differences between instances that have multiple wikis; | ||
| 143 | - remove for the Search page the "Attachments" and "Comment" part + "Last Modified by" - it is not necessary for a search page (removing clutter); | ||
| 144 | - integrate Silk icons, if needed, in search results \\ | ||
| 145 | |||
| 146 | === I Solution === | ||
| 147 | |||
| 148 | ==== 1. Options for search (also advanced search) ==== | ||
| 149 | |||
| 150 | Lucene has a very nice set of operators that can be used in advanced search to instruct user about search capabilities http://code.xwiki.org/xwiki/bin/view/Applications/SearchApplicationLuceneSearchQueryHelp | ||
| 151 | |||
| 152 | ==== 2. Results list ==== | ||
| 153 | |||
| 154 | 2.1 What is the relevance of displaying the "Page Name" and "Page Title"? | ||
| 155 | |||
| 156 | - page name is used internally for xwiki to name pages, do I need to know the "Page Name"? | ||
| 157 | - wiki and space are used for organizational purpose, this might be helpful. | ||
| 158 | |||
| 159 | Example | ||
| 160 | |||
| 161 | ---- | ||
| 162 | |||
| 163 | A) So, for the query: | ||
| 164 | [[image:incubator:Mockups.Search [email protected]]] | ||
| 165 | |||
| 166 | B) I want the result: | ||
| 167 | |||
| 168 | [[image:incubator:Mockups.Search [email protected]]] | ||
| 169 | |||
| 170 | |||
| 171 | C) The URL for my page is: **http:~/~/watch.xwiki.org/xwiki/bin/view/Design/NewUIProposal** | ||
| 172 | \\D) The desired page has a breadcrumb like this: | ||
| 173 | [[image:incubator:Mockups.Search [email protected]]] | ||
| 174 | |||
| 175 | E) so the correct full breadcrumb for my desired page is: **Watch > Design > XWatch User Interface Proposal** for **http:~/~/watch.xwiki.org/xwiki/bin/view/Design/NewUIProposal** | ||
| 176 | |||
| 177 | ---- | ||
| 178 | |||
| 179 | So we should display primary the "__Page Title__" and "Page Name" should be only in the URL. | ||
| 180 | We can have __breadcrumbs__ for the wiki and the space. | ||
| 181 | |||
| 182 | Because of the way URL is constructed the wiki should be first in the query and then the space (you could put this also as pre options for the search). | ||
| 183 | |||
| 184 | I would like to have **results** in this way (list style): | ||
| 185 | - relevance (score) - invisible - is the order the items appear in the list; | ||
| 186 | - Page Title [link] (most important) (replace "Page Title" with "Page Name" if "Page Title" doesn't exist) | ||
| 187 | - Location: Wiki [link] > Space [link] (> Page Name [link] [? - necessary?]) | ||
| 188 | - Author: Author [link] - Date | ||
| 189 | |||
| 190 | If we gonna follow this pattern (of breadcrumbs) - then the tale order and query field must be Wiki - Space, not Space - Wiki. | ||
| 191 | |||
| 192 | Questions about list view: | ||
| 193 | |||
| 194 | * do I need the date to be in the format "2008 Aug 26 at 15:55"? Year is the least changing element and it is in the first place. Do I need to know the time? (I'm doing a search) - Eliminate the clutter ad let only "26 Aug 2008"; | ||
| 195 | * it is mentioned that the user name signifies the "Last Author". What "Date" signifies? "Creation Date"? "Last Modified Date"? | ||
| 196 | * the date is the only field not clickable; | ||
| 197 | * would it be usefull for me to know if the page I'm looking for has comments? or attachments? I need to know only the existence of them or also how many of them are? | ||
| 198 | * i could display also what types of attachments the page has: images, pdf, doc | ||
| 199 | * attachments and comments could be options from the search options | ||
| 200 | * do I need to know if I have access rights for the pages I'm looking for? | ||
| 201 | * Last Author - display username or full name? | ||
| 202 | |||
| 203 | 2.2 Author and date are used for a more advanced search - when you know more details about the page you're looking for. | ||
| 204 | |||
| 205 | === II Solution === | ||
| 206 | |||
| 207 | Display result pages in Groups that represent the Space (Wiki) of origin. | ||
| 208 | You can make a group that contain only "My Pages" and you serve this group in front line for the user. But these can be replaced with an option "Search only my pages" and also you can put the view with "My pages"on the user profile | ||
| 209 | |||
| 210 | ==== 1. Results list ==== | ||
| 211 | |||
| 212 | Type: {Wiki [Space (article, article, article) , Space (article)] , Wiki [Space (article) ]} - like a SiteMap type of result list. | ||
| 213 | |||
| 214 | ---- | ||
| 215 | |||
| 216 | Results: | ||
| 217 | Wiki | ||
| 218 | Space | ||
| 219 | article 1 ... | ||
| 220 | article 2 ... | ||
| 221 | article 3 ... | ||
| 222 | |||
| 223 | Space | ||
| 224 | article 4 ... | ||
| 225 | |||
| 226 | Wiki | ||
| 227 | Space | ||
| 228 | article 5 ... | ||
| 229 | |||
| 230 | ---- | ||
| 231 | |||
| 232 | Based on the idea that Lucene Score can predict what a user is looking for and within what Wiki, Space the more pages have a higher score - show that pages. | ||
| 233 | |||
| 234 | Serving results organized in groups gives a nice perspective of the page location. | ||
| 235 | |||
| 236 | Another group that could be added in front of all the results could be a search did in user's pages. This kind of feature could be removed if this part (of user pages) can be found in "User Profile". | ||
| 237 | |||
| 238 | ---- | ||
| 239 | |||
| 240 | Results: | ||
| 241 | Results in user pages | ||
| 242 | Other results | ||
| 243 | |||
| 244 | ---- | ||
| 245 | |||
| 246 | == (% id="mockups" %)2. Mockups (%%) == | ||
| 247 | |||
| 248 | (-) Not Selected by me | ||
| 249 | (+) Selected by me | ||
| 250 | |||
| 251 | === Search bar === | ||
| 252 | |||
| 253 | The nice thing about the initial version was that the Pre filtering of the results by selecting your wiki and space. | ||
| 254 | |||
| 255 | ===== __(-) Version 1__ ===== | ||
| 256 | |||
| 257 | [[image:searchBar1.png||alt="..."]] | ||
| 258 | Very nice visual grouping. Actually my favourite. Good for tiny spaces to make the selection wich is not the case. | ||
| 259 | The filters could be in the Advanced section. | ||
| 260 | |||
| 261 | ===== __(-) Version 2__ ===== | ||
| 262 | |||
| 263 | [[image:searchBar2.png||alt="...."]] | ||
| 264 | Keeping the existing layout, but inversing Space selector with Wiki selector, to keep the breadcrumbs arrangement. | ||
| 265 | The filters could be in the Options/Advanced section. | ||
| 266 | |||
| 267 | ===== __(-) Version 3__ ===== | ||
| 268 | |||
| 269 | [[image:searchBar3.png||alt="...."]] | ||
| 270 | This version is the Version 1 combined with Help Information. This way the width is increased. | ||
| 271 | Very nice if there were a function separation: a group for search, one for filters, etc every one with their indications. | ||
| 272 | |||
| 273 | === (-) Advanced Search === | ||
| 274 | |||
| 275 | The advanced section is good if we like to add things like: | ||
| 276 | |||
| 277 | * User select the level of details for the results (Location, Modified, Contains, Surrounding content, Page Rating, Page Versions, Translations) | ||
| 278 | * User select the number of results per page | ||
| 279 | * Integrate Filters | ||
| 280 | * Integrate Lucene advanced search options (AND, OR, NOT, test*, te?t,) | ||
| 281 | |||
| 282 | === Results List === | ||
| 283 | |||
| 284 | ===== __(-) Version 1__ ===== | ||
| 285 | |||
| 286 | Show only minimal informations and display more when the user Hovers one result item. | ||
| 287 | |||
| 288 | [[image:resultList1.png||style="float: left; margin-right: 1em;"]] | ||
| 289 | \\ | ||
| 290 | |||
| 291 | |||
| 292 | |||
| 293 | |||
| 294 | \\ | ||
| 295 | |||
| 296 | The way Highlighted items would look like. | ||
| 297 | [[image:resultList1High.png||style="float: left; margin-right: 1em;"]] | ||
| 298 | |||
| 299 | |||
| 300 | |||
| 301 | |||
| 302 | |||
| 303 | ===== __(+) Version 2__ ===== | ||
| 304 | |||
| 305 | Results displayed integrated in the search page. | ||
| 306 | Score field replaced with Relevance, also replacing Stars form Rating Page with Square rating. __ | ||
| 307 | __Table Sorting replaced with one way sorting for fields like Relevance, Date, Page Name, LastAuthor. | ||
| 308 | |||
| 309 | [[image:resultList2.png||style="float: left; margin-right: 1em;"]] | ||
| 310 | |||
| 311 | |||
| 312 | |||
| 313 | |||
| 314 | |||
| 315 | |||
| 316 | |||
| 317 | |||
| 318 | |||
| 319 | |||
| 320 | The way a highlighted result looks like. | ||
| 321 | [[image:resultList2High.png||style="float: left; margin-right: 1em;"]] | ||
| 322 | |||
| 323 | |||
| 324 | |||
| 325 | Table fields are grouped (Space with WIki); (Author with Date); (Comments with Attachements). The level of details can be extended (unlike the table view) with the informations like Page Versions, Translations, Page ratings, Surrounding content. The level could be selected by user in his Preferences. | ||
| 326 | |||
| 327 | === Integration === | ||
| 328 | |||
| 329 | ===== __ Version 1__ ===== | ||
| 330 | |||
| 331 | [[image:integrated1.png||style="float: left; margin-right: 1em;"]] | ||
| 332 | |||
| 333 | |||
| 334 | |||
| 335 | |||
| 336 | |||
| 337 | |||
| 338 | |||
| 339 | |||
| 340 | |||
| 341 | |||
| 342 | |||
| 343 | |||
| 344 | |||
| 345 | ===== ===== | ||
| 346 | |||
| 347 | \\ | ||
| 348 | |||
| 349 | ===== __General View__ ===== | ||
| 350 | |||
| 351 | [[image:Proposal.png]] | ||
| 352 | |||
| 353 | ===== __Integrated in Toucan Skin (layout)__ ===== | ||
| 354 | |||
| 355 | [[image:integration.png]] | ||
| 356 | |||
| 357 | ===== __Scalable for only one wiki__ ===== | ||
| 358 | |||
| 359 | __[[image:onlyspace.png]]__ | ||
| 360 | |||
| 361 | ===== __Scalable if more details needed for result item__ ===== | ||
| 362 | |||
| 363 | [[image:details.png]] | ||
| 364 | |||
| 365 | == 3. Nice ToDo's == | ||
| 366 | |||
| 367 | * Highlighted search words in result list | ||
| 368 | * Integrate standard XWiki pagination | ||
| 369 | * Sorting DESC, ASC | ||
| 370 | * Display Recent Pages, My Pages | ||
| 371 | * When you search from a wiki or a page - complete the specific query fields with the curent wiki, space - keep search context |
