[USERSNAP] Proposal type visuals need improvement

[dmtrjsg]

Taken at: https://dao.joystream.org/#/proposals/past Fields:

• Houston, we have a problem.: Proposal type visuals need improvement
• Comment: Position, size and color all does not work.

We are clearly seeing the title is serving he primary purpose of conveying the information, so the type information needs to be more clearly secondary in terms of attention. We still need it, because people can unwhittingly or maliciously set a misleading title.

A simple fix is to place the title a subtext under the main title, and change background color to something drawing less attention, or even consider dropping it entirely. Probably requires making each row taller also, which is fine.

• Feedback: bedeho

Download original image

Browser: Firefox 99 (macOS Catalina) Screen size: 5120x1440 Browser size: 1478x920 Open #232 in Usersnap

Powered by Usersnap.

[traumschule]

agreed. also patterns like subtle persistent type based colors will help trained members to parse the list faster, for example

• colored bubble with proposal title as text and proposal type as tooltip
• clicking type bubble filters proposals by this type
• clicking status filters proposals by this status (similar to labels)
• clicking member filters by creator etc.
• rationale is usually most important info => show below title (saves extra clicks to open preview and expand rationale)
• merge current & past tabs to avoid another extra click (use Switch with all proposals already on state for instant update)
• filters row: drop-downs are slow, user has to expand, parse, scroll, click, wait. better for example
  • floating action buttons, one per filter type with clear icons (calendar for time, head for proposer, checkmark for status, ...)
  • that expand on hover (or click on mobile): useState-based filters via buttons/segmented controls/checkbox group
  • w/o requiring extra QN request (having latest 100 proposals on state should not take too much memory / time to fetch on start)
  • mid-term: user study to determine most accepted option (by builders?)

There are probably more modern patterns but these could be implemented within a day.

I know the filter part is pretty packed, do UI designers understand what i mean?

[traumschule]

Wide tables can be a problem on smaller screens. Some fields could be hidden via CSS.

Accounts on tiled screen Only at 75% zoom all columns become visible.

Related: #1794 (moved from #3997)