#692 Layout¶

Summary of discussions and review¶

[Blocker] - must fix before release
[Nice to have] - would be nice to have in the release but can wait
[Later] - to do later

Summary:

• [Blocker, Done(ED)] Remove the modified choosen and revert the projects list in the top menu to be a simple list (ul)
  • I would strongly recommend to fix the open bugs instead of removing it - we are currently working on a solution for the bug that breaks the items. Having more than 4 projects chosen makes it a lot easier to navigate and find projects. -- Romano
  • Sorry, we can't base out decisions on code that isn't released. Feel free to fix the bugs, use an unmodified chosen library, and resubmit a patch later. -- Eric
• [Blocker, Done(ED)] Revert 65d485dbde9b1910681e8324ee60d182b677af9b as it is part of the submenus issue (#559)
• [Blocker, Done(ED)] Replace the logo with a text logo and a way to override it. Link logo to the homepage (/ or the suburi) (Eric has a simple idea for this)
• [Blocker, Done(ED)] Remove submenus on the project menu
  • Can't understand that either. Submenus is a common functionality that can be seen on almost all websites. Accessibility and Usability profit from this a lot! -- Romano
  • Submenus were separated out to a separate issue. (Please be careful with the !, it makes your comment look like you are yelling) --Eric
• [Blocker, Done(ED)] On narrow displays, when you view a page with the tabs (Project Settings, System Settings) there are little left and right arrows that appear by the tabs. In this design the arrows are at the bottom of the page.
• [Blocker] (Need discussion) Activating the top menu on a click vs on a hover
  • Please explain why this is bothering you in detail. Thread / ticket for discussion? -- Romano
  • See notes below. A new thread needs to be created for the final discussion. -- Eric
• [Blocker, Done(ED)] Include the Administration menu items in the Modules menu for admins
  • Disagree, this would overload the menu and make it very hard to use. You would save only one click! -- Romano
  • Sorry, this was how the design was built before this issue. It doesn't overload any menus and makes things easier. --Eric
• [Blocker] Remove the "All Projects" is redundant.
  • Users can only reach the page if they know that they have to 1. deactivate javascript or 2. open it in a new tab. This information is not discoverable at all. The fact, that the projects item holds the link is intended as a fallback, should javascript be disabled - you cannot give one button two functionalities. -- Romano
  • This is part of the problem with overriding the click event for that menu. --Eric
• [Blocker, Done(ED)] (might be fixed by removing choosen for this menu) If a project has a long name it is cut off
  • We are working on this for all menu items (top and sidebar), see: https://www.chiliproject.org/issues/745 -- Romano
• [Blocker, Done(ED)] (might be fixed by removing choosen for this menu) If a project has a long name and you hover over it the menu's width expands (still not enough to see it completely). Then when you move your mouse the menu width shrinks. This causes a flickering effect.
  • see: https://www.chiliproject.org/issues/745
• [Blocker, Done(ED)] (might be fixed by removing choosen for this menu) Projects in the menu cannot be opened in a new tab/window using a middle click or right click.
  • Good point! Definitely something we should fix asap. -- Romano
• [Blocker, Done(ED)] (might be fixed by removing choosen for this menu) Somehow by opening and closing the projects menu I was able to lose all of the projects. Seems the project list is keeping it's display:none randomly.
  • Known bug - working on it right now. -- Romano

• [Nice to have] Revert a4052a53f6c4ee20ab4b7179f635e05fe056df12 so the issue subject is still present on the lower bar
  • The lower bar title does not fit the design. Wouldn't it be possible to merge Tracker, Issue number and title and duplicate this information - would make more sense. (Discussion needed?) -- Romano
  • I'm going to see what makes sense from a usability perspective. Not really a large enough issue for a discussion. --Eric
• [Nice to have] Fix Theme-ability
  • #header should probably use a background color and not an image
    • already fixed that and posted a pull request on your pull request 692 - see: https://github.com/edavis10/chiliproject/pull/1 -- Romano
  • #header .search_field's icon is defined in a image. Won't allow a theme to reuse it.
  • #account-nav should use a background color and not a gradient image. CSS3 gradients can be used to enhance it as needed.
  • #header li.drop-down > a:hover should be easier to override the background color. Remove the background color and define a "higher" level rule for all hovers in that area?
  • Same for #header li.drop-down.open's background color. Will be difficult to override in a theme.
  • Does #sidebar a... need a color too? Seems like it could use the default colors. Might be since the #sidebar is included inside of #main-menu. Sounds like the sidebar should be outside of the main menu.
  • fieldset.collapsible.header_collapsible legend and it's hover might need to be tweaked.
  • .title-bar .title-bar-actions .contextual a.icon's color should be defined at a higher level so it can be overriden
• [Nice to have] Increase the size of the breadcrumb (#breadcrumb)
• [Nice to have] The breadcrumb is underlined but isn't a link.
• [Nice to have] Cleanup on the sidebar menus, some text is really close and unreadable (e.g. Project overview)
• [Nice to have] The Modules menu is linked to '#' which isn't useful

Issues

• [Blocker, Done(ED)] Remove the gold gradient from the issues list on selected items
• [Blocker, Done(ED)] Content menu items have padding problems on the left and right. Either not enough padding or too much.
• [Blocker, Done(ED)] There isn't enough separation between the Issue data and it's history. There is just the History title and an underline but the issue data itself uses underlines.
• [Blocker, Done(ED)] Issue history items have too much left padding and are out of line with the rest of the page.

• [Nice to have] The left/right and up/down buttons are too high up. Issues List > Filter Options > Columns.
• [Nice to have] Content menu font feels crushed (wrt its height)
• [Nice to have] Issue Action menu isn't distinguished from the rest of the page. It should have a background or something.

• [Later] Context menu is missing most of its icons, needs discussion about icons or not.
• [Later] Maybe a point for later, but I think the alternative representations of content (PDF, CSV and so on) should be made more discoverable, maybe even moved from the bottom to the top of the page or something…

My page

• [Nice to have] Items with tables overflow the background images. Tested at the minimum browser width (no horizontal scroll-bar) with "Issues assigned to me" on left and "Reported issues" on right.
• [Nice to have] Items with tables have messed up background when hovering. Every other row gets a light yellow background, should be every row and/or have some table striping.

Admin

• [Blocker, Done(ED)] Revert the /admin view so it's still a menu of items.
  • Why? What's the advantage? If you start with the first page and have the items in the main menu you have the same result with one view already loaded. -- Romano
  • Many people visit /admin directly, the current version shows a blank page which is a poor user experience. Until something better is added at the /admin view it should show the menu items. --Eric

• [Blocker, Done(ED) critical, TODO LATER and Refactors] Few minor and code quality comments in https://github.com/chiliproject/chiliproject/pull/122 Will need to do a sweep through this after the required stuff is done to address some of the most important stuff.

Eric's feedback¶

Code review¶

Much of this is done on the GitHub pull request itself https://github.com/chiliproject/chiliproject/pull/122

commit-by-commit review (all commit shas are based on the original pull request)

• 734da91b4b7c8cc6479ca55873a058a8b63ed2b3 - has a lot of javascript just for the login menu slidedown
• f2bb5d7cf9412f88c3c93e32769bf9ce023ea643 - add choosen.js library, needs to be reviewed.
• c57c8fafff93c486d900a644ea2b7ee6281b3a0e - modification to choosen.js library, doesn't appear to be compatible with upstream
• 3cd5058a176fdd580b39b42e481a1b8fb1a0e097 - modification to choosen.js library, doesn't appear to be compatible with upstream. JavaScript string building and regex needs to be reviewed for security.
• 74b358661989d1d75ff582a9c096c2e13a2b1444 - modification to chosen.js library's css file.
• ffb3e71bb68c879dd6a1b84a4c235342c6ab1538 - modification to chosen.js library's css file.
• d46fa1b622de9b82afa774d705d7cb3ef77c5ed7 - modification to chosen.js library's css file.
• e998e910d5bd05a43ea1c2a7cf3387c5bff3259a - modification to chosen.js library's css file.
• 02c2383d3cf0a30b06ac8678706f0f767f6ac3c6 - modification to choosen.js library, doesn't appear to be compatible with upstream
• 929f1eee9971b30036b5db1c98aa86080eda72d1 - modification to chosen.js library's css file.
• a4052a53f6c4ee20ab4b7179f635e05fe056df12 - removed the issue subject on the lower title bar
• 65d485dbde9b1910681e8324ee60d182b677af9b - move to submenus issue (#559)

Feature review¶

• Need logo uploader or similar feature
• Project list is easily broken. Example: Open menu, click outside the menu, click menu to reopen, all projects gone.
• Remove submenus on the project menu
• Replace logo with textual one until an official logo is created
• Many of the font sizes feels smalls
• Theme-ability. Tested by porting the latest S&P theme to the new design
  • #header should probably use a background color and not an image
  • #header .search_field's icon is defined in a image. Won't allow a theme to reuse it.
  • #account-nav should use a background color and not a gradient image. CSS3 gradients can be used to enhance it as needed.
  • #header li.drop-down > a:hover should be easier to override the background color. Remove the background color and define a "higher" level rule for all hovers in that area?
  • Same for #header li.drop-down.open's background color. Will be difficult to override in a theme.
  • Does #sidebar a... need a color too? Seems like it could use the default colors. Might be since the #sidebar is included inside of #main-menu. Sounds like the sidebar should be outside of the main menu.
  • fieldset.collapsible.header_collapsible legend and it's hover might need to be tweaked.
  • .title-bar .title-bar-actions .contextual a.icon's color should be defined at a higher level so it can be overriden

Design review¶

Just using the site and doesn't include a code or feature review.

Design

• Logo: I would prefer we don't change the logo yet and open up the logo ideas to the community. We talked about a logo contest, what happened with that?
  • I think that's more of a placeholder for the moment -- Felix
  • No problem for me. If somebody else has a better idea for a logo please feel free to propose a new version -- Niels
• Logo image isn't linked to the home page.
  • I think the home icon in the "overall tabs" in the right of the header section serves that purpose, I wouldn't mind the logo pointing to the home though -- Felix
  • Good idea. The logo should also link to starting page -- Niels
• The breadcrumb (#breadcrumb) is too small for the information it's showing (project name).
  • I agree. We should try to increase font size -- Niels
• The breadcrumb is underlined but isn't a link.
  • Yes, every element in the breadcrumb should be a link -- Niels
• Issues list has two submenus "View all issues" and "Summary" which should be discussed under a separate issue.
• Content in the sidebar under the menu feels really close, almost to the point of unreadable. (Project overview).
  • Yes, the sidebar is far away from being perfect. I think it is only an interims solution. I guess that more and more elements from the sidebar have to move to either the project menu as a subitem or to the main content section -- Niels
• Some pages have duplicated titles in the sidebar (Issue list, Wiki). Will need to be touched up as we find them or move things into submenus.
• On narrow displays, when you view a page with the tabs (Project Settings, System Settings) there are little left and right arrows that appear by the tabs. In this design the arrows are at the bottom of the page.

Account Nav menu (#account-nav)

• I don't like how it's activated on a click. Activating a hover feels better to me and is how the previous version worked.
  • I like click better because it's more predictable and akin to what your desktop menus do. I've also had it all to often that on-hover menus just disappear
    again when you move your mouse over some arbitrary border, which is frustrating -- Felix
  • I also like the click option much better -- Niels
  • I prefer a click event too. Hover makes the site feel bumpy. You trigger an event without confirming (clicking) it. IMO menus should not work like this. -- Romano
• I think My Page should be an item in the username menu (far right).
  • I disagree. The My Page is the central point of information. This shouldn't be in a submenu -- Niels
  • As far as I understood, the My page is a customizable overview about the whole application from the users perspective. Although I can understand why logically it should be an item in the username menu, from a usability perspective it makes no sense at all. Firstly, it hides the function (discoverability), secondly you need more clicks to reach it and thirdly it just feels less important - that shouldn't be! -- Romano
  • Good points, I'll agree with those. -- Eric
• I don't know about the term Modules for that menu. It's better than the previous one (More) but it still doesn't fit. We are already calling other things modules (issue tracking, time tracking, etc).
  • I think we haven't found anything better than "(instance) modules" for this, I'm happy to hear other ideas :-) -- Felix
  • Thinking about it... -- Eric
  • Okay. Google, Yahoo, and MSN all use the term "More". That's enough for me to call this menu more (also a pretty good description, since it is saying there are "more things in here").
• The username menu should go to the edge. That's an important area (Fit's law)
  • As far as I understand, fit's law does not apply for web applications. Unless in fullscreen mode (on some os) the browser has content on the right side (scrollbar) as well as at the top (menu bar).
  • I disagree, especially if a previous usability comment is about making the design more like a desktop. -- Eric
• The Modules menu should include the Administration menu items for admins.
  • Doesn't it? Admin is in modules on ux.finn.de at least, might have been lost somewhere on the way -- Felix
  • Agree, even on the current unstable branch. -- Romano
• The Modules menu is linked to '#' which isn't useful
  • That might be an accessibility requirement (it hints screen-readers that that item "does" something), can't say for sure though, I'll ask Romano -- Felix

Projects menu (inside the Account Nav)

• Linking the Projects menu and having the first item to "All Projects" is redundant.
  • Why is it redundant? There is currently no other way to access the old project overview -- Niels
  • If you click on the Project menu "title" without JavaScript or click and open in a new tab it will open the project listing. This is a problem with taking over the click even for opening the top menu. -- Eric
• If a project has a long name it is cut off
• If a project has a long name and you hover over it the menu's width expands (still not enough to see it completely). Then when you move your mouse the menu width shrinks. This causes a flickering effect.
• Projects in the menu cannot be opened in a new tab/window using a middle click or right click.
• Somehow by opening and closing the projects menu I was able to lose all of the projects. Seems the project list is keeping it's display:none randomly.

Issues

• The left/right and up/down buttons are too high up. Issues List > Filter Options > Columns.
• When selecting an issue on the list it is highlighted in gold (good) but if the issue is multiple lines then a blue background appears below it
• Context menu is missing most of its icons
• Content menu items have padding problems on the left and right. Either not enough padding or too much.
• Issue Action menu isn't distinguished from the rest of the page. It should have a background or something.
• There isn't enough separation between the Issue data and it's history. There is just the History title and an underline but the issue data itself uses underlines.
• Issue history items have too much left padding and are out of line with the rest of the page.

My page

• Items with tables overflow the background images. Tested at the minimum browser width (no horizontal scroll-bar) with "Issues assigned to me" on left and "Reported issues" on right.
• Items with tables have messed up background when hovering. Every other row gets a light yellow background, should be every row and/or have some table striping.

Admin

• /admin is blank, missing the items or content. I think the menu items should still be here, especially since many people go directly to /admin
• Admin menu items are missing the icons (I think the project menu should have them too)
  • Regarding icons at least in the admin (and project) menu, maybe even the issue list right-click menu, I've found them confusing and even only mildly related (if at all) to the concept they're supposed to illustrate. For example in the admin menu: "Tracker" is a yellow post-it, what's the connection (other than the yellow post-its being used for tickets…)? Or the icons in the project menu here: the "files" have what I'd interpret as a zip file, the wiki has some sort of a note, the overview a page and the activity a lightning bolt, it's not associations I'd call intuitive. Lastly, it puts a "pressure" on module authors to provide an icon, which will likely be a bad one than none more often than not. For more info, I also suggest reading this post about icons and usability: “icons contrary to intuition, do not necessarily help the user find a menu item better than a text label alone. It’s not worth it.” -- Felix
  • Then they should be optional (theme based). I personally find them more useful and so do the people who use my system. -- Eric

Icons

• The current icons don't really fit to the new design. Finnlabs is curently working on a new set of icons. First results will be proposed this week. -- Niels

Felix's feedback¶

Code review¶

I've added comments on the pull request on github.

Regarding the addition of and changes to chosen.js: I'd hate doing everything possible to use "stock" gems instead of vendoring and patching them and not applying that to js stuff just because it's js. We should at least try to work with upstream to integrate the changes we need/make it easier to integrate those without touching the core lib. Same thing for the chosen.css: If we use it, we should try to touch the core css as little as possible and override it as needed in the application.css.

Design review¶

From what I've seen until now, I haven't repeated what Eric had already up there/what I've commented on in Eric's sections.

Design

• Logo: As discussed above, I'm not sure how much I like this mixed typeface thing, we should probably stick to the text-only version for now.
• Maybe a point for later, but I think the alternative representations of content (PDF, CSV and so on) should be made more discoverable, maybe even moved from the bottom to the top of the page or something…

Issues

• selected issue in list: I'm not sure about the gradient (feels "too much" to me") and the color, I think the previous solution of a color with more difference to the surroundings was better. Furthermore, would it be possible to apply some alternating colors to the selected issues too?
  • I agree about the gradient, looking at the current S&P theme the gradient was removed completely. Lets just use a simple color like how it is now. -- Eric
• The font of the context menu feels crushed (wrt its height)
• I've somehow always had the feeling that the issues on the list should have some sort of a pop-up to be able to have a quick/light drill-down on them without having to go to the issue pages themselves. Maybe something like the calendar/gantt pop-ups? Those could maybe even be re-used at other places (issue lists in general, i.e. also on the roadmap view, the issue tree on the single issue view, and so on)? (Not for now though)
  • I have some tooltip stuff in the S&P theme that has worked pretty good. I'm planning to extract it and propose using it once the theme is done. -- Eric