In the end, I think that would be fine too. So it looks like
- For the desktop version :
- For the mobile version :
1 Like
Another version with on desktop a + that follows the scroll (otherwise I suggest leaving it smaller at the top :
And the mobile version with text to distinguish the two + buttons for adding a box/column :
Everything has been pushed.
So @pierre-gilles I confirm that you can review the 3 PRs :
2 Likes
Youâre going too fast â I havenât even had time to test your image from FridayâŠ
1 Like
For me, this + button design is the right one, but the top of the button should, in my opinion, be aligned with the top of the boxes
1 Like
I agree @guim31, I just had an issue with the visual tests when the 1st column or the column already have boxes, you kind of wonder what that is on the right⊠right? ^^ :
Any suggestions? Otherwise we can leave it like this ^^ (aligned to the box 
)
Or like in @pierre-gillesâs design with just a âč + âș in the middle of the page but if I have 3 graphs itâs already far away and you have
I donât have any suggestion right now, but Iâm not a fan of the big button
The button at the top that follows the scroll â maybe, but it ends up feeling a bit « out of context »; I find itâs not clear that itâs for adding a column
Iâll think about it!
1 Like
Yes, thatâs true, but that would mean keeping the three columns full when there are only two columns, so we lose the space gained for editing the box (which in some cases had become nice there).
Well, it works for me anyway â itâs simpler ^^
EDIT: While researching I thought⊠there probably arenât many scenarios where our exact case occurs.
For example, in âč Projects âș on GitHub, thereâs the + we were using, and I think itâs clear to everyone. The difference (I donât know if itâs the same on Trello?) is that you donât scroll down the page, but each column has its own scrollbar (which I find nice by the way, it lets you keep the headers visible ^^)
Would simply showing a description on mouseover be enough, @pierre-gilles?
If I take GitHubâs design as an example:
I find the Trello version the most intuitive and clear â you can see thereâs a column to fill, it couldnât be simpler. But itâs true that it wastes space.
Would it be possible to find a middle ground: you create that empty column, but itâs not as wide as the others?
1 Like
Ok ^^ I think itâs a shame to « waste » that space over time (because weâll learn quickly âŠ) and I donât think the information is essential at all times except to understand things at the start (hence the description on mouse hover), here is a new Trello-style proposal that can be moved to the boxes if needed (with âč sticky âș or not - follows the page scroll):
- If 2 columns are present :
or
- If 1 column is present :
or
GIF version :
1 Like
Better version in my opinion.
1 Like
Letâs say thatâs already the case with this version:
The problem is French⊠and maybe German (I havenât checked ^^) « Add column » is short, we can make a small column. But considering you need the space for all languages, « Add âč a âș column » becomes long and while weâre at it, might as well take the version with the 3rd column because weâre not far off and indeed it avoids visual movements which in this case have little point for the small amount of space gained (split between the 2 columns).
Letâs say itâs really the two-column side thatâs annoying because with one column in the end you still gain space anyway ^^
Iâm also more in favor of this proposal @Tlse-vins while adding the small description on mouseover; for me thatâs the most interesting point in terms of space.
Iâm really not super into the proposals right now, sorry 
I find that the alignments are not good, and as a result itâs not clear what the « + » button does in that spot.
Same, the « delete » button is misaligned and too big. I donât think it needs to be a button with a border.
In this kind of situation, I think we should really look for inspiration from other interfaces that work well and that have been designed by designers better than us 
For example, on GitHub Project itâs not bad:
A well-aligned « + » button, and for the delete button, just put a small neat icon at the top right of the column (like they do with the three little dots, but replacing it with a subtle cross icon).
Nothing prevents us from revisiting the column interface and framing the columns better like itâs done on GitHub Project
What do you think?
Ah Iâm totally in agreement!! If we go that way ok, because I was exactly talking about GitHub Project earlier but the titles of the cards are inside the card, so the proposal was the same but with our interface (button aligned with the column title).
For the rest we still need to take into account that our need is not the same as in Todo lists:
- our column names are not editable and donât need to be, they are clearly defined.
- we have a limited number of columns so this button no longer makes sense once the maximum is reached
- need the trash can nearby because itâs clearly the feature that requires it.
But Iâm up for the proposed interface change. So if we go with:
- a card bordered by the column,
- a scroll to the column cards which we limit to the window height,
- then a scroll within each column,
- if 2 columns are displayed a + on the right to add a column aligned with the column cardsâ title (but in that case it will be the same design as currently)?
If thatâs not what you have in mind, send me a mock or weâll call, whatever you want ^^
Apres sincerement, ça :
And what I put just above is exactly the same thing. The only thing that differs is that our design doesnât frame the card with the columnâŠ
Then we can add the three little dots to delete the column and stick the column name to the left and the add-box button in the same place, but that has nothing to do with the + for adding a column.
1 Like
I wasnât necessarily thinking of making such extreme changes, knowing that if we want to do it like GitHub, itâs still a fairly custom design thatâs hard to achieve with the elements available in the theme (cards inside cards donât look good at all).
I was more thinking of trying to refine the design you made with subtle changes.
What shocks me here isnât the functionality (yes, it works very well!), but the visual result which isnât great
â The « + » button isnât aligned, it doesnât look good
â The trash icon is a button and isnât aligned, it looks huge
I donât have the answer to what should be done; design is iterative â you find it by doing
1 Like
I understand
Actually I grabbed it from GitHub for this one ^^ I aligned the top of the box, but indeed, without the box around « Column x » it can be jarring ^^
There, itâs a matter of taste and preference (but I admit Iâm
1 Like
Hi @pierre-gilles,
While waiting for a decision on the column design, could you review the PR on the binary curves first,
as well as the one about enlarging on large screens: Add expand charts dashboard by Terdious · Pull Request #2096 · GladysAssistant/Gladys · GitHub
I have time tonight and this weekend; Iâd like to work on adding several other PRs for these features that donât absolutely require the columns. These will be a split of the large previous PRs I had made and that I just closed ([WIP] - Add view charts + view charts fullscreen on dashboard by Terdious · Pull Request #2092 · GladysAssistant/Gladys · GitHub and [WIP] Add charts-history feature by Terdious · Pull Request #2091 · GladysAssistant/Gladys · GitHub):
- A PR for date range selection
- A PR for CSV / XLSX export
@Terdious Thanks for the PRs!
Iâm going to try to do that right away (Iâve got 25 minutes), itâs going to be really tight ^^ If not, I might have a small slot in the afternoon
Otherwise, my next Gladys day is Monday and then Iâm sure I can review them
1 Like
