UX Suggestions

[mozzarellathicc]

Visually, I think this is the best looking dex around. There are still some significant improvements that can be made to user experience, though.

Approach 1 (Screen Sizes >992px)

Issue

The sidebar is competing with the Pokemon list rather than working with it.

• There are two primary input/interactive areas.
  • Area 1 is the sidebar, and this is where all the important options are. Users' attention should go to this first.
  • Area 2 is the Pokemon list. Users attention should go here after they have interacted with the primary input element.
• The header is located on the top of the Pokemon list. It grabs attention first. The search bar below it is functionally the same as the one on the sidebar. These increase cognitive load.
• The whitespace creates too much of a disconnect between the sidebar and the list.

Potential Solution

• Remove the whitespace on either side of the Pokemon list, so it touches the sidebar. Then, remove the shadow from the sidebar.
  • Apply a max width to the base stats in the Pokemon modules in the list so they don't stretch out on wider screens.
• Replace the PokeDex heading from the sidebar with the header from the Pokemon list.
• Remove the redundant search from underneath the header (keep the one in the sidebar).
• The sorting bar can move to the sidebar or stay up above the list, fixed to the top of the screen.
• Apply a clamp(24rem, 15.448rem + 13.793vw, 32rem) to the sidebar so it better maintains the sidebar:list ratio.

Reasoning

• Removing the whitespace between the list and the sidebar strengthens the association between the two components. Removing the shadow helps marginally helps legibility, but mostly makes them look connected.
• The PokeDex heading is redundant and distracting. Replacing it with the primary header (Emerald Imperium Online Dex) will bring users' attention to the sidebar first, which is where the important interactions are.
• Having only one area for primary interaction greatly reduces cognitive load and makes the experience feel much more cohesive.

Misc. Suggestions

• Add a "Type" label to the typing filter (use the same styling as the abilities one, this is just a quick screenshot edit lol)
  
• List the active filters below the sort bar instead of above
• Include a github icon with a link to the EI dex github
• Move the save upload icon from the shiny and shuffle icon box to the right of the text that says "Upload a save to use the randomiser"
  
• Add a tooltip or something to explain what the shuffle icon does. Clicking it doesn't do anything, and I'm not sure what the functionality is.
  • If it's related to the randomizer, gray it out/lower opacity and make it non-interactable unless a randomized save is uploaded
  • https://github.com/user-attachments/assets/d20211ad-f806-4d31-ab82-5943a1f15b39

Unfortunately, most of these aren't changes I can make. Tailwind isn't something I use or have time to learn.

[mozzarellathicc]

Approach 1 (Screen Sizes 992<)

This one isn't as involved or detailed, but...

• I'd strongly suggest collapsing into one full-screen column below 992px. It fixes most of the responsive issues, and my PR should fix the overflow issue on smaller screens (hopefully).
• Instead of having the filter menu pop up on top of the screen, have it slide open beneath the search bar.

[izrofid]

Wow this is detailed. I agree with most of this. The reason for the PokeDex heading rn is that eventually there are more dexes planned (the DexNav, a MoveDex and maybe even a TrainerDex).

Check https://nav.emeraldimperium.net . Very much a wip though.

As for the duplicated search bar, I was actually thinking of turning it into a unified search bar (though this idea is definitely undercooked rn).

I agree with the shuffle button. It's meant to enable the randomizer when a save is uploaded. I do need to make it more obvious what it does .

[izrofid]

Approach 1 (Screen Sizes 992<)

This one isn't as involved or detailed, but...

• I'd strongly suggest collapsing into one full-screen column below 992px. It fixes most of the responsive issues, and my PR should fix the overflow issue on smaller screens (hopefully).
• Instead of having the filter menu pop up on top of the screen, have it slide open beneath the search bar.

So like instagram comments on mobile?