Comments on: Navigating the Winding Roads of Hyperlink Usability http://fadtastic.net/2006/05/30/navigating-the-winding-roads-of-hyperlink-usability/ thoughts on | comments about | examples of } web design trends. Thu, 22 May 2008 20:01:13 +0000 http://wordpress.org/?v=2.1.2 By: Andrew Faulkner http://fadtastic.net/2006/05/30/navigating-the-winding-roads-of-hyperlink-usability/#comment-1523 Andrew Faulkner Tue, 30 May 2006 18:10:03 +0000 http://fadtastic.net/2006/05/30/navigating-the-winding-roads-of-hyperlink-usability/#comment-1523 Looks like I've got some work to do with fad. ;) Great article. I agree wholeheartedly with the majority of the points raised here. Often, links are designed with aesthetics in mind only. We're all guilty. Looks like I’ve got some work to do with fad. ;)

Great article. I agree wholeheartedly with the majority of the points raised here. Often, links are designed with aesthetics in mind only. We’re all guilty.

]]> By: Johan Van Den Rym http://fadtastic.net/2006/05/30/navigating-the-winding-roads-of-hyperlink-usability/#comment-1524 Johan Van Den Rym Tue, 30 May 2006 19:04:39 +0000 http://fadtastic.net/2006/05/30/navigating-the-winding-roads-of-hyperlink-usability/#comment-1524 we should also think of internal links and external links. We could (as is done already) add a inline little icon aligned right of the link to make clear we are dealing with an externals. For styling links Using underlined beit we should also think of internal links and external links. We could (as is done already) add a inline little icon aligned right of the link to make clear we are dealing with an externals.

For styling links

Using underlined beit

]]> By: Piotrek Rybałtowski http://fadtastic.net/2006/05/30/navigating-the-winding-roads-of-hyperlink-usability/#comment-1525 Piotrek Rybałtowski Tue, 30 May 2006 19:17:55 +0000 http://fadtastic.net/2006/05/30/navigating-the-winding-roads-of-hyperlink-usability/#comment-1525 About chaging link on hover: - in good there's about chaning colors and other, but in bad it's said that it is not ok to change font style. But changing background and/or font color is IMO ok - and ALT is attribute, though for titles there's TITLE attribute About new windows: - single window with arrow is AFAIK usually used to show external link Anyway, pretty good article. About chaging link on hover:
- in good there’s about chaning colors and other, but in bad it’s said that it is not ok to change font style. But changing background and/or font color is IMO ok
- and ALT is attribute, though for titles there’s TITLE attribute

About new windows:
- single window with arrow is AFAIK usually used to show external link

Anyway, pretty good article.

]]> By: Johan Van Den Rym http://fadtastic.net/2006/05/30/navigating-the-winding-roads-of-hyperlink-usability/#comment-1526 Johan Van Den Rym Tue, 30 May 2006 19:25:53 +0000 http://fadtastic.net/2006/05/30/navigating-the-winding-roads-of-hyperlink-usability/#comment-1526 ... dotted lines or full lines. For body text - or better said parapgraphs, it should be done like that. A hover style is IMHO most subtile when using nothing or a very small highlight (a fraction lighter than background-color), and when using dotted lines for links you make the hover a full line in the same color. For lists, eg an archive list of articles, you dont want underlines but the same color as the underlined links in your paragraphs. They are internal links that make a seperate block. … dotted lines or full lines. For body text - or better said parapgraphs, it should be done like that. A hover style is IMHO most subtile when using nothing or a very small highlight (a fraction lighter than background-color), and when using dotted lines for links you make the hover a full line in the same color.

For lists, eg an archive list of articles, you dont want underlines but the same color as the underlined links in your paragraphs. They are internal links that make a seperate block.

]]> By: Garrison http://fadtastic.net/2006/05/30/navigating-the-winding-roads-of-hyperlink-usability/#comment-1528 Garrison Tue, 30 May 2006 20:06:28 +0000 http://fadtastic.net/2006/05/30/navigating-the-winding-roads-of-hyperlink-usability/#comment-1528 Are you kidding me? Did you really just publish a dummy's guide to hyperlink usage? Why are you even here? Are you kidding me? Did you really just publish a dummy’s guide to hyperlink usage?

Why are you even here?

]]> By: Andrew Faulkner http://fadtastic.net/2006/05/30/navigating-the-winding-roads-of-hyperlink-usability/#comment-1529 Andrew Faulkner Tue, 30 May 2006 20:15:40 +0000 http://fadtastic.net/2006/05/30/navigating-the-winding-roads-of-hyperlink-usability/#comment-1529 Garrison, Believe it or not, links are still incorrectly used (I'm guilty I know.) So that surely means an article on correct link usage is valid. It's trendy currently to spice up links so this article is a reminder of what links need to do. Garrison,

Believe it or not, links are still incorrectly used (I’m guilty I know.) So that surely means an article on correct link usage is valid. It’s trendy currently to spice up links so this article is a reminder of what links need to do.

]]> By: Spectorbrain http://fadtastic.net/2006/05/30/navigating-the-winding-roads-of-hyperlink-usability/#comment-1530 Spectorbrain Tue, 30 May 2006 20:25:53 +0000 http://fadtastic.net/2006/05/30/navigating-the-winding-roads-of-hyperlink-usability/#comment-1530 Thanks for all of your comments. There are defintely some discussion points around internal vs. external links, regardless if it opens a new window. I have seen the double-window icon and the single-window with arrow icon both work equally well. For example, Yahoo news uses the double-window icon to show the reader they are being sent to an external site even though it's in the same browser window. I mentioned the hover status (or lack of) since it is considered good usability. Most sites I have encountered do use hover stats and I think it has become something that users expect, which is why I also suggested the subtle color shift. However, I really like Johan's suggestion of a dotted line in the unvisited state and the solid line in the hover state. I have struggled with links in paragraphs on my site because underlines visually crowd the text. I already use an underline as the hover state and I think the dotted line will solve my usability and content layout issues. Thanks alot. Thanks for all of your comments.

There are defintely some discussion points around internal vs. external links, regardless if it opens a new window. I have seen the double-window icon and the single-window with arrow icon both work equally well. For example, Yahoo news uses the double-window icon to show the reader they are being sent to an external site even though it’s in the same browser window.

I mentioned the hover status (or lack of) since it is considered good usability. Most sites I have encountered do use hover stats and I think it has become something that users expect, which is why I also suggested the subtle color shift.

However, I really like Johan’s suggestion of a dotted line in the unvisited state and the solid line in the hover state. I have struggled with links in paragraphs on my site because underlines visually crowd the text. I already use an underline as the hover state and I think the dotted line will solve my usability and content layout issues.

Thanks alot.

]]> By: Jason Spector http://fadtastic.net/2006/05/30/navigating-the-winding-roads-of-hyperlink-usability/#comment-1531 Jason Spector Tue, 30 May 2006 20:27:49 +0000 http://fadtastic.net/2006/05/30/navigating-the-winding-roads-of-hyperlink-usability/#comment-1531 All, The above comment is my response. My blog name is Spectorbrain and I sometimes use it as a screen name when commenting on other sites. Sorry for the confusion. Jason All,

The above comment is my response. My blog name is Spectorbrain and I sometimes use it as a screen name when commenting on other sites. Sorry for the confusion.

Jason

]]> By: J0sh http://fadtastic.net/2006/05/30/navigating-the-winding-roads-of-hyperlink-usability/#comment-1532 J0sh Tue, 30 May 2006 20:32:31 +0000 http://fadtastic.net/2006/05/30/navigating-the-winding-roads-of-hyperlink-usability/#comment-1532 Ugh, I've sinned a couple of time and sometimes I still do ie a:visited has the same color as the a:link. hehe Some people do need a little more education in linking, for instance a dude who posted a design tutorial uses a black link without underlining it while the whole content is black - Ironic? Really funny stuff, only by chance my cursor hit the link... good write up dude. Ugh, I’ve sinned a couple of time and sometimes I still do ie a:visited has the same color as the a:link. hehe

Some people do need a little more education in linking, for instance a dude who posted a design tutorial uses a black link without underlining it while the whole content is black - Ironic? Really funny stuff, only by chance my cursor hit the link…
good write up dude.

]]> By: Andrew Faulkner http://fadtastic.net/2006/05/30/navigating-the-winding-roads-of-hyperlink-usability/#comment-1533 Andrew Faulkner Tue, 30 May 2006 20:39:20 +0000 http://fadtastic.net/2006/05/30/navigating-the-winding-roads-of-hyperlink-usability/#comment-1533 I'd disagree with the dotted underline as it would then cause confusion in some browers with the <em>acronym</em> and <em>abbr</em> tags. It's an option, but not a good one. I’d disagree with the dotted underline as it would then cause confusion in some browers with the acronym and abbr tags. It’s an option, but not a good one.

]]> By: Jason Spector http://fadtastic.net/2006/05/30/navigating-the-winding-roads-of-hyperlink-usability/#comment-1534 Jason Spector Tue, 30 May 2006 20:42:11 +0000 http://fadtastic.net/2006/05/30/navigating-the-winding-roads-of-hyperlink-usability/#comment-1534 Garrison, Good design is not necessarily good usability. Just because people in the web industry like us can decipher content, navigation, etc. does not mean the larger Internet audience can. My parents, for example, know that a link is underlined. All the other fancy stuff just distracts them. And the more you make people think about their next move, the more likely they will move to another site. This post will obviously never cover all of the details of hyperlink usability. It is a blog post, not a white paper. But I hope it will help some people, even a small amount, to create a more consistent on-line user experience. Garrison,

Good design is not necessarily good usability. Just because people in the web industry like us can decipher content, navigation, etc. does not mean the larger Internet audience can. My parents, for example, know that a link is underlined. All the other fancy stuff just distracts them. And the more you make people think about their next move, the more likely they will move to another site.

This post will obviously never cover all of the details of hyperlink usability. It is a blog post, not a white paper. But I hope it will help some people, even a small amount, to create a more consistent on-line user experience.

]]> By: Jason Spector http://fadtastic.net/2006/05/30/navigating-the-winding-roads-of-hyperlink-usability/#comment-1535 Jason Spector Tue, 30 May 2006 20:43:09 +0000 http://fadtastic.net/2006/05/30/navigating-the-winding-roads-of-hyperlink-usability/#comment-1535 Andrew, Good point. I hadn't considered that. Andrew,

Good point. I hadn’t considered that.

]]> By: Johan Van Den Rym http://fadtastic.net/2006/05/30/navigating-the-winding-roads-of-hyperlink-usability/#comment-1537 Johan Van Den Rym Tue, 30 May 2006 21:08:07 +0000 http://fadtastic.net/2006/05/30/navigating-the-winding-roads-of-hyperlink-usability/#comment-1537 Good point, Andrew about the default styling of the <abbr> (not supported in IE6) or <acronym> (all browser). Though if styles are off: links get the default blue, and eg <acronym> get dotted underlines. However thanks to CSS, you can add acronym {cursor:help} to your CSS file and when you hover it, you see the little question mark and arrow. Good point, Andrew about the default styling of the <abbr> (not supported in IE6) or <acronym> (all browser).

Though if styles are off: links get the default blue, and eg <acronym> get dotted underlines. However thanks to CSS, you can add acronym {cursor:help} to your CSS file and when you hover it, you see the little question mark and arrow.

]]> By: spectorbrain.com » Blog Archive » Navigating the Winding Roads of Hyperlink Usability http://fadtastic.net/2006/05/30/navigating-the-winding-roads-of-hyperlink-usability/#comment-1538 spectorbrain.com » Blog Archive » Navigating the Winding Roads of Hyperlink Usability Tue, 30 May 2006 21:10:52 +0000 http://fadtastic.net/2006/05/30/navigating-the-winding-roads-of-hyperlink-usability/#comment-1538 [...] Remember that these are guidelines, not absolutes. If your site utilizes different styles and techniques to reach your target audience and they work, then more power to you. But in most cases, some or all of these standards will aide in your on-line success. [ also posted on Fadtastic.net ] [...] […] Remember that these are guidelines, not absolutes. If your site utilizes different styles and techniques to reach your target audience and they work, then more power to you. But in most cases, some or all of these standards will aide in your on-line success. [ also posted on Fadtastic.net ] […]

]]> By: Garrison http://fadtastic.net/2006/05/30/navigating-the-winding-roads-of-hyperlink-usability/#comment-1539 Garrison Tue, 30 May 2006 21:26:08 +0000 http://fadtastic.net/2006/05/30/navigating-the-winding-roads-of-hyperlink-usability/#comment-1539 What I mean is, this is the kind of article I would expect to find on Webmonkey or some other dev-for-dummies/usability site, not on a site that purports to be about 'web design trends'. You guys can't announce that you're about one thing and then be about everything else. Focus, focus, focus. That, or change your damn name and mission statement to something that actually fits what you're doing. What I mean is, this is the kind of article I would expect to find on Webmonkey or some other dev-for-dummies/usability site, not on a site that purports to be about ‘web design trends’. You guys can’t announce that you’re about one thing and then be about everything else. Focus, focus, focus. That, or change your damn name and mission statement to something that actually fits what you’re doing.

]]> By: Johan http://fadtastic.net/2006/05/30/navigating-the-winding-roads-of-hyperlink-usability/#comment-1542 Johan Tue, 30 May 2006 22:23:43 +0000 http://fadtastic.net/2006/05/30/navigating-the-winding-roads-of-hyperlink-usability/#comment-1542 Garrison, So you dont have anything useful to say about links. For your information, my man Stu Nicholls published his niftly CSS tutorials on http://www.webreference.com/authoring/style/sheets/. So that is just basic styling of an unordered list. Maybe check it out. You might focuss on that one. I will show you what interactive discussions are. Some interesting linkage to keep you busy - Smart ‘back to top’ link http://www.maratz.com/blog/archives/2006/05/22/smart-back-to-top-link/ - New window link http://webdesign.maratz.com/lab/new_window_link/ - Pdf linking http://webdesign.maratz.com/lab/pdf_links_labeling/ - Visited Link styling http://webdesign.maratz.com/lab/visited_links_styling/ - rel=nofollow why do that? http://jeremy.zawodny.com/blog/archives/006800.html - links for print http://www.alistapart.com/articles/improvingprint Garrison,

So you dont have anything useful to say about links. For your information, my man Stu Nicholls published his niftly CSS tutorials on http://www.webreference.com/authoring/style/sheets/. So that is just basic styling of an unordered list. Maybe check it out. You might focuss on that one.

I will show you what interactive discussions are.

Some interesting linkage to keep you busy

- Smart ‘back to top’ link

http://www.maratz.com/blog/archives/2006/05/22/smart-back-to-top-link/

- New window link

http://webdesign.maratz.com/lab/new_window_link/

- Pdf linking

http://webdesign.maratz.com/lab/pdf_links_labeling/

- Visited Link styling

http://webdesign.maratz.com/lab/visited_links_styling/

- rel=nofollow why do that?

http://jeremy.zawodny.com/blog/archives/006800.html

- links for print

http://www.alistapart.com/articles/improvingprint

]]> By: P.J. Onori http://fadtastic.net/2006/05/30/navigating-the-winding-roads-of-hyperlink-usability/#comment-1548 P.J. Onori Wed, 31 May 2006 05:32:45 +0000 http://fadtastic.net/2006/05/30/navigating-the-winding-roads-of-hyperlink-usability/#comment-1548 I agree that the article covers relatively basic topics on link design, but I think it could be considered very helpful as it has good explanations of <i>why</i> something is good or bad. Nice article. :) I agree that the article covers relatively basic topics on link design, but I think it could be considered very helpful as it has good explanations of why something is good or bad.

Nice article. :)

]]> By: Steven Teskey http://fadtastic.net/2006/05/30/navigating-the-winding-roads-of-hyperlink-usability/#comment-1549 Steven Teskey Wed, 31 May 2006 05:33:25 +0000 http://fadtastic.net/2006/05/30/navigating-the-winding-roads-of-hyperlink-usability/#comment-1549 It's a very helpful reminder about how things should be done, accessibly that is. I don't mind that it's on a "fad" site, infact one could say that it's meant to correct some fads that aren't particularily helpful to the user. I know I've done the whole a:visted == a thing, and I'm glad that I read this, because it brings light to an important topic that we designers often forget. Of course we understand, as we designed it, regular users may not be so keen. Great job Jason. It’s a very helpful reminder about how things should be done, accessibly that is. I don’t mind that it’s on a “fad” site, infact one could say that it’s meant to correct some fads that aren’t particularily helpful to the user. I know I’ve done the whole a:visted == a thing, and I’m glad that I read this, because it brings light to an important topic that we designers often forget. Of course we understand, as we designed it, regular users may not be so keen.

Great job Jason.

]]> By: La escencia de un link » EfektoMagazine http://fadtastic.net/2006/05/30/navigating-the-winding-roads-of-hyperlink-usability/#comment-1551 La escencia de un link » EfektoMagazine Wed, 31 May 2006 07:39:09 +0000 http://fadtastic.net/2006/05/30/navigating-the-winding-roads-of-hyperlink-usability/#comment-1551 [...] Para complementar esto, en Fadtastic se inició una discusión del aspecto de diseño de los links. La esencia en ambos casos es la misma: se trata de respetar las convenciones adoptadas en los inicios de la web, y no alterarlas más de lo debido a la percepción del usuario. [...] […] Para complementar esto, en Fadtastic se inició una discusión del aspecto de diseño de los links. La esencia en ambos casos es la misma: se trata de respetar las convenciones adoptadas en los inicios de la web, y no alterarlas más de lo debido a la percepción del usuario. […]

]]> By: Jack Zheng http://fadtastic.net/2006/05/30/navigating-the-winding-roads-of-hyperlink-usability/#comment-1667 Jack Zheng Fri, 09 Jun 2006 14:21:45 +0000 http://fadtastic.net/2006/05/30/navigating-the-winding-roads-of-hyperlink-usability/#comment-1667 It should be clear that a link opens a new window or not. This behavior is not consistent right now. Many times I accidentally close the window and then I can't go back; other times there are too many windows on the desktop. A simple scheme can be applied instead of a "warning", such as a special icon or symbol. But then the consistency of this icon and symbol is a problem. It should be clear that a link opens a new window or not. This behavior is not consistent right now. Many times I accidentally close the window and then I can’t go back; other times there are too many windows on the desktop. A simple scheme can be applied instead of a “warning”, such as a special icon or symbol. But then the consistency of this icon and symbol is a problem.

]]> By: spectorbrain.com » Navigating the Winding Roads of Hyperlink Usability http://fadtastic.net/2006/05/30/navigating-the-winding-roads-of-hyperlink-usability/#comment-2458 spectorbrain.com » Navigating the Winding Roads of Hyperlink Usability Sun, 30 Jul 2006 10:59:22 +0000 http://fadtastic.net/2006/05/30/navigating-the-winding-roads-of-hyperlink-usability/#comment-2458 [...] Remember that these are guidelines, not absolutes. If your site utilizes different styles and techniques to reach your target audience and they work, then more power to you. But in most cases, some or all of these standards will aide in your on-line success. [ also posted on Fadtastic.net ] Tags: usability, content, design, hyperlink, web design, user experience [...] […] Remember that these are guidelines, not absolutes. If your site utilizes different styles and techniques to reach your target audience and they work, then more power to you. But in most cases, some or all of these standards will aide in your on-line success. [ also posted on Fadtastic.net ] Tags: usability, content, design, hyperlink, web design, user experience […]

]]>