528626 - Make "Open This URL" more visually distinct from URLs/domains in By Domain/By URL reports

Status: VERIFIED FIXED

(Socorro :: General, task)

Description

[Smokey Ardisson (offline for a while; not following bugs - do not email)]

STR:

1. http://crash-stats.mozilla.com/topcrasher/byurl/Camino/2.0
2. Look at a link in the row

ER: More space and/or visual distinction between end of URL/domain and "Open This URL"
AR: URL/domain and "Open This URL" feel cramped and it's more difficult than it need to be to tell where the URL/domain link ends

The "Open This URL" link is much more self-explanatory than the old what-the-heck-does-this-do? "#" link for opening the referenced URL, but now it's a much "heavier" UI element, and there's not enough space (there's only one space-width of blank space) or visual distinction between the end of the "expand this url/domain" link and the "Open This URL" link.  

Perhaps add a few more spaces between them and add a background color or border or something around "Open This URL"?

Comment 1

[Ryan Snyder [:ryansnyder] [:rsnyder] [:rysny]]

What if replace the "Open this URL" text link with the icon used in Wikis to signify an external link? e.g.:
http://en.wikipedia.org/skins-1.5/monobook/external.png

Comment 2

[Smokey Ardisson (offline for a while; not following bugs - do not email)]

Back in bug 470525 comment 4 and bug 470525 comment 6, we discussed graphics instead of text.

I think the Wikipedia/MediaWiki "external link" image is certainly better than the old what-the-heck-does-this-do? "#" and I'd think it's pretty widely understood, but I also use lots of MediaWikis, so whether it's universally recognizable is an open question. 

Besides recognizability, though, there's a "this same visual structure doesn't do the same thing everywhere" issue. That is, on a wiki you have 

_link(ed) text_ [icon]

or 

<a href="http://example.com/">Link Text</a>  <a href="http://example.com/">[icon]</a>

and clicking on either the linked text or the icon does exactly the same thing: goes to the URL associated with the linked text.

Using the same visual construction on crash-stats would have a different behavior, though:

_link(ed) text_ [icon linked to somewhere else]

or 

<a href="Expand-o-matic">Link Text</a>  <a href="http://example.com/">[icon]</a>

That's confusing, and therefore a bit of a problem.

Comment 3

[Laura Thomson :laura]

Smokey: what would you prefer?  more spaces?  making it a button?

ccing chowse for comment too.

Comment 4

[Chris Howse [:chowse]]

Attachment: Open URL ideas

Mock attached of several ways to improve the Open link:

* Remove the blue color and underline from the URL text. Displaying a URL with a link strongly implies clicking it will open that URL.

* Make the 'Open URL' link a slightly smaller font-size, put 1em of space between it and the URL text, and give it the external link icon. The icon, spacing, and font/color changes should be enough to distinguish it from the other link.

* Hide the 'Open URL' link until the user mouses over the URL's row. This eliminates a lot of visual clutter.

* For an added bonus, replace the large gray expand button with something a bit more modest.

Comment 5

[Chris Howse [:chowse]]

Attachment: Better Example (HTML)

Comment 6

[Smokey Ardisson (offline for a while; not following bugs - do not email)]

The HTML mockup is pretty nice; it's not quite as "beautiful" as the rest of crash-stats has become, but it's not eye-poking and, most importantly, it's very functional and definitely addresses most of the usability issues with the current design :D

Two thoughts:

1) Maybe remove the underlining on the URL text (http://foo.tld) on hover, too?  Even though the underlining-on-hover is not blue anymore, the URL text suddenly turns into a link by appearance, and a click there is not going to open foo.tld.

2) I haven't decided what I think about only showing the 'Open URL' link on mouseover of the row.  Doing so definitely eliminates the visual clutter (less clutter+++); is anyone going to be confused by not seeing the link right away, or will everyone be hovering enough that they'll find it right away?  My gut says that hide until mouseover-of-row will be OK, but I did want to mention the other side.

Comment 7

[Chris Howse [:chowse]]

(In reply to comment #6)
> The HTML mockup is pretty nice; it's not quite as "beautiful" as the rest of
> crash-stats has become, but it's not eye-poking and, most importantly, it's
> very functional and definitely addresses most of the usability issues with the
> current design :D

Updating all the tables to match the new style of the site will be a larger undertaking. When it happens, it will likely happen everywhere. :)

> 1) Maybe remove the underlining on the URL text (http://foo.tld) on hover, too?
>  Even though the underlining-on-hover is not blue anymore, the URL text
> suddenly turns into a link by appearance, and a click there is not going to
> open foo.tld.

Fair enough. Still, I'd like there to be some visual feedback that clicking on the URL expands the link, and I don't think the hover cursor is enough. Perhaps something akin to how Thunderbird does expandable regions: light-gray right-pointing triangle by default, darker triangle on hover, down-pointing triangle on expand. Unfortunately, I don't have those images hosted anywhere, so I can't add them to the mock here.


> 2) I haven't decided what I think about only showing the 'Open URL' link on
> mouseover of the row.  Doing so definitely eliminates the visual clutter (less
> clutter+++); is anyone going to be confused by not seeing the link right away,
> or will everyone be hovering enough that they'll find it right away?  My gut
> says that hide until mouseover-of-row will be OK, but I did want to mention the
> other side.

There's always a risk of hiding things w/ hover. However, I think this case might be alright. Here's my thinking: assume the user is unaware that the 'Open URL' link exists. They see a list of URLs, which can be expanded to reveal more data. Assuming they don't bounce, they will likely: a.) try to click the [+] to see what's beneath, b.) try to select and copy the URL so they can open it, or c.) scroll further down the page. In each case, they will move the mouse over the row, which will expose the URL link. There may be a few narrow use cases when this doesn't happen (e.g. the user doesn't scroll the page, and instead transcribes the URL), but I think the benefit of reduced clutter outweighs these rare cases.

Comment 8

[Chris Howse [:chowse]]

Attachment: Better Example (HTML)

Attempt to create the 'disclosure triangle' effect with CSS.

Comment 9

[Smokey Ardisson (offline for a while; not following bugs - do not email)]

(In reply to comment #8)
> Created an attachment (id=439556) [details]
> Better Example (HTML)
> 
> Attempt to create the 'disclosure triangle' effect with CSS.

That looks good :)

Comment 10

[Schalk Neethling [:espressive]]

This still an issue or can it be closed?

Comment 11

[Smokey Ardisson (offline for a while; not following bugs - do not email)]

Nothing has changed since this bug was filed; apparently chowse's mockups/changes never made it into shipping code, because "Open URL" is still just 1 space away from the end of the URL.

Comment 12

[Robert Kaiser]

Right, nothing has changed, but we are thinking about removing those reports altogether as nobody stepped up and said they are even looking at them, but they require maintenance from the Socorro team and the workforce would better be used in places where it has a real impact for us.

Comment 13

[Schalk Neethling [:espressive]]

[:[e-mail]] If you want I can quickly do this, it will take me like 5 - 10 minutes...

Comment 14

[Smokey Ardisson (offline for a while; not following bugs - do not email)]

I do look at them, but my thinking is that bug 550538 would be more valuable to me, so if I had to choose where to direct efforts, I'd prefer bug 550538.

Comment 15

[Trif Andrei-Alin[:AlinT]]

I think this is more an enhancement, rather than a bug.

Comment 16

[Schalk Neethling [:espressive]]

Sent pull request : https://github.com/mozilla/socorro/pull/114

Comment 17

[Schalk Neethling [:espressive]]

Added a better icon : https://github.com/mozilla/socorro/pull/139

Comment 18

[[github robot]]

Commit pushed to https://github.com/mozilla/socorro

https://github.com/mozilla/socorro/commit/7dcd83d5192e485557ac752a7f637534e1ee8896
Merge pull request #139 from ossreleasefeed/openurl

Fixes Bug 528626 - Make "Open This URL" more visually distinct

Comment 19

[Matt Brandt [:mbrandt]]

Attachment: screenshot

QA verified on stage. The new icon is in place as well as the additional space between the "expand <url>" and the "open this url" text.