:hover as an web interface design tool going forward is going to be less and less important. As to whether this is a good or bad thing I’m not sure.

He makes the point that as more and more sites and web apps optimize for the iPad and iPhone, designers aren’t going to be able to rely on mouseover states. Mouseovers are used both to provide feedback that an item is clickable and to reduce complexity on a screen by hiding controls until the cursor is moved over an area. But that ability goes away with the iPad. I’m running into this issue with a current project, and it takes a new way of thinking about the problem.

Andy sums up:

I know that I’ll certainly be considering ‘tap to toggle’ as a user interface choice ahead of hover in the future. The iPhone-ification of interaction online continues.

(via Daring Fireball)

I’m always surprised when I see that a company has a Twitter account but hasn’t taken the steps to customize it. It’s very easy to customize Twitter, mainly because your options are so limited. So “extend your brand” (bleah) in three steps:

Step 1: Your Icon

The bird may be cute, but change it. Use your photo, company logo…something like that. A square image works best. Go to Twitter’s Settings > Profile > Picture.

Step 2: Background Image

The background image can either be tiled (repeated) or just appear in the top left. If you’re using a tiled image, please make sure it doesn’t look GeoCities-hideous. Many people use a really large static background image which would be a faux pas if this were 1998, but luckily most people aren’t on dial-up anymore. (Mobile web is a different story, of course.)

The one issue with Twitter’s non-tiling background is that you can’t position it: it’s just set in the top left corner of the user’s browser, but the actual page is centered on the screen. So people with smaller screen resolutions may not see all of your background image. Compare:

It’s best to test your background image with various screen sizes to optimize it as much as you can. (If you’re hiring someone to do this, a competent designer is already doing this for you.) Change your background image at Twitter’s Settings > Design > Change background image.

Step 3: Colors

Finally, update your background, text and link colors. If you’re using a static background image, this is where you make sure the background color blends seamlessly with your image. Color settings are in Settings > Design > Change design colors.

Further Reading

Looking for more Twitter customization inspiration and ideas? Here are a few sites to check out:

• Twitter Background Design How-To and Best Practices
• 20 Creative Twitter Designs and what makes them cool
• Make a Good Impression with a Custom Twitter Background

True, the most important information should still remain above the scroll (that is, be seen without scrolling). But as I tell clients, not everything needs to be above the scroll. The design can encourage users to scroll for the rest of a longer page page, such as with the cut-off technique.

Don’t cram everything into a single screen. Don’t force your users to click though multiple screens to read an article that could simply be an easy-to-read single scrolling page. Remember: on the web there is no page fold.

(via Daring Fireball)

What is sIFR? Basically it’s code that replaces plain HTML text on a web page with a small Flash movie that displays the text in any typeface you want. It works on any major browser with the Flash plug-in (which is nearly all web users) and sIFR degrades gracefully for the few that don’t, displaying the plain HTML text instead of the Flash text.

sIFR has been a great way for me to add style and personality to an otherwise all-HTML-text website. For sites I’ve built on a CMS — like barbarapeavey.com, craigrousseau.com and kieranchapmandesign.com — sIFR takes the site-owner-generated page titles and displays them in the selected typeface. This is such a timesaver over having to create or edit title images each time a change is made.

Alas, sIFR isn’t perfect: It’s use is pretty much limited to titles and subtitles; using it for body text would slow things down too much. Already it does slow down page load times a bit, as the page needs to first load before the Flash displays the title text. Also, while I’ve implemented it a number of times, it’s still not the easiest technology to get running correctly on a site. Besides setting up the script and styles, there’s often quirks and tweaking to get text to display correctly.

Until we’re given proper control over type on the web — perhaps TypeKit will be the answer? — sIFR has been a very good stopgap solution. For more information, as well as downloads, examples and documentation, check out sIFR Documentation & FAQ.

However, making things look attractive is an important part of design. A website’s visual design not only conveys the personality of your company through its style, typography, and color, but it’s also how people determine if they can trust your site. The same way you wouldn’t go into a messy, dirty, run-down store, you probably wouldn’t shop online at an amateur-looking, disorganized website with missing photos and broken links.

A List Apart’s article In Defense of Eye Candy discusses many of these topics. It also brings up Donald Norman’s tests when he looked to answer the question “Do attractive products actually work better?”

Researchers in Japan setup two ATMs, “identical in function, the number of buttons, and how they worked.” The only difference was that one machine’s buttons and screens were arranged more attractively than the other. In both Japan and Israel (where this study was repeated) researchers observed that subjects encountered fewer difficulties with the more attractive machine. The attractive machine actually worked better.

Your site’s design is important to your customers on many levels: how they perceive your company, whether they can trust you, and even how successful they are at using your site. The design of your website or product should not be an afterthought. Good design needs to be an integral part of your company, otherwise it’s probably costing you customers.