Re-design: Board general view

[mquandalle]

Re-design discussions:

• Re-design: Home page and activity feed #126 For the home page and the activity feed
• [current] For the board general view
• Re-design: Card detailed view #127 For the card detailed view

Current state of the board re-design

---

Hello,

Working with a free and open-source software allow us as a community to experiment with new features and new user interfaces. @yasaricli and I are both good developers, but I guess not excellent designers (and even if we were, input from the community are always invaluable).

I would like to open a brainstorming about the user interface and experience; feel free to share any UI/UX idea you have, and if you have a graphical talent also share some mock-ups of your ideas!

Let's start this thread by some picture of trello redesign tries:

↑ by Fabrice Liut — http://www.liut.me/a-trello-redesign [1]

↑ by Duncan Malashock — https://dribbble.com/shots/613931-Trello-Redesign-v3 [2]

↑ by Stu Greenham — https://dribbble.com/shots/1854771-Trello-Redesign-Concept [3]

↑ by Fran Pérez — https://dribbble.com/shots/540307-Trello-Redesign [4]

↑ by Philippe HONG — https://dribbble.com/shots/1847564-Trello-Redesign [5]

And now some alternative kanban board softwares:

↑ https://kanbanflow.com/ [6]

↑ https://www.odoo.com [7]

↑ https://pintask.me [8]

↑ https://kanbanize.com [9]

↑ http://kanboard.net [10]

I hope all these user interfaces will inspire you! Let's design the best open-source kanban board!

[ocdtrekkie]

Have you considered asking any of the people who have made their own redesign mockups directly if they would design for LibreBoard?

One thing I see in a lot of these that is a particular peeve of mine of the UI design some companies are using these days: Please avoid differentiating elements solely by varying shades of light grey. It can be difficult to see on poorly contrasted monitors.

[rusintez]

👍 to Stu's concept. A great clean theme. Capacitive and forgiving.

[ocdtrekkie]

Another crazy thought: Could LibreBoard support multiple styles? There is a good point that it should not by default use Trello's. (Though it is common for users to host sites designed to look like other sites, and it may be acceptable to have a similar option.)

Then new styles could be tested or tried, and that could end up being a core differentiating feature as well. As traditional closed source cloud service products like Trello offer limited customization in that regard.

[crawford95]

While I like Stu's concept, it does not show nearly as much information on first glance as the current project or other mockups.

[mquandalle]

Inviting @stugreenham in the conversation;

[cyrusdavid]

Agree, 👍 Stu Greenham's.

[zakbach]

I for one would move on with the redesign as priority 1, right now it's a 1:1 rip-off of Trello and I'm not sure how legal that even is. As for the examples brought up above, regardless of which direction you'll take, I hope it's not a 1:1 rip-off of that either. Plenty of designers in the open source space, if you guys had a IRC channel or something, would love to help out.

[stugreenham]

Hi Guys,

Thanks for including me in the list. My reason for doing the redesign in the first place was because I was unhappy with the existing Trello look and feel. It feels dated, something I contacted Trello about but got nowhere.

Whilst I don't disagree with Crawford95's comment, I must add that this was done intentionally. I wanted to clean up the UI and remove anything that wasn't super important so that the focus was more on the lists and the cards. Simplify.

A user can still get to his/hers other boards, or invite another user in, etc but some of these features sit behind a click, something I felt I was okay with. As a user of Trello myself, I find that 90% of the time, I am just dealing with the cards.

Cheers,
Stu

[stugreenham]

May I add - I am more then happy to help out with this project if you need any help from a visual/ux point of view. Just let me know!

Cheers,
Stu

[ocdtrekkie]

@zakbach I'd move further discussion of copyright or trademark issues to #92.

@stugreenham There's some things about your design that's appealing, and I guess I buy the notion of hiding less used things like user controls in a menu. However it looks like you also hid the feed, which I consider pretty critical of Trello. In a large board, that feed is how you know if anything is different since last time you opened it.

My other note is that you seem to have nearly doubled the vertical space between cards. And the top bar seems to be very thick as well. I know companies like Google have been pushing incredibly bloated padding and margins as the "new" look and feel, but it feels like a huge compromise in space utilization for meager to non-existent benefits.

[TylerL-uxai]

UX nerd here: Can you guys redesign the "Boards" button? 😃 From an info architecture point of view, a side bar ("secondary nav") seems more appropriate. I can make a sketch later. Think of slack's ui where the rooms/convos are on the left in a column. Or your default notes application for mac. I think that's how a number of boards should be managed.

You could even use material design and make use of "progressive disclosure" where hitting the board button pops out the nav.

[stugreenham]

@ocdtrekkie I don't disagree with your comments - but I must stress that this mockup isn't to be taken too literal. I did this one mockup on a Sunday afternoon so I could play with Sketch. Had this project been a more then me just 'playing with ideas', then I would have gone into more detail and ensured all angles were covered and other screens and flows were sketched and designed.

I agree about the feed - but I must mention that this critical feed you speak of is also hidden by default on Trello. I hadn't ignored this or any of the other features and like I said above - this isn't a design that I was commissioned for. But I do think this is a good point.

Re the spacing - this is something I considered and from my experience dealing with Trello boards involving 15+ people I personally prefer the slightly larger spacing because I find the content more readable. When you add user icons/labels/comments and more to every card it soon becomes a chore to follow with your eyes. I had considered a compact mode similar to Gmail.

If you compare the header on Trello to the header on mine you will notice maybe 5 more pixels in height. Nothing hugely worrying there.

I'm happy to look into developing these concepts further if anyone is interested - This was purely a 'first crack' at it which tbh I am pretty happy with at a starting point.

[rusintez]

@stugreenham 👍

[JamborJan]

I'm not a designer thats why I posted my proposal not here. But I would suggest to focus also on tags, how they can be organized and nested. For me tags work best when I have a huge pile of information pieces in front of me and I need to organize it.

#98

[ocdtrekkie]

@stugreenham I am a big fan of compact display density as a setting. :) I would still likely be a happy Google customer if they were willing to keep offering it on their newer products.

If the feed's hidden by default on Trello, I might just never have noticed. The sidebar does collapse, I suppose, though it remembers it's position, perhaps, because I never see it collapsed.

[TylerL-uxai]

Everyone's talking about Stu's so I'll chime in:

Really good job, Stu

I think 'boards' button being on the top right might not follow convention. Normally it's primary links horizontally on top, secondary links vertically on the left side, and utilities or tertiary links on the top right.

I like the skeumorphic style. When distinguishing between this and the default ui, I'd say Trello has a more visceral feel of grouping cards because they're separated and contained within each dark area. Right now it just looks like a list and it isn't clear that they're cards in a container. I don't think people will immediately get this concept (that it's cards in a group) when looking at the software for the first time.

[ozodrukh]

Oops i wrote in another thread, about my design concept thoughts, i will repeat my message:

i'm not ui/ux designer, but i draw simple sketch of board in material like style, please criticize it we need do something comfortable to use

[ocdtrekkie]

Copying my notes here from #97

@ozodrukh I will cry many tears if this goes material design. Many. Tears. #materialnono

I don't think a free software project should be implementing Google's branding. And material design has poor contrast between various layers.

[ozodrukh]

i like simple ideas in material design, yeah you are right contrast in material design is poor, but we can improve it here

[rusintez]

Hi everyone, just want to align the train of though here and please correct me if I'm wrong:
— stu said that he might be able to develop his vision of trello ui further if anyone is interested. From discussion here it looks like there are 2 main directions to go:

• implement new distinctive look
• figure out new distinctive features / layout
  While first seems to be a focused task the scope of which is relative easy to narrow down, the second seems to be a never ending improvement of ui/ux that not only touches how application looks but also how it functions (eg implementation might require backend changes, even db migrations).

Since scope of first one is easier to pick on and easier to evaluate short term this is where I would propose to concentrate on. Eg in respect to his time, to ask Stu to further develop his vision of trello libreboard ui. Maybe concentrate on figuring out general ui guidelines - card, activity, settings etc. making it possible in the future for developers to extend ui using these guides in a way that product would evolve by that time. Again if you guys feel like it's the way to go.

[ocdtrekkie]

I think Stu's probably the best bet, if he's interested in taking it on, as I assume it's a fairly hefty workload. I'd really love if the ability to change out styles was actually a feature for LibreBoard in the future, as it'd be a particularly key differentiation from traditional cloud services. (Under such a system, something like Stu's could even be default, but it'd be possible to have a more Trello-ish style available as well, for example.)

[ozodrukh]

Stu's concept isn't great, i can't determine where is what, usability of his concept is poor, i think if cards will be implemented there, it really would be best bet

[ocdtrekkie]

@ozodrukh They're already cards... Everything on kanban boards is cards...

[rusintez]

Are there any metrics that could help us to stay on the path? Eg. What are the things that could be improved (in Existing design)? I think as users we could quantify usability issues (from our perspective) and leave it up for professionals to figure out the best way to solve those problems. There is no need to micromanage or introduce bias options like material design etc.

I personally only figured 1 metric:

• new layout should maintain a distinctive look to make product recognizable. Define that line where trello concept and libreboard concept floated apart. Criteria of success would be a layout that inherits all existing functionality (no judgement of what goes or stays at this stage) plus it's flexible enough to take in some realignment at the time new features land on to the project.

I believe guys started this thread in the first place to find their own identity whilst having a default trello feature set bro start with.

Any ideas ?

[neandrake]

I have a few comments regarding small improvements to the current interface. With the UI redesign plans in this Issue, I wasn't sure whether improvements to the current design would be continuing. I can make separate issues for these, but I figure I would just mention here first.

1. Popup menus should close when their button is clicked again. Examples of this include the Profile/Name menu in top right, the New Board '+' button in top right, a card's options button in the card's top right, etc. Currently you have to click somewhere else on the page to close these popups.
2. On the flip-side, the click-to-edit paradigm currently requires clicking on an 'X' to cancel/hide the editable text field. This form should cancel (or save?) when clicking elsewhere on the page and lose focus. Example of this include clicking a list's title to rename. I don't think this should apply to forms with multi-line textareas as this generally indicates a large amount of data can go in, and this should not be lost when changing focus - example of this would be adding a new card form.

[inputsh]

I really hope that Stu's solution will become the default look of the project!

[litera]

@ocdtrekkie I'm not sure what you mean or what kind of a screen you're using, but the main idea to post the UI was to show that Stu's design isn't so much about colour as it is about individual elements design. I've maybe done it all to light. It displays fine on my monitor though.
My changes are just put directly on Stu's original design. It should of course be greatly improved upon as I was just removing or changing a few bits and pieces.

[nataxcan]

@litera I wasn't saying stu's design is entirely bad, just that the lack of color is a flaw that has to be remarked upon. Now about that design you posted, I believe @ocdtrekkie to be right in that there are no cards anymore, only floating blocks of text, simply because the cards and the columns aren't clearly defined, like in Stu's design.
From afar, I can't distinguish clearly the cards in your design, and that's a major flaw in my opinion because a card is so much more than only text. It's supposed to be designed to contain files, images, recordings, a video or even a link.
The design you posted doesn't seem to be adapted to all of that, because it's made to contain a bit of text and that's it, when Trello (the base idea of this project) is made to contain so much more.

[erlend-sh]

What started out as useful brainstorming has devolved into design-by-committee bikeshed discussions.

@mquandalle, @orges and @yasaricli , if you're gonna make a bet on @stugreenham's design - which it looks like you are, judging by your most recent mockups - it's an all or nothing deal. You can't take a design like that and "tweak it" without the help of the original designer.

The community has done its part for now. Stu's design was the majority's favorite. You don't need 10 contributors to accomplish what comes next, no matter how cool and intoxicating it is that so many people have been willing to pour so much energy into this. (I've hardly seen anything like it, so cool!. I'm sure it'll come in handy again when it's time to open the floor for smaller iterations and possibly alternative themes if that's ever supported).

In Stu's own words

I'm happy to discuss the potential of using my mockup design but I would want my input. There is a lot of different opinions on here (which is good btw) and I'd be worried that once everyone has there input we could end up with a car crash of 100 different styles and ideas.

This is exactly where you are headed right now. There's no room in here for a single, unified direction.

My 2 cents: Stop this discussion, get in touch with Stu and finish the design that you already know is fully capable of wow-ing people. Conserve some of this energy for a different occasion.

[jasondavis]

so many great designs!

[litera]

@erlend-sh Exactly my sentiment. I've pointed somewhat to this same issue some time ago - 27th Jan but nobody seemed to reply upon it.

[JayBeavers]

@mquandalle Just wanted to pitch in that http://newui.libreboard.com is looking great. I agree with @erlend-sh that the value now is in getting that delivered in a 0.9 release that allows you to come back to Github.

Looking forward to 0.9 so I can move my team over to libreboard!

[stephenjlewis]

@mquandalle, I do like the visibly clickable tags on @fnky's mockup: it's intuitive, much moreso than a nested menu might be. If we're avoiding a side bar (are we?) there may be some way to integrate the coloured tags into the top bar for easy topic-level filtering.

[pdaoust]

Pardon me if I'm missing something, but http://newui.libreboard.com/ looks nearly identical to Trello and doesn't seem to incorporate any of the new design directions discussed here. Is there a new URL for the new UI?

[leecade]

👍

[fix]

I have just redesigned in the code source the app. If you are interested, i'll push it on the source.

[shekar73]

@fix 👍 👍 Love the custom board backgrounds and chalk board metaphor in the home page!!

[viktor-evdokimov]

@fix this is really cool and useful for branding!

[yrshaikh]

So is there a downloadable version available ?

[SimonSarazin]

Some friends worked a year ago on a kanban design. Maybe you would like to use this design. I have to confirm, but i think it's opensource. You can see and test this it : http://kanban.apps.patapouf.org/ login : demo et pwd : demo . I think the app will never be updated as a bigger community exists to develop this common, we prefer to support libreboard. I'll ask mockup to the designer (and psd files) if that's in your interest

[andyburnett]

Wow, I think that design looks great! I would vote for using it.

Cheers
Andy

On Tue, May 12, 2015 at 9:58 AM, SimonSarazin notifications@github.com
wrote:

Some friends worked a year ago on a kanban design. Maybe you would like to
use this design. I have to confirm, but i think it's opensource. You can
see and test this it : http://kanban.apps.patapouf.org/ login : demo et
pwd : demo . I think the app will never be updated as a bigger community
exists to develop this common, we prefer to support libreboard. I'll ask
mockup to the designer (and psd files) if that's in your interest

Reply to this email directly or view it on GitHub
#94 (comment)
.

[Angelg1409]

excellent design !!
+1 for me

Angel

2015-05-12 15:59 GMT+02:00 SimonSarazin notifications@github.com:

Some friends worked a year ago on a kanban design. Maybe you would like to
use this design. I have to confirm, but i think it's opensource. You can
see and test this it : http://kanban.apps.patapouf.org/ login : demo et
pwd : demo . I think the app will never be updated as a bigger community
exists to develop this common, we prefer to support libreboard. I'll ask
mockup to the designer (and psd files) if that's in your interest

—
Reply to this email directly or view it on GitHub
#94 (comment)
.

[SimonSarazin]

Here are the complete designs : https://drive.google.com/folderview?id=0B1GiMK8ptm02fjRYazFXTFdSaWRBcUgyNU1BZU5oMUpVRDRUMExENVMtZEw1d292TWZJWW8&usp=sharing . It is in creative commons (just please keep the designer paternity if libreboard finally use it). All is in one psd that i can share if you need this design.

[omeid]

👍 For Stu's Design. So how is this going? have you guys decided yet to go towards any specific design? I could help here and there.

[DanielFallon]

I am fond of Stu's but would like some more material design elements added because I think they would make the UI/UX language more clear

I agree with @Squ34k3rZ about the slide out left menu, I think that floating menus can often cause problems visually.

There are actually several designs on here that use slide out menus that float above other text and I think it would be really helpful to implement material design concepts on top of this because it makes the separation a bit more obvious.
Near the beginning of the conversation, someone mentioned multiple shades of gray as being problematic on low quality displays. I agree with this, and also think that the slight shadowing between levels in material design alleviate this.

just my 2 cents.

[ocdtrekkie]

@theelf Material design, is, by definition, terribly unclear language. (There's a recent article by Lauren Weinstein, who has actually done a lot of work for Google, about how 'modern' UIs tend to fail badly: http://lauren.vortex.com/archive/001112.html)

Another piece on specific issues with Material Design, particularly with color contrast, as used by Google, is here: https://shkspr.mobi/blog/2014/12/do-all-google-employees-have-perfect-eyesight/

[DanielFallon]

Very interesting read Jacob, thanks for posting that.
I myself have found it to be very helpful, but I don't suffer from the
problems listed in the article. (I'm sure they will be problematic for me
in the future, just not now)
The things that I was highlighting material design for when recommending it
in my post were more in regards to visual separation of elements with depth
(cued by shadow). This isn't something that the article took issue with,
and is still not something that existed in many of the posted mock ups.

Now this may have been because they are simply prototypes, but I think it
makes a big difference in how readily identifiable different pieces of a
page are.

On Tue, Jul 7, 2015, 4:59 PM Jacob Weisz notifications@github.com wrote:

@theelf https://github.com/TheElf Material design, is, by definition,
terribly unclear language. (There's a recent article by Lauren Weinstein,
who has actually done a lot of work for Google, about how 'modern' UIs tend
to fail badly: http://lauren.vortex.com/archive/001112.html)

—
Reply to this email directly or view it on GitHub
#94 (comment)
.

[ocdtrekkie]

@theelf I suppose it's definitely important to qualify what sort of "material design elements" you talk about then. ;) I'd definitely agree shadows can help define layers of the UI. (Though it can't be the sole indicator of hierarchy, as fine details like shadows are completely overlooked by some viewers.) There are other elements I'd be more wary of though, like Google's recent fascination with animations, which can be resource-intensive.

[DanielFallon]

Lol animations are so pretty though. But I definitely see your point. I
think a lot of the animations would be fine if they're implemented as pure
CSS (yes I know some of them can't be implemented this way). This means it
will take advantage of graphics acceleration on supported platforms, and
can be disabled very easily.

But believe me, I think all of the icons and buttons should have clear
labeling and be linked to reasonable actions

On Wed, Jul 8, 2015, 12:35 AM Jacob Weisz notifications@github.com wrote:

@theelf https://github.com/TheElf I suppose it's definitely important
to qualify what sort of "material design elements" you talk about then. ;)
I'd definitely agree shadows can help define layers of the UI. (Though it
can't be the sole indicator of hierarchy, as fine details like shadows are
completely overlooked by some viewers.) There are other elements I'd be
more wary of though, like Google's recent fascination with animations,
which can be resource-intensive.

—
Reply to this email directly or view it on GitHub
#94 (comment)
.

[lifehome]

@fix Hmm, the title font of the first pic... I feel Geocities and Comic Sans are coming after me...

UPDATE: Also I've found it's overwhelming if putting too much material design in it... It's really nice, the design, both material and @stugreenham, but please don't over-exaggerate it...

[tiagoefreitas]

For pomodoro timers, check out Pomello.

[almereyda]

@SimonSarazin Nice to see you here. Is @pierreozoux also around?

[pierreozoux]

Thanks @almereyda to let me know the project was here :) I was still on the gitlab :/ Great to see new development!

excited