Have you ever noticed that little dark circle that appears within the close button of a document window in OS X when you have unsaved changes? Yeah, me neither. After years of diligent Mac use, this subtle little element somehow escaped me until now. I guess I remember noticing it at times but never realized it was telling me to save my work. It’s a nice touch and got me wondering about what other subtle elements I might have missed over the years.

I spent some time gathering up a number of these hidden gems and figured I’d list them here in the hopes that our readers could add to the list in the comments.

Save Dialog

When saving a file you can press / at the save dialog box to choose from any point in the file system via a file path.

Displays

You can press Shift + Ctrl + Eject to put external displays to sleep. On a MacBook this will force the system to sleep without having to close the lid.

Airport

Pressing the Option key when clicking on the AirPort icon in the menubar will display some detailed information about your wireless connection, including the transmit rate.

Finder

Pressing Control while clicking on the current location icon at the top of the Finder window opens a menu to let you select any parent location along that particular file path.

Screen

Pressing Ctrl + Option + Command + 8 will invert the color of your screen.

Dictionary

Pressing Ctrl + Command + D while hovering over a word in any Cocoa application (Safari, Mail, etc.) will automatically look up that word in the OS X dictionary app.

This list just scratches the surface of what I know are a huge number of hidden gems buried inside OS X. If you have any others you want to add to the list, please share it with us in the comments.

The Pitch

It doesn’t really help to describe Google Voice in terms of what it is—a bizarrely fragmented hodgepodge of different telecom and internet technologies, drawn together by Google—so you just have to start with what it does. In short, it can completely change how you use your phones, more or less for free.

• It can give all of your phones the same number for incoming calls. Google will assigned you a new, Google Voice-specific phone number for free, which you can forward to as many phones as you want. What always drives the point of Google Voice home for people is when I have them call my number, which causes three of my phones to ring at once. You can keep this number forever, too, without ever having to worry about porting it from carrier to carrier.
• It can give your phones the same outgoing number as well, with which you can make free domestic calls (well, sort of—more on that later), and very cheap international calls. Since Google Voice routes your calls through their phone system, they can connect you directly to cheap VoIP services to the rest of the world. It seems like you're just making a regular call, but behind the scenes you're doing something more akin to Skyping. End result: money saved.
• You can send and receive unlimited text messages for free. To make things even better, they’re all all archived in your online Google Voice account, where they’re fully searchable.
• It's got the best voicemail system in the world. Leaving a message at a Google Voice number is nothing like leaving your voice on a regular voicemail service—that is to say, it's not like sending your voice into a barely accessible technological horror pit where it might get listened to, but will probably be ignored. No, Google Voice is different: It stores your messages online, and converts them to text (which can then be sent to you as an SMS or an email). You can archive, forward, delete or save these messages from a simple interface on your phone or computer. Think of it as Gmail, except with voices. Plus, it's flexible in lots of little ways—you can change your voicemail greetings on a per caller basis, for example, or opt to listen to voicemails as they're being recorded.
• This voicemail system isn't just for Google Voice numbers, either—you essentially replace your carrier voicemail with Google Voice voicemail, without using a new number. It's brilliant.
• You have full control over your calls. You can record them for later listening, and have them transcribed into text.
• You can screen callers. You can block numbers, or have callers record their names for your approval. You can have certain contacts only forwarded to certain phones,

Each of these features is compelling enough on its own—together, they'll totally change how you use your phones, changing you from a mere mobile customer to a full-on switchboard operator, self-spy, info hoarder and telco executive. It's like you run your own little phone company, just for yourself. For free. Spectacular.

The Catch(es)

Now that I’ve got you all riled, it’s time for me to pour an icy bucket of water down the front of your pants. Google Voice, as incredible a concept and service as it is, isn’t perfect. In fact, there are a few things you need to know and accept before taking the dive, and they might be dealbreakers:

• You can't use your own phone number. At least, not in the way you wish you could. In an ideal world, you'd be able to port your old cellphone number to Google Voice, and have that—the digits people have been using to get in touch with you for years—be your new all-inclusive point of contact. You can't do this yet. For now, the closest you can come is to port your voicemail to Google Voice. That means that your T-Mobile, AT&T, Verizon or Sprint number's voicemail can be outsourced to Google, but not its calls. You can unify all your phones under your new Google Voice number, but that means you have to switch. Along with the basic inconvenience of telling everyone about your new number, you’re trusting an awful lot in a beta service, the terms of which could change quickly and without notice. It’s not something I worry about, but it’s not nothing, either.

• You can’t record calls that you’ve placed, just calls that you’ve received. And every time you initiate recording, Google Voice notifies the other person on the line. This is all makes perfect moral and procedural sense, but just in case you had the impression that there were no limits on your recording abilities, well, there are.

• The mobile app situation isn't ideal. There are apps for Android, BlackBerry, Windows Mobile and iPhone via jailbreak, and they all work. That said, they're not perfect—they can be slow, poorly integrated, glitchy, or hard to figure out. And since they're supposed to replace the dialer on your phone entirely, this isn't wonderful. The online mobile interface is a good fallback for placing calls and sending texts, but navigating to that adds an extra step to any call or text that can get tiresome after a while.

• Lastly, the way American phones work, you’re still going to end up paying for your minutes, somehow. Just because Google Voice says you can make free domestic calls and cheap international calls doesn’t mean that you actually can: in both cases, you need to dial out to Google Voice’s external system in the first place, which means you’re still using your monthly minute allotment. There are ways around this which I’ll discuss later, but Google Voice, as good as it is, isn’t magic.

Discouraged? Don’t be. Google Voice is still well worth you time and effort, and it’s only going to get better. Now, for God’s sake let’s get started already.

The Process

Signing up. This is simultaneously the easiest and most irritating part of Google Voice: It’s still invite only. Lucky for you, “Invite” in this case doesn’t mean you actually have to wait for an individual to select you from the masses; it’s just Google’s way of saying their keeping the signup pace down at manageable levels while the service is still in beta. Just submit your address, after which Google “anticipate[s] that it will be a short wait before you receive your invitation.”

What's a short wait? My invite took about four days. Some come within 48 hours. At worst, they take about two weeks. Lots of you will have already received your invite, and just not done a whole lot with it—you guys can keep reading—while the rest of you should just bookmark this post, and come back to it once you get your invite. Protip: check your spam filters.

—

Ok, hello again, people I was talking to anywhere between two seconds and two weeks ago! How are you? Now that you’ve got your invite, you can log in to your Google Voice Dashboard. It’ll look familiar if you’ve used any Google Service before:

Logging in. Follow your confirmation link, or navigate here. Click around for a while to get a feel for the interface. This is how you’ll manage your phones from now on. It’s liberatingly simple.

Picking your number. You’ll be given a choice of numbers, which you can choose from practically any available area code. Choose wisely: this will be your primary number from here on out. Choosing your first number is free; changing it in the future will cost you $10. Boo, waah, etcetera! But really not a huge deal.

Adding your phones. This is assuming you want to forward a single number to all your phones, which is kind of the point here, so: Go to the Google Voice settings page (up in the upper right-hand corner of the screen. In the first section, called “Phones,” click “Add a Phone” or “Add Another Phone.” Give it a name “My iPhone” and enter its phone number. That’s it.

Now you’ll be given a passcode, which you’ll use to authenticate your existing phone. Clicking “Connect” will call your phone from your Google Voice number, and a friendly robot will ask for you code. Enter it. That’s it!

Setting up your voicemail. Now that the phone is added, it can accept calls directed to your Google Voice number. If the call is ignored, it will forward the voicemail to Google Voice, where it will be stored online. Alternately, if you only want to use Google Voice for voicemail, you can disable the calling feature (by unchecking the box next to the phone), and set up the service to hijack your actual cellphone number’s voicemails—even when the call didn't get routed through Google Voice.

This is much easier that it sounds: Just click “Activate Google Voicemail” next to your newly-added phone, and enter the number they give you exactly as it’s written, symbols and all. Once you “call” that number, you’ll get some kind of message on your phone. On the iPhone, it looks like this.

Your voicemail has been switched—all you need to do now is set up a quick bookmark in your mobile phone to Google Voice, which provides a functional, if sparse, interface for your Google Voice messages. It's like visual voicemail, except through your browser. (Or a mobile app, which I'll get to soon.)

Choosing the rest of your settings. Now you’ll see your phone listed under the “Phones” settings tab. The other tabs contain a few pages of settings for your Google Voice account. How you toggle these is up to you, but here are the most important ones: If you want to forward SMSes to email, you’ll have to enable that in the “Voicemail and SMS” tab; call screening settings are located under the “Calls” tab; and international call credit can be added under the “Billing” tab, from a credit card.

Finding your feet. Take some time to experiment with some of Google Voice's core features now. Place a call using the button at the top left of the Google Voice homepage. Enter your recipient's number, and choose which of your phones you'd like to place the call with. Google Voice will call your phone first, which upon answering will immediately call your recipient's phone, which will think it's getting a call from your new Google Voice number. It might sound odd in writing, but once you see it work, it just kind of clicks. You can also place these calls from the mobile web interface, without a computer. Texting is more direct—you can send those directly from the web interface without any intervention from your phone.

Placing calls. The aforementioned methods is the most obvious, and it will reliably work. It’s a little cumbersome, especially if you’re used to just tapping on a contact and placing a call. Thankfully there are a few more ways to place calls from your phone, and have it routed through Google Voice:

• Apps: This is by far the best way to use Google Voice. Android has an official Google Voice app, as does BlackBerry.These automate the dialing/texting out process, so you don't need to mess with a web interface—you just opt to make some or all of your calls through Google Voice, and the app takes care of the rest. Windows Mobile has unofficial clients that do the job pretty well, as does the Pre, in the App Catalog. iPhone clients are available, but they’re not approved by Apple: You’ll need to jailbreak your phone and install them from Cydia.

• The call-in method: Simply dial your new Google Voice number from your cellphone or landline, press 2 once it’s connected, then enter the number you want to dial. This is less convenient than the web interface method, even, but it’s vital to the next one:

• The contact method: This is a little cheat to automate the aforementioned process. What you’re doing, basically, is saving your Google Voice number, a pause, the number 2 (which selects “call another phone” from the Google Voice automated menu tree), a pause, then your recipient’s number.

Adding a pause is different on each phone—on the iPhone, for example, you need to save a number as a contact, and in the number editing screen, press the "+*#" button at the bottom left of the keypad. The zero will be replaced with a "pause" button, which when pressed inserts a comma into the number. Google is your friend for this one, though most smartphones make the option available in their respective contact editing screens.

• The 406 method: Have the person you want to text send a message to your Google Voice account. When you receive the message, it will be from a number you don't recognize, with the area code 406. It will be labeled with the sending contact's name, and any replies to that number will return to the person who sent them, but the number is completely new. This is a Google Voice alias, which you can use forever: Just save it as part of your friend's contacts—perhaps as a secondary cellphone or a work number, whatever you can remember—and use it as their primary contact number when call through GV.

Sending Texts. Again, using the web interface is a great way to send texts, as are the mobile apps. But the best solution? The 406 trick listed above works for SMSes too.

The Hacks

As you've probably noticed, Google Voice is kind of a loose system—and a system that's ripe for a little gaming. There are two methods that currently work for getting truly unlimited, free calls over Google Voice. This is where things get really interesting. Interesting in a good way for you; interesting in a terrifying way for the phone companies.

• The Calling Circle Method: You know how some carriers let you designate a few contacts that don't count toward your monthly allotment of minutes, like T-Mobile MyFaves, or the AT&T A-List? By making your Google Voice number one of your friends, you can filter all your calls through Google, whether they be free domestic calls or cheap international calls. Once your Google number is added to your circle, making free calls is simply a matter of dialing into your Google Voice number and, using Google's audio menu system, dialing through to your recipient. (The contact method listed above will work too.)

To make incoming calls—including outgoing calls initiated from the Google Voice web interface—free, you'll need to change your Google Voice settings under the "Calls" tab. Select "Display my Google Voice Number" under the "Caller ID (in)" setting, and you're good to go. A full setup guide for the calling circle method can be found here.

Note: Designating Google Voice as one of your preferred contacts may be against your carrier's user policies—check with them if you're concerned.

• The VoIP method: By signing up for a number with free VoIP service Gizmo5 and adding to to your Google Voice account as a phone, you can place unlimited free calls from your VoIP number to landlines. You can also forward the calls through to Skype, if you’d prefer. This isn’t a solution for mobile phones, but it’s a great way to make yourself an effectively unlimited VoIP landline for free. Lifehacker’s got the whole rundown here. UPDATE: Registrations for Gizmo5 have been closed. Sorry!

Easing the Transition

Lifehacker has assembled a fantastic guide for easing the transition from many numbers to one, covering everything from how to convince people not to call your old numbers, to coping with voice latency.

That’s pretty much it! If you have any tips to tricks for getting the most out fo Google Voice, please drop some links in the comments-your feedback is hugely important to our Saturday How To guides.

And if you have any topics you’d like to see covered here, please let me know. Happy Voicing, folks!

  

Everyone would agree that usability is an important aspect of Web design. Whether you’re working on a portfolio website, online store or Web app, making your pages easy and enjoyable for your visitors to use is key. Many studies have been done over the years on various aspects of Web and interface design, and the findings are valuable in helping us improve our work. Here are 10 useful usability findings and guidelines that may help you improve the user experience on your websites.

1. Form Labels Work Best Above The Field

A study by UX Matters found that the ideal position for labels in forms is above the fields. On many forms, labels are put to the left of the fields, creating a two-column layout; while this looks good, it’s not the easiest layout to use. Why is that? Because forms are generally vertically oriented; i.e. users fill the form from top to bottom. Users scan the form downwards as they go along. And following the label to the field below is easier than finding the field to the right of the label.

Tumblr features a simple and elegant sign-up form that adheres to UX Matter’s recommendation.

Positioning labels on the left also poses another problem: do you left-align or right-align the labels? Left-aligning makes the form scannable but disconnects the labels from the fields, making it difficult to see which label applies to which field. Right-aligning does the reverses: it makes for a good-looking but less scannable form. Labels above fields work best in most circumstances. The study also found that labels should not be bold, although this recommendation is not conclusive.

2. Users Focus On Faces

People instinctively notice other people right away when they come into view. On Web pages, we tend to focus on people’s faces and eyes, which gives marketers a good technique for attracting attention. But our attraction to people’s faces and eyes is only the beginning; it turns out we actually glance in the direction the person in the image is looking in.

Eye-tracking heat map of a baby looking directly at us, from the UsableWorld study.

And now the baby is looking at the content. Notice the increase in people looking at the headline and text.

Here’s an eye-tracking study that demonstrates this. We’re instinctively drawn to faces, but if that face is looking somewhere other than at us, we’ll also look in that direction. Take advantage of this phenomenon by drawing your users’ attention to the most important parts of your page or ad.

3. Quality Of Design Is An Indicator Of Credibility

Various studies have been conducted to find out just what influences people’s perception of a website’s credibility:

• Stanford-Makovsy Web Credibility Study 2002: Investigating What Makes Web Sites Credible Today
• What Makes A Web Site Credible? A Report on a Large Quantitative Study
• The Elements of Computer Credibility
• Elements that Affect Web Credibility: Early Results from a Self-Report Study (Proceedings of ACM CHI 2000 Conference on Human Factors in Computing Systems, v.2, New York: ACM Press)

We don’t know if Fever app is any good, but the sleek user interface and website make a great first impression.

One interesting finding of these studies is that users really do judge a book by its cover… or rather, a website by its design. Elements such as layout, consistency, typography, color and style all affect how users perceive your website and what kind of image you project. Your website should project not only a good image but also the right one for your audience.

Other factors that influence credibility are: the quality of the website’s content, amount of errors, rate of updates, ease of use and trustworthiness of authors.

4. Most Users Do Not Scroll

Jakob Nielsen’s study on how much users scroll (in Prioritizing Web Usability) revealed that only 23% of visitors scroll on their first visit to a website. This means that 77% of visitors won’t scroll; they’ll just view the content above the fold (i.e. the area of the page that is visible on the screen without scrolling down). What’s more, the percentage of users who scroll decreases with subsequent visits, with only 16% scrolling on their second visit. This data highlights just how important it is to place your key content on a prominent position, especially on landing pages.

This doesn’t mean you should cram everything in the upper area of the page, just that you should make the best use of that area. Crowding it with content will just make the content inaccessible; when the user sees too much information, they don’t know where to begin looking.

Basecamp makes great use of space. Above the fold (768 pixels high), it shows a large screenshot, tagline, value proposition, call to action, client list, videos and short feature list with images.

This is most important for the home page, where most new visitors will land. So provide the core essentials there:

1. Name of the website,
2. Value proposition of the website (i.e. what benefit users will get from using it),
3. Navigation for the main sections of the website that are relevant to the user.

However, users’ habits have significantly changed since then. Recent studies prove that users are quite comfortable with scrolling and in some situations they are willing to scroll to the bottom of the page. Many users are more comfortable with scrolling than with a pagination, and for many users the most important information of the page isn’t necessarily placed “above the fold” (which is because of the variety of available display resolutions a quite outdated, deprecated term). So it is a good idea to divide your layout into sections for easy scanning, separating them with a lot of white space.

For further information please take a look at the articles Unfolding the fold (Clicktale), Paging VS Scrolling (Wichita University – SURL), Blasting the Myth of the Fold (Boxes and Arrows). (thanks, Fred Leuck).

5. Blue Is The Best Color For Links

While giving your website a unique design is great, when it comes to usability, doing what everyone else is doing is best. Follow conventions, because when people visit a new website, the first place they look for things are in the places where they found them on most other websites; they tap into their experience to make sense of this new content. This is known as usage patterns. People expect certain things to be the same, such as link colors, the location of the website’s logo, the behavior of tabbed navigation and so on.

Google keeps all links on its websites blue for a reason: the color is familiar to most users, which makes it easy to locate.

What color should your links be? The first consideration is contrast: links have to be dark (or light) enough to contrast with the background color. Secondly, they should stand out from the color of the rest of the text; so, no black links with black text. And finally, research shows (Van Schaik and Ling) that if usability if your priority, sticking to blue for links is best. The browser’s default link color is blue, so people expect it. Choosing a different color is by no means a problem, but it may affect the speed with which users find it.

6. The Ideal Search Box Is 27-Characters Wide

What’s the ideal width of a search box? Is there such a thing? Jakob Nielsen performed a usability study on the length of search queries in website search boxes (Prioritizing Web Usability). It turns out that most of today’s search boxes are too short. The problem with short boxes is that even though you can type out a long query, only a portion of the text will be visible at a time, making it difficult to review or edit what you’ve typed.

The study found that the average search box is 18-characters wide. The data showed that 27% of queries were too long to fit into it. Extending the box to 27 characters would accommodate 90% of queries. Remember, you can set widths using ems, not just pixels and points. One em is the width and height of one “m” character (using whatever font size a website is set to). So, use this measure to scale the width of the text input field to 27-characters wide.

Google’s search box is wide enough to accommodate long sentences.

Apple’s search box is a little too short, cutting off the query, “Microsoft Office 2008.”

In general, search boxes are better too wide than too short, so that users can quickly review, verify and submit the query. This guideline is very simple but unfortunately too often dismissed or ignored. Some padding in the input field can also improve the design and user experience.

7. White Space Improves Comprehension

Most designers know the value of white space, which is the empty space between paragraphs, pictures, buttons and other items on the page. White space de-clutters a page by giving items room to breathe. We can also group items together by decreasing the space between them and increasing the space between them and other items on the page. This is important for showing relationships between items (e.g. showing that this button applies to this set of items) and building a hierarchy of elements on the page.

Notice the big content margin, padding and paragraph spacing on The Netsetter. All that space makes the content easy and comfortable to read.

White space also makes content more readable. A study (Lin, 2004) found that good use of white space between paragraphs and in the left and right margins increases comprehension by almost 20%. Readers find it easier to focus on and process generously spaced content.

In fact, according to Chaperro, Shaikh and Baker, the layout on a Web page (including white space, headers, indentation and figures) may not measurably influence performance but does influence user satisfaction and experience.

8. Effective User Testing Doesn’t Have To Be Extensive

Jakob Nielsen’s study on the ideal number of test subjects in usability tests found that tests with just five users would reveal about 85% of all problems with your website, whereas 15 users would find pretty much all problems.

Source: Jakob Nielsen’s AlertBox

The biggest issues are usually discovered by the first one or two users, and the following testers confirm these issues and discover the remaining minor issues. Only two test users would likely find half the problems on your website. This means that testing doesn’t have to be extensive or expensive to yield good results. The biggest gains are achieved when going from 0 test users to 1, so don’t be afraid of doing too little: any testing is better than none.

9. Informative Product Pages Help You Stand Out

If your website has product pages, people shopping online will definitely look through them. But many product pages lack sufficient information, even for visitors doing a quick scan. This is a serious problem, because product information helps people make purchasing decision. Research shows that poor product information accounts for around 8% of usability problems and even 10% of user failure (i.e. the user gives up and leaves the website) (Prioritizing Web Usability).

Apple provides separate “Tech Specs” pages for its products, which keeps complicated details away from the simpler marketing pages, yet provides easy access when they’re needed.

Provide detailed information about your products, but don’t fall into the trap of bombarding users with too much text. Make the information easy to digest. Make the page scannable by breaking up the text into smaller segments and using plenty of sub-headings. Add plenty of images for your products, and use the right language: don’t use jargon that your visitors might not understand.

10. Most Users Are Blind To Advertising

Jakob Nielsen reports in his AlertBox entry that most users are essentially blind to ad banners. If they’re looking for a snippet of information on a page or are engrossed in content, they won’t be distracted by the ads on the side.

The implication of this is not only that users will avoid ads but that they’ll avoid anything that looks like an ad, even if it’s not an ad. Some heavily styled navigation items may look like banners, so be careful with these elements.

The square banners on the left sidebar of FlashDen are actually not ads: they’re content links. They do look uncomfortably close to ad banners and so may be overlooked by some users.

That said, ads that look like content will get people looking and clicking. This may generate more ad revenue but comes at the cost of your users’ trust, as they click on things they thought were genuine content. Before you go down that path, consider the trade-off: short-term revenue versus long-term trust.

Bonus: Findings From Our Case-Studies

In recent years, Smashing Magazine’s editorial team has conducted a number of case studies in an attempt to identify common design solutions and practices. So far, we have analyzed Web forms, blogs, typography and portfolios; and more case studies will be published next month. We have found some interesting patterns that could serve as guidelines for your next design.

Here, we’ll review some of the practices and design patterns that we discovered in our case studies in this brief, compact overview, for your convenience.

According to our typography study:

• Line height (in pixels) ÷ body copy font size (in pixels) = 1.48
  1.5 is commonly recommended in classic typographic books, so our study backs up this rule of thumb. Very few websites use anything less than this. And the number of websites that go over 1.48 decreases as you get further from this value.
• Line length (pixels) ÷ line height (pixels) = 27.8
  The average line length is 538.64 pixels (excluding margins and padding), which is pretty large considering that many websites still have body copy that is 12 to 13 pixels in font size.
• Space between paragraphs (pixels) ÷ line height (pixels) = 0.754
  It turns out that paragraph spacing (i.e. the space between the last line of one paragraph and the first line of the next) rarely equals the leading (which would be the main characteristic of perfect vertical rhythm). More often, paragraph spacing is just 75% of paragraph leading. The reason may be that leading usually includes the space taken up by descenders; and because most characters do not have descenders, additional white space is created under the line.
• Optimal number of characters per line is 55 to 75
  According to classic typographic books, the optimal number of characters per line is between 55 and 75, but between 75 and 85 characters per line is more popular in practice.

According to our blog design study:

• Layouts usually have a fixed width (pixel-based) (92%) and are usually centered (94%). The width of fixed layouts varies between 951 and 1000 pixels (56%).
• The home page shows excerpts of 10 to 20 posts (62%).
• 58% of a website’s overall layout is used to display the main content.

According to our Web form design study:

• The registration link is titled “sign up” (40%) and is placed in the upper-right corner.
• Sign-up forms have simple layouts, to avoid distracting users (61%).
• Titles of input fields are bolded (62%), and fields are vertically arranged more than they are horizontally arranged (86%).
• Designers tend to include few mandatory fields and few optional fields.
• Email confirmation is not given (82%), but password confirmation is (72%).
• The “Submit” button is either left-aligned (56%) or centered (26%).

According to our portfolio design study:

• 89% of layouts are horizontally centered, and most of them have a large horizontal navigation menu.
• 47.2% of portfolios have a client page, and 67.2% have some form of standalone services page.
• 63.6% have a detailed page for every project, including case studies, testimonials, slideshows with screenshots, drafts and sketches.
• Contact pages contain driving directions, phone number, email address, postal address, vCard and online form,

Other Resources

• 15 Valuable Usability PDFs You’ve Never Heard Of
• 15 Important Research Findings You Should Know
• 10 Additional Research Findings You Should Know
• Introduction To Good Usability
• 11 Striking Findings From an Eye-Tracking Study
• 25 Incredibly Useful Usability Cheat Sheets And Checklists
• 10 Usability Findings To Increase Sales And Customer Loyalty
• Web form design guidelines: an eye-tracking study

Have any thoughts on what we’ve covered, or know of other useful usability findings? Please leave a comment below.

About the Author

Dmitry Fadeyev is the founder of the Usability Post blog, where you can read his thoughts on good design and usability. Follow Dmitry on Twitter @usabilitypost

(al)

© Dmitry Fadeyev for Smashing Magazine, 2009. |
Permalink |
221 comments |
Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine

Post tags: findings, research, usability

This article reviews some important and necessary checks that web-sites should be checked against before the official launch — little details are often forgotten or ignored, but – if done in time – may sum up to an overall greater user experience and avoid unnecessary costs after the official site release.

Favicon

A favicon brands the tab or window in which your website is open in the user’s browser. It is also saved with the bookmark so that users can easily identify pages from your website. Some browsers pick up the favicon if you save it in your root directory as favicon.ico, but to be sure it’s picked up all the time, include the following in your head.

<link rel="icon" type="image/x-icon" href="/favicon.ico" />

And if you have an iPhone favicon:

<link rel="apple-touch-icon" href="/favicon.png" />

Titles And Meta Data

Your page title is the most important element for SEO and is also important so that users know what’s on the page. Make sure it changes on every page and relates to that page’s content.

<title>10 Things To Consider When Choosing The Perfect CMS | How-To | Smashing Magazine</title>

Meta description and keyword tags aren’t as important for SEO (at least for the major search engines anyway), but it’s still a good idea to include them. Change the description on each page to make it relate to that page’s content, because this is often what Google displays in its search result description.

<meta name="description" content="By Paul Boag Choosing a content management system can be tricky. Without a clearly defined set of requirements, you will be seduced by fancy functionality that you will never use. What then should you look" />

Cross-Browser Checks

Just when you think your design looks great, pixel perfect, you check it in IE and see that everything is broken. It’s important that your website works across browsers. It doesn’t have to be pixel perfect, but everything should work, and the user shouldn’t see any problems. The most popular browsers to check are Internet Explorer 6, 7 and 8, Firefox 3, Safari 3, Chrome, Opera and the iPhone.

• Cross-Browser Checks: Services and Test Suites
• 7 fresh and simple ways to test cross-browser compatibility

Proofread

Read everything. Even if you’ve already read it, read it again. Get someone else to read it. There’s always something you’ll pick up on and have to change. See if you can reduce the amount of text by keeping it specific. Break up large text blocks into shorter paragraphs. Add clear headings throughout, and use lists so that users can scan easily. Don’t forget about dynamic text too, such as alert boxes.

• Writing for the web

Links

Don’t just assume all your links work. Click on them. You may often forget to add “http://” to links to external websites. Make sure your logo links to the home page, a common convention.

Also, think about how your links work. Is it obvious to new users that they are links? They should stand out from the other text on the page. Don’t underline text that isn’t a link because it will confuse users. And what happens to visited links?

• W3C Link Checker

Functionality Check

Test everything thoroughly. If you have a contact form, test it and copy yourself so that you can see what comes through. Get others to test your website, and not just family and friends but the website’s target market. Sit back and watch how a user uses the website. It’s amazing what you’ll pick up on when others use your website differently than how you assume they’d use it. Common things to check for are contact forms, search functions, shopping baskets and log-in areas.

• Silverback – guerrilla usability testing

Graceful Degradation

Your website should work with JavaScript turned off. Users often have JavaScript turned off for security, so you should be prepared for this. You can easily turn off JavaScript in Firefox. Test your forms to make sure they still perform server-side validation checks, and test any cool AJAX stuff you have going on.

Validation

You should aim for a 100% valid website. That said, it isn’t the end of the world if your website doesn’t validate, but it’s important to know the reasons why it doesn’t so that you can fix any nasty errors. Common gotchas include no “alt” tags, no closing tags and using “&” instead of “&” for ampersands.

• 10 reasons your code won’t validate (and how to fix it)
• W3C validator

RSS Link

If your website has a blog or newsreel, you should have an RSS feed that users can subscribe to. Users should be able to easily find your RSS feed: the common convention is to put a small RSS icon in the browser’s address bar.

Put this code between your <head> tags.

<link rel="alternate" type="application/rss+xml" title="Site or RSS title" href="link-to-feed" />

Analytics

Installing some sort of analytics tool is important for measuring statistics to see how your website performs and how successful your conversion rates are. Track daily unique hits, monthly page views and browser statistics, all useful data to start tracking from day 1. Google Analytics is a free favorite among website owners. Others to consider are Clicky, Kissmetrics (still in closed beta yet), Mint and StatCounter.

Sitemap

Adding a sitemap.xml file to your root directory allows the major search engines to easily index your website. The file points crawlers to all the pages on your website. XML-Sitemaps automatically creates a sitemap.xml file for you. After creating the file, upload it to your root directory so that its location is www.mydomain.com/sitemap.xml.

If you use WordPress, install the Google XML Sitemaps plug-in, which automatically updates the sitemap when you write new posts. Also, add your website and sitemap to Google Webmaster Tools. This tells Google that you have a sitemap, and the service provides useful statistics on how and when your website was last indexed.

Defensive Design

The most commonly overlooked defensive design element is the 404 page. If a user requests a page that doesn’t exist, your 404 page is displayed. This may happen for a variety of reasons, including another website linking to a page that doesn’t exist. Get your users back on track by providing a useful 404 page that directs them to the home page or suggests other pages they may be interested in.

Another defensive design technique is checking your forms for validation. Try submitting unusual information in your form fields (e.g. lots of characters, letters in number fields, etc.) and make sure that if there is an error, the user is provided with enough feedback to be able to fix it.

• 404 error pages reloaded

Optimize

You’ll want to configure your website for optimal performance. You should do this on an ongoing basis after launch, but you can take a few simple steps before launch, too. Reducing HTTP requests, using CSS sprites wherever possible, optimizing images for the Web, compressing JavaScript and CSS files and so on can all help load your pages more quickly and use less server resources.

Besides, depending on the publishing engine that you are using, you may need to consider taking more specific measures – for instance, if you are using WordPress, you may need to consider useful caching techniques to speed up the performance.

• Best practices for speeding up your website
• Web page analyzer

Back Up

If your website runs off a database, you need a back-up strategy. Or else, the day will come when you regret not having one. If you use WordPress, install Wordpress Database Backup, which you can set up to automatically email you backups.

Print Style Sheet

If a user wants to print a page from your website, chances are she or he wants only the main content and not the navigation or extra design elements. That’s why it is a good idea to create a print-specific style sheet. Also, certain CSS elements, such as floats, don’t come out well when printed.

To point to a special CSS style sheet that computers automatically use when users print a page, simply include the following code between your <head> tags.

<link rel="stylesheet" type="text/css" href="print.css" media="print" />

• Printing The Web: Solutions and Techniques
• A List Apart: Going to print

Download the Ultimate Website Launch Checklist!

Just recently Dan Zambonini has published a very detailed checklist that covers both the pre-launch and the post-launch phase of the web site life cycle. Among other things his Ultimate Website Launch Checklist contains checks related to content and style, standards and validation, search engine visibility, functional testing, security/risk, performance and marketing.

The pdf-version is available as well. The checklist is a very useful reference that may help you in your daily projects and will help you to prevent errors and mistake once the site is released.

You may also want to consider the Quick Usability Check List by David Leggett that highlight some of the more common problems designers should address on their own sites in a Usability checklist of sorts. Not all of these items will apply to every website, these are just suggested things to look for in your own site design.

What other checks would you list?

Make yourself a to-do list and keep it handy to check over before making any website live. Are there any other points you would add? Share them in the comments!

About the author

Lee Munroe is a freelance Web designer from Belfast. You can see his other writings on Web design on his blog, or follow him on Twitter.

(al)

© Lee Munroe for Smashing Magazine, 2009. |
Permalink |
181 comments |
Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine

Post tags: checks, design, launching, release, usability

Such a beautiful utopia, but oh so dangerous to strive for. Though there are plenty of tools that will help you getting you there. Turn on a sound effect every time you receive an email or tweet. Wear your head set all the time. And…, install an Adobe Air app which keeps you up to date about all the latest articles in your feed selection.

Snackr is such a service. After installing it on the Adobe Air platform, importing your OPML file, and placing it in the preferred corner – your RSS feeds are always available. Right there, in the corner of your eye.

I’m running the RSS reader while I’m typing this post, and man, it drives me crazy! It keeps asking for my attention. Like a TV screen in a bar. The design, features, and usability: it’s all very well-executed. – but using the nifty little program will mean the end of productivity for me.

But hey, maybe you’re the kind of guy/ gal who needs a little bit of distraction. If that’s the case, don’t hesitate and click here.

Web design consists, for the most part, of interface design. There are many techniques involved in crafting beautiful and functional interfaces. Here’s my collection of 10 that I think you’ll find useful in your work. They’re not related to any particular theme, but are rather a collection of techniques I use in my own projects. Without further ado, let’s get started.

1. Padded block links

Links (or anchors) are inline elements by default, which means that their clickable area spans only the height and width of the text. This clickable area, or the space where you can click to go to that link’s destination, can be increased for greater usability. We can do this by adding padding and, in some cases, also converting the link into a block element. Here’s an example of inline and padded links, with their clickable areas highlighted to show the difference:

Obviously, the larger the clickable area is, the easier it is to click on the link because there is less of a chance of missing it. Converting links into block elements makes the text area span the whole width of the container, unless the width is specified otherwise. This makes it ideal for links located in sidebars. We can do it with the following code:

a {
	display: block;
	padding: 6px;
}

Make sure to also add a healthy dose of padding to the links, because converting a link into a block only affects its behavior and width; adding padding ensures that the link is high enough and has some room to breathe.

2. Typesetting buttons

Attention to every detail is what separates a great product from a mediocre one. Interface elements such as buttons and tabs are clicked on many times a day by your users, so it pays to typeset them properly; and by typesetting I mean positioning the label. Here’s a couple of examples of the kind of misplaced labels I sometimes notice:

At first glance they look okay, but notice that the text is placed too high because the lowercase letters have been used as a guide to align the text vertically in the center, like so:

However, if we use uppercase letters as well as lowercase letters with ascenders (”t,” “d,” “f,” “h,” “k” and “l”), the balance shifts upwards, making the label appear too high on the button. In such cases, we should set the type using the uppercase height as a guide — or set it a little bit higher if most of the letters are lowercase. Here’s what I mean:

This gives the whole button a more balanced look and feel. Little touches like this go a long way towards making your interface more polished and satisfying to use.

3. Using contrast to manage focus

Similarly, you can also manage the focus of your visitors’ attention with contrast between elements. Here’s an example of a post headline and some meta information underneath regarding who posted the article and its date:

All the text is set in black. Let’s decrease the contrast between the meta information (the date and author’s name) and the background by putting the text in a light shade of gray:

The highest contrast element here is the headline, so it literally pops out at us. The other elements fade into the background. Here, I’ve chosen the author as the second-most important element, and the date as the least. The font also differs in size and style, but the contrast level can be very powerful. Let’s reverse the order of importance to date, author and headline:

You can see how effective it is in shifting focus: the date now pops out at you, while the headline fades away. This technique comes in very handy for information-heavy websites, such as blogs, forums and social networks, in which you want to make a lot of information easily scannable while still showing a lot of additional things, like dates. Fading the extras allows visitors to easily focus their attention on the most important pieces of text.

4. Using color to manage attention

Color can also be used to effectively focus your visitors’ attention on important or actionable elements. For example, during the US presidential election, pretty much all of the candidates’ websites had the donation button colored red. Red is a very bright and powerful color so it attracts attention, and it stands out even more when the rest of the website is blue or another colder color.

Warmer tones like red, yellow and orange are naturally bright and so tend to attract the eye. They also “expand” when set against colder colors like blue and green. This means that an orange button on a blue background looks like it’s flowing outwards and taking the front seat. Conversely, a blue button on an orange background contracts inward, wishing to stay in the background. Here’s a picture to illustrate:

Here’s a couple of examples of websites that use color effectively to direct users’ attention to the important elements:

Function features a “We’re Hiring” link on its jobs page. To ensure the link is not missed, the designers set it against a red background that pops out from the dark background header, effectively grabbing attention.

Causecast use color effectively. Four bright pink elements pop out at you: the logo, the feedback link, the donate link and the website description message.

Want the “About” blurb on your website to grab the visitor’s focus? Make the background yellow. Want to make the “Join” button stand out? Color it orange. Make sure not to highlight too many elements, though; if you do, they may get lost in each other’s company.

5. White space indicates relationships

One of the most crucial elements in an interface is the white space between elements. If you’re not familiar with the term white space, it means just that: space between one interface element and another, be it a button, a navigation bar, article text, a headline and so on. By manipulating white space, we can indicate relationships between certain elements or groups of elements.

So, for example, by putting the headline near the article text we indicate that it is related to that text. The text is then placed farther away from other elements to separate it and make it more readable. Here’s an example in which white space could be improved:

The text looks all right and is certainly readable, but because the spaces above and below each heading are equal, they don’t separate each piece of text clearly. We can improve this by increasing the white space between each section and also by slightly tightening the line height of the paragraphs:

This results in more clearly defined blocks; we can easily tell which headings go with which pieces of text and can see the separate sections clearly. Good designers often squint or glance at their work from a distance, which lets them see the blocks of elements separated by white space as they merge together. If you cannot see these groups clearly then you may need to tweak your white space.

6. Letter spacing

Web design is pretty limiting for typographers. But while there are only a few safe Web fonts and not a great many things you can do to style them, it’s worth remembering that we do still have some level of control. “Tracking” is a term used in the field of typography to describe the adjustment of spacing between letters in words. We’ve got the ability to do this with CSS using the “letter-spacing” property.

If used with restraint and taste, this property can be effective in improving the look of your headlines. I wouldn’t recommend using letter spacing on the body text because the default spacing generally provides the best readability for smaller font sizes.

Here’s an example of letter spacing in use:

And here’s the CSS code used for the above examples:

h1 {
	font-family: Helvetica;
	font-size: 27px;
}

h2 {
	font-family: Helvetica;
	font-size: 27px;
	letter-spacing: -1px;
}

h3 {
	font-family: Georgia;
	font-size: 24px;
	letter-spacing: 3px;
	font-variant: small-caps;
	font-weight: normal;
}

The effect can be useful when you want to craft a more aesthetically pleasing or more original heading. Here, I’ve used only a couple pixels for letter spacing, but already it makes a big difference to the style of the font.

7. Auto-focus on input

Many Web applications and websites feature forms. These may be search forms or input forms inviting you to submit something. If this form is the core feature of your application or website, you may want to consider automatically focusing the user’s cursor on the input field when the website loads. This will speed things up because users can start typing right away without having to click on it. A good example of this is Google and Wikipedia’s websites.

Upon arriving at Wikipedia.org, the search box is already highlighted, ready to accept text.

To automatically focus on input fields, you’ll need a little bit of JavaScript. There are various solutions, and the one you should use depends on the functionality you want to achieve. The simplest way to do it would be to add the following to your body tag:

<body onLoad="document.forms.form_name.form_field.focus()">

Your form code should look something like:

<form method="get" name="form_name" action="#">
	<input type="text" name="form_field" size="20" />
	<input type="submit" value="Go" />
</form>

Now, every time the page loads, the text field called “form_field” will be automatically selected, ready for input.

The only problem with this is that if your users want to return to the previous page using the Backspace key, they will be out of luck because they’ll just be deleting characters in the input field. Thankfully, Harmen Janssen has another simple JavaScript solution you can find here. Harmen’s script allows the Backspace key to go to the previous page when there are no characters left in the input field to delete.

8. Custom input focus

While the default look of form elements suffices for most functions, sometimes we want something a little prettier or a little more standardized across various browsers and systems. We can style input fields by simply targeting it with an “id,” “class” or plain old “input,” like so:

input {
	border: 2px solid #888;
	padding: 4px;
	font-size: 1em;
	background-color: #F8F8F8;
}

What’s more interesting is also being able to style the input field when it’s in focus; that is, the state it’s in when it has been clicked. To do this, we need to attach a “:focus” after the “input” property:

input:focus {
	border-color: #000;
	background-color: #FFFE9D;
}

If you’re using custom backgrounds to style your input field, they may clash with some browsers and operating systems’ default focus styles. For example, here’s a screenshot of a custom-styled form clashing with the default blue OS X glow effect:

In such cases, you could also use the “input:focus” property to remove the default styling. The default blue glow in the screenshot above can be removed by disabling the “outline” property:

input:focus {
	outline: none;
}

The blue glow effect will now be gone:

Obviously you would only want to remove the outline if you’re replacing it with your own styling, so that you don’t negatively affect the accessibility and usability of your forms.

9. Hover controls

Some Web applications have extra utility controls, such as edit and delete buttons, that don’t necessarily have to be shown beside every item at all times. They can be hidden to simplify the interface and focus visitors’ attention on the main controls and content. For example, these hover controls are used in Twitter when you hover over messages:

These hover controls can be achieved with some simple CSS code, without any JavaScript. Simply style the <div> with the controls when its parent <div> is in a hover state. Here’s the code to hide and show the controls (using a <div> with the class “controls” inside a <div> with the class “message”):

.message .controls { display: none; }
.message:hover .controls { display: block; }

When you hover over the “message” <div>, the “controls” <div> inside it will appear, along with all of its content, giving you the same functionality as shown in the Twitter screenshot above.

There may be an issue with accessibility because screen readers may not be able to read the hidden <div>. There are plenty of other ways to hide the inner <div>, such as offsetting it with a negative margin that takes it off the page (e.g. “left-margin: -9999px”), coloring its text the same color as the background or simply placing another <div> on top of it.

This technique should of course be used with restraint because you don’t want to hide your important controls; but if used correctly, it can be useful for cleaning up your interface by removing those extra utility links that you don’t want to show up at all times.

Note that this doesn’t work in IE6, so you’ll need to override the hiding property in your IE6-specific style sheet or, if you don’t have one, simply use the following IE6-specific code inside the <head> section of your code:

<!--[if lt IE 7]>
  <style type="text/css" media="screen">
    .message .controls { display: block; }
  </style>
<![endif]-->

10. Verbs in labels

You can make options dialogs much more usable by thinking through the labels you use on buttons and links. If an error or message pops up and the options are “Yes,” “No” and “Cancel,” you have to read the whole message to be able to answer. Seems normal, right?

But we can actually speed things up by using verbs in the labels. So, if instead of “Yes,” “No” and “Cancel,” we have “Save,” “Don’t Save” and “Cancel” buttons, you wouldn’t even need to read the message to understand what the options are and which action to perform. All the information is contained in the button labels.

Using verbs in labels on buttons and links makes the options dialogs more usable because the labels contain all of the information the user needs to be able to make a decision.

To Conclude

Hopefully, you’ve found a few new techniques that will be useful in your work. As always, using them effectively comes down to restraint and thoughtful implementation. For example, controls that appear on hover may clean up your interface, but they will also increase the learning curve because people may not notice these controls at first. But showing all controls at all times may not be the best strategy either because users would need to scan more things to find what they’re looking for.

Striking the right balance between what you show and what you hide is a delicate art and is completely in your hands as the designer. Don’t use a technique just because it exists: use it if it makes sense in your context.

About the author

Dmitry Fadeyev is the founder of the Usability Post blog, where you can read his thoughts on good design and usability.

(al)

Your website represents your brand. New visitors will form a first impression of your service or product within seconds of arriving at your website, and the visuals, layout and aesthetic will play a large role in shaping that impression. Sure, your website may be very usable and have great content, but it’s the aesthetic that will evoke feeling, and it’s the aesthetic that will be used to judge the quality of your website in those first few seconds before the visitor has had time to browse around.

Use this to your advantage and fashion a unique style that will set your website apart from the rest — a style that will impress and delight your users.

Throughout history, great artists always found new ways to express themselves and create new techniques to set their work apart from the rest. Think about the styles of Leonardo da Vinci, Vincent van Gogh, Pablo Picasso, Salvador Dali and Jackson Pollock. Think about the different movements of art, from Impressionism and Expressionism to Surrealism and Minimalism. These styles couldn’t be more different from each other — and that’s the point. The artists’ names live on because their art is unique.

Do you want to simply follow the latest design trends and create a website that works well but looks just like many other websites out there? Following trends won’t set you apart from the rest; it won’t help your work make a strong impression. To make something memorable, you’ll need an element of creativity and novelty.

Unlike certain other forms of art, such as painting and sculpture, Web design is very limited in its expression because more often than not your website has to serve a very specific function and achieve certain goals. Successful designs are influenced and driven by those goals. There is, however, still room to develop your own unique style and aesthetic. Doing so will help you stand out from the competition and allow you to develop a strong identity.

Web design isn’t art

Having said all that, Web design isn’t art. Art is self-expression that is meant to be enjoyed and appreciated on its own. Design is communication; and, more specifically, Web design is an interface for content. Sure, there are websites out there that are purely art, but the large majority of them perform a certain function or deliver information. The website acts as the interface between the user and that function or information. This means it not only has to look nice, it actually has to do its job well, too. Indeed, in most cases, function should come before form.

I believe I can say that websites today are much better than they were 10 years ago. What do I mean by “better”? I mean to say that Web designers have learned from their mistakes over the years and have picked all the low-hanging fruit of usability. Websites today are more usable and more user-friendly because we have greater experience in and increased knowledge of how to build websites that work and interfaces that are easy to figure out.

Yet, I cannot say that art today is “better” than it was ten or a hundred or a thousand years ago. Impressionism isn’t “better” than Realism. Expressionism isn’t “better” than Minimalism. They’re just different.

Web design as architecture

While Web design incorporates an aspect of art, it also incorporates function. In this way, I think it actually has a lot of similarities to architecture, for which you need a healthy dose of both style and function.

The world’s earliest treatise on architecture, “De architectura,” written by Vitruvius in around 25 BC, outlined three principles that all good construction should fulfill: firmitatis, utilittis and venustatis: durability, utility and beauty. I believe that today these three principles apply to Web design as well.

Your work should be durable in that it should scale well — or handle a lot of traffic — which is ensured by having code that is clean and optimized, as well as a means of making future modifications and updates with ease. It should fulfill the goals and function of the website, whether they be to advertise a product, sell goods, show off a portfolio or perhaps display articles from a blog. Finally, it should look good; it should have its own look and feel. We need to make the Web browsing experience enjoyable for our visitors by crafting a pleasing aesthetic.

Over centuries, architects and engineers have figured out better ways to construct buildings, to make them stronger and larger. These advances in function are similar to advances we’ve seen in Web design. We’ve figured out better ways to make registration forms, navigation menus that are easier to use, layouts that are simpler to figure out; generally speaking, we have greatly improved the usability of our websites. This is because we’ve had years to look at how people use the Web and to fix the usability problems that pop up most of the time. We see what works best and implement those things in new websites that we build.

Venustatis

But let’s not forget Vitruvius’ third principle of beauty. In architecture we see different waves of style. Different centuries bring different looks and feels to buildings. Houses are designed to be lived in, but life would be really dull if they all looked the same and focused only on function.

The design of the Opera House in Sydney is so distinct that it’s more than just a building — it’s an iconic city landmark.

In Web design we have very similar waves. Most notable is the Web 2.0 style, in which we had things like glossy buttons, mirrored floors, starbursts and so on; it even inspired various Web 2.0-style logo and website generators, because the style was so formulaic in nature.

New trends like this appear, and some get picked up and quickly adapted across the Web. Does your current website design follow a trend? Perhaps it is setting one? If you copy other trends, then your website will be just that, a copy, but if you can go the extra mile and create a unique look that differentiates your website, then your website will be memorable. Of course, being different isn’t the only thing you’ll need. The unique style and layout must also be attractive and must accomplish its goals.

Fresh inspiration

So how do you go about creating something different? Where do you find inspiration to create something unique? When Cordell Ratzlaff and his team were designing the new interface for the Mac OS X operating system, they found their ideas in the most unusual places.

Cordell saw a great opportunity to change to an appearance that was fresh and fun, in contrast to the existing state of the art. He decided to change from gloomy, square, and bevelled, to light, fun, and colorful, with a very fluid expression. He asked, What’s the opposite of a computer interface? He came up with things like candy, liquor, and liquids, to inspire a new visual design of the interface. The designers collected magazine ads for liquor, with delicious looking liquids in glasses with ice cubes, sparkling with reflections and highlights.

Bill Moggridge, Designing Interactions

When working on your new website or Web application interface, don’t simply look at what everybody else is doing. If you look inward to your own industry and similar websites, you will no doubt find a lot of likeness. This is because many of these websites borrow from each other, and when new websites launch, they borrow from them in turn. What we have is a monotonous experience in which you are only looking inward, blind to the world of possibilities outside.

Take a lesson from Cordell Ratzlaff and seek inspiration from new sources. Look at nature, look at real world objects, look at the things that symbolize and evoke the kinds of emotions and feelings you really want to elicit with your design and aesthetic. Cordell looked at things like ice cubes in liquor, which inspired him to create the liquid Aqua interface for Mac OS X. The glossy gel buttons and other user interface elements in Aqua have since inspired many Web designers in the rise of Web 2.0 and all of the glossy and shiny visuals it brought.

Let’s take a look at a few trendsetters, websites that break the mold and feature successful designs that get picked up and adapted by others.

Leaders and Followers

Twitter, the popular micro-blogging platform, has created a unique flat and colorful look that features illustrations of clouds and birds (and whales). The bright, cartoony feel is accompanied by an elegant and simple layout.

Yammer, a recently launched “Twitter for businesses” application, takes on a similar appearance and an almost identical layout. The cartoony feel is gone, but the shape and feel remain very similar, due to the iconic Twitter layout.

Facebook, the social networking heavyweight, has won its audience partly because of the uncluttered, minimalist design that puts the content right in the front seat. The clean layout is accompanied by a simple blue and gray color palette.

Social Median, a social news website, features the familiar minimalist look and feel of Facebook, together with a similar color palette and layout.

Highrise, a CRM application, features a very powerful landing page. On one page, visitors can see a description of the app, an overview of several features, a video tour as well as a bunch of links inviting them to explore. The typography and colors work to focus the visitor’s attention on the most important things.

Presently, another internal communication tool for businesses, features a landing page that is very close in its composition to that of Highrise, or indeed that of any other 37signals app. This powerful layout is now used by a lot of Web start-ups.

Apple’s website incorporates the same aesthetic as that of its product interfaces, and indeed its entire product line. Over the last few years, it has transitioned from the watery Aqua style to smooth aluminum gradients, light-gray shades and rounded corners.

Newspond, a news aggregator, features a different layout than that of Apple’s own website, but the aesthetic is strikingly similar. There are many other websites today that use very similar styles that are inspired by Apple’s industrial designs and interfaces.

Basecamp, one of the most popular Web project management applications, from 37signals, has pioneered this simple and effective layout that you can find in a lot of other Web apps today. Everything is clear and structured, with a minimal use of images to speed up downloading time.

Blinksale, an invoicing Web application, is one among many to borrow the popular design and structure of the 37signals website.

SimpleBits, Dan Cederholm’s design company, uses his signature minimalist layout and typography. Dan takes out everything that doesn’t absolutely need to be there, tweaks white space to pixel perfection and focuses on really polishing the little details. The result is beautiful minimalism.

The Twiek blog design looks like it’s heavily inspired by SimpleBits.

Conclusion

If you want to craft an iconic website that stands out from the competition, you need to come up with a unique and novel aesthetic. You need to design a look and feel that’s different — something that doesn’t look like all of the other websites in your industry. Getting inspired by great work and beautiful things is a good thing, but you have to make sure you don’t fall into the trap of mimicking other designs too closely, or else your website could end up looking like a cheap copy.

Seek inspiration from outside your industry. Focus on the emotions you want to evoke and the character you want to give your website, rather than on what everybody else is doing. Design a layout unique to your website or application by focusing on its goals and objectives rather than on what other people have done.

While Web design isn’t art, and while there are limits to how much you can express yourself and how many visuals you can use, there is still plenty of room for a unique style. Just as Vincent van Gogh’s post-Impressionism style and Pablo Picasso’s unique art set them apart from the rest, breaking the mold will give your website a powerful and memorable identity that others will want to mimic.

Don’t follow trends: set them.

About the author

Dmitry Fadeyev is the founder of the Usability Post blog, where you can read his thoughts on good design and usability. (al)

This is a guide that, if followed, will unchain your Apple TV from its cruel iTunes tether, turning it into the useful living room conduit of music, video and web-based content it should have been all along via the media center software Boxee. Boxee can be installed fairly easily via the ATV’s USB port to bring Hulu and Comedy Central streaming, playback of any video or music file anywhere on your network in virtually any file type imagineable, and a bevy of internet A/V sources like Flickr, Last.fm, NPR and BBC podcasts and tons of others—all upping the usefulness and fun of Apple’s notoriously underachieving box by a factor of 10, easily. If you have an ATV, Boxee is a must-install, and it’s 100% free. Let’s get started.

The stock Apple TV has never been able to decide what it’s supposed to do. Is it a device to store all your videos? Its built-in hard drive would suggest yes, but the fact that everything needs to be piped through iTunes makes this a hassle if you store your videos in any other way. And why are we downloading and storing anyway? Streaming is the way things are headed, and for streaming, Apple TV doesn’t make a ton of sense, especially when a box a quarter its size and a less than half its price can bring Netflix’s massive library into your living room with zero download delays and zero added cost, soon in HD, even.

Aside from adding the golden goose of Hulu streaming, Boxee’s other main advantage is freeing your Apple TV from its direct connection with your iTunes library. No longer will it be necessary to convert all of your video files into iTunes compatible formats to get them to your TV—Boxee will let your Apple TV read just about any video codec you can throw at it (full list of codecs here – only thing it chokes on is 1080p video; 720p works fine) from any computer or network-attached storage device on your network, or read files off the Apple TV’s own hard disk—all while leaving the default OS untouched and 100% functional. So let’s do this.

What You’ll Need:

• Apple TV with software version 2.0 or higher

• A USB flash drive 512MB or larger

• ATV USB Creator [download: 1.0.b7 version - Mac only, for now]

• An invite into Boxee’s semi-public alpha (use this link especially for Giz readers to jump the line a bit)

Prepare Your USB Drive

Just like the iPhone, the Apple TV is basically an OS X computer (running a 1GHz Intel processor), so Boxee installs just like a regular desktop app in the Applications folder, which is hidden normally. Why Apple hasn’t opened up the Apple TV to third party developers is anyone’s guess, but thankfully, with a prepared USB stick it’s all pretty painless.

1. After unpacking the ATV USB Creator application, start it up with the USB flash drive you intend to use mounted. Select “ATV-Patchstic” as your installation option and “Boxee for Mac” as the installation type. At the bottom, select the BSD location of your flash disk. You can find this with System Profiler under the USB section (probably a good idea to unmount any other USB drives so you don’t accidentally wipe them).

2. Click "Create Using ->" and your USB stick will be formatted and loaded up with the appropriate software.

3. Power off your Apple TV (by unplugging it), drop your USB patchstick into the ATV’s USB slot, and plug it back in. You’ll see Tux and a bunch of code streaming on your screen as the software installs.

4. When it’s done, remove the USB stick and restart the ATV.

Download Boxee via the Boxee Launcher

5. The USB patchstick installs a launcher that can then pull down the latest version of Boxee from the web. The first thing you’ll want to do, then, to ensure you have the latest version, is update the launcher itself. Go to the new option “Boxee” in the ATV menu, choose “Update” and then update the Launcher.

6. Now, go to the new Boxee menu and choose "Update" -> "Boxee alpha…" to pull down and install Boxee itself. Once it installs, select "Boxee" from the new menu "Boxee/XBMC" menu to start it up.

Configure Boxee

7. Enter the user account you registered on boxee.tv (via our invite link above). Boxee also adds some nifty social networking features—if you have any buddies also using it, you can see what they’ve recently watched, added to their collections, or recommended to you via Boxee’s home screen.

8. First thing you’ll want to do once you’re in is make sure Boxee displays perfectly on your screen. Settings are accessible by pressing “left” on the ATV remote at any time, so go to “Settings – Appearance – Video Calibration…” to set overscan and sizing options.

Add Your Sources

Right now, under the “Videos” menu, you can browse and stream the complete offerings from Hulu, Comedy Central, Revision3, and a ton of other web video sources. But Boxee really shines when it can play your media files from anywhere on your network.

Add an SMB Share

This can be a network attached storage drive (you’ve read our guide for getting the best NAS setup, right?) or simply a shared folder on a Mac or PC on your network (to share a folder in OS X, enable File Sharing in your Sharing settings, enable SMB shares under “Options” and add your media folder. Boxee will then auto detect your shares.

9. In Boxee's Settings menu, select "Media Sources and Applications -> Network Sources" and choose "Add New Source." Select your share in the menu that comes up and mark it wither Video, Music or Photos. Boxee will now monitor this folder and add any TV shows and movies it recognizes (complete with cover art, episode descriptions, and the like) to the main videos menu (Boxee's full of little surprises like this). It won't catch everything though, so you can always access your added folders manually by choosing "Sources" under the main Video menu.

Access Apple TV via SSH For Copying Media Files

Aside from streaming from SMB shares, Boxee can also of course play files stored locally in its own file system. You can connect to the Apple TV via SSH/SFTP for copying files directly over your network and accessing your Apple TV’s main file system.

10. In an FTP program like Transmit or Cyberduck (but using SFTP), connect to appletv.local with the username and password both set to “frontrow” – this will log you in to your Apple TV’s file system, which has a structure exactly like OS X’s. You can also connect via SSH from the terminal if you prefer the geekier side.

11. In the folder /Users/frontrow you will find folders labeled Movies, Music and Pictures. Any media added to these folders will be automatically recognized and playable after copying.

Torrent RSS

Yeah, Boxee can also download Torrents. It comes with a listing of public domain movie and TV Torrents under the “Public Torrents” source, but you can also have your Apple TV download whatever Torrents you want.

12. To add a Torrent to Boxee’s download manager, simply copy the .torrent file to the Users/frontrow/Library/Application Support/BOXEE/UserData/Torrents folder using the SFTP technique above and it will immediately begin downloading. Awesome.

Uninstalling All Traces of Boxee

Should you want to wipe your machine totally clean of any Boxee related tinkering, it’s easy. Fire up a Terminal and type in the following commands, each on their own line:

ssh frontrow@appletv.local

sudo rm -rf /Applications/Boxee.app/

sudo rm -rf /Applications/XBMC.app/

sudo rm -rf /System/Library/CoreServices/Finder.app/Contents/PlugIns/XBMCLauncher.frappliance/

rm -rf /Users/frontrow/Library/Application\ Support/BOXEE/

rm -rf /Users/frontrow/Library/Application\ Support/XBMC/

What’s Next For Boxee

Boxee is on the move. Over the course of three alphas I’ve used (I can’t believe this is alpha software) over only the last month or so, this thing has improved by incredible bounds—interface is getting better, weirdness and inconsistencies getting less common, all good signs.

Eventually, Boxee wants to be in set top boxes and on every platform (Windows is coming before the end of the year)—since it supports practically every audio and video codec known, it’s aiming to be the Firefox of multi-platform connected AV setups, featuring plug-ins and add-ons of its own. It doesn’t support DRM of any kind, so don’t hold your breath for Boxee to be picked up by any of the majors. Fine with me.

Feature wise, Netflix streaming (yessss) and ABC.com are first on the Boxee folks’ list.

Boxee’s an open source app, so its forums are a lively place to ask for help and suggest more features to the main developers, who hang out there often. If you run into any bumps, that’s the place.

Build a Team that is Smart and Gets Things Done

The early team is built up of founders and a close circle of trusted employees that have often worked together previously and that become close friends. The team has natural chemistry and complementing skills. You need few management skills and early employees wear many hats, filling in as office manager or accountant when needed.

To expand the business, the team needs to be expanded. Expansion means bringing in seniority as well as volume. The team of founders and early employees needs to determine which management roles can be assumed by the current team and which need to be brought in from the outside. And the founders need to create a recruitment process that consistently lands the startup additional talent.

The founders must realize that it is time to bring in the professionals when they are spending more time learning than leading and the staff starts losing confidence. At the same time, they must avoid bringing in too much senior staff with high salaries and low hunger for success. As for expanding the team, the key lies in hiring people that are smart and that get things done. Read and apply Joel Spolky’s “Guerrilla Guide to Interviewing” and never hire someone if there are any doubts or you are having a hard time make a “hire or no hire” decision.

After the Funding

In the first post of the series I explained that decision-making needs to be based on long-term strategy. Owners need to spend time defining a clear and concise strategy and enable others to make day-to-day decisions based on their roles in the company.

Then I cautioned about the risks of premature expansion of the sales force. Owners must set-up a repeatable sales process first and then expand the sales force.

Then followed a post about the importance of a product roadmap to create alignment between teams, to help business define its target market and to guide technology in setting priorities and allocating resources.

And last week I made the case for your product heartbeat – a continual rapid-fire release plan that provides customers with new features at short, predictable intervals and gives focus to the development team.

Interesting Reads

Here are some interesting articles and posts on hiring:

• Next to his guerilla guide to interviewing, Joel has pubslished many interesting articles on hiring and other topics related to software development. The entire archive is worth reading!
• Another great blog is onstartups that I have referenced before. You might be interested why “your startup should not hire Seth Godin” or “how to tell schmucks from superstars in five minutes“
• The business of software blog has an amusing anecdote about the issues around hiring managers“.

Today I will talk about the importance of a product roadmap to create alignment between expanding departments.

Align Business and Technology around a Product Roadmap

Business and technology align easily for early startups. The team is small; business and technology work side by side, often in the same office. There is no standard product to sell and no history of successfully closed deals, so business will want to discuss every deal with technology. And the number of prospects and customers is low so technology will value being involved with many of them to get necessary feedback. All in all, communication lines are direct, there are few opportunities and commitments and hence few challenges to maintain alignment.

As business grows, the sales force will start focusing on volume and there will be pressure to go after prospects that fit the product value proposition poorly. This is especially true when expanding geographically or selling indirectly through partners and resellers. And as technology advances, there will be less and less tacit market knowledge within the expanding development team. Communication will get more complex as more specialized roles such as marketing, support and consulting are created. From now on the company needs to work hard at maintaining focus and avoiding becoming a disoriented “jack of all trades, master of none”.

You will need to introduce a product roadmap to align business and technology. The roadmap will map out product direction over the following six to twelve months. It will help business defining its target market and get an early start at pitching future products and features. It will provide guidance to technology in setting priorities and allocating resources. The roadmap will assure consistent communication which is essential for survival as Steve Johnson explains convincingly by comparing it to NASA’s Capsule Communicator (CAPCOM), the single communication agent between space shuttle and mission control.

After the Funding

In the first post of the series I explained that decision-making needs to be based on long-term strategy. In a rapidly growing company, the owners need to spend time defining a clear and concise strategy while day-to-day decision making shifts to others based on their roles in the company.

And last week I cautioned about the risks of premature expansion of the sales force. Owners must set-up a repeatable sales process first and then expand the sales force.

Next week I will turn to release planning and explain how heartbeat release schedules improve productivity.

More on Product Roadmaps

Here are two good pointers to learn more about product roadmaps:

• The Pragmatic Marketing site with its hundreds of relevant articles is a good starting point. You can also follow their blog, sign up for webinars or subscribe to their newsletter.
• Or read about perspectives on the technical and commercial aspects of software at “Business of Software” – a conference cum blog like TheNextWeb. The conference features Joel Spolsky who I will write about in a future post about creating teams.