Page MenuHomePhabricator

🛠 Tech | Generalized progress bar design
Open, Needs TriagePublic

Description

With this story dev and UX wants to develop one responsive banner design for all platforms & screen sizes that also encodes a all patterns of where and if to display labels depending on screen size and progress level.

Caveat: This is not about visual design, but about arranging boxes, so any color, font… should not be hard coded.

Definitions:

  • DaysLeft: e.g. "Noch 23 Tage"
  • MoneyIs: e.g. "3.2Mio"
  • MoneyPending: e.g. "Es fehlen 10Mio"

there are 7 areas with limited space:

  1. Bar (the growing bar itself)
  2. Bar space remaining (the space right of the bar)
  3. Above bar (the space above the growing bar)
  4. Above bar space remaining (above the space right of the bar)
  5. below bar (the space below the growing bar)
  6. below bar space remaining (below the space right of the bar)
  7. FullBarSpace (the full width)

Here is where the elements should be:

  • MoneyPending: Show in Bar space remaining, right aligned. If there is not enough space, show above space bar remaining. If shown above bar space remaining, there will be a right aligned pointer, starting below the label, going vertically and ending in the Bar Space remaining,
  • MoneyIs: Show in bar space remaining, left aligned. If there is not enough space, show in bar, right aligned. This, if needed, overrules space needed for DaysLeft (pushing it to AboveBar).
  • DaysLeft: Show in Bar, left aligned. If there is not enough space, show above bar. If there is not enough space above bar (because Money pending it taking almost all the space already) show below bar, still left aligned

Examples:

other styling (note that the rounded corners effectively shrink the usable area for text!)

Notes:

  • Show above could also be below; this does not matter much
  • For space saving reasons, we might want to have a switch which just discards elements that do not fit in the bar (instead of displaying above)
  • There should be 4 colors that can be set independently: bar space color, bar color, font light, font dark (which is also the color for the pointer)
  • It makes sense to consider that the bar space might get a border
  • It makes sense to consider that either/and bar and bar space might get rounded corners in some designs. In this case the rounded border area needs to be subtracted from the usable area.
  • We need few build in styling, but labels should not be shrinkwrapped, but have min 0.2em padding to the next element, less makes no sense.

illustration of the behavior (e.g to derive unit tests), not design-accurate.

Event Timeline

chrp created this task.Oct 28 2019, 11:06 AM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptOct 28 2019, 11:06 AM
Restricted Application added a project: WMDE-FUN-Team. · View Herald TranscriptOct 28 2019, 1:41 PM
chrp renamed this task from Generalized progress bar design to [Tech] Generalized progress bar design.Nov 4 2019, 12:29 PM
chrp updated the task description. (Show Details)
chrp updated the task description. (Show Details)
chrp claimed this task.Nov 4 2019, 12:31 PM
chrp renamed this task from [Tech] Generalized progress bar design to 🛠 Tech | Generalized progress bar design.Nov 4 2019, 4:16 PM
chrp reassigned this task from chrp to Jan_Dittrich.Nov 4 2019, 4:22 PM

@Jan_Dittrich is this done or do we need to discuss anything? In about 1 or 2 weeks we will get to the point, when new info ("Nur noch x Tage") and new positions (remaining sum out of the progress bar) will be introduced.

@Jan_Dittrich Can you give a status update on this?

Jan_Dittrich updated the task description. (Show Details)Dec 4 2019, 11:09 AM
Jan_Dittrich updated the task description. (Show Details)Dec 4 2019, 11:14 AM
Jan_Dittrich updated the task description. (Show Details)
Jan_Dittrich updated the task description. (Show Details)Dec 4 2019, 11:21 AM

proposed solution in ticket.

Jan_Dittrich updated the task description. (Show Details)Dec 4 2019, 12:22 PM
Jan_Dittrich updated the task description. (Show Details)Dec 4 2019, 12:59 PM

one thing I am not sure about is the fixed position of the pointer on the right. In some cases in which the "remaining sum" is out of the progress bar the pointer on the right would have enough space for a more visible position.

It could also be always in the center of the remaining area or at the 3/4part of the remaining area. It just is easier to build when it has a fixed position. Devs can also take this apart and estimate pointer position adjustment separately.

Jan_Dittrich updated the task description. (Show Details)Dec 5 2019, 2:25 PM
Jan_Dittrich updated the task description. (Show Details)
Jan_Dittrich updated the task description. (Show Details)Dec 5 2019, 2:43 PM
Jan_Dittrich updated the task description. (Show Details)
Jan_Dittrich updated the task description. (Show Details)Dec 5 2019, 2:45 PM
tmletzko added a comment.EditedDec 23 2019, 11:25 AM

we used to have a final campaign hint on the last day of the campaign in the progess bar (instead of "Nur noch 1 Tag"). We might think of a way to include this on the final day

Because of its length, the sentence "Heute ist der letzte Tag unserer Spendenkampagne" breaks the above definitions. In lower screen widths, the sentence needs two lines and would not fit into the progress bar. It can, of course, be positioned outside of the bar. @Jan_Dittrich?

"Heute ist der letzte Tag unserer Spendenkampagne" breaks the above definitions.

I guess not. The spec is a bit complex but I guessed that it is covered by:

DaysLeft: Show in Bar, left aligned. If there is not enough space, show above bar. If there is not enough space above bar (because Money pending it taking almost all the space already) show below bar, still left aligned

So the line would not break, but would be placed below (and then break, if it is still too long)

btw.: Maybe it is tested that the "Heute ist der letzte Tag unserer Spendenkampagne" is better than anything else, otherwise, it is rather verbose for UI copy and "Letzter Tag", "Letzter Tag der Kampage" might be easier to grasp and does lead to less UI problems, too.