Though it seems like something we should have figured out by now, it is amazing how often the subject of whether to underline or not underline links comes up in design process (or, alternatively, how often links that should be underlined are not underlined). From a design standpoint, underlining links, especially when there are quite a few of them, can create visual clutter and thus is often disliked from this perspective. Links, however, are the lifeblood of any website, so it is crucial — more crucial than a good design, in many cases — to ensure that these links are inherently obvious to users. And, despite the fact that most of us reading this blog are likely people who live on the internet and need little help determining what is a link and what is not, in many cases we still need to design for people who are only familiar with the most basic internet conventions (i.e. text that’s underlined is clickable) and/or use the web infrequently.

Guideline

If it looks like a link without an underline, it probably doesn’t need to be underlined. If it doesn’t look like a link, it probably needs to be underlined.

Though many qualified user experience designers can probably follow this vague-but-simple rule successfully, it may be beneficial to break down into more detailed guidelines, especially as a communication aid to use with designers who may be less familiar with user-centered principles.

Always Underline

When in Doubt: This may seem a tad obvious, but it’s worth repeating. If you aren’t completely sure, underline. It doesn’t look that bad, and it confirms for all users that this is indeed a link.
When You Can: Similar to my last point, if you can underline a link without causing too much of a design problem, you should. It never hurts to make things abundantly clear for your users.
Within Blocks of Text: Absolutely underline all links that are contained within sentences, paragraphs, etc. As users scan text (online, people rarely read from start to finish — they scan for key terms), underlines signify key works to read. Color is important too — but using both color and underline is the clearest, most obvious way to call out the links to users. If you just need to call out a word that isn’t a link, use bold or italics in the same color as the base text to reduce confusion.
Isolated Links: Links that are on their own within a section of a page should be underlined when possible. (more…)

Introduction

This is the second in a series of articles I’m writing to cover a number of quick, easy usability tests that designers can do in very little time and at low or no cost. The first article covered testing button label clarity and effectiveness. This article addresses a test for something more ephemeral—branding and ethos.

Test #2 – Branded Layout

Test category: Branding / Ethos

What we’re testing: A web site home page. However, this type of test may be used on any type of layout where the goal is to communicate a brand’s ethos.

What we want to know: Which version of a design best communicates the desired brand qualities?

Why this matters: At a high level, a brand’s ethos can be supported or degraded by design choices, so it’s important to learn as early as possible how the brand’s target audience reacts to a design direction. Closer to home for many designers, of course, is that this test can help a client see design through their audience’s eyes, potentially saving many fruitless hours of discussion.

When to do this test: Typically this type of test is performed in the early stages of a design or redesign project, in order to validate design concepts and direction before major production work begins (especially in the case of a web project).

What the test tells you: This test will tell you the qualitative effect each design has on the audience. That is, what emotional response does each design evoke? What qualities do audience members associate with each design?

What the test DOESN’T tell you: This test won’t tell you whether the layout achieves any other goals – such as whether it’s easy to use or communicates what the company does. This test is also poor at distinguishing between the effects of quite similar designs.

What you need: For this you need a list of descriptive words, and two to five versions of a layout.

- Layouts: The design approach in each version should be distinctly different from all others in the test, otherwise you won’t get truly reliable results. Many companies have a different designer create each test concept for this exact reason.

- Word list: the word list should contain up to four “target” descriptive words identified by the client as the desired brand or ethos descriptors. Mixed in with these target words add about 4X that number of additional descriptive words.

So, for example, if you have two target words, “sophisticated” and “high-quality,” add 8 more descriptive words into the list. Make sure you select words that are reasonable (no crazy outlier words, please!) and quite different from each other, or you’ll end up with less clear test results. Be sure to include some negative words, too!

A sample list containing “sophisticated” and “high-quality” might look like this when you show it to test participants:

Interesting			Dark
Sophisticated			Intriguing
Complicated			Colorful
Dull				High-quality
Expensive			Solid

How to set up: Arrange the layouts so you can show them to test participants one at a time – one per printed page or per screen—to minimize any cross-influence. Make sure you’re able to vary the order in which you show the layouts to remove that potential skewing factor as well. Keep track of (more…)

I know I’ve posted about it once, maybe even twice, but table-based web designers (myself included)… your days are numbered.

I’m always surprised when I see so many web designers using tables for layout, but I can understand it. Most designers started with tables, and while tabled layouts are so inflexible, they’re quick and easy to create. Making the leap to CSS positioning to create layouts means more to learn, and a potential slowdown in your work before you see the true time benefits.

I previously posted about CSS Zen Garden as one way to test your skills, but this works best if you’ve already got some experience with CSS layouts.

If CSS layouts are totally new to you (though I’ll assume that you have some experience with CSS text styling), think back to how you may have learned HTML. One of the best ways to learn HTML, back in the days of simpler sites, was to download an existing page and look at the code. Play with it. See how all those crazy tags worked.

For CSS layouts, you can do the same thing. But the trick is to start with ones that are written correctly. So avoid choosing any random site and downloading its code. Try existing templates from various free template sites.

Freecsstemplates.org is one of many sites that offers downloadable templates that you can play with to learn CSS layouts (or just use as-is for a quick blog design). At this site, all of the templates comply with W3C standards and contain valid XHTML code.

Templates at freecsstemplates.org comes in many layouts and visual styles.

These templates, and others from many different authors, are also available at opendesigns.org. Just download and start experimenting.

Simpler templates, also with valid code, are available at intensivistation.ch. In these, the code is displayed within each content area—this is great if you want to start new docs from scratch and simply copy, apply, and modify the given code.

When working with these templates at first, pay little attention to the graphics and colors—instead, focus on the positioning of page content areas. The content areas (more…)

Earlier this week, I began my final installment of this series about Google’s Webmaster Tools with a discussion of the robot.txt file, geographic targeting and the enhanced image search capability. Today, we’ll delve even deeper into the Tools Section. I’ll talk about site verification, crawl rates and preferred domains, and I’ll also tell you how to remove URLs from the Google search index. Enjoy!

Manage Site Verification

Anyone with a Google account and FTP access to your site can verify the site and view its stats using Google’s Webmaster Tools. Here you can see who has verified the sits, so at least you’ll know who’s checking up on you.

Set Crawl Rate

There are two reasons why you might want to adjust Google’s crawl rate: either it’s crawling your site too often and eating up your bandwidth, or it isn’t crawling often enough, meaning your updates aren’t accurately reflected in the current search results.

On this page you can request that Google adjust the rate at which it crawls your site. The change isn’t guaranteed, but at least you’ve done all you can.

Set Preferred Domain

Most sites can be reached via URLs with or without the www prefix. For example, www.tridivas.com and tridivas.com both take you to the same place. If you prefer one address (more…)

We’re finally nearing the end of our series about Google’s Webmaster Tools. We’ve covered almost every aspect of the service, everything from diagnostics to statistics, links to sitemaps. All that’s left to examine are a few handy functions buried within the Tools Section. We’ll discuss a few of theses items today, and the rest in a post later this week. Let’s get going.

Analyze Robots.txt

I mentioned the robots.txt file before, but only in passing. Today, I’ll provide a more complete explanation.

The robots.txt file is a text file that tells the Google robot, when it crawls your web site and adds pages to the Google index, which files and directories are open and available and which aren’t. And it’s not just for the Google robot; all search engine crawlers should read and follow its directives.

While robot.txt files can certainly be complicated, their basic format is very simple. Here’s an example of an exceedingly simple robot.txt file:

User-agent: *
Disallow: /family/

Suppose you have a directory on your web site that contains some pages for and about your family that you don’t want others to find via a random Google search. Well, the above robots.txt file would tell all robots to stay out of that family directory.

The Analyze Robots.txt function you test your robots.txt file, so you can be sure it’s telling Google exactly what you want it to. Simply put a URL in the box at the bottom of the page, then click the button. Note: You need to input in the complete URL if you want to check a blocked page.

Set Geographic Target

Did you know that you can actually target your site geographically, and that if you do, Google will provide the code (more…)

Unless you’ve been living under a rock for the past decade, you are no doubt familiar with Google’s logo. It’s a deceptively simple mark. In fact, it almost seems non-designed. Of course, that’s not actually the case. Not at all.

Ruth Kedar is the designer responsible for the logo, and in an interview with WebProNews, she talks at length about her process and the goals of the project. She also discusses the details. For example, she has this to say about the color choices:

The colors evoke memories of child play, but deftly stray from the color wheel strictures so as to hint at the inherent element of serendipity that creeps into any search results page…

Wired has more about the logo, including sketches of some of its earlier treatments, and Kedar again provides commentary. Together, these pieces make an interesting read. The Google logo has perhaps become more ubiquitous than any other mark, and the story of its genesis paints an interesting portrait of a certain period in web and graphic design history.

In a post earlier this week, I shared with you some tips on moving from one web host to another. Today, I’ve got more advice for you. Altogether, it should make this tricky process more than manageable.

5) Prepare for the propagation period. When I make a switch, I always change a few things on my home page. For example, I’ll add a new image or put a comment in the HTML. When I see the updated site on my screen, I know that it has moved to the new location.

What about email? During the propagation period, some of your messages will probably be sent to your old host. Others will be directed to your new host. I like to put my new settings into my Mail.app and keep the old ones as well. That way, I don’t miss anything.

6) Do some filing before you close your old account. You’ll no doubt transfer most of your files to your new host, but there are some other, additional items that you might also consider taking with you. For example, you may have old traffic statistics or some useful spam filter configuration data that could prove handy in the future. Export whatever you can and copy the rest. Take screenshots or copy and paste to a Word or HTML file any info that could be of use to you.

7) Have a backup plan. Don’t discontinue your old service until you’re absolutely certain that everything is working as it should at the new digs. Even if you can’t stand your old host, (more…)

Recently, the company that hosts my website charged my credit card for a full year of service. It was the result of a glitch in their software, and it affected a great number of their customers. Some people’s accounts were overdrawn, and there were many other financial mishaps. I’d been considering a move to new web host for a while, and this was all that was needed to turn thought into action.

Finding and transitioning to a new host seems like it should be simple, but it can quickly become a daunting task. It often takes a few days for your domain name to match up well with the new server, and there are always a lot of items to move, including email, files, databases and more.

I learned some things in the course of my move, and I thought I’d give you some tips in case you’re considering your own transition.

1) Leverage your existing knowledge when finding a new host. Usually when you’re choosing your very first host, you have only a vague idea of what you require. As a result, you often end up with more space, more bandwidth, and more email addresses than you really need. But when you switch, you know exactly what you use. You’ll get a much better deal because you know this information.

2) Make dramatic technological changes only if absolutely necessary. Moving from a host with PHP to a host with ASP (or vice versa) can (more…)

Introduction

Web and interface designers are in a unique and powerful position to serve as user advocates. By incorporating usability and conversion principles into design from the beginning of the process, designers can help ensure the user-friendliness and effectiveness of the end product.

It sounds great, right? But how (you may ask) can designers do this? Classes and reading are one way, of course – having a solid understanding of usability best practices and research will naturally influence your design decisions. But getting from the theoretical to the applied can be a challenge, and best practices are not, in my experience, always sufficient. Ideally, each unique design is tested with representative users to validate whether it really accomplishes what’s expected.

Which is where this series of articles comes in. I’ll cover a number of quick, easy usability tests that designers can do in very little time and at low or no cost. You’ll end up with validated designs, better end results and a growing understanding of the complex, powerful relationship between usability and design.

We’ll start with a very simple test, and build from there.

Test #1 – Button Labels

Test category: Expectancy

What we’re testing: Button labels

What we want to know: Which version of a button label best communicates to users what happens after they click the button?

Why this matters: Button labels are a crucial point of communication. If users quickly and easily “get” what will happen when they click a button, they’re more likely to do so. If, on the other hand, a button label is unclear, confusing, or makes users feel uncomfortable, they are likely to hesitate or avoid the button altogether.

When to do this test: Conduct the test whenever button labels are being finalized or updated. This can happen at just about any stage of a design or redesign process.

What the test tells you: This test will tell you which one of two or more button labels does its job the best. You want a button label to support the audience’s mental model—that is, what they expect to see or have happen when they click the button.

What the test DOESN’T tell you: This test won’t tell you how the button will perform within the context of an actual web page or application. Users may understand a button label when viewing it in isolation, but when many other factors come into play the results may vary. For instance, users may not see the button or may not be sufficiently motivated to click it, depending on its placement, the other messaging on the page, what the user has experienced prior to the page, etc.

What you need: Several buttons identical in design but with different labels. These can be low-fidelity sketches or high-fidelity (more…)

In Part 3 of our series about Google’s Webmaster Tools, we took a close look at the Statistics Section. This time, we’ll discuss Links and Sitemaps Sections.

The Links Section

Pages with External Links. The pages listed here are those that have been linked to by others. Once again, this is important information that affects each page’s PageRank. There’s a lot of detail here because you don’t just see the links that lead to your home page, you see all the individual pages that are linked to from the outside. You can also view the outside pages if you click on the External Links number. You can check to see if they are real links, or just links from your test server to your real server.

Pages with Internal Links. The pages on your site that link to other pages on your site are listed here. Honestly, I’m not sure why this is useful information. I have a feeling Google provides these statistics simply because they’re available. If anyone has a better explanation, I’d like to hear it.

Sitelinks. You may have noticed that when you search with Google, the primary results often come with their own set of links. These are site links, and they’re created by Google when it indexes your site.

Let’s say you’re searching for information about Celiac Disease. Your initial search may return the home page of a site about the disease, but the info you really want is buried deeper within that site. (more…)