I found an interesting UI problem today, on a site that I will be kind enough not to actually link to. Instead, I’ll just reproduce the general concept and problem here:<\/p>\n
You roll over one of the list items, and you get an immediate visual reaction: not only does the background change color, but the mouse cursor even becomes a pointer. It’s not just suggesting<\/em> that your cursor is over a clickable item; it’s flat-out asserting that to be the case<\/em>.<\/p>\n And it’s lying.<\/p>\n The clickable area is nothing but the text in the very center of the nav bar item, and the only feedback you’ll get when you hover over that<\/em> is the destination URL appearing in your browser’s status bar \u2014 if<\/em> you have that turned on; many browsers leave the status bar off by default.<\/p>\n I’m fairly sure the people at Anonycorp didn’t mean to do this. I think it was just an ill-considered (and poorly QA-ed!) mistake in choosing which CSS rules to apply on which elements. But it’s a horrible, cruel UI trick to play on your visitors and users. Don’t do this.<\/p>\n","protected":false},"excerpt":{"rendered":" I found an interesting UI problem today, on a site that I will be kind enough not to actually link to. Instead, I’ll just reproduce the general concept and problem here: alpha beta gamma delta The links all just link straight to the nav bar itself, so if you scroll your browser view so that […]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[58,39,29,8,10,9,30],"_links":{"self":[{"href":"https:\/\/kagan.mactane.org\/blog\/wp-json\/wp\/v2\/posts\/66"}],"collection":[{"href":"https:\/\/kagan.mactane.org\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kagan.mactane.org\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kagan.mactane.org\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/kagan.mactane.org\/blog\/wp-json\/wp\/v2\/comments?post=66"}],"version-history":[{"count":5,"href":"https:\/\/kagan.mactane.org\/blog\/wp-json\/wp\/v2\/posts\/66\/revisions"}],"predecessor-version":[{"id":69,"href":"https:\/\/kagan.mactane.org\/blog\/wp-json\/wp\/v2\/posts\/66\/revisions\/69"}],"wp:attachment":[{"href":"https:\/\/kagan.mactane.org\/blog\/wp-json\/wp\/v2\/media?parent=66"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kagan.mactane.org\/blog\/wp-json\/wp\/v2\/categories?post=66"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kagan.mactane.org\/blog\/wp-json\/wp\/v2\/tags?post=66"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
\nThe links all just link straight to the nav bar itself, so if you scroll your browser view so that the list isn’t<\/em> right at the top, you’ll be able to tell when you’ve clicked one of the links. See what happens?<\/p>\n