, 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.

Here’s what the bottom area looks like in full width:

There’s quite a few things going on here. There are a couple content sections, both wrapped inside a container. Inside the bottom content section there’s also another box for “Helpful Hints”. Here are just the borders:

I think this can be simplified without losing any information.

First of all, we can probably remove the outer wrapper because it doesn’t serve much purpose (it does flow into a navigation at the top, but there are ways to get that to work without the wrapper being required to go all around the content).

We can also get rid of the box around “Helpful Hints” and simple separate it with one full height border from the content on the right. I wouldn’t merge the two content boxes (top and bottom) because the stuff inside is fairly different so it benefits from this extra separation. Here’s what we get:

Much cleaner. Here’s what it could look like on the actual site:

Our borderitis problem is resolved with just a couple of tweaks. Oftentimes you can simply take away a bounding box and separate the area from other content with a single border, making the interface lighter and less cluttered. Sometimes you don’t even need a border at all, just separate the content with plenty of white space.

, 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.

It’s not that there’s anything wrong with many of these counters. I may feel guilty for not checking unread items in my email mailbox, but there’s at least some reasoning for this. People have emailed me, so it’s polite to not keep them waiting.

But RSS readers and other feeds? There’s nothing bad about not reading them, yet the familiar counter still manages to induce guilt. Maybe it’s because of the inbox connection, maybe some deeper desire to ensure everything you subscribe to gets read. I don’t know, but I do know that I feel uneasy when I don’t reset these counters to 0. Maybe it’s OCD.

One thing’s for sure: I actually do end up clicking on these things. The feeling of guilt may create a negative user experience, but it gets me to actually check out the RSS feeds, read my emails, and check out site updates. From this point of view the little interface element is successful, but I just wish it didn’t make me feel so guilty for leaving it unchecked.

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

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.

I’ve booted up Photoshop and had a go at cleaning it up. Here’s what I’ve come up with:

First of all, I increased the height of the menu bar. You have to sacrifice some screen real estate if you want an uncluttered interface, there’s just no way around that. A few pixels more can’t hurt.

I’ve then decreased the font size by a pixel or two. This in turn automatically increases the whitespace around the text because it’s now smaller—it gives it more padding. Finally, I merged the button edges together, eliminating a bunch of duplicate lines. This again simplifies things and frees up more space.

Note that even though the conents in the menubar now have a healthy amount of whitespace around them, the same amount of content fits in horizontally—even a little bit more (note where the word “Desktop” cuts off). More whitespace doesn’t hurt.

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).

Obviously this technique isn’t exactly great because the user won’t be able to discover the hidden controls very easily, but if for some reason you have to have this implemented, here’s how.

First, create your controls. Here’s the markup I’ve used:

<ul id="controls">
    <li>
        <div class="hover_controls">
            <a href="#edit">Edit</a> |
            <a href="#delete">Delete</a>
        </div>
        <a href="#link" class="link">Lorem ipsum dolor...</a>
    </li>
</ul>

Above you can see a list of links—in that case just one link, but the rest of the links in this list would be structured the same. You’ve got your list item, inside of which are two things: a hover controls div with a couple of links inside (edit and delete) and another link sitting outside it. I’ve given that other link it’s own class so I can style it directly.

Here’s the CSS we’d use to get the hover controls show up on the right when you hover your mouse over them:

#controls li {
    display: block;
}
#controls li .link {
    display: block;
    padding: 10px;
    border-bottom: solid 1px #CCC;
}
#controls li .hover_controls {
    float: right;
    display: none;
}
#controls li:hover .hover_controls {
    display: block;
}

The hover bit is at the bottom on the last two selectors. You style the hover controls with “display: none” and then you use “display: block” to show them when you hover over a list item.

The iPhone magic happens with the other link which I gave the “.link” class. Without anything to click on, you won’t be able to get the hover controls to show up, but if you put a link inside the list item next to the hover controls div, you’ll be able to click on that link to get the controls to show up. I’ve styled the link to be a block element and gave it some padding, making the click area much larger (this isn’t required).

It works like this: tapping anywhere on the area with the link on your iPhone will reveal the hover controls for that particular link, but you will not actually activate anything yet with the

First tap. The hover controls will stay there waiting for your input. You can then tap on any of the new links to activate them, or even on the original “.link” link. This implementation basically gives you “hover” controls accessible with two taps on your iPhone.

Here’s a live demo

you can view on your iPhone. View the source there to see the full implementation.

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.

Smashing Magazine has just published

a post on web design trends in 2010. It spawned a satirical response

from Bradley Joyce. The response of course is true, some sites get so carried away adding ads or extras that the stuff you came there to read gets lost.

I find the same thing with vBulletin forums. vBulletin offers an “archive” view of their forums. It’s basically a stripped down version of the content with no images and a simpler layout. In most cases, that’s all I want. It’s a design that serves its function and so ends up working better than the full thing.

One of my favorite sources of tech news is Hacker News

. Every once in a while the links posted there actually lead to a print version of the page than the full thing. It’s just easier to read.

When the print view of a page is so much more readable than the full thing then you’ve got a problem. It’s a symptom of clutter. It’s a symptom of a design that doesn’t do its job. If you find your site in this position, take a good look at the design. Do all the design elements there help make the content easier to read? If not, do they have a good reason to be there? If they don’t, get rid of them.

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.

So I think it’s time for a new blog. I’ve had it set up for a while but haven’t yet done very much with it. I’m going to fix that. To keep things simple, the new blog goes under my surname and is hosted at Fadeyev.net

. I’ll use it to post my ideas and observations on various topics like technology, creativity and life.

I’ve not yet done much with the blog’s design—actually, it’s more of an anti-design right now with an absolute focus on content. I like the spartan look as it reinforces the purpose of the page—to make the posts clear and readable—so I probably won’t change it too much, but there is definitely a bunch of stuff I still need to add.

The blog is up and running and it’s a little lonely right now, so if you want to take a look go right ahead

. Be sure to leave a comment or two while you’re there.

Steve Krug’s new book, Rocket Surgery Made Easy: The Do-It-Yourself Guide to Finding and Fixing Usability Problems

is essentially a companion book to his

First, very successful book on usability “Don’t Make Me Think”. While the

First book focused on design, this new book is all about testing.

The book is split into two parts. The

First part is called “Finding Usability Problems”. It’s all about the usability test: how to go about planning it, recruiting testers and finally conducting it. The second part, “Fixing Usability Problems”, covers debriefing after the test and what your next steps should be — i.e. what you should actually do with the information you’ve collected. At the end of the book, Krug briefly touches on remote testing and provides his recommended reading list.

If you’ve read Krug’s

First book, “Don’t Make Me Think”, you’ll be familiar with his informal and humorous writing style. There are also plenty of illustrations throughout to keep the content interesting. The book isn’t very long, actually, as the author states himself, it’s “short enough to read on a long plane ride”. I think that’s a good thing. The clear focus, accessible language and length ensure that the book will be read, and hopefully also used. The author’s aim for this book isn’t to turn you into a usability testing expert, it’s to teach developers how to conduct their own small tests that will make a difference in their products.

Indeed, Steve Krug recommends doing each round of testing with as little as just 3 people. This approach won’t give you a long list of problems to solve — and that’s exactly the point. Testing with 3 people means you can conduct the whole round of testing really quickly: test in the morning, and debrief during lunch. You’ll almost certainly discover the really critical issues. The author advises you focus on fixing 10 most important problems, which is enough to make a difference for your users and plenty for your team to get on with.

Throughout the book Krug uses short maxims, for lack of a better name — little snippets of wisdom that summarize the main idea behind each set of recommendations. Some of my favorites are: “Start earlier than you think makes sense”, “Make it a spectator sport” and “When fixing problems, always do the least you can do”. Presenting recommendations in such compact form makes the ideas behind the book much easier to remember.

One great thing about the book is the detailed materials the author provides for conducting your usability tests. For example, there is a full script to follow with your test participants, a script to follow with the observers, a brief form for each one of them to fill in and a checklist for you to go through before and after the test. There is also a video you can watch of a usability test that Krug conducts (you can watch it here

).

Krug advocates two approaches to tackling usability problems. The

First is: tweak, don’t redesign. Oftentimes you’ll be tempted to do a lot more than necessary. A problem with one or two items in your navigation menu may prompt you to want to redesign the whole navigation. Small fixes and tweaks just don’t have the same good feel to them as a complete redesign — that smell of new paint if you will. But unlike redesigns, tweaks are usually quick and easy to implement. Going off on a redesign will consume all your resources and time, the redesign may get sidetracked or never finished. Small tweaks can be implemented even if you do plan to have a redesign later, and your users will start enjoying the benefits right away.

The second approach is: take something away. That is… literally, take something away from the page you’re working with. The reason people find a lot of sites confusing is because they can’t find what they’re looking for, and they can’t do that because there’s too much other stuff around which they must look through. Taking stuff away shifts more focus on that which remains, so the

First thing you should do when trying to fix a problem isn’t necessarily to add something, but to see if you can take something away.

Who this book is for: If you plan to conduct usability testing on your site (or other software products) and are new to it, this book is for you. If you’re thinking about it, then you may also benefit from this book. It will tell you exactly what’s involved, how to do it and what you’re getting out of it.

Who this book isn’t for: anyone who doesn’t plan to test (and are sure about it). While the author does touch a little on actually fixing usability problems, the majority of the book is all about testing and conducting tests, so if you want to read more about the design side of things, get Krug’s

First book: Don’t Make Me Think

.

Giving your work an identity certainly doesn’t mean you’re losing restraint — it’s actually a good practice — but it may lead down the road of implementing too many design elements for the sake of design elements — things that don’t really need to be there in order to solve the problem. Instead, apply your identity to the core elements — things that you absolutely cannot take out — and throw away the rest. What you’ll achieve is a product that’s simple, yet bears your own mark upon it.

Let’s take a look at a set of modern mobile phones:

You can see how one phone stands out from the rest: the iPhone. Ok, an obvious example, but it’s only obvious because it’s good.

The iPhone uses the minimal design possible. There is only one button and the whole phone is essentially just one big display. Apple always use simple geometric shapes — there are no unique curves or design elements sticking out — it’s just symmetrical curves, circles, rectangles and lines carefully arranged to form their iconic minimalist, industrial design.

The other phones may feature fashionable, sleek shapes, but they lack simplicity because these shapes are unique to each phone and there are too many elements involved. There is the keyboard, the accept and decline buttons, the Ok and Cancel buttons, menu buttons in some cases, and also the button wheel. The lines and curves are not made out of simple symmetrical shapes — they’re unique to each phone. Yes, this makes the new phones look sleek, but it also makes them look less iconic and less memorable when compared to the brilliant simplicity of Apple’s design that uses only the simplest shapes.

You can sketch the iPhone with just a few lines and the resulting shape is clearly identifiable.

This is minimalist design. It’s iconic. Of course minimalism isn’t a requirement for creating successful designs but by reducing the phone’s construction to the bare minimum and composing it out of simple geometric shapes Apple consistently delivers products that stand out and products that people love. The same design principles are seen in all their work: iPods, iMacs, MacBooks and so on.

Restraint plays a huge part in this because you have to stop yourself and think: hang on — I don’t need all these lines and shapes. I don’t need this button here. I can make this whole section out of one piece of material. I don’t need to use these complex lines where simpler shapes would suffice. And so on. Restrain yourself — think about accomplishing your goal with less — what you’ll achieve is simplicity.

Let’s take a look at some more examples of restraint. This is Dan Cederholm’s website SimpleBits:

It’s not spartan by any means — there are visual elements throughout, like the subtle background texture in the header and the lighter gradient at the top of the content — but it would be impossible to call it anything other than simple and clean. It’s a beautiful minimalist design that works.

Here’s Flickr

:

Notice that there are almost no visual elements — this design really is spartan. If you look very closely, you’ll notice there are tiny rounded corners on the little buttons and frames, and 1 pixel highlights, so the design is by no means unpolished — it’s restrained. It accomplishes its objective by being clean, quick to load and putting the actual content to the front.

Here’s the Basecamp

project management app:

Same thing here — the designers didn’t try to show off or add eye candy — everything is styled very simply. It’s actually fairly polished, but it’s not polished in the sense of being beautiful, it’s polished in the sense of being clear and usable. The designers restrain themselves from adding unnecessary lines, textures and eye candy — what’s left is all there for a reason.

These designs are simple not because their designers lack the skill to create more complicated visuals; they’re simple because their designers restrained themselves from doing so.

Is restraint always good? No, it only works in the right circumstances. Sometimes, you need to forget restraint and embrace complexity. Some work just needs to be complex — needs to be unique, elaborate and remarkable. Not all design should be utilitarian and industrial, some things are made for self expression and art.

For example, portfolio sites of artists and web designers are usually very intense in use of visuals and eye candy. Here are a couple of great examples:

This isn’t simply design — it’s art. The aim here isn’t to make a clean and usable website, but to create a unique, branded identity and to impress and delight the sites’ visitors.

On the Red Square, in Moscow, stands an impressive cathedral: Saint Basil’s Cathedral. The cathedral was commissioned by Ivan IV (Ivan the Terrible) and was built in 1561. It’s a very remarkable building, with a unique design and several very colourful and intricately decorated domes. There is a legend that says that the architect of this cathedral, Postnik Yakovlev, was blinded after its construction by Ivan’s orders to ensure that he didn’t build anything more magnificent for anyone else.

And so it is with work like this. Forget restraint and create something truly spectacular — something that inspires and takes your breath away, something that nobody else can replicate because of its intricacy and unique technique involved in its design.

But when you’re working on something like a web app, where clarity and usability comes

First — focus on that and restrain yourself from adding eye candy that will do nothing but distract the user from what they’re doing. Simplicity doesn’t need to look barren either, as we’ve seen in the case of products like the iPhone it can be beautiful and iconic. If the visuals don’t help, they don’t need to be there. What’s left can be fashioned by you to create the look and feel unique to your brand.

For example, Apple’s OS X had a UI called “Aqua” for quite a few years now that gave the buttons and other interface elements a certain look a feel — a liquid look for the buttons and a more metallic/plastic look for the texture of the windows themselves. They’re now moving towards a more aluminum look that will bring it closer to the look and feel of their hardware products.

Until OS X Leopard, there were actually several ‘branches’ of the UI spread around Aqua. There were the plastic windows, the brushes metal windows and the darker aluminum windows. Buttons looked different in each one of these ’styles’. Leopard, the latest release of OS X, has unified the look across the board.

The interface in OS X looks the same on (almost) every app

Companies making apps for OS X don’t reinvent the wheel and go with the toolset given to them by Apple, so the UI in their apps looks and feels like that of OS X. The same thing on Windows — Windows XP may look different to Vista and 7, but the apps running on each system tend to use the interface elements provided by the OS, so they fit in and feel ‘native’ to the system. Well… most apps do — some don’t, and choose to fashion their interface with a completely unique look.

Why’s a unified interface important? The main argument is that people learn what each interface element looks like — what a button looks like, what a tab looks like, what a scrollbar looks like, and so on. With a unified interface you only need to learn this element once. If every other tool or third party app on the system then re-uses the same graphics and styles, the user can easily recall the function of that element. It also just looks good to have a consistent style across the board. It’s clear and orderly.

That’s the situation on the desktop OS at least — it’s mostly unified, with a few exceptions. On the web though, it’s a different story. CSS allows us to style interface elements displayed inside a browser — things like form input fields, buttons and navigation menus. Without any styling, these elements take on the look of the operating system the browser is running under — or even that of the custom styles provided by the browser itself.

A lot of web applications style their elements with CSS. A lot of others just leave them as they are. Using the same, un-styled, application then on different computers and on different browsers will give you a different experience. UI elements will look different each time. You might even get different fonts, depending on what fonts you have installed on that particular computer or device.

Using styled applications is another story. The interface remains consistent across different computers (more or less). Each styled application looks different from other styled applications though because the developers create their look themselves from scratch every time. There is no consistency — you have to learn the interface when you begin using the app.

This leads me to the question of the post: should there be a unified set of styles for web interfaces?

Just as Apple has consolidated their shattered OS look and feel in Tiger with their unified interface in Leopard, it’s possible to unify the look of interfaces of the web with CSS. Not just a framework — but a set of carefully crafted and good looking styles for forms, menus and windows that would remain consistent across devices and browsers. Such a stylesheet will give developers a strong foundation on which to design their app, and will provide a consistent experience for all the users of the apps sharing these styles.

Why now and how?

The reason why I bring up this topic is because an adoption of a certain technology is beginning to grow. That technology is CSS3. While CSS3 is still not fully supported by the browsers, all of the modern browsers support some of the common elements of it. These advanced styling properties allow for things like rounded corners, box shadows and text shadows, allowing the designer to create beautiful interface elements without resulting to many images (or indeed, any images).

More important, these advanced properties do away with useless markup bloat which was essential for things like rounded corners. With CSS3 you can style HTML elements without additional markup — just target each element directly and apply the advanced properties.

Here’s an example of two inputs, a text input and a submit input, that I’ve styled earlier. The markup for both elements is pure — no wrapping divs or custom classes — the CSS targets each by type — e.g. input[type=text]. This will look the same in all modern browsers across different operating systems (the font may differ slightly as it falls back to the next available one):

Text field and a submit button styled with CSS3

Now.. Internet Explorer 6 doesn’t support these kinds of type selectors — or any other advanced CSS3 properties for that matter. Newer Explorers support type selectors but won’t give you the fancy stuff like rounded corners or shadows (although this stuff should degrade gracefully because after all, sharp corners aren’t the end of the world as long as everything else functions properly).

The other modern browsers support enough right now to start styling buttons and other interface elements without additional markup though.

So it’s possible to make a comprehensive CSS that will provide attractive, and more importantly, unified styles to form elements and menubars (which will need minimal markup and classes, specified by the stylesheet) — but is this a good idea?  This is a project I’d like to do but I’m wondering whether it’s worth it. I’d love to read your comments.