Archive for November, 2008
Scalable Content Box Using Only One Background Image
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.
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.
The Pitfall of Adding Keyboard Shortcuts to Web Apps
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?
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?
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”
Wikipedia — Time for a Redesign?
Wikipedia is a fantastic resource and I’m sure many of you use it all the time — and probably even contribute — but I think it’s lacking terribly in one area: design. I think Wikipedia is a badly designed website. Sure, it may have worked fine when it was just starting out, but for a site of its magnitude today the design and usability are really at a much lower level than they should be.
Here’s what a typical Wikipedia page looks like:
Let me highlight some of the things I dislike about the current design: