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:
CSS Tip: Improve the Look of Your Headlines Using Letter-Spacing
There is a term used in typography called kerning. Kerning refers to the adjustment of space between letters. Fonts are generally fairly well calibrated by default, but at larger sizes you can begin to see imbalances in spacing between letters.
Kerning is used a lot in the print industry, especially for headlines and logotypes; but it’s something that’s not widely used on the Web because of the lack of control we have over fonts.
Should Arrows be Placed Before Link Text or After?
Sometimes we’d like to use an arrow character or icon together with the link text to make it look nicer and attract users’ attention. These are little arrows we see often by links such as “Read more…” at the end of blog post summaries or “Learn more” for products and services. The two variations look something like this:
Now, the question is, should these arrows go before the link text, or after? Let’s examine each one:
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.
Does Your Website Suffer From These 7 Usability Mistakes?
I can safely say that usability these days on the Web is much better than it was several years ago. The Web is growing up and designers are learning and discovering optimal ways of doing things, as well as optimizing and re-working their current sites to make them better and better.
Yet there are still many sites today that make basic mistakes that have a very negative impact on usability and visitor loyalty. Sometimes it’s easier to say what you shouldn’t do instead of do, so here are my 7 usability issues to avoid when working on your websites:
Categories vs Tags
Content focused sites like blogs and online magazines have various ways to organize and sort their content. Sorting articles by date and by author is usually done automatically by the content management system. There are two concepts which can be used on top of that to organize your site’s content: categories and tags. While you can use both of them at the same time, it’s probably too much bother — so which one should you use and why? Let’s examine each one in turn.