While there are a few other logo galleries out there right now, I found that each one of them was lacking something. Most of the current galleries also moderate all logo submissions, so it may be a while before your logo actually goes live.

Logospire is different in that there is no moderation queue. You can upload your logo and it will go live straight away. By default, the front page sorts logos by highest rating, so even if there are low quality submissions, these won’t make it to the front pages. You can of course also sort by latest submissions, so you can browse, rate and comment on all the upcoming logos.

Instead of using pre-made gallery management software, I’ve built Logospire from scratch to ensure it fulfills its goals 100%. In the coming weeks I’ll be tweaking and updating the site, so if you have any suggestions, don’t hesitate to contact me. Here’s what the site looks like:

So if you’re interested in logo design, go ahead and check out Logospire. I hope you like it.

[Update 3 Jan 09] - I’ve created a Twitter feed where I’m posting updates, so if you’re interested in any changes or news on Logospire, just follow me @logospire

Now, the left columns isn’t actually related to the right. The left deals with the totals of all posts on your blog. The right deals with comments. Yet for some reason they’re placed side by side and each element has a line under it, spanning the whole width of the container. This results in pairs of statistics.

When I first saw this I was trying to figure out why the posts total was related to the comments total and why the 0 tags bit was next to the 0 comments bit. Of course there was no relation at all. The underline is used to separate each number, but for some reason the designer decided to span it the whole width, connecting the two separate statistics in the process.

This is confusing and should definitely be split up. Here’s a quick mockup I prepared earlier:

Not perfect, but already it’s easier to see the two separate groups.

Overall, I really like the new WordPress 2.7 interface. It’s not only better organized, but it’s also a little bit more polished, which gives a better user experience. Anyone else running 2.7? What do you think of the new UI?

Anyhow, here’s a shot of the old design if you’d like to see the difference (click to enlarge):

Some readers have asked me for a better way to browse the archives. While it’s not up yet, a proper archives page and a popular posts lists are on their way. I’ll be interested to read your thoughts about the new design — what do you think? Post a comment.

iDisk allows you to share files with your friends or colleagues by placing them in a public folder and sharing a link to it. That link points to a web interface to iDisk where you can download the shared files. The problem is, it’s not that easy to figure out exactly how to download them. Bogdan told me that people constantly ask about how to download the files — even those experienced with technology.

Take a look at this screenshot (click for full size):

How would you go about downloading the file? The interface looks a lot like what you see on a desktop file manager, but clicking on the file or trying to drag it on your desktop won’t work. Instead you have to click that little icon on the right hand side. That small tiny circle with a down pointing arrow is the download link.

I think it’s a case of being a little too clever. Sure, the down arrow may symbolize a down-load, but it’s not really that clear. Earlier this year, MobileMe had the log out button symbolized by the power off icon:

This really confused users who weren’t sure that clicking the button would simply log them out of the system or would shut down their computers. Apple realized the problem and have since changed it to a text label, which may not be as elegant, but it’s unmatched in its clarity.

When using symbols you need to be careful to make sure that these symbols work well to embody the action you chose them to perform. If the chosen icon has multiple meaning, you risk confusing your users. I think this is the case with iDisk’s download icon, which is not only very small and fades into the background, but is also vague regarding its function.

What do you think? Do you think the little piece of UI in iDisk is functional, or has Apple made a slip?

The active anchor state is the state an anchor (a link) is in when you click on it. The moment you click on a link, it becomes active. We all use the “hover” or “visited” states, but the active state can come in very handy when you’ve got custom styled buttons.

You see, on the desktop, whether on Windows, Linux or OS X, the buttons respond to you when you click on them. They visibly become pressed down, telling you that you’ve pushed them. This provides satisfying feedback to the user and makes the application feel more responsive.

On the web, such feedback is seldom given. You click on a button and nothing happens. In some browsers you’ll see a selection outline around the link or button while the next page is loading. Even buttons that have custom background images making them look like big solid buttons don’t do anything when you push them. They remain static and unresponsive.

It doesn’t have to be this way. Just use the “active” state to give your buttons a “pressed” look or whatever other look you wish. This will make your application or website stand out above the rest, as the experience will be closer to what the user is familiar to on the desktop rather than on the web. 

Ok, enough chit chat, here’s what you do:

Say you have a button in your application that uses a custom image. The markup would look something like this:

<a id="button"></a>


It’s an empty anchor with an id. We can use this id to style the anchor. Our CSS would then look like this:

#button {
display: block;
width: 135px;
height: 43px;
background: url(button.png) no-repeat top;
}


We’re simply turning the inline anchor into a block, giving it a width and a height, and setting a background image. The button will look like this:

To add the active state simply append “:active” after the anchor selector:

#button:active {
background: url(button.png) no-repeat bottom;
}


Because my image contains both anchor states, we simply shift the background position to the bottom, which changes the look of the button to this: 

Here’s the image I’m talking about, and here’s a live demo.

Let me know what you think. I would definitely like to see more active states used on the web. With just a couple of lines of CSS you can make your site or app feel more responsive.

[Update 16 Dec 2008] William has posted a useful link in the comments to enable the “:active” class in IE. Here’s the fix.

When content pieces blur together you begin to see how whitespace separates them into sections and groups. You can’t read the text itself, but you can see groups of text and the various sections that you’ve laid out. 

Well… that’s what you want to see. If you see one big mess then it means your whitespace (the empty space between elements) isn’t doing its job.

Let me illustrate this with an example. Here’s a site (Listmixer) where whitespace usage could be improved:

If you squint hard enough so that the contents begin to blur we’ll get something like this:

Two big blobs of text. This means that too much text is grouped up. Ideally you want to break things down into small bite size chunks that impatient visitors can swallow quickly. When there’s too much to read, these visitors may just give up and leave. 

Here’s a better example of whitespace usage on the Opera browser’s features page:

If we squint we get this:

The text groups itself into smaller blobs that are clearly separate from each other. The whitespace here is sufficient and does its job well at separating content and giving each bit of text enough breathing room.

Sometimes it also helps to do this to a visual layout to  see how its aesthetic works — see what the overall feel the design emanates. When your design is featured on thumbnails in CSS galleries or other blog posts, the design may be reduced to a small size that begins to blur the contents. What will it look like then? Is there a unique pattern, shape, and color theme that remains even when the design reduced to a blur?

Taking a step back also allows you to see what a new visitor may make of your design. They don’t know what each bit of the site is or what the text says because they haven’t read it yet — they see one big page with various elements. What will they focus on first? What attracts attention? I find the method above lets you get a feel for what elements pop out of the page and how well whitespace works at separating those elements apart.

I think what Apple is doing is actually very clever. They’re creating and marketing something that I’ll call ‘interface features’. These are the various interface elements that help you interact with the product, be it a keyboard, trackpad, touchscreen, mouse or a scroll wheel. With their regular product updates they not only change the looks of their products, they also refresh one or two interface elements and market them as new features. Let me illustrate.

Just look at the promotional page for the MacBook Pro. The four features listed on the landing page below the product pictures are:

• Unibody enclosure
• Glass LED display
• NVIDIA graphics
• Buttonless glass trackpad

Out of the four, three of them focus on the interface. The new unibody enclosure design. The glass LED display. The new glass trackpad without any buttons. Only one of the features focuses on actual product performance — the new NVIDIA graphics chip. Other interface features include things like the backlit keyboard, the iSight camera, the magnetic latch, the battery life indicator on the side and the MagSafe power adapter.

Interface features differentiate

I think those interface features are the key in selling a consumer technology product. Sure, your computer or mobile phone may have more storage space and a faster processor, but those things are invisible. The user cannot see or touch them — they’re just numbers. Yes, they may feel an increase in performance, but this is nothing like using and experiencing interface features like a buttonless glass trackpad that they’ve not seen on a competitor’s product. 

Look at the other stuff they’ve introduced: the iPhone touch screen and accelerometer, the iPod click wheel, the round scroll wheel on their mouse. These may be big things like the touch screen, or really small things like the mouse wheel, but they are all unique to Apple’s product — or at least were unique when they launched them.

Interface features are the things that you can see, touch and feel — and experience. These are the things that deliver user experience because they are the bridge that gives you access to the functions of that product. To make that bridge easier and faster to cross you need to work on reducing interface friction and make the interface more enjoyable to use. 

Interface features sell

Apple does this by constantly thinking of new ways to interact with their products and making their interface features just a little bit different than that of the competition. This gives them the edge. People can see and experience the difference. Apple aren’t marketing performance and hardware. All of those things are a given. They’re marketing new ways of interacting with their products — new interface features that will make your use of their products more productive and fun.

If you’re in a business of selling consumer products, you should focus on and market those interface features. These are the things that will really set your product apart from the rest. Don’t just update the hardware and the looks of your gadget. Innovate. Come up with a couple of unique interface features that will make your product easier and more fun to use. They don’t have to be big, but they need to be unique. Things that the competition doesn’t have. 

These are the things that will sell your product — not more memory and a faster chip.

• 3.5 inch, 640×360 resistive touch screen
• QWERTY slide-out keyboard
• 3G, WiFi and GPS
• 32 GB storage space
• 5 megapixel camera

It also has a nice design and looks pretty sleek. Here’s a promotional video of it:

However — all those features won’t mean anything if Nokia can’t deliver a great user experience. The iPhone isn’t eating away so fast on the mobile phone market-share because of its features. Indeed, the iPhone has, and always had, less features than many other smart-phones. No, the iPhone is so popular because of one thing it excels at: user experience.

The 3 stages of technology use

David Liddle, an interaction design expert, identified three stages of technology use: enthusiast, professional and consumer. Each stage has different requirements. For example, the enthusiasts are the early adopters who may not care so much about usability but more about the features. Indeed, they may take pride in knowing how to operate complex new technologies. Think Linux adopters.

The professional stage is one where the new technology is adopted for business use. Again, the features are king here because it’s the features that will differentiate product A from product B to the person  in charge of purchasing it (they may not, and often won’t, even be using the product).

The consumer stage is different in that people generally don’t want to buy things which are hard to use. Consumers want devices which are easy to figure out and devices that are enjoyable to use. This makes the user experience part of a consumer product all the more important.

More features != a better product

But don’t all the extra features add up to a better experience for the user? Well… not exactly. More features means more things to figure out. More features means more complexity. The more features, the harder it is for the designers to make an interface that retains clarity and simplicity and yet gives access to all of the functions the device has.

But wait, what about the hardware features? The specs such as larger storage space and more megapixels on the camera — surely that only has a positive impact? Sure, it does. And that’s one advantage a company can push. But this advantage is much less important as the overall experience of using the product. This experience is largely dictated by how good the user interface is, because that’s the bridge that gives you access to all the product features.

I can already see two potential problems for the N97. First: the touch screen. It’s a resistive touch screen, meaning you have to physically push on it to get a response. The iPhone’s touch screen is a capacitive one which works by conducting electricity. This is much more accurate than touch screens which operate on pressure, as well as more responsive. Second: the N97 is thicker than the iPhone. I think being able to carry a phone comfortably in your pocket is important — and thickness is a direct result of adding things like GPS and a physical keyboard.

It’s the user experience, stupid

I think Nokia, and all the other phone manufacturers, need to seriously think about their interface design. The interface, and the user experience that it delivers, is what really matters — not the raw features which a device has. 

Things like smooth transitions between applications, smooth touch scrolling, the little rubber band effect when you scroll too far, the effortless zooming in and out of websites, the elegant and uncluttered application and settings pages and the large, easy to push buttons and controls are some of the things that provide a fantastic user experience on the iPhone. If Nokia wants to challenge the iPhone at its own game they need to deliver a great user experience and that involves really polishing out all the details. 

From what I’ve seen so far, it looks like a good product and I’m looking forward to some reviews to see if they delivered on the UX.

I didn’t think about it very much and dismissed it as impossible or too fiddly. I’ve been thinking about it for a little bit now and realize I was wrong and there is actually a very easy way to do this. Whether the method is practical or not for production use I’m not sure — but at least this is something that can be done. Let me demonstrate how…

Let’s say we designed the following content box in Photoshop to be used in the sidebar of a website:

Not an unlikely example. The box above has three unique sections, the header at the top, the middle area which repeats itself, and a bottom section with the rounded off corners and a slight shadow.

One of the traditional ways of coding such a box would be to slice it into three images for each corresponding part (the middle section would just be a 1 pixel high image, since it’s to be repeated) and then apply them to three individual sections of the HTML. However, we want to use just one image, so we’re not going to cut anything up.

We do however, need to make sure the image is high enough to support scaling vertically — so the image I’m making is 1000 pixels in height. For real usage you may even make it higher than that. This part of the implementation is what puts me off — it doesn’t feel right to make such huge images — but for the sake of getting this implemented, let’s carry on. Oh, I must also note that making 1000 or 10000 pixel high images won’t really affect the file size very much since the middle part is repeating itself (at least using PNG compression).

Ok, so you’ve got the same image as above, except very tall. What next? Next we’re going to implement the HTML. Here’s what the markup might look like:

<div class="content_box">
<h2>Heading</h2>
<p>Some text here...</p>
</div>

Nothing out of the ordinary here. We’ve got the div holding the contents together, a heading at the top and then followed by a paragraph or two of text. To use one image on this markup we simply need to apply it as a background image to both, he parent div, and also the heading. The difference is that the parent div will have the background positioned to the bottom, and the heading to the top. As the content inside the div expands, the background will slide out under the heading image to reveal more. Here’s the CSS (I’ve added some padding and styling specific to my example above):

.content_box {
width: 300px;
background: url(background.png) bottom;
padding-bottom: 3px;
}
.content_box h2 {
background: url(background.png) top;
padding: 9px 15px;
color: #FFF;
font-size: 0.84em;
}
.content_box p {
padding: 0 16px;
font-size: 0.75em;
color: #222;
}

That’s it. The final styled result will look something like this (above example in Safari):

And there you go — scalable content boxes using just one image. Grab the full source code to the example above here.

Is it practical? I’m not sure. For one thing there will always be a limit to how far the image will scale, since that will be dictated by the image height. Another thing is that this method doesn’t feel right — it’s a hack. Having said this, the alternatives are only a little less hacky, since we have to slice up images into parts — that’s not ideal either.

What do you think? Post a comment below.

Update [28 Nov 2008]: Sebastian has posted a better solution in the comments. His method utilizes left and right positioning as well as top and bottom, enabling us to cut down the image size drastically. In-fact, his solution looks practical for production use. Here’s the live demo + background image used. Just look at the image and the markup and the method will instantly become apparent. Thanks Sebastian :)

One of these things is the scrollbar arrows. OS X scrollbars have two arrow buttons, up and down, just like Windows — but the difference is that they’re both located at the bottom. The up and down arrows are stuck together at the bottom of the scrollbar, like this:

Why is it so? Isn’t it more logical to put the up arrow at the top, and down arrow at the bottom? Sure, that would seem to be the most straightforward solution — however, think about how you use those controls.

You move the mouse to the button and click on it to move the scrollbar in the direction of the arrow. What if you overrun a little? You’d need to move to the other button and click on that. Considering that you’re going to have to move your mouse to at least one arrow in the first place, Apple conveniently placed them together, so there is only one location to move the mouse to. If you click one button too many times, you have to move the cursor just a few pixels to get to the other button.

Once the user learns where both the scroll buttons are located, they’ll enjoy faster access to both of them. I think it’s a great example of an interface element where the most “obvious” approach isn’t necessarily the best one when you consider how that element is used.