Archive for the ‘User Interface’ Category
Reinventing the Color Picker
If you do any form of design work on the computer you’re probably familiar with the color picker. Whether in the form of a color wheel or a set of sliders, color pickers let you do just that — pick colors.
ColoRotate is an interesting new site that picks a novel approach to the traditional color picker design. Instead of 2D circles or sliders, ColoRotate features a 3D cone. At the core of the cone is the spectrum of colors. Intersecting that is the tint which lies on the z-axis. You can manipulate each one separately to help you arrive at your color. You can also blend two colors together.
Dynamic Contrast Management
Here’s an interesting design technique. I first saw it implemented with just CSS and HTML at the UX Digest blog. Earlier this week Apple have updated their website with a bunch of new product pages after the WWDC keynote and I saw them use this very technique as well, this time with JavaScript. The technique is dynamic contrast management. It’s easier to show than explain so let’s start with the pictures.
Here’s the top of the sidebar navigation on the new iPhone features page. This is what its standard state looks like when I’m not hovering over:
Notice how all the links apart from the currently active section are grey. Here’s what happens when you hover your mouse cursor over these navigation links:
8 Characteristics Of Successful User Interfaces
There is a lot of information out there about various interface design techniques and patterns you can use when crafting your user interfaces and websites, solutions to common problems and general usability recommendations. Following guidelines from experts will likely lead you towards creating a good user interface — but what exactly is a good interface? What are the characteristics of an effective user interface?
Here are 8 things I consider a good user interface needs to be:
Lets take a closer look at each.
1. Clear
Clarity is the most important element of user interface design. Indeed, the whole purpose of user interface design is to enable people to interact with your system by communicating meaning and function. If people can’t figure out how your application works or where to go on your website they’ll get confused and frustrated.
What does that do? Hover over buttons in WordPress and a tooltip will pop up explaining their functions.
IconDock — A Simpler Shopping Cart
Here’s what the shopping cart of IconDock looks like:
How does it work? Just pick up an item by clicking on it, drag it into the little shopping cart “dock” on the left, and release. That’s it — a drag and drop shopping cart. Of course you can still click the “Add to Cart” button if this doesn’t work for you, but I think this is a very clever way of re-implementing the the tired old shopping cart. Thanks to Dustin for sharing this.
Zoomable User Interfaces
Imagine for a moment how you would work on a real desk. Perhaps you want to proofread one document, make a couple of notes somewhere else, and fill out a form as well. Sure, most of us don’t touch a lot of paper these days, but think about those situations when we do. You can place documents on your desk wherever you want, provided your desk is sufficiently large. You have your tools, like the pen and pencil, nearby as well. The only limit to how much stuff you can put on your desk at the same time is the surface area of the desk.
If we then examine how a computer desktop behaves, we’ll see some differences. One big one is that the area provided by the computer monitor is much smaller than that of a desk. What this means is that we can’t spread out all our documents over it without overlapping — we have to put them one over the other because there just isn’t enough space. This is even more problematic considering the computer gives not only a greater access to all our documents, but also an easier way to access them, leading to a need for virtual desktop real estate.
A Slip in the WordPress 2.7 Dashboard Interface
There is a curious design element in the new WordPress 2.7 admin dashboard. The ‘Right Now’ box shows a collection of latest statistics about your blog, such as the totals of all your posts, categories, tags, comments, spam and so on. Here’s what it looks like:
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.
Usability of the iDisk Web Interface
I’ve received an email from a reader, Bogdan, a couple of days ago, where he pointed out a usability issue he constantly faces. It’s an interesting problem and it’s to do with the file hosting service iDisk, which is part of Apple’s MobileMe services.
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.
Interface Features
I know you may be getting tired of me always using Apple as an example, but please bear with me for this post. I’ve recently been thinking about how Apple markets their products, and this somewhat ties in to my yesterday’s post on the Nokia N97.
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.
In UI Design, the “Obvious” Solution isn’t Necessarily the Best Solution
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.
De-clutter Your Interface With Hover Controls
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.