[wp-meta] [Making WordPress.org] #1814: Style Code Reference ToC links to better indicate interaction

[Making WordPress.org]

#1814: Style Code Reference ToC links to better indicate interaction
-------------------------------------------------+-------------------------
 Reporter:  kevinwhoffman                        |       Owner:
     Type:  enhancement                          |  DrewAPicture
 Priority:  normal                               |      Status:  accepted
Component:  Developer Hub                        |   Milestone:
 Keywords:  has-screenshots ui-feedback has-     |  Resolution:
  patch                                          |
-------------------------------------------------+-------------------------

Comment (by kevinwhoffman):

 @drewapicture Forgive me for getting a little nitpicky with my designer
 hat on.

 Affordance is a web design principle in which characteristics imply an
 action. In other words, elements that are clickable should look clickable,
 regardless of whether you can deduce their purpose based on their
 surroundings (such as within a ToC). For hyperlinks, that usually means
 styling them differently through font-color, font-style, or underlining
 them and adding a hover style to further imply interaction.

 Most mobile devices will flash the hover style when tapped, but that's not
 the point. The user has already initiated the action. Affordance is about
 suggesting action before the action itself takes place. And right now,
 there is still nothing outside of their presence within a ToC that
 indicates these are links because they look exactly like the content text.

 I get what you're saying that a reasonable person can figure out they are
 links. I'm less concerned about this specific ToC scenario than I am about
 how this is being handled throughout the rest of Devhub, especially when
 it seems like a step backwards compared to the UI of the Codex.

 I was asking in Slack if a style guide is available to guide these
 decisions. If you know of one or are interested in starting one, let me
 know.

--
Ticket URL: <https://meta.trac.wordpress.org/ticket/1814#comment:7>
Making WordPress.org <https://meta.trac.wordpress.org/>
Making WordPress.org