methink.com

What do you do when there’s a fly in the urinal (sorry ladies, this may not pertain to you)? It must be something that appeals to the core of man’s basest instincts: to…ready…aim…fire! OK, perhaps not the most elegant solution, but effective. It’s in the stats…this simple solution keeps the bathrooms 85% cleaner! 

I think this is an excellent example of a key user experience concept: to appeal to base instincts! In this example, there’s a problem: dirty bathrooms. There’s a desired user goal: to help user’s aim better. There’s a simple intuitive interface: a fake fly sticker near the target. 

Understanding core human instincts is a great start in creating intuitive interfaces to solve problems such as: how to make users fill out forms…advance to the next page…and a multitude of user goals. It can help avoid such pitfalls as strange naming conventions and unorthodox page navigation structures. Here are top 3 suggestions to see if your page element or interface passes the “basic instinct” usability test:

Simple “Basic Instinct’ Usability Test

1. Ask test users what action or result they think a certain page element or interface does. 

2. For that same element or interface, ask if there’s anything else they think that element might do or represent (this list should not be long!). 

3. Ask other users how they would perform a certain task from start to finish, and watch if they instinctively follow your desired path of execution. 

It’s common wisdom among usability experts to listen to users…but is there a time to not listen to them? I just found a good talk from Paul Buchheit of FriendFeed and Gmail fame @ Startup School. He shares some pretty good concepts on when to listen to users, but more important, when NOT to listen to them. Here’s my 3 favorite takeaways from the talk:

When Not To Listen To Users

1. “If I had asked people what they wanted, they would have said faster horses” ~Henry Ford

Sometimes people don’t necessarily foresee the best solution. You need to analyze the core user problem.

2. Decipher user advice limited by narrow life experiences. 

Things and contexts for success change. Keep in mind the souce of the advice and filter for context.

3. Listen to the enthusiastic voices

Tune into the few users truly enthusiastic about your product. Those users would have some of the best advice and suggestions. 

It’s arguable whether or not UX folks need to know or understand CSS. Personally, when I design wireframes or mockups…I design for the browser. I like getting as close to the final product as possible, with click actions, scrolling, and all other benefits you get from seeing and experiencing the mockups on the browser level that you just can’t get with paper or photoshop mocks. I feel it helps both programmers and business folks conceptualize your UX and design ideas more effectively.

Also, I come from the school of table based layout. To get just the perfect spacings and design I need, tables and the ability to nest tables work pretty good. From a design and UI standpoint…I feel traditional tables based layouts can get me just about 90% of what I need as a UI guy. 

So why CSS? Trust me…like anyone, I’m adverse to change, but picking up CSS skills is definitely worth the learning curve. Without going too much in depth, first CSS encourages semantic markup. In summary, a well designed semantic site further separates code/data from presentation layer (benefits of which should be welcomed and understood by all designers). It allows for easily transformable design on the fly (ala the famous CSS Zen Garden). And in these days where the medium can be as varied from browsers to mobile devices to API’s, this separation is crucial.

Also, a well designed CSS markup clearly defines each element on the page, and having semantic naming conventions on site elements can go a long way in working with a team of developers and even with ongoing site maintenance. If designers and UI people worked in a bubble, perhaps tables would be pretty sufficient. But in the real world, where projects include multiple designers and programmers, it’s important to have a system to define and understand every element on the page as unique. 

I must admit, coming from the old school, I’m still learning to incorporate CSS into my best practices…yup still intermingling a lot of tables into my CSS due to speed of development vs learning something new…but you gotta start somewhere. Anyways…here’s what’s in my toolbox to help understand and develop CSS better:

Top 5 Tools for Working With CSS

1. Dreamweaver (been using this long before even UltraDev! Hard to let go of this great WYSIWYG editor…but it needs to be updated with better CSS support and make it run faster for Macs!) 

2. CSSEdit (a highly popular CSS IDE for Macs)

3. Firebug (an awesome Firefox add-on to view CSS on any website. You can even manipulate website on the fly by editing their CSS. A great way to see other designer’s best practices.)

4. Web Inspector (the Firebug alternative for Safari)

5. CSS-Tricks.com (a great video tutorial/podcast site to get you started step-by-step with CSS)

Yahoo just posted their new Wireframe Stecil Kit! It’s targeted towards UI designers to use in their wireframes to represent website elements offered through their patterns and YUI libraries. 

These stencils are free for download and seem pretty useful in offering some common graphical elements quickly. If your backend team already uses Yahoo’s YUI library…then these are pretty perfect for your wireframes. 

If you’re not yet familiar with Yahoo’s Developer Network, then browse around cause there’s a lot of valuable UI info there, and many of Yahoo’s own UI best practices spelled out. 

In short, pagination refers to breaking up large chunks of data or information into multiple pages. It is our job to create an intuitive interface for users to navigate those pages. For example, when you do a Google search, and the results are in the thousands, Google does not give you all the results in one page. It gives you 10 results on 1 page and breaks up the remaining results on subsequent pages. 

I just found a great blog article on some best practices on handling pagination navigation on SmashingMagazine.com. It gives a lot of examples of the different ways pagination is handled by various websites, and explains some principles on why some techniques might be better than others. 

There are a lot of tools, plugins, code libraries out there on various programming frameworks out there to help handle pagination issues. It’s a good idea to work these elements into your design if you are working with large data sets. 

Ok, I know, this looks like something out of the Barbie website. But I’ve been using Skitch for a couple days now and find that it’s really a cool tool for simple image annotation and design collaboration. I wasn’t even sure to categorize this post as a “Tools of the Trade” or as a “Usability Design” example of great UI…so, I categorized it as both!

Tools of the Trade:

As a UI tool, Skitch is a great little gadget that I use to quickly annotate notes on mockups, designs, and wireframes. Just grab the design element in question and quickly mark it up with notes and comments. Another click of a button lets you email the image or send it via bluetooth to another device! It’s a simple and effective way to collaborate on designs and ideas. You can even quickly and easily upload onto the Skitch.com website to share collectively on the internet. (Here’s an example I created with Skitch in less than 1 minute)

Usability Design:

This is a great example of intuitive user interface. Every function is self-contained in the window container. It’s amazingly fun to use, and I no longer need to open up Mac Grab and Photoshop to do some simple image manipulations. Definitely a useful time saver! When I imagine future interfaces taking advantage of surface and multi-touch technology…I imagine an application like this, where most of the interaction can be accomplished by directly interfacing with the various areas of the application by touch. Even the “Save Image” function can be accomplished by a simple dragging of the bottom tab into a folder, desktop, document, etc…brilliant! 

Hard to describe how intuitive the interface is…just download Skitch and try it yourself for free! Here’s a cool video that shows you what you can do. Skitch definitely has a place on my Dock! (oh yeah, sorry PC friends…Skitch only available for Mac). 

I love minimalist designs. The “less is more” philosophy is an important idea in web user experience…so why not translate this onto a business card? 

I recently ran into this business card concept on Guy Kawasaki’s (web startup guru) blog, and thought it was a brilliant example of great UI. Often, the first impression you make with a business card can lead you to a path to getting remembered…or forgotten. Much like websites, business cards must be clear, to the point, and usable…otherwise, it merely becomes pocket garbage. Props to the designer.