Archive for the ‘Usability’ Category
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:
How to Listen to the User and Hear the Experience
When someone is speaking, do you think about what the other person is saying, or do you think about what you are going to say next?
At ActiveComm Labs, we are big believers in communication and what it can do to improve research. Our background in communication includes many years of research and training with hostage negotiators across the country. Through this training we learned the skills and techniques that negotiators use to resolve crisis situations and how to apply them in a research setting. We consider Active Listening to be one of the key components of an overarching method that we call Active Observation®. Active Observation® is a synthesis of Active Listening skills, influencing techniques and advanced observation of non-verbal communication such as facial expressions and body language to generate a deep and dynamic understanding of an individual.
This article will include contents similar to the training curriculum performed by hostage negotiators. We’ll provide you with a very brief overview of Active Listening as well as discuss some of its numerous applications. We’ll detail each of the Active Listening techniques and how and when to use them. Finally, we’ll discuss the importance of training in order to make these advanced communication techniques work in the context of research.
Using Input Fields Fit For Purpose
I was just editing my settings in Twitter and have ran into a little gem, the one line bio input field. It’s a standard text field used for other things like usernames and emails, and that’s the problem. It’s the same length, too, which makes it very difficult to write out a 160 character line. Here’s a pic:
I can see 21 characters at a time yet the limit is 160, which over 7 times as long. This makes it difficult to see what you’ve typed and difficult to edit because you have to scroll back and forth.
Tell Me How
I’ve noticed a little problem from time to time in various applications. Just recently I’ve had issues with my Internet connection and Firefox decided to automatically switch to offline browsing mode. I’ve never actually used the offline browsing mode before on Firefox so when I tried to visit an address on my local development machine I was greeted with the following error message:
An offline mode notice — looks clear enough. Now, I was just trying to access a local address so I knew the page should have worked — but that’s not the problem. The issue here is that while the message is clear and tells me that to proceed I need to put the browser into online mode, it doesn’t tell me how.
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.
Feedback Army Review
Fairly recently, a usability testing service was launched called Feedback Army. Unlike other testing services which generally have a number of people working for them doing the reviews, Feedback Army utilizes a service called Mechanical Turk from Amazon.
Mechanical Turk is a marketplace for work where you can post quick jobs and get them completed in minutes by any of the thousands of people who use it. Feedback Army uses an API to hook up with the service, post your usability questions there and quickly get feedback. The prices start at $7 for 10 replies to $33 for 50.
Raphael, the creator of Feedback Army, has contacted me a few days ago to see what I think. He gave me a free coupon for 10 replies, so I went ahead and tried it out. Here’s what I found…
Making Wait Times Feel Shorter
Nobody likes slow software because they have to wait. Waiting means you’re spending your time doing nothing because of something else that’s out of your control. But waiting is an integral part of our interaction with computers and the software they run. Things don’t happen instantly. You need to wait for applications to load, wait for websites to download, wait for software to compile and so on.
Because waiting isn’t a positive aspect of your product, you would do well to minimize it. There are two ways of doing this.
The first is the most straightforward: optimize your code. There are a few things you can do here, like re-factoring and caching, that will help your apps run faster. Optimizing your code to run faster is an honest and fairly obvious way to go about decreasing wait times for your users.
What about the second way? Well… you can always cheat. Instead of addressing the root cause of the problem — slow code — you can address the symptom — the negative feeling of waiting.
Why We Still Use Paper
With the advent of personal computers we were promised paperless offices. No need to print anything out or jot things down — we have monitors for displaying information and many gadgets and devices for recording things in or out of our home/office. The internet also allows us to store data in the cloud. Digital information is harder to lose, misplace or damage. It can be accessed wherever you are. Yet we still write notes on paper and print out articles to read.
The question is… why?
The problem lies not in the digital media itself — how it’s processed or stored, or any other of its qualities. The problem lies in how we consume it and interact with it. The problem is the interface.
Comment Form Design
A Usability Post reader, Vadim, has raised an interesting issue regarding comment form design. He saw that some forms around the net had two fields labeled as required — the name and the email. Comment forms usually have two more fields in addition to this: the website and of course the actual comment. Here’s what this looks like:
Vadim mentioned that he noticed something curious in a popular blog post with hundreds of comments.