Is there a rule that states that all links should be underlined to make them look like links? I have seen many sites where the footer, for example, does not have underlined links.
There's no rule, but it's good design to make your design act as users expect it to (and most users expect links in text to be underlined). So if you don't underline them, make sure the look obviously clickable. See: http://www.useit.com/alertbox/20040510.html
I personally can't stand links that aren't underlined in text (See: Stack Overflow). You shouldn't have to scrub the text see what's clickable.
I would say no, underlining links is pretty gross these days. Do you see any underlined text on this site?
There's no rule, but it does help people navigate your site if the links on a webpage stand out somehow from the surrounding text, and one convenient way to do this is to have them underlined. That way, you can color them however you like, but they'll still stand out.
The biggest argument that I've seen (can't point out where exactly as it has been a while) for using an underline is accessibility. Although changing the color of links may be enough for those users that have the privilege of seeing color, for those who are colorblind they may have extreme issues trying to find the links without any other differentiation.
I find that although the underline isn't the cleanest look, it doesn't look terrible with many pros including the accessibility I mentioned above as well as the instant "know how to use" factor the underline is well worth it. I speak of these points with respect to links in bodies of text. In main site navigation, footers and other very obvious places you can customize more freely of course.
Sorry for resurrecting an old thread, but I saw that no one mentioned the color-blind argument for underlined links so I figured it would be worth it for anyone in the future who reads this.
Such as Stackoverflow for example. =p
Do whatever you want. Personally, I like the clean look of links without underlines for a more "button-esque" feel on my sites.
Links should be distinguishable from normal text. If you do that by underlining them or just by changing its color is your decision. Underlining is just the classic way.
Links don't have to be underlined -- I'd argue that underlining is itself hard to read and a bad default standard we've inherited.
But links should be consistent. In other words, whatever color or style your links are, stick with that same color and style throughout the site whenever possible. Don't make one thing clickable in red, and another thing clickable in green.
And yes, we break this rule on Stack Overflow sometimes. Notice that the title of this question is a clickable link, but it's not in the link color because that would be sort of .. obnoxious.
Its an aesthetic decision - what looks best is up to you. There are no web standards that define this kind of thing.
What other visual cue can you offer a user that the text is a link and not normal text? A different color works, perhaps a style?
Visually an underline is simple and universal, but there is no hard rule. Just make them obvious.
Not necessarily, but when the user hovers the link, it could be underlined instead. And the link should stand out some way, either being bolder or a different color. Blue is an excellent hyperlink color.
There are no "rules" you have to follow. It's a common interface convention that tells people that those words are, in fact, links. If you choose not to underline them, you should find some other method to show people which words are links, if it isn't clear.
As long as a link is distinct on the page as being a link you should be alright.
For example:
a different color than the rest of the text
changing color on hover
having a background color
There's no hard-and-fast rule that says that they must be underlined, however there is a general convention that links should exhibit a noticeable difference to regular text (and should, at all times display the link cursor, e.g. the 'hand' cursor).
It is, however, generally accepted that users recognise underlined links more quickly than those that don't conform to something that someone would 'expect' to be a link.
Links should look distinguishable and clickable without having to hover your mouse over the screen. If you want to go away from the normal layout it's best to have a friend, one that's not tech savvy try out the site to see what they think. If they can navigate from page to page without problems or hiccups then the page is fine otherwise you should reconsider your approach. It's one nice thing to have a good looking site it's another to make it usable.
If you only use colored text for links then the underline becomes unnecessary.
In cases where the design does not allow for a high contrast link color then you may need to use under line.
As long as it is obvious what is and isn't a link, I think getting rid of underlined links is perfectly acceptable.
What I really hate are sites that underline text which are not links, please don't do that.
The page should be kept consistent - if one link is underlined then they all should be. If you don't like underlined links, no big deal - just keep them all the same for a better UI I think.
The important thing with all web design is clarity. If you do not underline your links then you should provide at least a consistent method of rendering (back or fore colour for example) and some intuative visual feedback to the user to indicate that the link is there such as underline on hover, mouse icon change or change in previous fore or back colour.
The best way to test these things is create a mockup and let your gran at it. If she understands first time then you have made it clear!
Happy coding.
I don't mind either way. Well almost.
At least, blue underlines are a clear signal that users identify as links. A well established convention as well as a browser default. That's why most Web design articles advice to avoid underline typographic effect.
And I dislike links that doesn't look like links. For example I recently found a site with black text and dark gray links (or was it the reverse?) of exact same font: it was hard to see links (unless scanning with the mouse! ack!).
Likewise, it is good practice to keep visited links distinguishable from unvisited ones: it is a good navigation help.
It really depends if having them stand out on the page is a useful property to have.
Wikipedia for instance takes the line off, which is probably a good thing considering half of the page would be underlined if left to defaults.
Related
I am building a web app that will have a large number of clickable elements. The problem is if I style this with web best practice i.e. different colour/underlined etc the app looks a mess due to the vast number of links. see image
If I dont style the links I may ruin the usability but if I make them obvious it could look hideous and distracting. Web apps like feedly are using links that are not immediately obvious unless you hover on them but their positioning is quite standard which helps.
Are hover states enough for users to discover links or is there another way to keep a clean style that does not ruin UX?
Have a look at (big) sites with lots of links and see how they do it. Big sites normally have there UI experts, so you can use there expertise for free.
Amazon (and Stackoverflow) for example has the links in blue, the underline is only showed if mouse hovers above the link.
Also you could show links that were already visited in the same style and color as links not visited yet, as by default visited links have a different (purple) color which adds to the fidgety look.
Are there any best practices or guidelines regarding contrast between link colour on a webpage, and the regular text?
I know there are contrast guidelines that refer to text vs background colour, but I'm also wondering if there are guidelines about the minimum colour difference that should exist between plain text, and link text.
For example, my background is white (FFF), my text colour is black (000) and my link colour is green (007C41)
Edit:
I realize it's up to personal preference to some degree. However, while my eyes may be able to tell the difference between #000000 and #000001 (they can't, but just for argument's sake), other's won't be able to. What I'm wondering is if there are any accessibility guidelines regarding what the minimum colour difference should be.
The only guidelines I was ever taught about links is this:
Make it obvious that it is a link. Do not do anything that might trick a user to click on something they didn't want to click on.
Make it obvious that it is different than the other texts on the page because you do not want your users to miss out on a link they might have wanted to click on.
Years ago, I was taught that all links should be underlined. Obviously, many, including our beloved SO, do not do that. Many now favor that links are underlined only when hovered over.
Basic guidelines from the US Department of Health & Human Services
http://www.w3.org/TR/WCAG-TECHS/G183.html (courtesy of steveax)
Make sure you have a color blindness emulator plugin for your browser. Inability to distinguish variations in hue is a semi-common condition. What looks "different" to you might not be obvious with a certain type(s) of color blindness.
Once you've addressed color blindness, ensure that colors with popular meaning (red, yellow, green) are used in appropriate or neutral contexts. For example, a "Sign me up!" link probably shouldn't be red (danger, critical) unless it's very clear that it is part of a theme (e.g. all links are red). A "Delete" link probably should never be green.
It's worth being familiar with proper color compliments. Even if you have made a highly readable, usable site, people react differently to different colors. Some colors/color combinations simply "look" better than others, and often there is a simple mathematical reason.
There are a couple of guidelines that combine to cover that scenario:
Color is not used as the only visual means of conveying information,
indicating an action, prompting a response, or distinguishing a
visual element.
Contrast (Minimum): The visual presentation of text
and images of text has a contrast ratio of at least 4.5:1
A good article on webaim explains that:
So if you combine these two requirements, in order to be Level AA conformant, your page must have all of the following:
4.5:1 contrast between the non-link text color and the background.
4.5:1 contrast between the link text color and the background.
3:1 contrast between the link text color and the surrounding non-link text color.
In other words, your link color has to be significantly different from the background color AND the surrounding text color, which also has to be significantly different from the background colour.
Overall, the easiest thing is to use more than colour, e.g. an underline, outline, or bold text, in which case you only have to worry about contrast compared to the background, not the surrounding text.
Most important considerations have been covered above. In addition to those considerations, I lean away from underlining (except on hover) because I like the option of using underline to convey emphasis or other contextual information.
Our self-proclaimed Usability Guru Nielsen at one time loudly exclaimed that all links shalt be underlined forever no matter what, and a lot of people who prefer to be told instead of do the thinking themselves gobbled that up. But most reasonable designers understand that such rules are nonsense.
I have a couple of questions about the problem of hiding text inside an anchor tag and only displaying a background image.
Note to those about to bombard me with links to other articles and tell me that this is a repeat question: I have scoured this site and the web in general and read the solutions (and by solutions I mean mostly hacks) people came up with. What most people seem to be doing (or have done up until recently) was the -9999px hack. Also popular is/was wrapping the text in a span and doing something like this or visibility: hidden.
Now, I personally think that "hiding" the text would really only make sense in the first place if it was hidden dynamically, i.e. displayed only if the background image wasn't loading (for whatever reason). However, all the "solutions" I found effectively remove the text completely or at least hide it permanently so even if the background image isn't loaded, the text still wouldn't be displayed.
So here are my questions:
Why would one want to have text and then permanently hide it at all? Why not just leave the anchor empty - i.e. just don't put any text in it - and only have the image displayed? Why have text and then go through the headache of figuring out how to hide it? What's the point of that? Am I missing something here?
Now that we have CSS3, are there actual non-hacky, dynamic ways to hide text when the background image is displayed and have the text appear when the image - for whatever reason - fails to load? I couldn't find any resources so I am assuming this is not supported but maybe one of you ninjas knows better?
There are different possibilities why to do that:
Search Engines scan the web and also gather content that is visually hidden. The site gets better in terms of semantics and has a higher page rank.
Many visually impaired people rely on content that's read to them by screenreaders. Sometimes text in the alt-tag is just not enough. Background images don't even have such a tag.
To your second question:
To me there is no known way to check if a background-image is successfully loaded and is also shown (a totally different story!). CSS only styles content according to defined rules. There may be a javascript way to do it, but in my opinion it isn't worth the cost because mostly this text isn't really a fallback. It has a different purpose as stated above.
This works fine on my computer but im wondering if its a good idea in terms of accessibility, etc.
I have a page of product listings, and I want each listing to link to a product page. The listing is made up of an image and a few photographs of text.
I want the entire listing area to be a link, including white space. So rather than make the images and text links individually, ive put the entire div in a link.
As I said, this is working fine on my computer, but is a good idea for a production site?
Thanks
If it's like a grid or something, and you give a visual cue when the user moves the mouse over the row (background color changing etc) along with the cursor becoming a hand, it should be fine if you use the whitespace as part of your link.
If you want me in your website's audience, I would prefer if you wouldn't. When switching between windows, clicking in the window area is the quickest way to switch focus between windows. If like 80% of your window is really a link, I would find that annoying. I think I am not the only one.
The way it sounds there is also plenty of area which you can make behave like a link, such as the image, and the text in the grid. If that would be clickable, that would be big enough a target to hit.
Also imagine your app being used on a touch screen. These sometimes imsinterpret drag (scroll/zoom) and tick gestures. Which is annoying if everything responds to clicks.
Look at the right-side video links on YouTube. These are block-layout spans wrapped in a tags. (Not that just because Google does it means it's a good idea, but...)
If the area has a :hover color (as these do), then it should be clear enough to the user that this is an action item.
Syntactically it's invalid, you cannot put block elements (div, p, table) inside of inline elements (span, a, strong, em).
When designing my homepage, I feel like the common knowledge is that it is bad to just have one big picture in the center that gives all of the content. The "right" way to do it would be to chop up the large layed out image into several small backgrounds and make the text use standard html with css background images for layout.
Is the only reason one big image is bad SEO reasons?
A search engine can't make sense of it.
A blind or otherwise visually-impaired person can't make sense of it.
Someone blocking images because he's on a mobile phone with expensive internet can't make sense of it.
There are a few reasons :-)
Also important:
Changes are not easily made to whole, pre-composited images, unless you still have access to the original layered variants. And hopefully they contain text as well, not just pixel data. (Mentioned by others before already. Credits go to pierre and Kendrick)
If you're using background images don't forget to set a text and background color too. Otherwise people not seeing any images might have a hard time deciphering your text (black on black isn't nice to read :-))
You can still use one large image as background. How the text is layed out above that is another matter entirely. In fact, chopping up the image and piecing the pieces together is painful using CSS too. In my experience it's best and easiest to leave background images unchopped and instead composite the rest of the layout above them, using other images or backgrounds if needed. This gives you a little more flexibility when changing a layout again, too.
SEO is one. Handicapped accessibility is another big one -- a screen reader can't read text within an image, typically. Page load time is another one; a user with a slow connection won't see anything useful while the image loads. Lastly, many browsers will use multiple connections to request resources such as images, so they can be loaded simultaneously. If there's just one image, only one connection can be used.
Updating will be tedious; you can also no longer rely on many benefits of CSS.
It's also bad for accessibility (screen readers, text-resizing, different monitor sizes)
It also removes your ability to easily edit text content.
I certainly wouldn't do it if you're looking for a web-developer job, but if you really don't care about the above, you won't be the first person to do it...
I see no reason at all in using imagea to represent something what can easily be achieved with HTML and CSS.
You're putting up a web site to enable communication between you and your visitors. Images and Flash prevent that.
Generally, you design a site with HTML/CSS and text. Only when you wish to add some design that cannot be expressed with standard means, then you use images. But have your site degrade gracefully for those who cannot or does not wish to see images. Let images be an addition, like an advanced version, in no case a replacement for text.