Re-design: Board general view

[mquandalle]

Re-design discussions:

• 126 For the home page and the activity feed

• [current] For the board general 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]

:+1: 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, :+1: 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? :smiley: 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 :+1:

[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.

https://github.com/libreboard/libreboard/issues/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!

[frdmn]

+1 for Stu (but with the feed)

[bmathews]

Yeah, @stugreenham's design is great. Stu's a real UI designer, how about we let him call the shots on aesthetics.

[BenjaminCorey]

I think that all these concepts are great, and while I agree that a nice theme and out of the box installation is great... I think it would be good to take a queue from the bootstrap team and abstract the styles from the core project. This allows everything to remain lightweight and customizable.

Obviously, this takes much more planning than just choosing one style, but it allows for much broader adoption if users aren't forced to reset a bunch of gradients, drop-shadows and sprites when reskinning.

[cjb]

There's also the design used by https://taiga.io -- I think they have a great design, and their code's open source already:

[ocdtrekkie]

@cjb Soooooo much wasted space o_o

[TylerL-uxai]

As for the number of lists visible on the screen (3? 4? 5?), you could make the argument for 4. We used to think we could hold 7 things in our short term memory, but recent research has shown it's more like 4 or 5. I actually like trello's sized lists on my laptop screen because there's 4 and a half. The half list indicates that you can scroll right to see more lists. I think that's the perfect number of lists to be on a screen at any one time.

[ocdtrekkie]

The number of visible lists depends on your screen size. Trello fits six and a half on mine. (Maybe you need a better screen?) Large high resolution screens rightfully should display more information than smaller screens.

[TylerL-uxai]

@ocdtrekkie True, you make a good point. For laptops, I guess I'd like at least 4 dude. And can we make this responsive for mobile to have just one? Here's a sketch. Sorry it looks really polished. Trust me, it took just a few minutes to make.. So feel free to criticize the heck out of it! I'm going to make a sketch of a secondary nav I'd like to see that can distinguish our app from trello (and avoid DMCA complaints)

[ocdtrekkie]

It would make sense for mobile to have just one wide before scrolling.

As for your mockup, I'd probably suggest the top bar should be more distinctly different than Trello's in style as well.

[TylerL-uxai]

Here's the sketch for some ux improvements. Basically everything you need to be productive. The notes is placed at the bottom, so your list of notes can grow into infinity and all you need to do is scroll down. (Although a load more button is possible).

You could put a search bar up top as well.

Think Slack + Trello + Notes ftw

[gmaggio]

Definitely Stu!... at least in terms of the overall feel and direction...

[tj]

This one gets my vote:

Trello is soooo ugly

[vegetableman]

+1 for the UI by Duncan Malashock Update: oops, wrong one, I prefer the one by Stu Greenham, as pointed by tj

[litera]

Definitely @stugreenham design. Stu: add parts that others have requested and maybe upgrade it with your latest ideas and provide another UI mockup for a review. This should move a bit faster.

[ryngonzalez]

Hi all, interface designer from Fetchnotes here!

I think one thing that's missing from this conversation is a high level set of goals/usecases/niceties that we want to serve with this design. Before we start trying to find an alternative interface, we should be figuring out the shape of the problems it'll try to solve.

If we're trying to copy the goals and usecases of Trello 1-to-1, then we're inevitably going to trend very closely to their product design, with only the room to make superficial changes (re-jiggerred navigation, changed visual style, etc.) but I think taking some time to figure out our fundamental differences and perspective on the problem space (a spatial, manipulable layout of information that you can use with other people) will be very useful to how this discussion moves forward, and how us designers can help contribute.

[mquandalle]

We released v0.8 yesterday (with a lot of new great features in it!), and it's now the time to fully focus on our new UI. Due to the DCMA notice, we won't push any code on github, but we'll keep working in the open on a self-hosted gitlab instance. I've also set a separate instance of the online application on http://newui.librebroad.com so we can share our experiments and break things.

I'm not certain @yasaricli agree with me on that (please share what you think!), but for my part I don't want this re-design to be “just change the CSS so we can get back on github”. I'm willing to work on much more deeper modifications to the way the application work (how we assign members and label to a card in the board view, how the multi-selection feature will work, how we select a board, how we integrate pomodoro timers, etc.). So if you're thinking about how we can improve things, don't feel limited by the amount of code re-write you're idea will require.

There is also the mobile. We're not going to develop native LibreBoard applications on Android and iOS, instead we will wrap the web client in Cordova (which is easy to do with meteor by the way). I don't want to abuse marketing words, but “mobile first” could be a good approach for our new user interface.

@ocdtrekkie Multi-design would be a very cool feature indeed. Unfortunately, due to the way meteor works (take all the CSS files it can find and merge them in one big file) this is not something we can implement easily. So let's keep this idea for a later release.

@ryngonzalez I would love to tell you that we have a vision about the way we want to spatially organize information. But as far as I know our only fundamental difference is to be a free and open-source software; I'm not sure we can emphasize data privacy in the UI (I don't think so), but maybe one point to consider here would be plugin extensibility. Also, if someone has some ideas to improve the kanban paradigm, feel free to share them (@JamborJan proposed #98). Maybe the multi-selection idea could have some ramifications? For instance we could make the labels click-able to open a menu like “Remove this label” + “Filter cards on this label”, and have a similar menu on the member icon.

It seems that there is a consensus to use the mockup of @stugreenham as a basis, and iterate on that (side note commenters, keep in mind Stu didn't originally made this mockup for our use case). Stu, could you authorize others to iterate on your design? For me, this mockup raises a number of issues we need to figure out:

• Do we need a sidebar (similar to the Trello sidebar)?. I tend to think it would be possible to move all board actions to the top board bar. Maybe this top board content could also change depending on the context, for instance become a “drop here to archive” when we are dragging a card (like on the android version of Trello), or became a filter selection if we are in the filtered view. Non-frequent actions could be moved to a menu accessible by cliquing on the gears icon on the right. However we definitely need a sidebar on the mobile UI.
• How do we keep a level of board user customization? Should the user be able to select a header color? Do we want to support background images for the header (a bit like chrome themes) while we keep the content on a white background?
• How do we select a board? It seems that the top left hamburger icon could open a left pane with a board list?
• How about white cards on a grey background, like Google Now?

There are also potential discussions about square vs round avatars, or about the way we display labels on the board view (anyone like the way Fabrice Liut [1] solves this?), but I don't have a strong opinion on these.

And we also need a new logo #64.

[cjb]

we'll keep working in the open on a self-hosted gitlab instance

Wouldn't you just expect to receive a DMCA notice to the gitlab instance, then?

for my part I don't want this re-design to be “just change the CSS so we can get back on github”.

I'm nobody here, but I'd suggest the opposite approach, so that you have a project that people can use, develop and deploy in the open without waiting for your full feature design and implementation to finish first.

[yasaricli]

@mquandalle I agree with you.

[TylerL-uxai]

"Do we need a sidebar?"

I haven't used the activity sidebar feature, but then again, I do most my work on jira at my real job. That's an interesting design question worth asking everybody here. How much do you love the right side bar on trello?

Also, we can group some of these functions together and put them in a Settings modal to keep the interface clean.

I like the hamburger icon + list instead of selecting from a boards page

The gray sounds good. One thing to consider is the visual weight of your top navigation bar. The darker gray you go, the less visual weight the dark navigation bar will have. So while it makes the white text boxes pop more, it makes the whole page pop less. That's why I used light grays in my design (the red one above). Your call, boss! Just providing you with information to make your decision.

[TylerL-uxai]

@ryngonzalez makes an excellent point! One thing I noticed using hipchat + jira (it's like slack + trello) is back and forth between chat window and project management board. It'd be cool if we could use sockets.io to let people select things, like you can have multiple people edit the same document in Google Docs. I'd love to see a box with a highlight around it from my project manager. It'd be even better if we added chat and kept it to the same website. I showed this possibility in the red sketch above where the side navigation has Private Messages, Chat Room Channels, Trello Boards, and a section for Notes. That's a holistic approach to project usecase, if you ask me.

[mquandalle]

Also in most mockups the logo is tacking a significant area. I don't think we care enough about our brand to take all that place, and I believe we don't even need to put the logo in the board interface (just keep the application name in the window title).

[dannydewit]

+1 for Duncan Malashock

[alireza-ahmadi]

+1 for white card instead of grey

[guarilha]

@stugreenham :+1: