Toluu

The Usability Post

Design and usability blog

Scalable Content Box Using Only One Background ImageNovember 27

A colleague of mine was recently trying to cut down on image usage when working on a web design project. He asked me whether it was possible to use one image for a vertically scalable content box that had both, a unique heading background, a border along the sides and a rounded off border in the footer.

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 i

In UI Design, the “Obvious” Solution isn’t Necessarily the Best SolutionNovember 20

One of the nice things about the Mac OS X operating system is the attention and the little touches that may seem illogical at first but then make complete sense when you think about them. 

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

De-clutter Your Interface With Hover ControlsNovember 19

One of the more challenging things as a user interface (UI) designer is to achieve a good balance between showing just enough controls on the screen to allow the user to perform their tasks quickly, and yet not so much that the whole interface looks overwhelming and complicated.

Too little controls will mean the user will have to access stuff through menubars and other navigation panels, wasting their time. Too many and the user will just get lost, unable to find the stuff they need.

Right now I’m working on my own web application (I’ll write about that later) and I’ve found a nice little CSS solution you can use to cut down on the clutter and yet retain the quick access to the controls users will need. Hover controls with CSS. No javascript — just CSS. Let’s see an example.

Suppose our web application displays a list of notes. For each note we want to be able to edit or delete it. So for each item we’ll want to show the relevant controls; either as text links, buttons or icons. I’m going to use text links. So here’s what it might look like:

But the thing is, showing all those controls for every item is repeating yourself. The user isn’t going to

The Pitfall of Adding Keyboard Shortcuts to Web AppsNovember 13

I’ve recently discovered a few keyboard shortcuts in Google Docs, Google’s office suite of applications. But unfortunately, I’ve stumbled onto them by accident while using a shortcut on my OS X operating system. When I tried to hide the browser window using the “Command + H” key combination, something unexpected happened. The “Find and Replace” window popped up inside the app:

This is problematic because I still want to use my OS X command, but now it’s been overridden by Google. I think web application developers should be careful to check for at least the main window manipulation controls in the popular operating systems like Windows and OS X to make sure their keyboard shortcuts don’t block them.

Is Your App Responsive?November 13

You’ve built your software or website that performs its function well. You’ve fashioned it with a usable interface that is logical and easy to figure out. You’ve polished the aesthetic so it is enjoyable and satisfying to use. That’s it, you’re done — right? Not quite… because there is one more element you should consider. Responsiveness. How responsive is your interface and your app?

Responsiveness is the quality of providing quick or instant feedback to the user that something is happening or that their action is working. We all know when the software isn’t responsive; you click a button, and nothing happens  — the application just hangs there. Slow loading webpages, laggy javascript and sluggish application controls are all the symptoms of unresponsive software or website.

Sure, this is partly governed by how fast the user’s computer is — but it is also something that you have control over. You can optimize your code and streamline your application to load faster and perform faster.

Look at Google’s suite of web applications. Every single one of them features the minimalist user interface that we’ve grown accustomed to from using their search. They didn’t pick minimalism simply to make the site easier to use — they could achieve the same thing and use visual polishes as well, like Apple’s MobileMe web application for example. They go for minimalism bec