search

decidim-archive / design

⚠️ [DEPRECATED] Design of the Decidim framework
1 stars 3 forks source link

Progress bar #164

Closed Xfolchf closed 6 years ago

Xfolchf commented 6 years ago

Add progress bar for those proposals/iniciatives that have a thresholds of requiered suports/signatures

javierarce commented 6 years ago

Hi, @Xfolchf. I'd need more a bit more context to start working on this issue.

Are you referring to the bar that appears under the supporters on this type of card, right?

screen shot 2017-12-01 at 11 12 22 screen shot 2017-12-01 at 11 23 50

Does it appear elsewhere? Could you give me more details about it? Thanks!

javierarce commented 6 years ago

Here's our proposal for the progress bars:

progress

I'm not familiarised enough with the specific writing tone of the site, so the texts under the bars are more a placeholder text than a final message.

I'd imagine we'll end up having several breakpoints (maybe: 0%, 25%, 50%, 75%, and 100%) inside the bars that will present different opportunities to engage with the users through the messages below.

Please, let me know what you think @decidim/product.

xabier commented 6 years ago

Nice work @javierarce !

We need to distinguish 2 types of progress bar.

  1. Absolute: the proposals and/or initiatives need to collect X number of supports a. The proposal cannot accumulate more than X supports b. The proposal can pass the minimum requirement and keep accumulating supports
  2. Relative: N number of proposals will pass to the next phase or stage (so the number of supports required is relative and variable)

We are currently working on the "absolute progress bar" (1.a) functionality as an MVP. And your design is perfect. I very much like the text bellow the bar.

Two improvements come to my mind:

  1. Remove the color
  2. Add some kind of mark to the progress bar indicating the steps you describe with text and color

I am not sure the color helps, I don't have a strong opinion on this, but terminating in red might cause confusion? red is generally associated with forbidden or failure.

arnaumonty commented 6 years ago

Remember that we have #155 related to this.

javierarce commented 6 years ago

Here's a little rework on our proposal for the progress bars with N supports:

We tried a version of the bars showing marks to indicate the number of steps, but when the required amount of support was high it added a lot of noise to the cards. Also, the labels (45/500, 10/100) shows the same information and it's easy to interpret.

progress_bars

xabier commented 6 years ago

nice one @javierarce looks great to me

Crashillo commented 6 years ago

PR decidim/decidim#2437