transparentdemocracy / website

The frontend that visualizes the information obtained from the backend. Written in Angular.
1 stars 0 forks source link

Issues found in alfa test #17

Closed sandervh14 closed 1 month ago

sandervh14 commented 1 month ago

I just tested our website locally. The experience is already great! 😄

I think there are some small but important changes though we need to make to make it better:

[x] - Website name on top: replace with "Wat doet de politiek" / "Que fait la politique" depending on language selection.

[x] - Translations: Don't use the word "Moties" (top menu, search, on the right in content display), use "stemmingen": we want to be understood by the larger audience.

[x] - Translations: Replace "Plenaries" by "Vergaderingen"

[x] - In the mentioning "De data gebruikt op deze website is vrij beschikbaar onder de MIT license" at the bottom of the page: make "data gebruikt op deze website" a link to https://github.com/transparentdemocracy/voting-data so interested people can check how trustworthy the data is, can fact-check against real plenary reports, or can file issues in the data repo.

[ ] - UX: when the Plenaries page is activated, search does not work. Do you want the displayed plenaries, motion counts and displayed motions to be filtered? Or do you intend on searching to activate the motions page, with motions filtered?

[x] - explanation of our project on top: "Belgische federale parlement (Kamer)", new line between "hebben gestemd." and "Dit project..." (and same for French) + change text end to "laatste legilatuur van het Belgische federaal parlement te visualiseren. We focussen op de Kamer." (French: "du Parlement fédéral belge. Nous nous concentrons sur la Chambre.").

[x] - search works fine! Great!

[x] - don't visualize the motion ID, people won't care about that.

[?] - add a Document button that navigates the user to the official document. // Which URL?

[x] - smartphone layout: motions boxes left margin is bigger than on the right.

[ ] - UX: with French language selected, searching on a typed keyword in French does not work.

[/] - UX: clicking the "impôts" keyword does not lead to a working search. // Not sure if the problem is due to French characters. As quick solution, I changed the word.

[x] - If there is only one motion in a motion group, can you make it expand/collapse entirely when the motion group is clicked? And make it not have a motion title? Since that will always be the same as the one of the motion group. The repetition of the title looks confusing and is redundant.

[x] - Make plenaries with 0 motions un-expandable. Add a small information text explaining there were no votes and that we plan to visualize other content of plenary gatherings soon too, like questions to ministers or debates about motions.

idotj commented 1 month ago

All related with Search component will be for the moment unknown for me (I didn't touch/develop that part). At least I tested quickly with some French and Dutch words to see that it works with the new language library (ngx-translate), but I will need a little more of time to see how it was developed, unless somebody else is available to have a look.

Due to the long list with small improvements, I will attack tomorrow in my free time that changes before (easy/quick wins)

sandervh14 commented 1 month ago

No problem! Fine, thanks!! :-)

idotj commented 1 month ago

Changes that need to be moved to the backend project:

[ ] - The ID in the plenary title can just be 304, instead of 55_304. All plenaries visible in one screen are from the same political term, and there's the date on the right too.

[ ] - ID of the motions on the Plenaries page (the blue underlined links): can you make this just "Voorstel 26, stemming 1" (and French translation) instead of "55_304_mg_26_m0"?

*Edit: Changing the ID to a more readable title is possible in the frontend, but if it is feasible to include that information in the data model it would be much more efficient than doing it via Typescript.

sandervh14 commented 1 month ago

Fantastic!! 😄 I've added your request for changes to backend to the alfa test issues on the backend project.

sandervh14 commented 1 month ago

New ones, but now it's really details: (I'll add more if I find others)

[x] "1 stemming" instead of "1 stemmingen" if only a single motion in a motion group [x] Translate "Show all parties" [x] Search keyword "baan" is Dutch from the Netherlands, we mostly use "jobs" (or in familiar context "werk", but that keyword is also ambiguous) [ ] Enlarge erase button "x" in the search bar [x] "Visualisatie van de stemmingen in het Belgische federale parlement (Kamer)": capital letter, also in French. [x] Better readable: "Er waren geen stemmingen. (newline) We zijn van plan om binnenkort ook andere inhoud van plenaire vergaderingen te visualiseren, zoals vragen aan ministers of debatten over moties." / "Il n'y a pas eu de vote. (newline) Nous prévoyons de visualiser bientôt d'autres contenus relatifs aux réunions plénières, tels que les questions aux ministres ou les débats sur les motions."

I just noticed you erased the parties with 0 votes, great, it is better understandable! image

idotj commented 1 month ago

@sandervh14 I fix most of the small details, but one related with the 'X' button in the search bar... I didn't get that... Which browser are you using? It has maybe a "clear search field" included by default (because I didn't find any button with that action)

sandervh14 commented 1 month ago

Wow already, thanks! 😮

Safari 17.2.1. I didn't think that the clear button could've been a browser-injected one. If so, no problem, we'll leave it at this!

sandervh14 commented 1 month ago

Hm, an important issue, which will fix the few plenaries that were listed on the plenaries page so far (last bullet on https://github.com/transparentdemocracy/voting-data/issues/50#issue-2321798181): please ensure that the visual pagination element is present at the bottom of the plenaries page, just like for the motions.

This pagination element disappears when motions was the first page that was opened, and plenaries are displayed only after clicking the plenaries page link. Only after refreshing the plenaries page, the pagination is again visible.

The same occurs for the motions page, if the user lands on it after having opened the plenaries page first and then having clicked the motions page link.

Without the pagination element, the plenaries page just fetches and displays only the first 10 plenaries from the backend. Since the backend didn't sort the plenaries so far, the displayed plenaries seemed so random + no pagination visible = seemed like only 10 plenaries were requestable from the backend, so seemed like a serious data issue.

I've now implemented sorting on political term, plenary date and plenary number on the backend (https://github.com/transparentdemocracy/backend/issues/1). Now it looks already less drastic.

image

If you ensure pagination on the page in all circumstances, it will all look like expected.

sandervh14 commented 1 month ago

Sorting of motions is solved now too, which makes the displayed list more sensical too.

image
sandervh14 commented 1 month ago

These turn out to be backend issues, first one is fixed, the other 2 I've asked Guido:

[x] - UX: when the Plenaries page is activated, search does not work. Do you want the displayed plenaries, motion counts and displayed motions to be filtered? Or do you intend on searching to activate the motions page, with motions filtered? [ ] - UX: with French language selected, searching on a typed keyword in French does not work. [/] - UX: clicking the "impôts" keyword does not lead to a working search. // Not sure if the problem is due to French characters. As quick solution, I changed the word.

About this one: [?] - add a Document button that navigates the user to the official document. // Which URL? ===> See Karel's branch https://github.com/transparentdemocracy/website/tree/show-document-reference.

sandervh14 commented 1 month ago

First and foremost @idotj, fantastic smartphone layout upgrade, it's a lot better than what it was! 😃 Thanks 😃

I've done a second alfa test. I've listed new issues and suggestions for improvement - all small ones, many, but if these are done, our interface will really be high-quality.

[x] Clicking page links or changing the language in the hamburger menu does not close the menu. [x] Typo NL in website explanation at the top + adding number of years to clarify: "legilatuur" -> "legislatuur (5 jaar)" [x] Clarify in a "?" button next to the "Vergaderingen" page header:

Je kan deze pagina gebruiken om:

  • te bladeren door de plenaire vergaderingen die zijn gehouden.
  • vergaderingen op te zoeken waarin over een bepaald onderwerp is gestemd (tik het onderwerp in in de zoekbalk).
  • een specifieke vergadering op te zoeken (tik het nummer of de datum van de plenaire vergadering in in de zoekbalk). + translation in French [x] Clarify in a "?" button next to the "Stemmingen" page header: Je kan deze pagina gebruiken om:
  • door alle stemmingen te bladeren die zijn gehouden in het federaal parlement.
  • stemmingen op te zoeken over een bepaald onderwerp (tik het onderwerp in in de zoekbalk).
  • een specifieke stemming op te zoeken (tik het nummer of de datum van de stemming in in de zoekbalk). [x] On smartphone, after typing a search keyword, when tapping the search button on the smartphone keyboard, the keyboard does not disappear. (But the search worked. :-) ) [ ] Adapt IDs in titles of plenaries from "Plenaire vergadering 55_309" to just "Plenaire vergadering 309". [x] Adapt wording of motion count: "152 motions" --> "152 stemmingen". [ ] On smartphone layout, can the plenary title take the full width of the blue box of the data of a plenary, and the number of motions and the data be below the plenary title? (number of motions left, date right? So that when scrolling we still see a "timeline") [ ] Can the same be done as above, for motion groups on the motion page? Because now the number of motions and the date on the right take up half the screen width, the title of the motion group is divided over many lines. [x] Adapt title of motion to "Agenda-item 18, stemming 1" [x] When scrolling down the page, there's a bit of grey margin missing on top of the "Wat doet de politiek" letters at the top of the page. [ ] Remove the display of the long text below the document references of a motion. (For example, the text "Ik meen dat de vivaldiregering........" below the first motion made on 08-05-2024) This text is just not high-quality enough, the document summaries are more sensical to understand. [x] Maybe a little less margin above and below the links in document references below a motion? [x] Reword "Document-verwijzing: XXXX/Y" to "Voorstel: document XXXX/Y". This makes it a bit clearer to users why we include a reference to documents. + similar translation for French. [x] Reword "Overzicht dekamer.be" to "Gelinkte voorstellen (op dekamer.be)" + similar translation for French [x] Vote results per party:
  • align "Toon alle partijen" fully to the right, it floats a bit further left from the right border of abstentions on smartphone
  • center the number of votes below "Ja", "Nee", or "Onthouding".
  • or maybe even better in terms of (now crammed) spacing of the parties, number of votes and % of votes on the screen on smartphone: on that medium, can you put the "Ja", "Nee" and "Abstention" columns as rows instead? [ ] When clicking on the right of a motion (below "Aangenomen" or "Verworpen"), the motion should open/close, like when clicking on the title of the motion. [ ] The search has become somewhat slower. I don't think we'll get it much faster, we just made it search in more columns of the data. Can you introduce a spinner while search is waiting for the results? [x] Typo in project explanation on top of the page in French: "législature ddu" --> "législature du" [x] Please adapt translation: plenary page title "Plénières" --> "Réunions plénières": makes it more understandable for people that it's about browsing through meetings of the politicians. [x] Sorry for reverting a change request of earlier: please adapt "Séance plénière" to "Réunion plénière": easier wording, after comments from Jordy about people complaining about difficult words [x] Replace "Rechercher des motions" by "Rechercher des votes" and "XX motions" (motion count next to plenary title) to "XX votes". [x] Replace "Point de l'ordre du jour 18 motion 1" by "Point de l'ordre du jour 18, vote 1" [ ] Motions without a document reference: show a message similar to the one warning about AI translations, now with the warning "We could not find the document reference for this vote." (translated in Dutch and French)
idotj commented 1 month ago

Started with the changes and already some of them merged.

idotj commented 1 month ago

Changes merged (not all points fixed)

To avoid a bigger issue, I will open a new one with the points missing