Archive for the ‘User Interface’ Category
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.
How People Really Use the iPhone
Create with Context did some research recently into how people use the iPhone, with the sample including both experienced and novice users. They’ve released their presentation slides which I found very interesting because they have a bunch of insights that you can apply in your own interface design, not just for the iPhone. Here’s a list of their main findings:
- Take advantage of learned behaviors.
“Oh, this works just like the calendar” - Avoid interaction inconsistencies.
“This is weird, cancel is usually over there” - Provide clear conceptual link across widgets.
“This button must be related to that box, they’re next to each other” - Put space between action widgets.
“Oh man, I didn’t mean to send that SMS!” - Plan for accidental overswiping.
“I keep accidentally changing to a different screen” - Don’t rely exclusively on multi-touch.
“It’s hard to do this while I’m holding something in the other hand” - Provide visual feedback for taps.
“Did I hit that button? I’m not sure” - Provide interaction affordances.
“It’s obvious that you’re supposed to swipe left-and-right”
The iPhone App Store Buy Button — Foolish or Brilliant?
One interesting part of the iPhone App Store user interface (UI) (the one on the phone itself, not through iTunes) is the buy button. The button is the price tag. It looks like this:
On the left is the buy button you see when you load the application page. In this case the price tag on the button is “free”. On the right you can see what happens when you click on that button — it morphs into an “install” button. You then have to push (tap?) that again for the installation process to begin.
Experience vs. Function — a Beautiful UI is Not Always the Best UI
A good user interface (UI) is essential if you want your product to be usable, but you must always be careful to not fall into the trap of focusing too much on that interface.
A good UI should fade away, putting content in the front seat — it should be transparent. Sometimes there can be too much ‘UI’ — controls and buttons that are too strong and distracting win over content in their battle for attention.
Manage Focus Effectively Using Contrast
Most written content online is split up into various elements. For example, a blog post has the text body of the post, the headline, the author, the date, the comments link and so on. Not all these elements are equal in importance and there is a tool we can use to give the key elements more weight. This tool is contrast.
Use Whitespace to Indicate Relationships Between Content Elements
One of the most important tools in a designer’s toolbox is whitespace. Whitespace is just that — it’s space between various content pieces, like paragraphs, headings, buttons and so on. This space can be tweaked to achieve different effects — such as to separate elements apart from each other by increasing the amount of space or group related things together by tightening it.
It’s also one of the things that’s easy to mess up if you stop paying attention to it. Here’s a segment of the comments section taken from Ryan Holiday’s blog:
Can you tell which person made which comment?