Hacker News Reader

> There's a UX problem on mobile. I have to click on something to make the GIF appear. What do I click? A link. Expected behavior of a link is to link me elsewhere, not to show a pop-up GIF, so I'm immediately confused when that happens.

The underlines being dotted, it's closer to an <abbr> element (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ab...), which does not act as a link.

I'm staring at this conclusion with the most bemused expression on my face. I'm thinking of the lines painted on the highway, wondering what tragedies would result if yellow line, white line, dotted line, and solid line were similarly ambiguous.

Sometimes liberties are taken here, such as California originally separating carpool lanes with yellow lines (when they should have been white).

Presumably they felt that even though yellow was incorrect, it sent a clearer "do not cross" message to drivers.

They were later ordered to change them to white.

I noticed that change recently and assumed it was motivated by Tesla. There are certain things we all take for granted when driving. A huge one that we probably don’t give much conscious thought to us this:

How do we know if the lane to the left is ok to go in, or if it actually is for carrying oncoming traffic?

You’d like to think that one way though not the only way, is to look for a double yellow line. As in, double yellows always separate opposing traffic so never cross them.

In CA though, double yellow was also chosen to separate the carpool lane as OP mentioned. So there was actually a really mundane case where driving to the left of a double yellow was actually fine. Seems very confusing to an autonomous car that’s operating at the mental-level of an 18mo old.

You are giving way too much credit to autonomous vehicles in this theory. Line colours are standard throughout all of North America (that I’ve seen so far). Yellow means what it means. This carpool line experiment would have been confusing to any driver seeing it for the first time.

Imagine a tourist on that highway for the first time, at 3am, when there’s no traffic. Can they use that lane? Can they pull a sneaky u-turn and start driving the opposite direction?

What if I’m driving down the highway, effectively on mental autopilot, and suddenly become aware that I’m on the “wrong” side of the yellow line? How would I be likely to react?

The opportunities for misunderstanding by normal humans seem plenty.

I noticed that change recently and assumed it was motivated by Tesla.

My '11 Nissan Leaf couldn't even have LED taillights because the Feds said "no". Tesla isn't going to march into some DOT office and demand that the color of the lines be changed to accommodate them (I mean, they could, but the laughter would drown out the conversation).

CA changed it because not only was yellow against federal guidelines, but also because I personally believe it was a stupid choice to begin with (for reasons others have already listed).

Yellow lines separating oncoming traffic is not universal though? I believe in the UK that the center lines are white?

Living in Germany and having only driven in Mexico (City) as far as the Americas go, I admit to not understand what yellow lines signify to US drivers, like at all ;) At my place, they're used for temporarily "overriding" regular white lines eg at construction sites, and only for that purpose.

My funny anecdote around that: The road in front of my house has a dual center yellow line, but the reflective additive they used in the paint shows up white. At night all of the lines are white. VERY confusing.

That sounds like something you should report to an authority. It could even be a whistleblower issue if the contractor shorted the city with substandard glowy stuff and it's causing serious safety issues.

Were there mandatory prescriptive federal guidelines on HOV lane line colors when California introduced carpool lanes, or did they only come after California had been using yellow lines?

Personally, I do find yellow lines are a stronger border, but then I grew up in a culture of yellow carpool lines. I feel like white lines are almost always ok to drive over, and yellow lines usually aren't (although yellow dotted lines are a sometimes drive over (if safe, to pass on a two lane undivided highway), and yellow solid + dotted is also ok to drive over (if safe, to get into a shared median lane for an unprotected left turn)

I think it's because yellow is supposed to indicate traffic moving in the opposite direction. That's why it's a stronger signal (in theory), but not "correct" for an HOV lane moving in the same direction.

California should have closed the lane once a year for one minute to run a single vehicle down the carpool lane in the wrong direction. Then they could justify that the lane marking was the right color (since in theory, the lane can be reverse-flow at any time, and hey sometimes they even do it).

> I feel like white lines are almost always ok to drive over…

Single and double solid lines parallel to the flow of traffic, of any color, almost always mean "do not cross".

A single dashed line, or a double line where one or both halves is dashed, can be crossed under at least some circumstances. The rules for crossing these vary depending on context, e.g. one-sided passing and center turn lanes use similar markings but with the solid and dashed lines flipped. (You pass from the dashed side but enter the turn lane from the solid side.)

White lines separate traffic going the same direction. Yellow lines separate traffic in opposite directions. This is independent of whether the lines can be crossed.

I've driven through places where the lanes change directions or get closed based on traffic flow, most often near sports/entertainment arenas, and they tend to have one or two lanes with dashed white lines which are always open and the rest of the 3+ lanes are dashed yellow. I've always wondered if this is an exception to a rule, or if there even is a definite DOT rule (or if localities can override DOT regulations, such as in the case of rainbow crosswalks). I do recall in my driver's education classes 20+ years ago that a dashed yellow is "allowed to enter and exit but not for travel" but again that may have been a local rule.

Works pretty well. https://www.anwb.nl/verkeer/veiligheid/strepen-op-de-weg

another option would be using this ⓘ

User will click/tap and the modal of the gif will show

This is really the only correct solution in the context of modern UX.

It's a feature comparison page, so that's the fundamental design issue.

The GIFs add pop, but the intent is to clarify. How does showing this info. on onHover or onClick in any UX achieve that result?

It doesn't.

As designed, it's an ad. It is. Look at it.

If I'm comparing a product with a full page of features, I'm going to be scrolling up and down. The one thing I absolutely won't do is hover over 16 onHover information panels while trying to compare and contrast an extensive set of features, costs, and licenses.

I'm just going to get aggravated that the information I need to make a decision keeps disappearing from view when I click or hover elsewhere.

Also, that's the kind of page you print and underline and circle things on, and give to your boss as a reason for purchase. If half the information is invisible when the page is printed, what use is it?

Yep, you said it, the pricing page is, in fact, an advertisement of the product.

It's not like you can easily compare the prices between two different products in the same segment.

It's an ad. Embrace it. Leaving out the GIFs doesn't make it less of an ad. It just makes it… a worse ad?

Also, does your boss not have a computer?

He does. He just likes the printer more. He also surfs the web on a Texas Instruments TI-85 graphing calculator, so go figure.

I'm not referring to the page as an ad, but fair enough. I see him applying a pop-up advertisement using the wrong UX element to a grid of information that doesn't benefit from it.

Wrong is the wrong word, as apparently a dotted link is and isn't a link. Indicates multiuse? That's clear as mud.

I'm a big fan of this solution, and I've used it quite a few times.

Ideally I would like to use drop downs where possible like GP describes, since a > icon (or similar) before some text unambiguously indicates how to get more information, but sometimes the implementation is non-obvious. I've had issues when my data is tabular (like this pricing page). Where should the drop down appear? Sometimes you have a 3rd party table (or template, like this article describes), and the customization options might not be there. At the very least you have to spend time styling both the additional information AND figuring out how it fits into the document flow.

The great thing about a tooltip is that it's out of the document flow. You can just ignore the rest of your application, resulting in (usually) faster development speed. However, as GP points out, you have to consider mobile, and it's not always obvious how to indicate _in_ the context of your document that something is hoverable.

ⓘ is a best of both worlds solution IMO. It's totally unambiguous on both desktop and mobile that hovering, clicking, or tapping will bring up more information, AND you get the development speed of using a tooltip.

> User will

No they won't.

I don't mean this cynically, every test I've seen with a feature like that has had _very_ low engagement.*

This is the problem with features that "get out of the way" - they are underused and the intended value is lost.

It's a conundrum, because I totally agree in terms of interaction design but what good is a (well designed or not) feature that isn't used?

Maybe those users simply aren't interested enough in your product? I think adding a simple note "click on the labels to see a demo" should be enough discoverability.

Any UX designer will tell you that users don't read notes.

This feature is effectively a <details>/<summary>. Usually they are displayed with as (▶ collapsed) and (▼ expanded) triangles. I do wonder if the circled i ⓘ has more engagement as a well placed triangle/chevron.

The page is a disaster on a desktop, too. It does something weird to the scroll, so I can't use either my arrow keys or my Vimium keys in the normal way. Note to web authors: I'm sure I'm not the only one who left quickly after I saw that my scroll was hijacked. If you want people to read your stuff, try dialing back the user abuse.

I endured the hijacked scroll because I was curious about what he meant.

It looks like a good idea, but in a very user-hostile interface, what wasn't surprising at all. If I had to guess, the author is honestly trying to increase his site's usability by overriding the default behavior, he is just failing spectacularly.

I was surprised when my arrow keys didn't work properly. Now I see you had the same issue. Using an old laptop, I'm often navigating through pages with keyboard track-pad on these old laptops is trash.

It reminds me that we don't see "floating" touchscreens anymore.

The Galaxy S5, and probably other phones had this feature where you could actually trigger hover targets by hovering your finger above the screen. I just tried it on my Galaxy S5 the linked page and it works flawlessly.

It may be one of the gimmicks Samsung loved to put in their phones at the time, but as we can see, it is not completely useless. And it also doesn't look like there is any downside to it, except maybe a very small increase in price.

onHover has always been a psuedoschizo decision. There are places where nothing is more useful, but misuse it and it aggravates the hell out of everyone, not unlike browser frames/iframes/etc 20 years ago.

What is a "psuedoschizo" decision?

A conflicting decision. Please ignore the word, my brain made it up.

Almost schizophrenic. Made sense to me.

Point taken about making it clearer it's a popup rather than a link but...

> You need drill down pages for these links. If I click one, I expect a page with detailed information, a drill down, not a pop-up summary GIF.

I disagree here and much prefer browsing the summary information with a gif to having to click through every single feature into a new page.

Yes, I am rather stuck on the use of that link as a link-button. I argued furiously against them back in the day and, obviously, lost.

There's somewhat of a convention to use a dashed underline on links that have behaviour like this; perhaps that would be an improvement.

Navigating on mobile is something you do on the go, when there are no other options. Of course it's going to be a downgraded experience.

Is it?

Mobile devices drove 61% of visits to U.S. websites in 2020, up from 57% in 2019. Desktops were responsible for 35.7% of all visits in 2020, and tablets drove the remaining 3.3% of visitors.

Globally, 68.1% of all website visits in 2020 came from mobile devices—an increase from 63.3% in 2019. Desktops drove 28.9% of visits, while 3.1% of visitors came from tablets. However, desktop devices remain very important, as they drove 53.3% of total time on site in the U.S. and 46.4% of total time on site globally.

https://www.perficient.com/insights/research-hub/mobile-vs-d...

>Mixed UX metaphors. Not lethal, but not quite there yet. Very cool, though, especially for the rapidity with which you were able to implement it, but it needs a bit more test on the UX side on mobile.

It's definitely a good idea but agree that it's just a bit off. The videos are small and hard to see and there's no way to share a direct link to a video.

Site author here. Thanks for the feedback! I just pushed an update to improve the UX on mobile :)

https://twitter.com/tdinh_me/status/1465898179971350528

>Expected behavior of a link is to link me elsewhere

That may be true, but I certainly wasn't confused when I tapped it and saw the popup. On mobile, you could make the popup take up the whole screen with an easy X button and perhaps it would solve that issue (Minor as it may be)

Either it’s fixed, or it was never a problem to me.

The dotted lines indicate ‘click here to see more’ to me. And I can go directly from one to the next item by just tapping the next one.

Also, use WebM, not GIF, for better compression. GIF is obsolete trash from the 1990's internet.

You can have a GIF fallback but 99% of browsers don't need it.

well... 99% perhaps not. mobile safari is pretty important

It should be an accordion that opens a detail view.

I like it more when items stay opened, instead of closing again when another item opens (like with an accordion).

I'm chuckling at this because, every time I've launched a broadside against onHover, a crafty developer replies with an accordion.

You sly dogs.