Degrama - Online Superstars » Design

Minimize Visual Noise with White Space

Degrama — Sun, 11 Oct 2009 19:05:31 +0000

So far, we’ve discussed minimizing complexity by killing or hiding features. But minimizing “perceived” complexity is also important. The amount of visual noise in an interface has a great deal of impact on the perceived complexity of the interface. Keeping visual noise to a bare minimum will make an interface seem easier to use. The two primary tools for reducing visual noise are white space and contrast.

White space, as defined by Mark Boulton, “is the space between elements in a composition.” White space should be your default layout tool. One rule of thumb is never to introduce a design element if you could accomplish the same goal with white space. You will be surprised by just how much you can accomplish with white space alone.

While white space should be used in abundance, contrast should be used as little as possible. Design theorist Edward Tufte, who is responsible for the notion of the “least effective difference,” urges designers to use the smallest visual variation required in order to effectively communicate an idea. Practically, this means emphasizing what’s important and dialing back everything else.

To illustrate both of these points, take a look at this pricing chart from TypeKit and then look at the modified version:

Original version.

Modified version.

You’ll notice that the modified version contains a dark heavy border, not unlike the default border around HTML tables. Which version does a better job of minimizing visual noise? (The answer, of course, is the original.) Plenty of white space and minimal contrast help reduce visual noise and will make your application feel simpler.

Hide Complexity in Design

Degrama — Sun, 11 Oct 2009 19:00:04 +0000

If you can’t kill a complex feature, the next best thing is to hide it. Too often, rarely used yet complex features take up more screen real estate than frequently used yet simple features. This shouldn’t be. A good user interface should make the most common tasks the most prominent and then hide rare tasks so that they don’t get in the way.

When we were redesigning our content management system, we weren’t able to kill one complex feature in particular: the bulk edit function. In the previous version of the CMS, an entire column of a main screen was devoted to the bulk edit basket. The feature consumed about 30% of the screen real estate, but we found that very few people actually used it. Our solution was to introduce a single icon with a number beside it indicating how many items were in the basket. Clicking on the icon or number revealed the list of items in the basket through a modal dialog. This saved a huge amount of space and prevented the majority of users from being distracted from their primary task.

“When a small, unassuming object exceeds our expectations, we are not only surprised but pleased.”

Effective User Testing Doesn’t Have To Be Extensive

Degrama — Thu, 24 Sep 2009 21:41:13 +0000

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.

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.

Source: Jakob Nielsen’s AlertBox

White Space Improves Comprehension

Degrama — Thu, 24 Sep 2009 21:39:57 +0000

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.

The Ideal Search Box Is 27-Characters Wide

Degrama — Thu, 24 Sep 2009 21:37:21 +0000

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.

Most Users Do Not Scroll

Degrama — Thu, 24 Sep 2009 21:33:01 +0000

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.

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

Name of the website,
Value proposition of the website (i.e. what benefit users will get from using it),
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).

Users Focus On Faces

Degrama — Thu, 24 Sep 2009 21:30:01 +0000

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.

Master CSS Tools Review

Degrama — Sun, 13 Sep 2009 19:29:44 +0000

The tools listed here can make your CSS better, faster, and more efficient.

SlickMap CSS – A Visual Sitemapping Tool for Web Developers
A tool to create a styled sitemap from a basic HTML unordered list.

Phoenix : Add-ons for Firefox
Phoenix is a Firefox add-on editor that lets you work on CSS, HTML, and JavaScript code, including testing. It also tells you how many CSS or JS files are loaded into a page, along with their size, and lets you control those files.

Juicer – a CSS and JavaScript packaging tool
This app will combine your multiple CSS or JS files into a single file, reducing HTML requests and speeding up load times.

Gridmaker v3
A simple online grid-design app.

Codetech Firefox Extension
Get the feel of Dreamweaver in a Firefox extension. Edit your documents right next to your web pages as you surf.

Boks – a visual grid editor
Boks is an AIR application (so it works on Windows, Mac and Linux) that provides a User Interface for Blueprint CSS’s framework. It’s been designed for those who think the Grid System is good but never really took the time to give it love. It handles grid configuration, baseline rhythm pimpin’, CSS (with or without compression) and grid.png export and HTML layout.

Modernizr
Modernizr lets you create if-statements in your CSS with an intuitive syntax.

CSS Vertical Rhythm Generator
This tool will help you compute CSS that has a consistent vertical rhythm. If you are not sure what this is all about check out this article about vertical measure.

Typeselect – Selectable text replacement
By leveraging typeface.js, jQuery, the canvas, toDataURL, CSS background properties and real overlayed text, Type Select is able to combine custom fonts with your browser’s native text selection funcationality. You can now interact with beautifully rendered typefaces just like you do with normal text. Drawbacks: no support for :hover or line breaks, text is not selectable in IE.

CSS Prism
Enter the URL of any CSS file to view and modify its color spectrum. You can use CSS Prism bookmarklet to view and modify the color spectrum from any website.

Compress PHP, CSS, JavaScript(JS) & Optimize website performance.
This articles gives a good overview of GZip compression.

Master CSS3 Techniques

Degrama — Sun, 13 Sep 2009 19:28:26 +0000

Below are a variety of techniques specifically for CSS3. They include information on mixing CSS3 with jQuery, using shadow effects and gradients, and even some collections that cover multiple techniques and tutorials.

Mixing CSS3 and jQuery
A thorough roundup of techniques for combining CSS3 and jQuery.

CSS Gradients in Action
A post covering examples of CSS gradients, with the code included.

The Shadow Effect In CSS3
An overview of using CSS3’s native shadow effect.

Go Beyond Web-Safe Fonts with CSS3
Design your typography around any of the variety of fonts available using a new CSS3 technique.

CSS3 Exciting Functions and Features: 30+ Useful Tutorials
A great collection of CSS3 tutorials to do just about anything.

Master CSS Other Handy Techniques

Degrama — Sun, 13 Sep 2009 19:27:33 +0000

Here are a handful of other CSS techniques for creating things like transparency and realistic hover effects.

CSS Star Rating Part Deux
This tutorial builds off a former tutorial and shows how to create star ratings that will show ratings that aren’t an exact integer (like 3.5).

Two Techniques for CSS Transparency
This tutorial shows two techniques for creating transparency with CSS, including one that uses CSS3 and a lower-tech version.

Placing a CSS background image horizontally right on an h2 using a span element
Learn how to add a background image to a heading 2 element and have it perfectly aligned on the right side of the text while keeping the default block element behavior.

Snazzy Pullquotes for Your Blog
Learn how to add a background image to a heading 2 element and have it perfectly aligned on the right side of the text while keeping the default block element behavior.

Cross-browser semi-transparent backgrounds
Here’s a comprehensive tutorial for creating semi-transparent backgrounds with CSS that includes a hack to make it work with IE6.

How to: CSS Large Background
This tutorial provides various CSS examples on how you can create a large background site using either a single or double images.

Creating Thumbnails Using the CSS Clip Property
The

clip

property in CSS is useful for clipping images and creating thumbnails without having to create additional files. This trick can be used to create square thumbnails, or to create other kinds of thumbnails without actually duplicating files on the server. Here is the rundown.

CSS image replacement with… images!
Sites with dark backgrounds lend themselves well to white or light-colored logos. The result can be nice on screen, but if the site is printed, there can be undesirable results: either the logo doesn’t show up, or if it was saved as a transparent gif, it shows with jagged pixelated edges where the edges are meant to blend in with a dark background color. This article present a method that uses a print-optimized image in the html, and CSS to swap out the image with a screen-friendly one.

Text overlay with CSS
The idea is just to overlay some text over an image, but as blocks that stick out from the left with an even amount of padding all the way around the variable-length text.

Internet Explorer & CSS issues
This article covers a variety of techniques for fixing issues with CSS rendering in Internet Explorer.

Disabling Deprecated HTML Using CSS
This tutorial shows how to disable any deprecated HTML your clients might try to use when updating their site by using CSS.