new card layout for web and app?

[alexanderdd]

EDIT: everyone agrees that the card layout should be the same in web and app. Now, this thread is for discussing the new card layout which was created by deck developers in a hack week. It is already implemented in the app and is supposed to be rolled out to web. Some users are unhappy with the new layout.

Proposed new card layout (screenshot from android app 0.1.4)

Old card layout (screenshot from web 0.8.0)

ORIGINAL FIRST POST:
I propose to use the exact same card layout as in the web view (https://github.com/nextcloud/deck/), now and in the future.

Particular changes that are necessary:

1. wrap title of cards so the whole title is visible (see also Wrap card title to new line(s) if length exceeds width of screen #261)
2. show complete label text Show more characters for the label text #192 (I suggest to make them smaller and less high, see web view).
3. move due date to bottom left

Reasons

• People expect the cards to look and behave the same in web and app. Having differences is confusing. (Tell me a product that puts things in different places android vs web? Trello? Gmail? No, they all try to get as much consistency as possible)
• It will not clutter the interface. Usually people will have a title which is only one line, so the height in comparison to now will only be one line higher, because labels and due date will be separate lines.
• Not everyone uses labels all the time, not everyone uses due dates all the time, so most of the time the cards won't be that full anyway.
• If people need a lot of text for a card, they will put it in the "details". But if they deliberately decide to use a long title, it's because they want/need to see it. Cutting off the title violates deliberate user action and is bad UX.
• same for label text: if they need multiple words for the label, it is bad UX to cut them off.
• If a change in the card layout seems absolutely necessary, the deck team and the deck-android/ios team should make a common decision.

I heard that this is going to be discussed at the next hackweek, maybe the community can give some input/opinions here beforehand.

[stefan-niedermann]

cc @juliushaertl and @jancborchardt

I thought at the last hackweek we came to the conclusion that the web interface will adapt the new layout we defined at the hackweek?

I am still against showing the full title because we have smartphones with samller screens here. When editing, the full title is shown and on desktop we simply have much more space.

Would be nice if we three could decide a final layout here 🙂

[alexanderdd]

can you please post a link/image for "the new layout we defined at the hackweek"

[stefan-niedermann]

It's basically exactly what you can see in the android app. Avatars bottom right, labels bottom left, title top left, description in second line, menu & duedate top right.

[kbeerepoot]

It's basically exactly what you can see in the android app. Avatars bottom right, labels bottom left, title top left, description in second line, menu & duedate top right.

WIth all due respect, I think the duedate top right is absolutely a bad choice. It takes this space away from the card title, which is often hard to understand already because it is truncated when running out of horizontal space.

And 99,9% of the time I still have tons of horizontal space in the bottom left because I mostly use 1 label at a time ...

[stefan-niedermann]

The due date is on the top right because

• It only consumes space if it is set
• If it is set, it is very important, actually nothing is more important than a due date which is near or overdue, an given it should always be at the same place, it is the natural position
• Just because you only use one label, this is not automatically the case for all of our users 😉

Don't think we didn't ponder over it.

In fact there is no layout, that will fit the use-case of each user, but we had to start at a point.

I agree, that the layout should match the server, this is very important, but about everything else i have to commit that we have currently way more important issues than reinventing the card layout. With all due respect of course 😄

[desperateCoder]

@kbeerepoot what about you crate a draft of your desired card layout having everything well placed and we'll ask @jancborchardt and @juliushaertl about their opinion?

In the end we all want a nice app, but we have to find a way not to ignore anyone elses use cases. We really tried to make it the nicest we could!

Just think about it and and you will see, that this topic isn't just that easy. Make a draft and we'll see, what the main UI designer from nextcloud and the original server app developer will say. Deal?

[kbeerepoot]

Again, with all due respect :

• It only consumes space if it is set

... which is probably quite often in an app that is aiming to help people getting things done (in time)

• If it is set, it is very important, actually nothing is more important than a due date which is near or overdue, an given it should always be at the same place, it is the natural position

In my opinion the title of a card, that tells you what actually needs to get done, is even more important than the due date. I now regularly see cards with a due date in the near future where I can not see immediately what I need to get done soon.

• Just because you only use one label, this is not automatically the case for all of our users 😉

I absolutely understand that, and I am most certainly not trying to demand that things are done my way. If I make that impression on you, I am sincerely sorry. I am just sharing my experiences. It is the simpler approach of Deck when compared to Tasks that makes me choose for Deck, and not being able to immediately see the task at hand seriously impairs the usability in my opinion.

Don't think we didn't ponder over it.
In fact there is no layout, that will fit the use-case of each user, but we had to start at a point.

I would not dare, and I do understand.

I agree, that the layout should match the server, this is very important, but about everything else i have to commit that we have currently way more important issues than reinventing the card layout. With all due respect of course 😄

Again, I do understand that. I am not making demands, just stating my opinion(s).

[stefan-niedermann]

No offense 🙂 Can you do a mock-up like @desperateCoder suggested? We need the following components:

• title
• description (optional)
• overflow-menu
• labels (optional, possibility to display at least 3 + "more")
• users (optional, possibility to display at least 3 + "more")
• attachments (optional, with counter if more than one)
• duedate (optional)

We need variants for each optional case in a matrix, where e.g. labels are present, but no due date. or users are there, but no description and so on. The layout has to fit each possible combination of the given properties without changing the position. 🤔

[kbeerepoot]

@kbeerepoot what about you crate a draft of your desired card layout having everything well placed and we'll ask @jancborchardt and @juliushaertl about their opinion?

I am not very good with graphic applications, and the only thing I would like to see happen is that duedate moves from top right to bottom left.

In the end we all want a nice app, but we have to find a way not to ignore anyone elses use cases. We really tried to make it the nicest we could!
Just think about it and and you will see, that this topic isn't just that easy. Make a draft and we'll see, what the main UI designer from nextcloud and the original server app developer will say. Deal?

I have great respect and admiration for the efforts of all the people that participate in this project, because I can not program my way out of a wet paper bag, and I do understand that the topic just isn't that easy. I will therefore take a step back in this discussion for a while.

[kbeerepoot]

No offense 🙂 Can you do a mock-up like @desperateCoder suggested? We need the following components:

I'll try, but it might take a while and I'm not even sure that I can pull it off. But rest assured that I do appreciate all your efforts ...

[desperateCoder]

@kbeerepoot Point taken! And you have absolutely the right to tell us your opinion! In the end text based communication can't transport emotions and expressions that well so I'd suggest we all calm down and stay friends.

I'm kind of a potato in UI design as well, that's why I'm responsible for the sync and don't have a valuable opinion in this topic, so I just try to find a solution for our problem.

In this case I'd suggest you try to mock up a draft, no matter how long it takes. Maybe @jancborchardt could just tell us his opinion on this as well, maybe it helps you and/or us to get this solved. We have a bunch of work left and nobody would die, if this isn't solved the next week's or months.
So take your time and as soon as you have a suggestion, we can talk about it.

[alexanderdd]

What was the problem with the old layout? (Which is still in use in deck web view) The only problem I see is that the full title should be visible during editing (nextcloud/deck#865). Details should be in details view IMHO, not on the card.

If you guys have a long discussion and make a decision at a hack week, it would be good to document it and publish it somewhere (blog, or help.nextcloud.com)
Does it exist? If not, it would be good to do it next time.

Also, I suggest that changes like this should be rolled out in app and web view at the same time. Users should always find the same layout in app and web. Agree?

[stefan-niedermann]

No, there is in fact no documentation. We will try to do it better next time and work on our communication. At the time of thr last hackweek we did not publish the app at the Play Store and the F-Droid version was an early alpha preview - We didn't even thought we had real users at this time.

Disclaimer: We are not working for or are directly related to Nextcloud, this is a freetime project from volunteers 😉 That's why communication is not always that easy.

Also, I suggest that changes like this should be rolled out in app and web view at the same time. Users should always find the same layout in app and web. Agree?

Absolutely agree that this should be the case (as long as it makes sense regarding the different environments desktop/mobile) 👍

We take your feedback serious though and will discuss the layout at the next hackweek again with the Nextcloud guys.

[jancborchardt]

In general, let’s take things step by step. One big issue with a lot of things will just overflow with different takes on things. :)

So let’s start with what @kbeerepoot said:

the only thing I would like to see happen is that duedate moves from top right to bottom left.

I do remember we also talked about that at the hackweek @stefan-niedermann @desperateCoder and we just decided to go with the placement in the top right for now.

Looking at the screenshot in the readme for example, bottom left would actually be quite a fitting position for the due date. Avatars are already nicely overlaid, labels are truncated – that is the space for "metadata". I’d say it’s worth trying out moving the position of that so the title always has enough space.

[alexanderdd]

I changed the title and edited my first post, please have a look.

Is it possible to move this issue to https://github.com/nextcloud/deck/ ? I think it should be discussed there because this is a big decision in where Nextcloud Deck is going, and the people at Nextcloud Deck should be able to see this discussion. If it is not possible to move I will create a new thread over there and close this one.

I disagree with "taking it step by step" and talking only about "moving due date from top right to bottom left.". This issue is for discussing the whole card layout. A decision to completely restructure the card layout has been made at a hack week. For me, the new layout is a big step backwards in many ways concerning UX. If you wanna change something, you need good reasons imho. I would like to know:

What are the reasons for the new layout? In particular:

1. Why move the due date from bottom left to top right? (has already been answered in new card layout for web and app? #298 (comment) but people disagree, see above. Seems like we agree to put it back where it was).
2. Why display only one line of the title? (If people need a lot of text for a card, they will put it in the "details". But if they deliberately decide to use a long title, it's because they want/need to see it. Cutting off the title ignores deliberate user action and is bad UX.)
3. Why shorten the labels to two letters? (same UX problem as with title, see also Show more characters for the label text #192)
4. Why change the colour of metadata area from grey to white?
5. Why display the first line of the description instead of "has description" icon with tooltip?

for easy reference:

I am writing all of this because I care a lot about Nextcloud, Nextcloud Deck, and UX. I think this can become THE productivity tool of the masses, so we need to make a great product.

[desperateCoder]

@alexanderdd I don't know if we can move this there, but I'd ask in general: @juliushaertl @jancborchardt are you willing to discuss this in generally (again)? As far as I can tell, @juliushaertl is about to implement the frontend (porting to vue.js) and more features, I don't know if he'd like to reconsider this right now.

[stefan-niedermann]

I adjusted the layout to what i can see in the (not yet released) alpha version of the deck app.

Basically compared to the latest released version of the Deck app the following changes were made:

• Labels have now their own row
• Labels will not be cut off after 2 characters
• Duedate will be moved to the bottom left

Personally i think that's one huge mess (in german we say it looks like "Kraut und Rüben" 😄 ). All the important information are flooded by the huge presence of the labels, the duedate can easily be interpreted as a label and gets lost though, especially if it's red, it should be the most prominent item.

So, let us know, what you think about the changes and how they feel in reality.

1	2	3

[kbeerepoot]

Just my two cents :

So, let us know, what you think about the changes and how they feel in reality.

• In my opinion the labels did not necessarily need their own row, but of course they do if they will not be cut off after two characters;
• I was OK with the labels cutting off after 2 characters, especially because I'm more oriented towards the colour of the labels than towards their actual text;
• I'm very happy with the duedate going to the bottom left, but could also very well live with the labels on the same line as the duedate if the labels would still be cut off after 2 characters.

Thanks for all your efforts !

[stefan-niedermann]

So we definitely need to make the duedate more distinguishable from the labels if we place them in the same area. Maybe by placing an icon of an alarm clock next to it? @jancborchardt

[alexanderdd]

1. In the old version, labels were very easy to distinguish from due date because of the smaller height, I think that is very smart design/UX. In the screenshots of the app (see above) the labels are even higher than due date. Big labels only make sense if you can click/tap them to interact with them, which is not the case, they are purely informative, so they can have a small height. And/or use a label symbol at the beginning.
2. Also it's a great idea to use rounded edges for labels and sharp edges for due date, which was used in the old version and which does not seem to be implemented in the alpha version of Deck Web.
3. I think labels should totally have their own row. Some people will not use labels at all, or use a label here and there, so it will not steal space. And if you use a lot of labels, it is even more important that they have their own row cause it will become cluttered otherwise.
4. App screenshot above is missing the calendar icon in due date (alarm clock icon is not good).
5. Probably there is a Nextcloud-wide guide whether a three-dot menu should have the dots vertical or horizontal? Everyone should stick to that.

Apart from that, I think both web and app plans look amazing!

Still waiting for a reply by @jancborchardt @juliushaertl if they are ok with discussing this in https://github.com/nextcloud/deck/ - to me it feels really bad to have this discussion in a hidden room at the back of the club.
Maybe we should even do a survey on help.nextcloud.com to get feedback from the community once we agreed on a layout? For example ask for (censored) screenshots of boards people actually use, so we can see for example if people use a lot of labels. I could help with that.

I am so excited we are shaping the productivity tool that thousands of people will use to get stuff done =)

[jancborchardt]

Sorry, I was out of commission because of travel last week.

I’m not going to read through every single thing because @stefan-niedermann summarized it quite well and the screenshots show it clearly: It’s a whole mess.

Right now, the Android app is the standard when it comes to the interface of the Deck app as this is the last we discussed. Yes we should sit together again, but we won’t question everything again. We are at a reasonably good spot, now we move step by step.
→ And moving the due date to the bottom left is a first good step.

---

Why move the due date from bottom left to top right? (has already been answered in #298 (comment) but people disagree, see above. Seems like we agree to put it back where it was).

Yes, this is agreed, so why bring it up again?

Why display only one line of the title? (If people need a lot of text for a card, they will put it in the "details". But if they deliberately decide to use a long title, it's because they want/need to see it. Cutting off the title ignores deliberate user action and is bad UX.)

This can also be done.

Why shorten the labels to two letters? (same UX problem as with title, see also #192)

This is illustrated fairly well by @stefan-niedermann’s screenshots.

Why change the colour of metadata area from grey to white?

Because the grey background looks quite dated.

Why display the first line of the description instead of "has description" icon with tooltip?

Because tooltips are really not obvious. First line of description gives way better context and directly shows what’s there.

[juliushaertl]

Why display only one line of the title? (If people need a lot of text for a card, they will put it in the "details". But if they deliberately decide to use a long title, it's because they want/need to see it. Cutting off the title ignores deliberate user action and is bad UX.)

This can also be done.

What do you mean with this can be done? 😉 I generally agree that the title should not be cut off.

Why shorten the labels to two letters? (same UX problem as with title, see also #192)

As mentioned in #192, I really think labels are a key component in organizing cards, so cutting of is removing important information here.

Because tooltips are really not obvious. First line of description gives way better context and directly shows what’s there.

Personally I don't see much value in showing the first line of the description, I would even argue that we could remove the description indicator icon in the web app, since that only helps if you use it with the tooltip.

Regarding the duedate I think that makes totally sense to move it to the top right as it is currently done, I just didn't remember that discussion when rewriting the web ui for Deck 1.0, so I'll see if we can adjust that.

[kbeerepoot]

What do you mean with this can be done? 😉 I generally agree that the title should not be cut off.

I totally agree. The title is the most important part of any card, because it is supposed to tell you WHAT needs to be done.

As mentioned in #192, I really think labels are a key component in organizing cards, so cutting of is removing important information here.

With all due respect, in my opinion the most important component in organizing cards is the stack that it is located in. I do not really care to see the full labels on the card, as long as I can use the full labels to make a selection of cards to be shown (a feature I hope will be developed soon)

Personally I don't see much value in showing the first line of the description, I would even argue that we could remove the description indicator icon in the web app, since that only helps if you use it with the tooltip.

Agree. If I really want to know all the information concerning a card I will open it.

Regarding the duedate I think that makes totally sense to move it to the top right as it is currently done, I just didn't remember that discussion when rewriting the web ui for Deck 1.0, so I'll see if we can adjust that.

I beg to differ if it means the duedate in the top right interferes with showing the full title (or as least as much as possible of the title) of the card.

[jancborchardt]

I’m also fine to remove the preview of the description in favor of showing more of the title, even if multiline. @juliushaertl @stefan-niedermann we should probably ellipsize / fade it at some point e.g. at 3–5 lines, otherwise one card can occupy the whole view?

[alexanderdd]

Hi people,

(reminder for newcomers: this applies to the future card layout of android app and web version)

• grey metadata area: @jancborchardt you write that the new card layout (new card layout for web and app? #298 (comment)) looks messy. One of the reasons it looks messy is because you removed the grey from metadata area.
  -> My suggestion: make metadata area grey again

• cutting off labels at two letters: Seems we don't have a decision here yet. @juliushaertl is against, @kbeerepoot is in favour, not very sure about the others.
  -> My suggestion: Cut labels off at 20 characters.

• design of labels in web 0.8.0 the labels had smaller height than due date. Now labels are even higher than due date (see new card layout for web and app? #298 (comment)) which makes it look very messy. Nobody reacted to my proposal yet.
  -> My suggestion: Make labels less high.

• show whole card title in card view, no preview for description seems we agree on this now. the title is limited to 100 characters, so it's no problem showing the whole title.

Is this the time to create issues for the individual points above in the deck repository? Or should we make decisions here first? I worry that people walk away, thinking that everything is clear, when actually people understood very different things.

Also, I asked twice above if we can have this discussion in the repository of Deck web because that would be the appropriate place. I got the reply "not possible to move" but I never got "don't bring it to official deck repository", so I opened an issue over there just to link to this discussion here: nextcloud/deck#1667

In general, I feel like you made some very smart design decisions for the old layout (web version 0.8.0), then you wanted to change things for the worse without good reasons.

[stefan-niedermann]

• grey metadata area: This is subjective and the UX-chief of Nextcloud (@jancborchardt) as well as the server developer (@juliushaertl) and the android developer (@stefan-niedermann) think it looks better without the greyish background. Therefore i think, we all have a very clear opinion about this topic and i don't see a reason to make it grey again.

• Cutting off labels at two letters: We already have an issue for this: Show more characters for the label text #192 and should continue the discussion there

• design of labels: This is a bit of a dilemma, because we want to make the look and feel familiar to the web interface but not ignore material design guidelines and they have pretty clear instructions for the paddings. I do not really want to deviate too much from it. Therefore i actually appreciate that the server app looks now more like the android version in this point. I would suggest top open a separate issue for this.

• show whole card title in card view, no preview for description: I opened this issue for the android client: Show whole card title in main view #366 You should open a new issue to remove the preview for description in the server repository.

• whether a three-dot menu should have the dots vertical or horizontal: This can definitely go into a separate issue. But also here is the reason that it is common on Android to have them vertical, while it is common on Nextcloud to have them horizontal.

I worry that people walk away, thinking that everything is clear, when actually people understood very different things.

I don't think that everything is clear ;) For example i still think that tags and duedate are not enough distinguishable from each other (#298). Of course all those topics are connected in some way. If we have 2-letter-labels with less height, they will be more distinguishable from the due date. This was our reason to move the duedate to the top right in the first place.

[juliushaertl]

design of labels: This is a bit of a dilemma, because we want to make the look and feel familiar to the web interface but not ignore material design guidelines and they have pretty clear instructions for the paddings. I do not really want to deviate too much from it. Therefore i actually appreciate that the server app looks now more like the android version in this point. I would suggest top open a separate issue for this.

I tent to say that reducing the margin here would be fine since it is not a click/tab target, but up to you imo. I've played a bit with margins and rounding on the server and actually think adjusting to the android styles is nicer (see screenshot below).

I don't think that everything is clear ;) For example i still think that tags and duedate are not enough distinguishable from each other (#298). Of course all those topics are connected in some way. If we have 2-letter-labels with less height, they will be more distinguishable from the due date. This was our reason to move the duedate to the top right in the first place.

👍 I also gave that a try and it helps to distinquish between the labels a bit, however this makes the first card line pretty limited, so I started moving the 3-dots menu to the card badge row. We have quite some space left there since the due date is no longer part of it.

Let me summarize what the outcome for the server app would be for me based on the discussion above:

• Move duedate to top right
• Labels have more spacing, stay in a separate line but also be cut of if they would exceed the one line
• Remove the description icon with tooltip
• Actions menu goes to the bottom right, since we have lots of space available i think it is less important than the title+duedate
• The order is now basically based on what I think is the most important (top) to the less important (bottom)
  • Title, Due date
  • Labels
  • Badges (Attachemnt, new comment, todo items), Action menu

Remaing issues as shown below:

• Ideally the two lines of labels and badges should collapse to one line, if space permits but I have not found a proper way to do that (yet)
• Text is not wrapping properly around the due date, should be doable with some more time 😉

[jancborchardt]

Don’t have anything to add to what @stefan-niedermann and @juliushaertl said. 👍

Let’s wrap this one up as it’s touching too many different topics and is just a confusing discussion for everyone. → Julius’ proposal is great and we can continue in the individual issues.

[juliushaertl]

Web PR in nextcloud/deck#1669

[stefan-niedermann]

I adjusted the android app based on what you created in #298 (comment) and this is the result:

Screen 1	Screen 2

• Ideally the two lines of labels and badges should collapse to one line, if space permits but I have not found a proper way to do that (yet)
• Text is not wrapping properly around the due date, should be doable with some more time wink

Funny thing, i am facing the same issues on android 😄

[jancborchardt]

Btw just a detail on both web and Android: The avatars overlaying need a bit of separation. In the Text app we have this 2px white/background-colored border which looks very nice. :)

[stefan-niedermann]

@jancborchardt please open a new issue for that :)

[jancborchardt]

@stefan-niedermann didn’t we use to have that though? With the white border around the circular avatars?

[juliushaertl]

Please also open an issue in the deck app itself, so it doesn't get lost in a closed pull request.

[stefan-niedermann]

@jancborchardt no, we didn't have it yet in the deck android app nor in the deck web app :) just open two reminders in both repositories please, so we don't forget it.