A Mild Case Of Borderitis

The image on the right is a snapshot of a portion of Gandi’s website, a domain registrar I use. The website uses boxes and borders to structure content, and it works fairly well. The problem is, there are areas of the site where all the boxes and borders converge, forming areas of border overkill.

At the bottom there you can see about 5 borders packed together in a row. Yes, grouping related items together is good to show hierarchy and relationships, but sometimes you get carried away. Let’s call this a mild case of borderitis…

Guilty

I feel guilty. I feel guilty when I look at a certain interface elements. It’s the unread, or “new” count, that little number you see by your email inbox or beside a subscription in your RSS reader. Drawar, a design blog and community, has recently added a little sidebar box that shows the number of new site updates:

Unless you click on the link to see the feed of updates, the counter will just keep going up. Worse, the box detaches itself and follows you as you scroll down the page, leaving no escape from the counter…

Pull Down to Refresh

Earlier this year, Twitter released its very first official client for the iPhone. Instead of developing the product internally, they discreetly bought the rights to an existing app called Tweetie. They then hired its developer Loren Brichter, and re-branded the app simply as “Twitter”.

So what made Tweetie so special? Well, features and functionality aside, the one thing that most users fell in love with was its UI; simple and intuitive, all the things a good interface should be. What really got us usability nerds talking though was the use of a gesture to download your latest unread tweets. Instead of the standard tap to refresh button you’ll find in most Twitter clients, Twitter (as I’ll now refer to it in present tense) requires you to pull the tweet-list downward with your thumb then snap it back like a piece of elastic. Once you’ve done this, the app contacts the Twitter servers and displays your most recent unseens tweets.

On the surface, this may seem like a novelty to differentiate it from other Twitter clients, but it actually helps reduce UI clutter while removing the need to worry about whether the user will manage to hit a button’s potentially small target area. Oh, and it also makes a satisfying “pop” sound when you snap the list back into position. What’s really interesting about all this though is that while the reason to perform the gesture is new (refreshing the current view), the gesture itself is old and therefore feels extremely natural…

It Isn't Minimalism

What is minimalism? The New Oxford American Dictionary on my Mac provides the following definition:

minimalism |ˈminəməˌlizəm|
noun

1. a trend in sculpture and painting that arose in the 1950s and used simple, typically massive, forms.
   
2. an avant-garde movement in music characterized by the repetition of very short phrases that change gradually, producing a hypnotic effect.

Seems like a style of art and music. These days people tend to throw the phrase “minimalist design” around a lot, but does minimalism really apply to design, and if so, what does such design mean? Wikipedia tells us a little more about minimalist design:

Don't Forget The Whitespace

Linux… One of the problems with Linux is its lack of tasteful aesthetic. Linux seems to have always been designed by programmers—at least thats the impression I’m getting. It always tries, but it always falls short revealing its clumsy, unpolished edges. It’s getting better, but it’s not there yet.

One of the most glaring things that always pops out at me is a disregard for healthy whitespace. Whitespace: the empty space between one piece of content and another, or between that content and the edges of its bounding box. Whitespace helps you show hierarchy. It also makes things look so much less cluttered.

Here’s a screenshot from the latest release of Linux Mint. Check out the menu bar at the bottom of the screen:

The font size is probably a point too large, but that’s not the worst issue here. The worst issue is just how cluttered the menubar is. It’s cluttered because there’s not enough padding between all the elements and their bounding boxes…

CSS Hover Controls On the iPhone

Here’s a simple technique to get hover controls working on the iPhone. Hover controls are links and buttons that appear when you hover your mouse over a a target area and so are useful for a lot of secondary actions like delete and edit links—a way to simplify your interface.

The iPhone has a touch screen, so you can’t really hover over anything, but the following technique will still work. Instead of hovering, you’ll have to click on a given area for the controls to show up. This area will have to be a link, either an inline link or a block link (block will work better because you can make the click area larger)…

A Symptom Of Clutter

Jason Fried wrote a post a while back on the usefulness of site links shown on the Google results pages. These are the little site map links that Google sometimes shows under a page result for a domain, which essentially act as navigation links for that site.

Jason’s observation is that in some cases these links are more useful than those provided on the actual site. The site itself may be full of content and feature confusing navigation, while Google’s links are always just that: a set of links. Short and clear.

I think the same can be said for the “print” view on information sites and blogs. Some sites are just so cluttered that the print view is more readable than full version of the page. The print view strips away everything unnecessary, leaving just the stuff you want: the content…

My New Blog

I started UsabilityPost a couple of years ago with the purpose of creating an outlet which I can use to write about a subject I am passionate about. I focused on usability because the functional side of design is what interests me most and is something I feel is of most value to today’s designers.

I’m happy with the way the blog has turned out and will of course keep on writing…however, I oftentimes want to write posts on things which don’t really have much to do with design or usability. Unfortunately, I chose a very specific name for the blog, which is both, an advantage and a disadvantage. It’s clear what this blog is about just by looking at the domain, but at the same time, it limits the scope of what should be published…

Attachment to Physical Media

If you browse a web design gallery or two you’ll notice a pattern—something that the design of my own site shares as well. The visuals of many sites recreate physical media. This is done by using paper textures for backgrounds, grungy or handwritten fonts, paper edges, wrapping labels, paint strokes, cardboard textures and so on. Even though the design is that of a website, which only exists in the digital world, the designer chooses to utilize familiar visuals of the physical realm.

This is a trend that appears to be growing. Look around on CSS galleries and you’ll see a lot of such techniques in use. Websites are starting to feel like they’re made out of paper, with painted headers and printed letters. The inspiration behind this trend is clear. The physical media looks and feels good, and we’re all familiar with it. It’s comforting and pleasing to see the nuances of that media on the screen.

But…I’m not convinced that this trend is a right direction for web design. You see, while the trend is aesthetically pleasing, the idea behind it closes off some great opportunities for the designer…

The Value of Good Design

Drawar has published a couple of interesting posts about the importance of design and aesthetics for online businesses last week. The main premise is this: businesses succeed and fail on the web regardless of how well designed their sites are. An ugly website will succeed if their product or service is good, so why bother making something beautiful?

Now, Paul Scrivens' position on this is that you should care, and that pushing out something that’s just good enough isn’t what web designers should strive for. I agree. I also think that good design, and good aesthetics for that matter, oftentimes make business sense…