Forum Moderators: open
But now, we've learned a bit about what our users expect, what they respond well to and what makes them click on the always available Back Button.
Whenever I'm facing that creative moment of designing a new domain, I feel this tug-of-war. Should the layout innovate and make an impression with its creativity, or should it be easy to use, no curve balls, allowing the visitor comfortable access to whatever they came looking for?
I begin this thread hoping for all kinds of discussion in many areas of design - menu positions, liquid vs fixed layout, location of contact information - all kinds of things.
I'm going to focus on links - after all, the hyperlink is essentially the "H" in HTML. But please don't let my choice limit this discussion just to links. Let's talk about whatever you feel you have learned about design - where you are still free to innovate, and where you violate established conventions only at risk to the website's performance.
LINKS
- Anchor Text Color -
As long as the anchor text color contrasts with the regular text that surrounds it, I feel no obligation to use "blue" for links and "violet" for visited. I have tested this and never found a problem in using colors that harmonize well with the design.
- Underlines -
Underlined links are a strongly established convention, and except for obvious menu areas we ignore it at great risk. I know that designers who come from the print world think they're ugly.
I know that many blogs today are experimenting with alternatives. But when I visit these pages, I often find myself nearly missing links I am interested in - I can only assume I must also be completely missing others.
I have no statistics to back up one other opinion I hold - yet - but I also have a strong suspicion that menus with underlined links perform better than those with "plain" or graphic menu choices.
- Visited Text Color -
Some authorities feel very strongly that a:visited need a separate color treatment. I don't see any numbers at all that support this, at least as an iron clad rule. In fact, when there are a lot of inline links, the chaos that a different visited link color creates makes the page harder to read, at least to my eye.
And yet, there are other sites where a separate a:visited color creates no visual problem and in those situations, it is a helpful courtesy to the visitor - and even increases page views.
- Hover Behavior -
Thankfully, a:hover is now widely supported in contemporary browsers - it was not always so. I've had the pleasure of watch young children use the web, and it's very common for them to begin taking in a new screen by using the mouse experimentally, looking for hot spots all over the screen. Adults may be more staid, but there is still something enjoyable about the interactive quality of a nicely designed a:hover.
Hover behaviors are, in my opinion, an absolute requirement for a website today. They help a user target the 'hot' areas, and they encourage further exploration of the site.
- Redundant Link Cues -
Websites where links have more than one cue, such as a different color, a different font weight, a hover behavior, different line-spacing and so on, appear to get deeper exploration in my experience, compared to links that have only one cue. Some people are color blind. Sometimes people are focused more in one area than another.
I find that using several differences for anchor text helps website stats - the "page views per unique visitor" number that I watch closely often goes up with addition of a second or third rule for a:link.
In summary, when designing link appearance:
STAY CONVENTIONAL:
Underlines for non-menu links
Using hover behaviors
INNOVATE:
Types of hover behavior
Link color and font styling
Redundant link cues
What have others learned? Where do you get creative in web design, and where do you stick with convention?
[edited by: tedster at 7:11 pm (utc) on Dec. 13, 2004]
Should the layout innovate and make an impression with its creativity,
or should it be easy to use, no curve balls, allowing the visitor comfortable access to whatever they came looking for?
I'm not sure what you mean by curve balls, but other than that I can't see why the concepts in these questions necessarily present a conflict.
It might be hard to achieve an appropriate blend, but I suspect it can be done nicely.
I also think your audience should be the defining criteria when it comes to innovation.
No matter how cool or how innovative a design is, if your target audience doesn't intuitively understand the design and linking patterns the site is not going to be as effective as possible.
One area where I sometimes break with convention is the position of the main menu. Right side menus work well, from what I can see - unconventional or not. They are ergonomic (less movement of the cursor since you don't need to cross the screen) and they can put content right there, on the left, for a first glance of the eye.
I wonder if anyone has ever switched from a left side menu to a right side menu and has some real A/B numbers. The stats I see on my right menu sites suggest that this layout may be BETTER for site stickiness, but I haven't tested this formally.
I seem to recall that you mentioned in another thread that you try to keep pages so that the important content is with-in 640 pixels, or something like that.
How does a right menu fit into your thinking about page width? Or is it just a matter of using a fluid design?
A/B stats like you mentioned above would be nice to see on the right menu issue.
At the same time, I almost always include a text footer menu at the bottom the main content area, so even the late adopters have some navigation without scrolling.
Pure liquid design is one of those ideas that just doesn't work well on many sites, IMO, and yes, I have designed a few. The issue is that the lines of type getting too long for easy reading.
Liquid design PLUS max-width is where I've landed for now...and that necessarily includes a scripted, IE specific workaround for max-width. Some graphic elements can fill the screen, but I just can't find a way to fill a 1600 screen with information and have that information remain easily readable.
So I usually use max-width to limit the "liquid" range to 990px or less. And lately, I'm not doing much with liquid design at all, except for tiled graphic or color backgrounds to fille the window.
I got into this very same discussion with a print-designer the other day over the links. By print-designer I mean someone versed in design work for publishing but not a clue about the web. She's basically trying to create a web brochure (eek,) and same type size from page to page takes precidence over issues of navigation and accessability. Basically this entire project is swimming upstream.
She is also having me remove every single underlined link everywhere. Appalled, I nodded politely and tarried along, but happened to miss one and offhandedly said that they are underlined for reasons she probably already knew. (Was I baiting or actually thought she did? Only my shadow knows for sure. :D )
Well she didn't, and asked. I told her that the hyperlink is the basic kernel that is behind everything on the web: if you take away all the designer toys, it is the hyperlink that makes the web what it is. The underline is as important to leave in for the inverse of the reason you don't underline non-linked text, so you don't have users spastically clicking about on the page in total confusion. It is a tool, a turnkey, a symbol that everyone knows and recognizes and has an expected function. Take it away and like you say, things get missed.
There's nothing wrong with modifying the link so long as the normal flow of visual and physical navigation is in place. If your navigation links are all present, non-underlined links in mid-text of a contiguous block should be fine, those are supplementary anyway. Or should be.
It's interesting you mention cues, because that's exactly what the hyperlinks are. Gets back to the old addage, form follows function. :D
The issue is that the lines of type getting too long for easy reading.
But a window adjustment for the 10% or so running at greater than 1024 is a pretty big deal. Maybe it's my print background showing through, but I've seen too many readability studies that show the importance of keeping the number of characters per line under control - and I feel that's especially true for a consumer based, non-technical audience.
And then there's the actual stats from the sites where I limit the width of the content area. The pageviews per unique goes up when I change over from the fully liquid layout. I've seen this effect now on three different domains.
Surely this may depend on the kind of page/website - but I note that Google limits the length of its results page lines. (However, they also use points as a unit for font sizes.)
A single side-scroll for the 1% or so at 640 is not a very big deal
But in the end, you have to do what your stats tell you to do.
It's not just a single side-scroll, it's a side-scroll on every page.
That's a great point Buckworks.
My pages are at 620 pixels. There are very few sites that require a consistent side scroll that I visit on any kind of regular basis.
I want to open a page, and see what's there. I don't want to bother scrolling sideways, it annoys me. (ok I'm easily annoyed)
But I still think knowing your audience is important. I just think you have to design for your audience.
For in-content links, I use a bright blue that matches my layout, bold text, plus a subtle "underline" effect achieved using a CSS bottom border. On hover, the link changes color, the border goes away, and an underline turns on. I've thought about using an animated gif background on hover, but dismissed the idea due to IE's lame repainting technique (which it seems to do even if the image is pre-loaded).
I've been using identical "information boxes" in my sidebars, but I think I'll be slowly changing these so they're all different. As in, Recent Articles will have one distinct look, Join Our Newsletter will look different, etc. Ideally I'll be including subtle background images on each of these to provide a visual cue for what the box contains.
I'd like to throw in one of those javascript select box navigation systems for easier access to "deep" pages, but at the moment I don't know where to put one.
I consider navigation structure to be at least equal to content in importance. Yes, content is still king, but you need people to have an easy way to find it. And you might be surprised at how many people hate site-searches.
...how many people hate site-searches.
Interesting - I've always avoided using a site search, except for domains with large amounts of information. Nothing worse for site stickiness than "no results" - and I agree that good IA and navigation are possible of equal importance to the content itself.
MatthewHSE, have you seen a study about people disliking site search?
Frankly, I think a "search" implies "work" or "slow" to most people. My experience has been that most people love a web search when they're after something specific, but once they're on a site, they seem to prefer good navigation.
And who knows? Site search may have just gotten a bad reputation from all the sites that use one that never returns results. Once a visitor hits a few sites like that, I can imagine them just ignoring a site-search box. I never use a site-search myself for this very reason; I use my Google site-search bookmarklet instead.
