Usability is very important for us. If you can write html, css or even jquery: discuss, suggest or submit a new user interface or usability improvement. You can submit recommendations on how to improve the current UI, or tackle any of the open tickets related to UI improvements.
Below are the quality requirements and test plans for Piwik’s interface.
See also: List of Features, Consultants, Testimonials, Piwik supporters, Merchandise and Participate in Piwik!.
How to test the User Interface after a modification?
This is a checklist describing every User Interface features of piwik that you have to test after any modification in UI code, or before any public release.
If you have modified the Javascript code, CSS, HTML, or PHP code that can be related to the User Interface, you have to go through this list to make sure everything is still working.
Asset Merging
Piwik framework comes with a dynamic JSS/CSS file minifier and merger mechanism. For more info see Blog post – Making Piwik UI Faster.
When you modify the Piwik Javascript files, to take your changes into consideration, add the following at the end of your file config/config.ini.php:
[Debug]
disable_merged_assets=1
Before testing the UI, please reactivate this feature by resetting disable_merged_assets to 0.
Browsers to use to test the UI
These different features should be tested within several browsers:
- Firefox,
- Firefox with Firebug extension, check that there is no error or notice in the JS code,
- Internet Explorer 7,8,
- Internet Explorer with Debug enabled (set debugging in Tools > Internet > Advanced > Debug),
- Opera,
- Safari
To help you, try to generate screenshots of the websites using http://browsershots.org/
Browser Cache
Browser cache has to be taken into account when modifying static assets such as CSS, JS and image files. To cover usual browser cache settings please test the user interface with:
- disabled cache,
- enabled cache – first access (ie. cleared cache),
- enabled cache – second access (ie. populated cache)
More info on disabling browser caches : Wikipedia:Bypass_your_cache
Data Table
Check that:
- The style is different for Column header and standard line
- The style (background) is different between Odd/Even lines
- Icons are present (eg: icon of google/yahoo/…, flags for country)
- Footer style is correct (footer buttons shown when hovering the + logo)
- Text is truncated when necessary, and a tooltip displays original text
Test the features:
- Sort by column (“column sorted” icon should appear once the action is completed)
- Pagination (previous/next), verify that ‘current’ and ‘max’ numbers are correct
- Pagination should be reseted after a table refresh (column sort)
- Test Include/Exclude low population
Data Table Inline Search
Test the following:
- Find a string that is present in the table, navigate in the table and cancel the search
- Try to find a string that is not present in the table (should display ‘No data…’)
- Search for ‘null string’ (should be identical to cancelling a search)
Check that all links work:
- data export (csv/xml/json/php)
- pie chart
- bar graph
- tag cloud
- table
Sub Data Table
Check that:
- Click on a row displays a datatable (eg. for the Keywords table, the Search engine table) and verify all previous tests on this subDataTable (the same testing procedure as standard datatable)
- There should be an external url link on some subdatatable rows (ie: Search engines subtable in the Keywords datatable)
Tagcloud
Check that:
- The bigger is the font size, the bigger the value should be
- Tooltip indicate exact values
Graph
Check that:
- Verify that every graph works (=> graph lib input is not broken)
Data Table under Actions > Pages
- Run the same test than standard Data Table (the one difference with normal datatable is that the row colors are not alternate)
- Expand and Minimize rows through several nesting levels (check that the left margin is growing)
- Check that the figures sums up correctly in ‘include low pop’ mode
Sparklines
Check that:
- Click on a sparkline should update the graph above with the correct data
Goals plugin
- Try and create/edit/delete Goals
- In the main Goal plugin page, check that the datatables are loading properly when the menu on the bottom left (“Goal by segments”) is clicked.
Dashboard
Test the features:
- Move widgets around (Flash and non-Flash content)
- Delete widget
- Add a new widget
- You should be able to quit the modal dialog by pressing ‘esc’ key
- Make sure that already added widgets cannot be added again
Calendar
Check that:
- The currently selected period is highlighted in the calendar
- Try to change date and period
Test the following:
- Click on a main menu item should select the first submenu item
- The menu should indicate the current category when mouse isn’t over it (timeout)
- Test all menu/submenu for broken links
Test the following:
- Select a submenu, press refresh, check that the page refreshes as expected for the same submenu, the same period and the same website
- change the website, check that the selected menu is still the same
- select two different submenus, press Back button and check the state is restored as expected
Language Selector
Check that:
- Click on the language shows the list of languages
- Click on a language from the list reloads Piwik and loads the clicked language
- A click outside the language selector should hide the language selector
If this works, it should also work for the Website Selector (which uses same code).
Feedback
Check that:
- clicking on the feedback link opens a box with grey background and links to forum and FAQ
- clicking on “Contact the Piwik team” should display a form with a dropdown and two input fields to send feedback
- test an invalid message (e.g., too short) and navigating back (using the left arrow in the feedback window)
- test successfully sending a message
- close window; re-click on feedback link should open box with grey background and links to forum and FAQ; there should be no trace of the previous error/success message
- Test one datatable widget in Widgetize iframe mode
- Test that the dashboard loads well in iframe mode.
Done!
If all the tests are passing, you have successfully made a change to the Piwik UI! Well done… and thank you for making the Piwik UI better!
English
