Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Enhance the category search and filter mechanism and UI to allow user act faster on the information provided there #421

Open
4 of 6 tasks
baraeb92 opened this issue Jul 25, 2021 · 5 comments
Assignees
Labels
design General look and feel of the website enhancement New feature or request epic A master issue thread which contains other smaller issues hacktoberfest Issues for Hacktoberfest help wanted Extra attention is needed ui User Interface ux User Experience

Comments

@baraeb92
Copy link
Collaborator

baraeb92 commented Jul 25, 2021

Description

The current new UI for the province database creates several problems from the user's POV:

(1) By hiding the filter within the filter button, makes the functionality less obvious, and the current design is also less intuitive for users because there's no submit category button, only dismiss.

(2) Clicking enter on the search bar also send the user to the filter function instead submit the search query (which is not what the user's intended action)

(3) There's no quick way for the user to act on the action

See the current page design here: https://www.wargabantuwarga.com/provinces/bali-23

Implementation Model

As we change the outlook and strategy for WBW website to only use hotline as last resort for more scalable operations and better triage of problem, we need to put user's needs above the internal operational needs, thus might need to change the way we see how some features implemented on this page. (ie Salin features)

Tasks

  • Remove the reset and sorting filter from the page Revert filter & sort ui #417
  • Show the location and category filter on the page rather than hiding it within the filter button, also make sure that the location filter is showing the value of the province when the user already selecting provinces. (ie if the user is looking at Bali database, then by default the location filter should show Bali instead of "Semua") Revert filter & sort ui #417
  • Change filter button to search button instead, when user clicking enter on search field submit the user keyword query instead of going to filter page. Revert filter & sort ui #417
  • Refactor Mobile Search Form #444
  • Change the Salin button to Chat WhatsApp and Buka Peta button
  • Add copy text or salin functionality as an icon after the address and phone number text. (if possible add text "Click untuk mengcopy" when the user is hovering at the copy button, see tooltip)

Screen Shot 2021-07-25 at 22 01 42

Screen Shot 2021-07-25 at 22 02 00

A related issue here: #420

@baraeb92 baraeb92 added the enhancement New feature or request label Jul 25, 2021
@baraeb92 baraeb92 added this to the Further Optimizations milestone Jul 25, 2021
@baraeb92 baraeb92 added design General look and feel of the website help wanted Extra attention is needed ui User Interface ux User Experience labels Jul 25, 2021
@baraeb92
Copy link
Collaborator Author

Related issue: #420

@resir014
Copy link
Member

resir014 commented Jul 25, 2021

@baraeb92 I'm re-posting the rationale behind the UI change for the filter @zainfathoni and I did from the Slack over here.

The reason we decided to tweak the search and filter UI is because we had to make room for implementing a virtualised list for our /provinces list (#125). This is an important change performance-wise, since the bigger the number of lists that gets rendered on the page, the heavier it is on the user's load. However, this comes with a downside - for this to work, we had to implement static scrolling (that is, only the virtualised list gets scrolled), otherwise we would have double-scrolling, making the UI very janky indeed.

However, the current filter UI takes up 2/3 of the screen, meaning this will happen. #134 (comment)

TsFutXXxyx.mp4

I'm okay with reverting the UI back to the previous one, as long as we could find a way to make the filter option take less space. In case we need to make further performance improvements in the future, we need to make this feature ready.

@baraeb92
Copy link
Collaborator Author

baraeb92 commented Jul 25, 2021

Noted, thanks for the context @resir014 yes, the previous design can be improved as well.

I already attached the wireframe to be used as consideration for the next enhancement.

I believe the new design can help, because it actually take the same vertical space as your implementation, maybe just a bit more.

But definitely not as big as our previous implementation.

This I think a good compromise between usability and screen real estate.

@zainfathoni
Copy link
Member

zainfathoni commented Jul 25, 2021

Change the Salin button to Chat WhatsApp and Buka Peta button

I have a few concerns about this:

  1. Not all numbers are WhatsApp-able, e.g. fixed line, are we sure to make them always to be linked to WhatsApp?
  2. Some phone number fields contain multiple phone numbers, os it's much more complex to provide that functionality rather than a simple Salin button

Example: https://www.wargabantuwarga.com/provinces/dki-jakarta/arnez-de-lourdez-122

@baraeb92
Copy link
Collaborator Author

I'm open for alternative solution.

Alternatively we can keep the salin for phone number as it is but making sure that when user click on the phone number it will prompt call to phone number instead.

And for data that has multiple phone number we can use comma to seperate each of them maybe with dedicated line instead? @zainfathoni Screenshot_20210726-094330_Contacts.jpg

@zainfathoni zainfathoni added the epic A master issue thread which contains other smaller issues label Jul 26, 2021
@zainfathoni zainfathoni added the hacktoberfest Issues for Hacktoberfest label Oct 13, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
design General look and feel of the website enhancement New feature or request epic A master issue thread which contains other smaller issues hacktoberfest Issues for Hacktoberfest help wanted Extra attention is needed ui User Interface ux User Experience
Projects
None yet
Development

No branches or pull requests

3 participants