New layout (Feature #263)

See UX Overhaul for more info.

Okay I've rebased the layout onto the latest unstable (2.1.0) and it's running. This is the minimal version and is mostly view/css/javascript changes. I have some extra changes and features that I want to port from the theme too but I wanted to get some feedback on them before adding them to unstable.

What I'd like to do is:

1. If anyone is able to review and test the new layout as it works now, I'd be happy to make minor changes
2. I'll be fixing the Bugs listed on the 263_Layout page. These are minor bugs and merge issues so they don't need new issues.
3. I'd like to get some quick opinions on the list of proposed features from 263_Layout. If you could read each feature and answer in this issue with: Yes, No, or More Details then that would work best. I'll create new Forums discussions and issues if there are a few people asking for More Details.

Branch location based on 74cfd7b5ca

Oh and I'll post some screenshots in a minute, I'm trying to make sure my data is good.

Hi Eric,

Congrats, this is a major improvement. Thanks for the work on the new layout.

We just started an accessability initiative with one of our clients. The goal of this project is that users with a handicap (e.g. blind users) can more easily use ChiliProject. We identified about 30 problems with the current application. We will try to fix most of the problems in August. Here at finnlabs Philipp and Johannes are in charge of the development. If you are interested I will ask them to set up a short meeting that we can provide you and everybody else who is interested an overview of the identified problems and the proposed solutions.

Regards
Niels

• Logo uploader for the header section: Yes
• Several different color combinations for the "themes": Yes. Extra points if somehow that's associable with the environment (development, production, staging)
• Add raw CSS to every page: No (at least not to every page. One global one should be enough)
• Add raw JavaScript to every page: No (not to every page)
• Issues list - change the right click to right+left: No
• Issues list - add a "popup" tooltip to show details about each issue when hovering on the row: Yes
• Jquery (1.3.2): this does not mean porting the existing JavaScript to jQuery yet: More details. How is the current javascript going to coexist?
• JS - review and decide which lightbox library to use: Yes. Jquery-based lib.
• Group menus - Instead of the flat menus shown we can group menu items: More details. I actually like having "Issues" and "New issue". It's convenient. Let's see those screenshots.
• Image thumbnailing: No. I mean, yes, it's a cool feature, but I don't think that should be considered part of the "theme". Image thumbnailing should have its own branch, development, and issues. It should not be thrown into the "theme" bag.
• Add MIME icons for common file formats (e.g. document icon for Word docs): Yes, if it's only css + js, or maybe some minor server-side script.
• Issue details - filename, upload date, uploader, and description as table columns. I think this is easier to read. Yes.

Niels:

Improving the accessibility would be great. I've done some work on it but there are a lot of improvements we could still do. I think it would be best if you could have Philipp and Johannes post their discussion in the forums here so everyone can be included.

Enrique García Cota wrote:

• Add raw CSS to every page: No (at least not to every page. One global one should be enough)
• Add raw JavaScript to every page: No (not to every page)

Sorry, I meant that there is one place in the Administration panel where you can enter raw CSS and JavaScript which is then loaded onto every page.

• Jquery (1.3.2): this does not mean porting the existing JavaScript to jQuery yet: More details. How is the current javascript going to coexist?

jQuery has some compatibility options we would set so it will not conflict with Prototype (our current JavaScript). I've been doing this in all of my plugins.

• Group menus - Instead of the flat menus shown we can group menu items: More details. I actually like having "Issues" and "New issue". It's convenient. Let's see those screenshots.

Okay, I'll create a new issue to discuss further.

• Image thumbnailing: No. I mean, yes, it's a cool feature, but I don't think that should be considered part of the "theme". Image thumbnailing should have its own branch, development, and issues. It should not be thrown into the "theme" bag.

Okay, I'll create a new issue.

• Add MIME icons for common file formats (e.g. document icon for Word docs): Yes, if it's only css + js, or maybe some minor server-side script.

It's mostly images and some code that checks for the MIME type. I'll add it to the image thumbnailing feature since it's related.

Eric Davis wrote:

Enrique García Cota wrote:

• Add raw CSS to every page: No (at least not to every page. One global one should be enough)
• Add raw JavaScript to every page: No (not to every page)

Sorry, I meant that there is one place in the Administration panel where you can enter raw CSS and JavaScript which is then loaded onto every page.

cough http://dev.holgerjust.de/projects/redmine-wiki-css
So +1 from me :)

• Group menus - Instead of the flat menus shown we can group menu items: More details. I actually like having "Issues" and "New issue". It's convenient. Let's see those screenshots.

Okay, I'll create a new issue to discuss further.

We could have a split tab. So that there is an additional sub-button on some tabs (issues, wiki) which will create a new item...

• Image thumbnailing: No. I mean, yes, it's a cool feature, but I don't think that should be considered part of the "theme". Image thumbnailing should have its own branch, development, and issues. It should not be thrown into the "theme" bag.

Okay, I'll create a new issue.

• Add MIME icons for common file formats (e.g. document icon for Word docs): Yes, if it's only css + js, or maybe some minor server-side script.

It's mostly images and some code that checks for the MIME type. I'll add it to the image thumbnailing feature since it's related.

I started working/thinking about completely revamping the current attachment model / controller stuff. To allow post-precessing (e.g. creating of thumbnails) and more flexible display/download of things (more supproted datatypes, inline display of images and text). Also support for multiple ways to save attachments (e.g. local filesystem plain, local fs with complex folder structures, S3, ...)

That said, I propose you add the thing to unstable and let us work the things out on code and not just with words :)

• great use of color and shape for status and its changes: http://people.mozilla.com/~faaborg/files/daf/bugzillaTheme%5Bbracket%5D.png
• smaller information overload by using tabs: https://wiki.mozilla.org/images/7/79/JWilde-BugzillaPretty-Bug-27-2-2011.png

More info:
https://wiki.mozilla.org/Bugzilla:Pretty
http://bugzillaupdate.wordpress.com/2011/03/31/winner-of-the-make-bugzilla-pretty-contest/

Thanks for your consideration.

Just a couple of thoughts

I actually like having "Issues" and "New issue". It's convenient. Let's see those screenshots.

Actually, I think that has always been a weird UX/UI thing in Redmine/Chiliproject. the "New Issues" button clearly is an action button, not a "view button" or menu. I have seen it many times that new users cannot find the way to report a new issue because it appears as a menu item.
It definitely is convenient and useful to have, I've just always felt that "New Issue" should be clearly separated from the main menu and clearly identifiable as a button.

Sidemenu: what is the reason to move the project menu to the side? In the current S&P proposal, you don't gain any space in the vertical axis, which for me would be the main motivation for moving it to the side considering the predominance of wide-screen displays nowadays.

Account/Username: I think those two can be merged. There is no reason I can see why "My account" can't be a link under "myusername" - one top menu items less = less clutter

Spent time: Why has that moved under the menu on the left?

Overview page/My page: Has anyone ever thought about merging those things a bit more? I think what interests me more when I enter a project is what matters to me as a user/member in the project. As a project manager, I much rather have a separate "Report" section for project metrics etc. (or call it "Project status").

To put it another way: when does anyone actually ever use the "Overview" page for more than clicking through to a page containing information you actually are looking for? Rarely I think in daily usage. But Chiliproject is a tool for work, so it should make getting to my work as quickly and easily as possible. Consider: there is no quick way to list all issues in the project currently assigned to me. Quickest way would be a custom report on the issues page, which two clicks away from Overview (assuming the user even knows that custom report exists).

Long story short:

Suggestion: Reform "Overview" to "My project dashboard" displaying user-centric project-related often-used information. Move project summary/background info into the background or a separate "Project status" page...

Issue view: I like some concepts from bugzilla, in particular the grouping of issue information (what/when/who). Right now, it's a flat table without much visual aid.
Speaking of clutter: why do I need the field descriptors in the view? E.g., do I need the heading "Description"? Do I need "Status:", "Priority:", "%done"? The information next to it speaks for itself. When filling out the issue, that is different, but in the plain view I wonder why it is necessary. I think it just clutters and looks very technical/non-humane. Just look at the screen and ask yourself if you need those. For the others, I also would prefer human interface, e.g. "assigned to Jan" rather than a technical table looking "Assignee: Jan".

Hope that helps! Thanks for your great work everyone.

Holger Just wrote:

We could have a split tab. So that there is an additional sub-button on some tabs (issues, wiki) which will create a new item...

Taking this to #559 along with a screenshot.

I started working/thinking about completely revamping the current attachment model / controller stuff.

Lets talk in #560, we found a major flaw with post-processing images.

That said, I propose you add the thing to unstable and let us work the things out on code and not just with words :)

Working on it...

Jan Wedekind wrote:

Actually, I think that has always been a weird UX/UI thing in Redmine/Chiliproject. the "New Issues" button clearly is an action button, not a "view button" or menu. I have seen it many times that new users cannot find the way to report a new issue because it appears as a menu item.
It definitely is convenient and useful to have, I've just always felt that "New Issue" should be clearly separated from the main menu and clearly identifiable as a button.

Sidemenu: what is the reason to move the project menu to the side? In the current S&P proposal, you don't gain any space in the vertical axis, which for me would be the main motivation for moving it to the side considering the predominance of wide-screen displays nowadays.

The problem is that as more menu items are added the screen keeps going horizontally. I've seen an install that had 3 rows of menu items, it wasn't pretty at all.

If we group menu items then we do get a lot of vertical space since menus are closed when you aren't in their section. E.g. the issues menu is closed when you are in forums.

Account/Username: I think those two can be merged. There is no reason I can see why "My account" can't be a link under "myusername" - one top menu items less = less clutter

I agree but it's out of scope for the theme. We would need to make several changes on the backend for that.

Spent time: Why has that moved under the menu on the left?

That is because it's on the sidebar. I'd like to move it up into the actual menu so you can check time from any page in a project (instead of having to go to the overview). The screenshot in #559 has that under the Reports group (I'd like to put it in it's own group though). You can see how some of the links that are on a Wiki sidebar have been moved up into the Wiki group.

Suggestion: Reform "Overview" to "My project dashboard" displaying user-centric project-related often-used information. Move project summary/background info into the background or a separate "Project status" page...

Yes, we've talked about adding some per-project widgets similar to My Page. That's a whole separate feature though, could you start a forum discussion on it so we can figure out what would work best?

Issue view: I like some concepts from bugzilla, in particular the grouping of issue information (what/when/who). Right now, it's a flat table without much visual aid.

I think I might try to group and organize the data here after the main design is done. It is pretty cluttered still.

why do I need the field descriptors in the view? E.g., do I need the heading "Description"? Do I need "Status:", "Priority:", "%done"? The information next to it speaks for itself.

It speaks for itself only if you know what your data is. Inexperienced users will not know that "IE7" is the custom field "Bug in browser". Even something simple as "New" could be confusing: does it mean that I haven't seen this issue or that the status is New.

We also need to keep in mind accessibility, removing labels could make it more difficult on screen readers.

For the others, I also would prefer human interface, e.g. "assigned to Jan" rather than a technical table looking "Assignee: Jan".

I think I'll need to see the full page in order to give you an answer.

I've fixed most of the "bugs" from the wiki page 263_Layout. I'd still like to do a page-by-page review of the major sections at least but the design should be semi-usable now.

I've also rebuilt the themes a bit:

• Removed all of the existing themes
• Moved the Shane & Peter design and colors into a new CSS theme (sap)
• Updated the Default theme to be similar to what we have here: whites, grays.
• Added a quick and dirty ChiliProject logo

I think I'll be able to merge this to unstable next week and we can start debugging it. At that time I'd also like to get some help working on the default theme and building new themes for at least the common colors.

https://github.com/edavis10/chiliproject/tree/ticket/unstable/263-new-layout

Hi Eric,

I just thought of something that's possibly a theme thing:

• Being able to choose a favicon

In my mind, the favicon (and iphone shortcut icon(s) ) is also part of the design. But you might think otherwise.

Eric Davis wrote:

Jan Wedekind wrote:

Actually, I think that has always been a weird UX/UI thing in Redmine/Chiliproject. the "New Issues" button clearly is an action button, not a "view button" or menu. (...).

Is there any thought on this? Or am I the only one who's observed confused newbies trying to find the "New issue" button? :)

The problem is that as more menu items are added the screen keeps going horizontally. I've seen an install that had 3 rows of menu items, it wasn't pretty at all.

True. I try not to activate so many modules, at least not from the start, but if all of them are on, it's really ugly. I think I just prefer horizontal menus over vertical ones. And maybe the fundamental problem isn't then the theme/design as such? Not sure to be honest, just thinking aloud.

If we group menu items then we do get a lot of vertical space since menus are closed when you aren't in their section. E.g. the issues menu is closed when you are in forums.

I would still try to squeeze out more space by making the header section smaller, i.e. gaining the space the project menu used before.

Account/Username: I think those two can be merged. (...)

I agree but it's out of scope for the theme. We would need to make several changes on the backend for that.

I realized just after posting that this would be another issue. Sorry for confusing things.

Spent time: Why has that moved under the menu on the left?

That is because it's on the sidebar. I'd like to move it up into the actual menu so you can check time from any page in a project (instead of having to go to the overview). The screenshot in #559 has that under the Reports group (I'd like to put it in it's own group though). You can see how some of the links that are on a Wiki sidebar have been moved up into the Wiki group.

Very good! I can see how that would be much more useful.

Suggestion: Reform "Overview" to "My project dashboard" displaying user-centric project-related often-used information. Move project summary/background info into the background or a separate "Project status" page...

Yes, we've talked about adding some per-project widgets similar to My Page. That's a whole separate feature though, could you start a forum discussion on it so we can figure out what would work best?

Will do! As above, I realized myself that this can't be done via a theme, sorry...

why do I need the field descriptors in the view? E.g., do I need the heading "Description"? Do I need "Status:", "Priority:", "%done"? The information next to it speaks for itself.

It speaks for itself only if you know what your data is. Inexperienced users will not know that "IE7" is the custom field "Bug in browser". Even something simple as "New" could be confusing: does it mean that I haven't seen this issue or that the status is New.

I wasn't talking about custom fields, for those it's necessary.

But I think it would be good to discuss that once the main design work is done. I would still argue that many of those things are not needed or, at least, can be replaced by different wording or visual cues that make the whole thing more appealing.

Imagine for example using a bit of CSS and Color to differentiate issue Categories and status. If I could assign a color to the status I define, it helps a lot when scanning an issue.

We also need to keep in mind accessibility, removing labels could make it more difficult on screen readers.

Isn't it possible to use the ID Attribute?

For the others, I also would prefer human interface, e.g. "assigned to Jan" rather than a technical table looking "Assignee: Jan".

I think I'll need to see the full page in order to give you an answer.

Ok, I will try to mock up something. I am lousy at this but I might get the idea across. I might post it first in the forum to not sidetrack this issue any further.

See New design for ChiliProject for a new proposition.

Just for everyone to know (Eric already knows, he's already been responding to the comments :-) ), Holger and I just reviewed the pull request, the comments are in the pull request on GitHub, but it mostly looks OK.

Eric: Sorry if I was a little terse/harsh in the review comments, long day/not much time, no harm meant.

Felix Schäfer wrote:

Eric: Sorry if I was a little terse/harsh in the review comments, long day/not much time, no harm meant.

It's fine. I'm feeling like this issue is getting discussed to death and the overall goal of this feature is getting lost.

Eric Davis wrote:

I've updated the branch with feedback from Felix, fixed a few test errors, and pushed the new layout to unstable (ab2856b).

Holger's and mine, and thanks :-) I'll have a look at the changes, if there's still something bad enough that I think it worth discussing I'll open a new issue.

Felix Schäfer wrote:

Holger's and mine, and thanks :-) I'll have a look at the changes,

Yea, Holger's too. I just remember seeing your gravatar all over that pull request.

if there's still something bad enough that I think it worth discussing I'll open a new issue.

And if it's small, just fix it.