search

paperless-ngx / paperless-ngx

A community-supported supercharged version of paperless: scan, index and archive all your physical documents
https://docs.paperless-ngx.com
GNU General Public License v3.0
21.93k stars 1.19k forks source link

[BUG] Bad UX when using a custom monetary field #6357

Closed denilsonsa closed 7 months ago

denilsonsa commented 7 months ago

Description

The current UX (user experience) while using custom monetary fields is quite bad. Some of these issues may also apply to any other custom field, but I haven't tested other kinds of fields.

Steps to reproduce

Part 1: discoverability

How can I add a field to a document? Let's try, from a mind of a user who never used custom fields before.

  1. At the sidebar, go to Custom Fields and create a new custom field type. Okay, good, simple.
  2. Open any document to edit.
  3. Observe how all the fields are in the main "Details" tab. But somehow the custom field is missing.
  4. Click on the other tabs: "Content", "Metadata", "Notes", "Permissions". Nope, the fields are not there.
  5. Look around… There are buttons for "Delete"-ing the document, "Download"-ing the document, "Actions" on the document… Oh, there! "Custom Fields"!

Problem 1: Custom fields button should be located at the main "Details" panel, near all the other relevant fields. It makes little sense to add it far way on the top-right corner. The most intuitive location for interacting with custom fields is next to all the other fields. (In fact, custom fields are added to the main "Details" panel, and can even be removed directly from there. Why can't we add them directly in there?)

Let's add a custom field.

  1. Click on the "Custom Fields" button.
  2. Select "Total" (my custom field) from the drop-down.
  3. Okay good. Now what? What else do you need from me? I've already selected the field.
  4. Ah, I have to press the "+" button to "add" the field to the document, right? No, wrong. That creates a new custom field.
  5. "Create New Field"… Would it create a new field in this document, of the type of the selected custom field? No, wrong. That also creates a new custom field.
  6. Maybe I have to press the "+ Add" button. Yes, that's it!

Problem 2: Why do we have two buttons to create custom fields from that little pop-up menu?

Problem 3: Two buttons with "+" symbol with different meanings. And two buttons with different symbols ("+" and "*") with the same meaning.

Problem 4: Why do we need to press "Add" anyway? Isn't selecting the custom field enough?

Part 2: Currency

The field defaults to USD. Why? Why can't I select a default currency when creating a new Custom Field? That would be the most intuitive solution.

Problem 5: There is no way (or no intuitive way) to pick a default currency for a field.

Problem 6: It is already requiring too many clicks to even get started with a monetary field. Click on "Custom Fields", click on the drop-down, click on the field type, click on "Add", and click on the currency to change it. Five clicks and we haven't even started writing down the value.

Part 3: Interaction with the field

Interacting with the monetary field is a frustrating experience. To better illustrate the issue, I've used Show Me The Key to display the keypresses and Peek to record my screen.

First recording

  1. Double-click on the currency text to select it all.
  2. Type e because I want to type EUR.
  3. BUG 1: Observe how the letter I typed was erased.
  4. Type EUR.
  5. Press Tab to move the focus to the number field.
  6. BUG 2: The focus is gone. Keyboard navigation is impossible. I have to move my hands away from the keyboard to the mouse to click on the number field.
  7. I press Shift + Tab to move the focus from the number field back to the currency field.
  8. BUG 3: Observe how the text I typed is now gone. This is getting infuriating.
  9. Type EUR again. Press Tab again. Oh, of course, the focus is gone.
  10. Click on the currency field again.
  11. BUG 4: Observe how the text I typed is now gone, again. (Likely the same reason as BUG 3.)
  12. Click on the number field.
  13. BUG 5: Observe how the EUR text came back out of nowhere. At this point I have no idea what is even going on.
  14. Click on the currency field one more time. Maybe I clicked twice.
  15. BUG 6: And now the text is gone once more.
  16. Click away from the field to remove the focus.
  17. BUG 7: There is a huge hidden "Remove" button. It's located on top of the field label. This is bad, as the field label should be a safe place to click. What's more, clicking on a field label moves the focus to the labeled input element. (Just as in <label> and <input> HTML elements.) Putting a destructive button hidden on top of the label is really surprising. And bad.

At this point, I stopped the recording in order to restore the field.

https://github.com/paperless-ngx/paperless-ngx/assets/121676/1ec04e83-8a54-4222-ba3b-04c1445c1b52

Let me try again.

  1. Click once on the currency field.
  2. Observe how the cursor stays there, and the text stays there. As it should be. But it's inconsistent to the previous steps 10 to 15. It is impossible for the user to know if a single click will erase the currency text or keep the currency text.
  3. Press Backspace and/or Delete to erase a few characters.
  4. BUG 8: Observe how somehow a mysterious letter N showed up. I never typed it.
  5. Press Backspace again.
  6. BUG 8 again: Observe how another letter N showed up.
  7. Press Backspace to delete one of the N letters. It's gone.
  8. Press Backspace to delete the second N letter.
  9. BUG 9: Yet another letter N shows up.
  10. Press Backspace and then E, expecting to replace the letter N with the actual letter E.
  11. BUG 10: Just like BUG 1, the letter I typed is gone.
  12. Press R by mistake.
  13. Press Backspace to erase it.
  14. BUG 8 another time: Look who's back! The letter N.
  15. Press Backspace to erase the letter N.
  16. Start typing the letters for EUR.
  17. BUG 10 again: The type letter E was erased.
  18. Slowly type E, U, R.
  19. Click on the number field. Don't press Tab!
  20. BUG 11: During a fraction of a second, the typed currency text disappears, and then reappears.
  21. Finally type the number I wanted to type.

https://github.com/paperless-ngx/paperless-ngx/assets/121676/500227de-e4e6-47b6-b2d8-b2b5bb7d10d5

Further thoughts about the interaction:

Conclusions

Usually we should have one bug per issue. This bug report here highlights several bugs and UX issues. Thus, feel free to create many separate bug reports, one for each issue, and leave this one as a "parent issue" that groups them all.

When reflecting on my interaction with the monetary field, I spent more time interacting with it than the time I spend with the rest of the fields (combined). That, multiplied by a hundred or more documents sounds like a user that won't enjoy adding this data to the documents.

Webserver logs

(no relevant logs)

Browser logs

No response

Paperless-ngx version

2.7.2

Host OS

Debian Linux

Installation method

Docker - official image

Browser

Firefox

Configuration changes

No response

Other

No response

Please confirm the following

shamoon commented 7 months ago

Im really not sure whats going on there, but feel free to open change request(s)

https://github.com/paperless-ngx/paperless-ngx/assets/4887959/a28230da-68b5-47b1-b98b-6687c2eb134b

denilsonsa commented 7 months ago

@shamoon Have you tried Firefox? (I haven't tested Chrome yet.)

shamoon commented 7 months ago

I will fix the lowercase e thing, but in general this is a bit... much and Im not going to pick through it word-by-word to separate them out etc as you suggest.

Theres always room for improvement, you can open a PR or change request(s)

denilsonsa commented 7 months ago

And sometimes it even fails while saving, when the UI is clearly showing the correct data:

image

I checked the devtools, and the request had:

…,"custom_fields":[{"field":1,"value":"eur28.04"}],…

And yet, the response was:

{"custom_fields":[{"non_field_errors":["Must be a two-decimal number with optional currency code e.g. GBP123.45"]}]}

There was even one moment I typed down some number and it threw away the cents.

I cannot promise I'm going to investigate this further (lack of time for side-projects). It feels like the monetary field JavaScript component is buggy. Might be worth having a test page specifically for it.

denilsonsa commented 7 months ago

On a quick test on Chrome, it is less buggy. The typing of characters is less infuriating. Which sounds like the JavaScript code is buggy on Firefox (and possibly other browsers).

My system:

shamoon commented 7 months ago

Also, a suggestion in general is to make your bug reports about 95% less sarcastic, it's very off-putting. Also shorter. Again, feel free to offer a PR or open other change requests.

I have a fix for the lowercase thing, which is same reason it fails to save in that example above.

denilsonsa commented 7 months ago

I checked the devtools. I got many Error: NG02100 while interacting with the Monetary field. (Firefox)

Also, a suggestion in general is to make your bug reports about 95% less sarcastic, it's very off-putting.

I'm sorry. I was extremely frustrated. I'm also a developer, and I definitely don't want to inflict bad feelings on anyone on the receiving end of a bug report (or on anyone else for that matter).

I tried to be descriptive of each of the steps I took, and I tried to express my thoughts. I tried to make it like "user testing", where someone observes a user using the product. The intention was never being sarcastic, but just to show how a "fresh user" (me) would think and would interact with this new(-ish) feature. (Sidenote: long-time paperless user, but first-time custom-field user.)

Also shorter. Again, feel free to offer a PR or open other change requests.

I have no experience with Angular, and sadly I don't think I'll have time to investigate it in the foreseeable future.

shamoon commented 7 months ago

Thanks for clarifying. I’ll play with it in Firefox, surprising to me there would be significant differences, perhaps it’s angular quirkiness which does happen

denilsonsa commented 7 months ago

This (new) sequence of steps is also buggy for me:

  1. Add a new (empty) monetary field to a document.
  2. Double-click on the Currency field.
  3. Replace it with EUR (this time, all upper-case, because I'm not running your lower-case fix yet).
  4. Now click on the x close/delete button of any tag.

What happens: the tag is correctly deleted. But somehow the EUR text is gone.

If I first remove the focus by going somewhere else, and afterwards delete a tag, it behaves as expected.

(EDIT) Could this be related to the several if(focused) conditions in the source-code? Would it make sense to remove those conditions? Would it make it more robust? (Just an idea that may be worth investigating.)

github-actions[bot] commented 6 months ago

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new discussion or issue for related concerns. See our contributing guidelines for more details.