dlsite-manager icon indicating copy to clipboard operation
dlsite-manager copied to clipboard

App UX/UI improvement ideas

Open matsumurae opened this issue 8 months ago • 0 comments

Heyo~

I would like to drop some feedback on these parts, since it's some of my skillset. It's ok to close the #15 and use this instead.

"About" app

Add "About DL Site Manager" opt on the topbar/menu. This will be the place to put the Github, username, etc. instead of being on the header (where it's now). This is the most common and standarized for apps. That means remove this header:

Captura de pantalla 2024-06-12 a las 13 53 42

Settings

Add a "settings" icon on the top bar, this way it'll be easier to find for a non-techy user instead of being only on topbar. See how OwlOCR does this:

Captura de pantalla 2024-06-12 a las 13 52 49

Do a settings with tab display, meaning you'll have a "General" where it'll be the download path, "Account" where you can add in your login. Not sure if there's any more settings that I forgot.

Captura de pantalla 2024-06-12 a las 13 55 10

Layout display

It would be interesting to have a list/card display. Option to display in a list (like now) or 2 cards (one beside the other).

Another option would be to display in groups. Like, you have 2 Voice, 2 Manga. Instead of displaying all, Voice and then follow Manga, another option can be to display a heading to separate each category. (like this one)

Like you use tags with diff colors for each product type, combined with this idea you can use a diff color card (in a subtle way) to differentiate visually in a fast view. I know you can check the tags, but just compare the two: if display the color in a more big size, the user can filter faster while scrolling. So, if you don't want to add headers, this can be a good option too!

Buttons

It's hard to read the download popup when it's the bottom product, if you have too many.

338950666-0bb71c18-0919-4732-ad33-298028d6d940

Filters

Search bar

It can be useful but at the same time, filters can be more powerful here. I would make it smaller and place the filters on the right side (like this).

From my perspective: order can be replaced with a simple icon, meaning less space (you can still use a select and display inside "A-Z", "Z-A", "Newest", "Oldest", "Old purchase"…

That means, you have three filters: Age, Type, Download. Again, I will remove the "Download" and use a good view to display this on the list instead. Two filters + order can fit with the search bar and it'll still be readable.

Product type

Since I've said about the headings, this will be where it'll be removed… When you filter. Here's two ideas:

  1. Not sure if it's possible but, it would be interesting to display only the product types you own. I only have 3 but I have available all the filters.
  2. Combined with the previous, instead of showing it in a select, display in tabs. It'll work as a filter, but approach in a different view. (Check this or this)

Order

Speaking of order, I would just add the famous "up/down" icons at the right of the search bar. Also, it'll be useful to display the sort type (I guessed it's by purchase, but why not have a name order?). That means, it'll be better to have a select with a text inside to help user understand (like this).

Age filter & product

Well, I think it'll be better to have the option to filter multiple options instead of one. Say, I want to see "All ages", "R-15 ages", "Game" and "Adventure". Right now it's impossible. I would approach it with a multiselect, with a visible tag (instead of label + select) and an easy way to display all the selected filters. You can display them on the multiselect OR, what I think it fits better this, would be to place the filters on top of the list / card display (just in the middle of filters and list). Add in a "Showing products with X, Y…" so user can get a feeling of what's filtered.

Download

Instead of a filter, display it on the list. It's already displaying on the button, but that's not enough to show the user that the product it's already on the pc. Simple solution will be to display the list / card in a diff color (call it yellow), just a subtle border will be enough. With a alt text (can be on the left or right side) same way as tags are now, the user will have clearly which products are already downloaded.

Some extra info

I'm not sure if it's possible but right now, the user doesn't know how much the product weight. It'll be a good idea to add the MB size so you know before download.

Sorry for the long issue, I'm sure I've left some things but now it's what I've seen.

matsumurae avatar Jun 12 '24 12:06 matsumurae