search

frzyc / genshin-optimizer

An Artifact optimizer for Genshin Impact.
https://frzyc.github.io/genshin-optimizer/
MIT License
768 stars 225 forks source link

Convert multi opt interface to a horizontal scrolling interface #1727

Open nguyentvan7 opened 5 months ago

nguyentvan7 commented 5 months ago

Fixed width columns for each hit and a horizontal scrolling interface will provide more visual separation and clarity to each hit. Each column being a fixed width will naturally allow users to see where one DMG instance begins and ends visually. Compared to right now where a DMG instance can be infinitely long due to the bonus stats.

Horizontal interface is also more similar to TC sheets that some users are familiar with

frzyc commented 5 months ago

Although I understand the reasoning for this suggestion, in a UX perspective, our UI tend to overflow in the Y direction, and for a low-effort mobile compatible layout, it is probably easier for targets to flow vertically.

nguyentvan7 commented 5 months ago

It can flow vertical for mobile only, at worst. Though I don't see why mobile can't have horizontal scrolling

frzyc commented 5 months ago

flowing vertically for mobile only is extra effort. I am just saying for MVP flowing vertically is probably easier.

nguyentvan7 commented 4 months ago

image image

Here is a mockup Highlights of this design:

  1. Targets are horizontally placed, which is much more akin to a "timeline" view (maybe for timeline buffs later??), and is also much more familiar for TC'ers migrating from sheets. This should also translate to mobile well, I am guessing you will see 2-3 targets at a time. The compressed targets view is also much easier to parse a rotation
  2. Only one target's context is displayed at a time. This reduces noise for the user and helps focus things down, and also helps with our re-render/lag issue when all these fields, opt-target slector, etc are rendered all at once (#1962)
  3. Per-target notes (#1726) multi, for including details about the buffs/where they come from or whatever else you might want to say
  4. Tooltip for each target to show the description of the individual target without having to click it. We should consider having a dedicated hover element for the tooltip, rather than the whole target, so as not to interfere with DnD and clicking the target. Maybe an [i] icon in the top right

Since this will be the first major horizontal scrolling component, we should add hints for the user, such as the right-facing chevron in the scrollable list if there are more targets, and the scrollbar below the scrollable targets

DnD support for moving the targets around would also be nice, but not needed in 1st iteration

A button that appears on-hover between targets to add a new target in that place would be nice, but not needed in 1st iteration