1375962 - Submenu links are hard to click (large screen layout)

Status: RESOLVED FIXED

(developer.mozilla.org Graveyard :: Design, enhancement)

Description

[Florens Verschelde :fvsch]

What did you do?
================
Logged into MDN as a beta tester (June 2017 redesign), and tried to access sections such as "CSS" and "HTML" from the main navigation.

What happened?
==============
The "Technologies > HTML" and "Technologies > CSS" links proved hard to click with a mouse pointer, since you have the precisely click the letters "HTML" or "CSS" (that's small).



What should have happened?
==========================
I expected the full row where the link happens to be a click target, and not only the left-aligned words.

Is there anything else we should know?
======================================
As a front-end developer leading a small team, this is a common issue we watch out for. Basically, we ask the question "how big might the click target be in users’ minds?" and try to match the expectations of users who expect some of the most generous click targets.

Keeping the current design, this can be implemented in CSS with code looking like this:

.submenu li {
  /* down from 15px */
  margin-top: 5px;
  /* or, lessen the padding on the container */
  margin-left: -5px;
  margin-right: -5px;
}
.submenu li a {
  /* take the full width */
  display: block;
  /* add a bit of buffer for the click area */
  padding: 5px;
}

A good way to test those issues is with some test code looking like:

a, button {
  outline: solid 2px red;
  outline-offset: -2px;
}

Running this test on e.g. https://developer.mozilla.org/en-US/docs/Web shows issues with the breadcrumbs (link is too wide and may clash with other content), social icons which are a bit hard to click in the footer, other icons with little extra padding (close buttons for dropdowns, where the icon has a bit of padding but it's not very big and not symetrical), and other possible tweaks.

Be careful with clickable items which are not semantic links or buttons (whether they should be or not is a different issue). For instance this reveals a usability issue:

/* current hitbox is tall but very thin! */
.search-trigger {
  outline: solid 2px lime;
  outline-offset: -2px;
}

Comment 1

[Stephanie Hobson [:shobson]]

I've also had bugs complaining the link hit areas are *too big*. It's hard to please everyone >_< I do agree we are not striking the right balance with the header navigation though. Thanks Florens :)

Comment 2

[Kadir Topal [:atopal]]

Looks like the main issue with the navigation has been fixed, but yeah, the brad crumb links still span the whole width of the page, I don't think that's intended.

Comment 3

[Stephanie Hobson [:shobson]]

Submenu links should be fixed by https://github.com/mozilla/kuma/pull/4293.