Wiki source code of QuantUX
Last modified by Thiago Krieck on 2026/01/28 17:19
Show last authors
| author | version | line-number | content |
|---|---|---|---|
| 1 | This proposal is to discuss the use of Quant UX as a tool for small scale usability testing within XWiki. | ||
| 2 | |||
| 3 | Website: [[https:~~/~~/www.quant-ux.com/>>https://www.quant-ux.com/]] | ||
| 4 | |||
| 5 | |||
| 6 | = What it is = | ||
| 7 | |||
| 8 | Quant-UX is an open-source tool made for teams to test ideas without the need to code and without active moderation. All tests are run and recorded anonymously within the user's browser. | ||
| 9 | |||
| 10 | In Quant, we can mock up ideas, define tasks, goals and surveys and share a link to users participate in the testing. As users operate our mock-up, we get synthesized data about those sessions. | ||
| 11 | |||
| 12 | == When to use it == | ||
| 13 | |||
| 14 | When we want to test and validate ideas before coding. Prototypes testing has lower cost than coding. We can test an idea and get quantitative and qualitative data based on a series of mockups done previously. | ||
| 15 | |||
| 16 | Ideally, we want mockups with at least some amount of fidelity from the final product. These images can even be hand drawn if so desired, but some user might have problems with the hand drawn nature of these images. | ||
| 17 | |||
| 18 | Depending on what you need to validate, the fidelity of the prototype can also vary. For example, you may need a high fidelity prototype if your objective is to validate colors, fonts and general legibility of your screen. However, to validate concepts and expected path of our users, a rough wireframe can be sufficient. | ||
| 19 | |||
| 20 | |||
| 21 | |||
| 22 | |||
| 23 | == By whom? == | ||
| 24 | |||
| 25 | By anyone who wants to test an idea, really. However, to do the mockups maybe a designer's help might be needed, depending if the fidelity of the final mockup will have a significant impact on the user experience. | ||
| 26 | |||
| 27 | |||
| 28 | == How to prepare a testing Session == | ||
| 29 | |||
| 30 | To do these sessions, we need: | ||
| 31 | |||
| 32 | * Define the type of test. | ||
| 33 | ** **Comparative tests (A/B)**: to compare two different versions of the same thing, and send to different pools of users | ||
| 34 | ** **Exploratory tests:** giving participants a realistic scenario and task to perform. | ||
| 35 | * Define a test plan: | ||
| 36 | ** Define scope of the audience, inquiry and time available | ||
| 37 | ** Set the questions that will be answered by our audience and the goal of the session (the task being tested) | ||
| 38 | * Create the prototype | ||
| 39 | ** Create each individual screen that our user will interact. Each piece of update on the screen need to be defined. | ||
| 40 | ** Import these images on Quant-UX and link them together using the appropriate tool. | ||
| 41 | ** At each screen, you can assign a question that your user will be presented to. These questions should be defined in the previous step. | ||
| 42 | ** At the end of the session, it is recommended to have an open question available for the user to give general feedback from the prototype. | ||
| 43 | * Share the prototype | ||
| 44 | ** Each session will have a sharing link that you can send to your prospective users. | ||
| 45 | ** These users will be defined by your test plan and can be Stakeholders, forums posters, general users of XWiki or even novice ones. | ||
| 46 | |||
| 47 | == How to select participants for the Session? == | ||
| 48 | |||
| 49 | Ideally, users should be selected based on the persona being targeted by the feature. To check the personas we have in XWiki, please see the document [[6 Types of XWiki users>>doc:Design.6TypesOfXWikiUsers]]. | ||
| 50 | |||
| 51 | For a good result, at least five users should do the test. | ||
| 52 | |||
| 53 | |||
| 54 | |||
| 55 | To send the invitations, any channel is valid. This will vary a lot based on the persona. For example, "Reader" type of users may not check the forums, so you should reach them by other means. | ||
| 56 | |||
| 57 | == Publishing the results of the research == | ||
| 58 | |||
| 59 | The results should be published within the proposal itself with conclusions drawn from the experiment and a link to the Quant-UX prototype. | ||
| 60 | |||
| 61 | If there is no proposal and only forum discussions, the results can be published there. | ||
| 62 | |||
| 63 | ---- | ||
| 64 | |||
| 65 | = Quant-UX Evaluation = | ||
| 66 | |||
| 67 | |||
| 68 | == How the evaluation was done? == | ||
| 69 | |||
| 70 | To quickly take a look at how these features work, I developed a quick mockup and shared it only within the team. | ||
| 71 | |||
| 72 | The prototype is a possible new development for XWiki and has an ongoing discussion on the forum ([[https:~~/~~/forum.xwiki.org/t/complete-redesign-of-notification-watch-buttons/12886>>https://forum.xwiki.org/t/complete-redesign-of-notification-watch-buttons/12886]]). But the focus should not be on the test itself but on the features of the Tool. | ||
| 73 | |||
| 74 | **The chosen task for the test was:** Block notifications. | ||
| 75 | |||
| 76 | (% class="box infomessage" %) | ||
| 77 | ((( | ||
| 78 | Note that these results are for the tool itself. To get proper results, a better prototype would be needed | ||
| 79 | ))) | ||
| 80 | |||
| 81 | == Data available for download: == | ||
| 82 | |||
| 83 | **Events**: | ||
| 84 | |||
| 85 | [[attach:Watch and Follow.csv||target="_blank"]] | ||
| 86 | |||
| 87 | **Summary** | ||
| 88 | |||
| 89 | [[attach:Task_Summary.csv||target="_blank"]] | ||
| 90 | |||
| 91 | Screen recording of one of the users sessions: | ||
| 92 | |||
| 93 | [[https:~~/~~/up1.xwikisas.com/#T4I2zxNJyv0FY5bcLcGEIA>>https://up1.xwikisas.com/#T4I2zxNJyv0FY5bcLcGEIA]] | ||
| 94 | |||
| 95 | = Screenshots of the dashboard = | ||
| 96 | |||
| 97 | [[image:Screenshot 2023-11-23 at 14.23.18.png||alt="Main view" height="637" width="721"]] | ||
| 98 | |||
| 99 | Recordings of each participant | ||
| 100 | |||
| 101 | [[image:Screenshot 2023-11-23 at 14.23.37.png||height="434" width="718"]] | ||
| 102 | |||
| 103 | |||
| 104 | |||
| 105 | [[image:Screenshot 2023-11-23 at 14.28.02.png||height="480" width="707"]] | ||
| 106 | |||
| 107 | Consolidated heat map of all clicks, from all sessions on the first page | ||
| 108 | |||
| 109 | [[image:Screenshot 2023-11-23 at 14.28.17.png||height="503" width="704"]] | ||
| 110 | |||
| 111 | User journey through all mockups. Each line is a different user. | ||
| 112 | |||
| 113 | [[image:Screenshot 2023-11-23 at 14.28.38.png||height="283" width="713"]] | ||
| 114 | |||
| 115 | |||
| 116 |