Discussion: navigation drop-down menus

gabsie commented 4 years ago

Hi, Ken and Stu

I have a request with respect to: Top nav and a sub-nav! See answers to your questions below. Thank you!

Standard questions

In a few words, what does this component look like? We will need to bring some sort of organisation of the top navigation on the COVID-19 Data portal.
In a few words, what does this component do? The goal with this navigation is to allow users to browse content which is other than data, i.e. find about about who is behind this project, contact, collaborate, participate. (About/Contacts/Partners, etc) However, while I haven't been looking this summer, people have added all kinds of other content in that space, because they didn't know where else, and it looks untidy and disorganised.
Would a rebrand change the structure or layout of this component? I don't think so..
Can other websites use this component? Or is it only useful in your organisation or website? The Covid portal is quite different at the moment, but maybe similar different websites might need a subnavigation to top nav?
Do you have any designs or concepts? Yes, attached!
Have you done any user testing already? No, for the moment I am trying to organise content based on theme and what is already out there.
How often do you expect to make use of this component? Not sure.

Any further thoughts?

So I have suggested the attached for now, but would welcome please your advice and feedback, as well as ways we can possibly make this in an alternate way? Would love your professional design help.

I see that top nav functioning in a way similar to https://www.figma.com/ - and those bullets for hierarchy in my suggestion can be ignored, actually. Also - colours/fonts/etc - I will leave those decisions to you, and consider this just a black/white suggestion

COVID portal home - top nav

TabeaMira commented 4 years ago

@gabsie thanks for the productive meeting. A few comments on the drop down menu (regardless feedback on metrics) – less line (spacing) – pop-up box closer to "about"" – no indent – horizontal divider lines are visually "heavier" than the text (suggest to make the lines thinner) – the form of the arrow behind "about" seems visually not connected to other graphical elements. How this triangle could be derivated: top part of the white arrow within the blue circle OR fill this lined arrow to change it into triangle (so the angle of the three sides would be aligned). Hope this is in line with your thoughts @khawkins98 @sturobson

khawkins98 commented 4 years ago

Adding a few things/ideas/comments.

You might consider the arrows from the vf-tree:

Also the dropdowns from www.figma.com are VF-like:

Disclaimer: historically navigation dropdowns have been a poisoned chalice for the services as:

dropdowns allow an unlimited depth to the navigation
enables services to have a cluttered IA
users have to then explore each dropdown for the link they might need
they require JS which complicates development and accessibility
- JS is both required to show/hide the dropdown but also thing like "hoverintent"
- "how to do it on mobile"
- you cannot ctrl+f command+f to find content in dropdowns

So we've always recommended against navigation dropdowns as (unless rigorously managed and measured) have negative technical, UX and goal performance.

But as discussed you may not have much choice if you add a dropdown, so would be very interested in metrics on the dropdown open rate and its performance.

sturobson commented 4 years ago

a quick note that the live implementation here doesn't allow keyboard focus on the dropdown so we'd need a solution that addresses that.

khawkins98 commented 4 years ago

Adding notes from our VF UX Clinic conversation today.

The current plan is to add this to the roadmap for sometime next year. It could be prioritised if there is significant demand or we learn something new.

There is a general uncertainty if we should "endorse" the use of dropdowns as officially supported; if we did:

What would be the rules about when to use them?
Are they effective?
Should they be narrow or full width? Should they be link lists, or support content? (see screenshots)
How would we support native JS, Angular, React and all the other things?
Accessibility ...
And last but not least: what should they look like?
Could a hamburger menu be a more sustainable option?

Example: https://www.crick.ac.uk/

Example: https://www.figma.com/

khawkins98 commented 3 years ago

I've moved this into a conversation at https://github.com/visual-framework/vf-core/discussions/1299

visual-framework / vf-core