UI/UX Improvement of Task Details Page

[ardourApeX]

Description:

Currently, the UI & UX of the task details page on the status site does not seem to be satisfactory. It lacks in terms of UI, UX, and feature accessibility.

Complete Requirements:

Here are some of the issues that may be intuitive in nature, but they do exist.

1. A user has to type both the key and value to search. For example, if I need to search for tasks assigned to a person named Alice, then I would need to type assignee: Alice.

   The more we allow users to type, the higher the chances of mistakes, be it in spelling or syntax for searching. It would be better if we ask the user to type only the value, and based on the value, we can suggest its key.

2. Allow loosely typed searching for titles.
3. Allow users to search for someone's task by their name, not just through their username.
4. Fix the UI and UX of the filter. It should close if someone clicks outside, and it should be aligned just before the filter option.

Current UI Possible UI

Phase 1

Design Doc

https://docs.google.com/document/d/1dIuMmbccVzpnkvVbjWGRK-DMyD1TuvvggnuBvS6oYeA

Requirements

• Create a custom component for search bar which implements multi-select search (ref: tags section) or publish a custom package for the same (I’ll be doing this parallely).
• Fix styling of filters dropdown
• Prepare a doc for the implementation, cost, etc to implement fussy search in firebase.

Phase 2

Requirements

• Allow loosely typed searching for titles
• Title & assignee suggestion through backend, based on user input

[vikhyat187]

Hey @ardourApeX the first one, is that done by fuzzy search?

[prakashchoudhary07]

@ardourApeX, For search in the input box, by default, it should be task search, and if the assignee is typed then the users search takes place, based on the applied filter the suggestion is given, or else its default task We also show the suggestion for the filter keys also? Can we do this?

[ardourApeX]

Hey @ardourApeX the first one, is that done by fuzzy search?

• The first one can be implemented using hard-coded logic. For example, if a user is typing, then we can show all the possible keys that have not been selected by the user yet. Suggesting names in there can be implemented using fuzzy search.
• For the second one, fuzzy search can be implemented. Although Firebase does not have any built-in features for that, we may have to use third-party services.

[ardourApeX]

@ardourApeX, For search in the input box, by default, it should be task search, and if the assignee is typed then the users search takes place, based on the applied filter the suggestion is given, or else its default task We also show the suggestion for the filter keys also? Can we do this?

I'm not sure if I understood your question correctly, but based on what I understand, here is my answer:

The purpose of showing suggestions here is to minimize errors. The more we ask the user to type, the greater the chances of errors. To overcome this issue, I thought of auto-completing the key part based on the typed value. It will involve hard-coded logic since we have a limited number of keys.

As per my understanding, we use the key for status and assignee, but not for the title. However, to make it more consistent and understandable in the UI, I thought of adding a title key as well.

One thing we can do for the UI purpose is to have a title key and keep the API calling structure the same as before. So that the functionality will remain the same for each use case.

[bhtibrewal]

can you share, how will this be scaled if we have more fields in the future, also can you state the technical aspects of how we are going to achieve these functionalities

[ardourApeX]

can you share, how will this be scaled if we have more fields in the future, also can you state the technical aspects of how we are going to achieve these functionalities

Here is the POC I did. It is not completely implemented but may depict the actual implementation.