Cbioportal: Update header/navigation design

[brittanydionigi]

We're going to clean up the style of the header and navigation a bit. Some work has previously been done on this by @pieterlukasse. Thanks for the head start ;)

A couple of questions based on the work done in #1913:

• Are we swapping out the MSK logo for the Hyve logo permanently or do we need both? Is it important that these logos are in the header or can we potentially move them around a bit?
• I see there is a concept of authentication, a 'logged in' status message that appears in the upper right corner. In what scenario is someone actually logged in? I haven't seen a login or signup page within the application anywhere. Can someone let me know so I can account for that in the design as well?
• How do we feel about updating the cBioPortal logo very slightly? I'd like to do very subtle color and font adjustments if possible. Updating the logo colors will make it easier to create a fresher, more modern color scheme for the entire application. I'm thinking something along the lines of this:

Thoughts? @cBioPortal/frontend

[zhx828]

First of all, thanks a lot for getting this started and this is great. Just a comment on the LOGO. The color scheme is matched with our classic oncoprint color scheme which most of our users are familiar with. Not sure about changing that unless we have a discussion and get most approvals from different institutes.

[mandawilson]

Yes, I agree this is great!

[brittanydionigi]

@zhx828 Thanks for the info! For now I can work with the colors as-is, but yea that's definitely a discussion I'd like to have in the future :)

[jjgao]

@brittanystoroz Thanks for getting started.

• Agreed with @zhx828 about the cBioPortal logo.
• The Hyve logo is just an example of their local instance. I just re-open the pr #1913 and you can see the change @pieterlukasse made here. If the link doesn't work, try to refresh a few times.
• We (@schultzn) are also thinking of remove the MSK logo. And the middle part is also not useful so we can get rid of it. The only thing we need to keep the the cBioPortal logo. Maybe you could try to redesign the header (or remove the header)? Let me know if I am asking too much for the first round.
• Could you register an account here (http://www.cbioportal.org/private/login.jsp) so that we can authorize to our private portal that requires log in?

[schultzn]

I agree… all we need is the cBioPortal logo - we can probably live without the tag line.

On Dec 12, 2016, at 12:41 PM, JianJiong Gao [e-mail] wrote:

@brittanystoroz https://github.com/brittanystoroz Thanks for getting started.

Agreed with @zhx828 https://github.com/zhx828 about the cBioPortal logo.
The Hyve logo is just an example of their local instance. I just re-open the pr #1913 https://github.com/cBioPortal/cbioportal/pull/1913 and you can see the change @pieterlukasse https://github.com/pieterlukasse made here https://cbioportal-pr-1913.herokuapp.com/. If the link doesn't work, try to refresh a few times.
We (@schultzn https://github.com/schultzn) are also thinking of remove the MSK logo. And the middle part is also not useful so we can get rid of it. The only thing we need to keep the the cBioPortal logo. Maybe you could try to redesign the header (or remove the header)?
Could you register an account here (http://www.cbioportal.org/private/login.jsp http://www.cbioportal.org/private/login.jsp) so that we can authorize to our private portal that requires log in?
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub https://github.com/cBioPortal/cbioportal/issues/1983#issuecomment-266498243, or mute the thread https://github.com/notifications/unsubscribe-auth/ALV34Ke-pnTmHxV6oEcCQDNNN1qr4ceHks5rHYdHgaJpZM4LJJTt.

[brittanydionigi]

Yea I was planning on just getting rid of that tagline and asking for forgiveness later haha, but I'm glad we're all on the same page with that :)

[brittanydionigi]

@jjgao Removing the other logos and taglines makes it way easier to redesign the header. I think it makes sense to keep some sort of header for now, as to not alienate people who have been familiar with this site for years.

There's currently a lot of wasted space that I want to clean up a bit. Some quick, initial iterations I thought of would remove the tagline and MSK logo, and move the navigation bar to the upper right corner, inline with the cBioPortal logo. Something like this:

Again, not final, but a start. (note this screenshot does not reflect the sidebar changes we're making.)

If I'm not mistaken, the links in the navigation bar (from a usability perspective) are not the most crucial parts of the site to have up at the top, in bright blue, taking up a ton of room. It sounds like most people come into the bioPortal directly for the Query interface and data summaries, rather than the the Web API/About/Visualize/Tutorials pages. I think the changes in the attached screenshot help make these links a little more subtle, but still available. Eventually I can see us moving these types of links and information down into a more comprehensive footer, but nobody likes change, so we're going to take baby steps here.

Thoughts and feedback welcome! I still have to code all of this out, so there's plenty of time to protest before then.

[schultzn]

I like it!!

And you are correct, this navigation bar is not used frequently, so de-emphasizing it is a good idea. Once a user has initiated a query, most of the interaction is with the tab headers.

Niki.

On Dec 12, 2016, at 7:19 PM, .DS_Storoz [e-mail] wrote:

@jjgao https://github.com/jjgao Removing the other logos and taglines makes it was easier to redesign the header. I think it makes sense to keep some sort of header for now, as to not alienate people who have been familiar with this site for years.

There's currently a lot of wasted space that I want to clean up a bit. Some quick, initial iterations I thought of would remove the tagline and MSK logo, and move the navigation bar to the upper right corner, inline with the cBioPortal logo. Something like this:

https://cloud.githubusercontent.com/assets/856935/21122217/dbab048c-c09e-11e6-9f73-57d00443e37f.png
Again, not final, but a start. (note this screenshot does not reflect the sidebar changes we're making.)

If I'm not mistaken, the links in the navigation bar (from a usability perspective) are not the most crucial parts of the site to have up at the top, in bright blue, taking up a ton of room. It sounds like most people come into the bioPortal directly for the Query interface and data summaries, rather than the the Web API/About/Visualize/Tutorials pages. I think the changes in the attached screenshot help make these links a little more subtle, but still available. Eventually I can see us moving these types of links and information down into a more comprehensive footer, but nobody likes change, so we're going to take baby steps here.

Thoughts and feedback welcome! I still have to code all of this out, so there's plenty of time to protest before then.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub https://github.com/cBioPortal/cbioportal/issues/1983#issuecomment-266596325, or mute the thread https://github.com/notifications/unsubscribe-auth/ALV34OuhZaKiKMrQyKqA6IxpwH6gMqilks5rHeSLgaJpZM4LJJTt.

[inodb]

@brittanystoroz Nice, that looks great!

Did you try making the left & right side white as well? More like the github layout instead of having a box around the main content.

Edit from @brittanystoroz: @inodb Yep, I'm planning on doing that as well! Just making subtle changes to start, but that's likely something that will get put into the PR for this as well.

[schultzn]

@brittanystoroz https://github.com/brittanystoroz One more thought - for private instances of cBioPortal, we will need a place to indicate the login status, like in the screenshot below.

Niki.

Edit from @brittanystoroz: @schultzn yes, I will definitely take this into consideration. I hadn't seen the login status indicator on the cBioPortal at the time I started drafting this redesign, but I'll definitely work it into the changes. Thanks!

On Dec 12, 2016, at 10:10 PM, Ino de Bruijn [e-mail] wrote:

@brittanystoroz https://github.com/brittanystoroz Nice, that looks great!

Did you try making the left & right side white as well? More like the github layout instead of having a box around the main content.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub https://github.com/cBioPortal/cbioportal/issues/1983#issuecomment-266624474, or mute the thread https://github.com/notifications/unsubscribe-auth/ALV34EPQxF3aG4GxPFaN70l4Abob7llEks5rHgyOgaJpZM4LJJTt.

[jjgao]

@brittanystoroz great start!

Following up on @schultzn's point of de-emphasizing the navigation bar, after the user initiates the query, maybe we can just remove the whole navigation bar. For example, we can put the logo before Modify Query -- see below.

[ecerami]

@brittanystoroz: this looks like a great start! I like the logo changes + changes to the header and navbar.

Regarding sign in / sign out, @priti88 or I can show you how the cBioPortal @ DFCI works, so you can get an idea.

We probably also want / need a way to add one additional logo to the header for private cBioPortal instances. For example, for the DFCI portal, we have included a DFCI / Brigham logo. This additional logo is set via a properties file. Again, @priti88 or I can show you when you have a few minutes.

[ecerami]

@brittanystoroz: another cBioPortal instance that you may want to check out: https://cbioportal.gdc.cancer.gov/cbioportal/

[brittanydionigi]

@ecerami Thanks, I'll plan on being in the office for at least half a day tomorrow morning, if we can block out some time to go over this then.

[pieterlukasse]

@brittanystoroz in many custom installations the users like to display their institute's logo to show that this is a local instance of cBioPortal. Would be good to keep some space for that. Can you make a proposal of how it would look with the cBioPortal and an institute logo (e.g. use the DF logo)?
Edit: I see @ecerami made the same comment :)

[DarioS]

I'm always confused why Tools doesn't show all of the tools available, such as Survival Plot and Co-Expression Plot. It would be nice to be quickly able to see what tools are available without needing to load a dataset. The tools should be more prominent on the homepage.