Update errors report design

[guergana]

• fixes New Errors Report panel design #634

[guergana]

@romicolman @Faithkenny Maybe we should thing about some sort of indicator when the user has to scroll to the right? Sometimes the errors report has many columns and i think it's not immediately obvious that there is more information if you scroll to the right. I have made a gif to illustrate what I see:

[cloudflare-workers-and-pages]

Deploying opendataeditor with    Cloudflare Pages

Latest commit:	9a0cb2b
Status:	✅  Deploy successful!
Preview URL:	https://0773321e.opendataeditor.pages.dev
Branch Preview URL:	https://634-errors-report.opendataeditor.pages.dev

View logs

[Faithkenny]

@romicolman @Faithkenny Maybe we should thing about some sort of indicator when the user has to scroll to the right? Sometimes the errors report has many columns and i think it's not immediately obvious that there is more information if you scroll to the right. I have made a gif to illustrate what I see:

Very good catch @guergana. Let's review this on Monday. A max-width container is the first solution that jumps at me

[romicolman]

Hi @guergana thanks for this implementation. To answer to your comments:

1. The scrolling problem: we are having a call today with Faith to address other elements and we added this to our discussion list.

2. During the user testing sessions, people did not detect the first column in the error tables as the row number. Faith has added a gray background on this first column to follow the Google Sheets and Excel logic and visually facilitates it detection. I checked this on the Figma file and it is there. Can you please add it?

3. In addition, can you please add the Row number title. In the current design, the row number is called 1:

4. I also detected a problem when the content in the cell with the error is too large: we have a lot of blank space on the left menu and the width of the rows is disproportionate. Is there a way to solve this? Maybe by adding a tooltip for long content. This is a video showing the problem:

Grabacion.de.pantalla.2024-11-18.a.la.s.2.40.00.p.m.mov

5. In files with a lot of errors, when scrolling down the errors report to click show more, nothing happens. Here is a video showing the problem:

Grabacion.de.pantalla.2024-11-18.a.la.s.2.48.18.p.m.mov

6. As we discussed on Slack we removed the detailed explanation of errors, to avoid repeating information. We will have more user testing sessions to check if this works if this change makes sense or if we need to include the element again.

[Faithkenny]

On the call yesterday, I pointed out that we should have the Settings section (user guide & report an issue) in a fixed position. Giving more thought to this made me realize that I haven't shared a definition for the scrolling, and overscroll behaviour in the ODE. Here goes:

• The sidebar, control panel containing metadata and co. including the Pagination should be fixed always
• The Datagrid area which changes based on the viewed panel scrolls behind the control panel

This Prototype demonstrates what it should look like.

Happy to hear your thoughts @guergana @romicolman @pdelboca

Scrolling.behaviour.mp4

[guergana]

Hi @guergana thanks for this implementation. To answer to your comments:

1. The scrolling problem: we are having a call today with Faith to address other elements and we added this to our discussion list.

2. During the user testing sessions, people did not detect the first column in the error tables as the row number. Faith has added a gray background on this first column to follow the Google Sheets and Excel logic and visually facilitates it detection. I checked this on the [Figma file](https://www.figma.com/design/cOpYjy35zB3dJf1GW1BC76/Open-Data-Editor?node-id=10002-64459&t=hHNUCVdrF7s2rGht-1) and it is there. Can you please add it?

3. In addition, can you please add the **Row number** title. In the current design, the row number is called **1**:

4. I also detected a problem when the content in the cell with the error is too large: we have a lot of blank space on the left menu and the width of the rows is disproportionate. Is there a way to solve this? Maybe by adding a tooltip for long content. This is a video showing the problem:

Grabacion.de.pantalla.2024-11-18.a.la.s.2.40.00.p.m.mov

5. In files with a lot of errors, when scrolling down the errors report to click show more, nothing happens. Here is a video showing the problem:

Grabacion.de.pantalla.2024-11-18.a.la.s.2.48.18.p.m.mov

6. As we discussed on Slack we removed the detailed explanation of errors, to avoid repeating information. We will have more user testing sessions to check if this works if this change makes sense or if we need to include the element again.

Hello @romicolman could you please provide the file you used for testing? 🙏
About point 2. ... if there is no indication of the row error, how are users going to know where is the error? Without the error detail and the line in the table there is no indication on this report about which lines have errors.

[romicolman]

Yes, here is Distribucio.de.la.renda.P80_P20 (1).xlsx.

[guergana]

Yes, here is Distribucio.de.la.renda.P80_P20 (1).xlsx.

@romicolman I have worked on the changes. . I couldn't yet find a solution to the tooltip in the table report when the cells are too big, I just set a fixed height for now and cut the rest out.

[romicolman]

Hi @guergana! Just to post what we discussed yesterday. Bullet point 2 is the indication of the row number. Faith added a gray background to make that indication clearer to the user. Regarding the problem with the tooltip, I'll create a separate ticket. Let's merge this for now

[romicolman]

This is approved! You can merge it :)