Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

should we reconsider the hamburger icon? #6356

Closed
jjgao opened this issue Jul 3, 2019 · 16 comments · Fixed by cBioPortal/cbioportal-frontend#2546
Closed

should we reconsider the hamburger icon? #6356

jjgao opened this issue Jul 3, 2019 · 16 comments · Fixed by cBioPortal/cbioportal-frontend#2546

Comments

@jjgao
Copy link
Member

jjgao commented Jul 3, 2019

I find it confusing to duplicate the actions in icon and dropdown of the hamburger icons.

image

I think I have seen other website doing this but only list additional items in the hamburger. Maybe we should do the same, ie. having infrequently used items in the hamburger only, e.g. for this? When there is no item, we could just hide it.

@adamabeshouse @tmazor @schultzn

@schultzn
Copy link
Contributor

schultzn commented Jul 3, 2019 via email

@adamabeshouse
Copy link
Contributor

adamabeshouse commented Jul 6, 2019

how about using a question mark icon instead, and maybe also adding a header in the dropdown that says “Help” ?

@zhx828
Copy link
Member

zhx828 commented Jul 8, 2019

I have a running instance to elaborate JJ's suggestion, the hamburger icon is removed for pie chart but kept for bar chart to include the Custom bins feature.
https://cbioportal-frontend-pr-2518.herokuapp.com/study/summary?id=acc_tcga_pan_can_atlas_2018

@adamabeshouse
Copy link
Contributor

how about we run a google analytics experiment to settle it once and for all?

@jjgao
Copy link
Member Author

jjgao commented Jul 9, 2019

@zhx828 thanks for the implementation.

@adamabeshouse I don't think we need a Help icon since we already have a tooltip on each icon. I am also not sure if running analytics would help -- say if we found 50% (or even more) users uses the hamburger icon, does that mean it's a good choice? I think providing two entries for each of the options in a small interface is confusing. Annd I think the user can be trained if we provide only one option. I would prefer the hamburger icon onnly over the current solution for simplicity but I get Niki's point about two clicks. Since we don't have so many icons after all and we can move future non-critical icons into the hamburger icon, I would vote for not duplicating the items.

@cBioPortal/product any comments?

@adamabeshouse
Copy link
Contributor

adamabeshouse commented Jul 9, 2019

@jjgao if we dont want to duplicate then if we found users overwhelmingly prefer the hamburger then we would keep it there. Also its not two clicks its one click, the menu opens on rollover.

@tmazor
Copy link
Contributor

tmazor commented Jul 9, 2019

I agree that its confusing to have buttons shown twice.

I think I also prefer the hamburger menu over individual buttons in general, although I wonder how well that will work for something like the download button, which currently brings up a menu of its own. That said, I don't feel super strongly about the hamburger menu vs individual buttons as the ultimate solution. I would also be fine with using the hamburger menu for some buttons and keeping others outside the menu. But I definitely strongly support not duplicating any buttons.

@jjgao
Copy link
Member Author

jjgao commented Jul 10, 2019

Let's try and see how it look like when we have all in the dropdown. @adamabeshouse @zhx828 could you mock it up. Maybe @zhx828 can modify it in your PR? For download, is it possible to have a submenu for the different options?

@jjgao
Copy link
Member Author

jjgao commented Jul 10, 2019

Actually, let's leave info, reset filter, and close buttons and try to move all others into the dropdown? @zhx828

@zhx828
Copy link
Member

zhx828 commented Jul 10, 2019

@jjgao will do in my pr.

@zhx828
Copy link
Member

zhx828 commented Jul 10, 2019

@jjgao @adamabeshouse @tmazor @schultzn I have updated the instance base on JJ's suggestion. Now only info/reset/delete icons are in the header, the rest icons are moved to hamburger icon. The download also has a submenu but the functionality hasn't been implemented yet. Please take a look and give us some feedbacks. https://cbioportal-frontend-pr-2546.herokuapp.com/study/summary?id=acc_tcga_pan_can_atlas_2018

@adamabeshouse
Copy link
Contributor

@zhx828 i think it looks great!

@tmazor
Copy link
Contributor

tmazor commented Jul 10, 2019

I like it!

@zhx828 one thing I noticed is that the download menu always opens to the right, which doesn't really work for charts on the right side of the window.

@zhx828
Copy link
Member

zhx828 commented Jul 10, 2019

@tmazor yeah, I noticed too. There are few more things need to be considered when the actual implementation is done. I didn't do any of that just in case we want to change the prototype.

@schultzn
Copy link
Contributor

schultzn commented Jul 10, 2019 via email

@zhx828
Copy link
Member

zhx828 commented Jul 15, 2019

@jjgao @tmazor @schultzn @adamabeshouse this is now deployed in production.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

5 participants