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. 

Just wanted to give an honorable mention to this company. 

Honorable Mention

Company: Mytopia (www.mytopia.com)

On TechCrunch50: Company Details

Verdict: If this company can deliver what they claim they can deliver with their RUGS framework…it would truly solve a great problem for all us developers needing to develop cross platform applications!

Finally finished watching the TechCrunch50 presentations by 50 startup companies. It’s great to see all the UI/UX innovation coming from these startups, and interesting to find a lot of these companies spending their limited time and resources into creating pleasurable user experiences. It’s evident that attention to great UI design is essential to all businesses in today’s age…perhaps even more so to young companies vying to get a foothold in the market. 

Anyways, in honor of the recent Olympics, just wanted to hand out my gold, silver, and bronze prizes to my favorite TechCrunch50 companies as it relates to UI design. Congrats…you get a shout out on methink.com!

TOWNIZEN GOLD

Company: Swype (www.forwordinput.com)

On TechCrunch50: Company Details

Verdict: Impressive! The trend towards Mobile as the next big wave of applications development is huge. This company sets out to alleviate a big problem associated with mobile devices…their small screens and small inputs. Swype hopes to revolutionize the way text input is done on mobile devices. It will be exciting to see mobile hardware devices adopt such foundational technology…hopefully in the near future! 

TOWNIZEN SILVER

Company: FitBit

On TechCrunch50: Company Details

Verdict: A great example of the convergence of a physical hardware product and a web application. FitBit is a little device that helps people log their fitness levels throughout the day and track their results in the cloud. Great design in form and function! My only minor gripe would be that it could be totally wireless to communicate back to my computer…or just have an integrated USB plug that flips out of the device. Can’t wait to get my hands on one of these things!

TOWNIZEN BRONZE

Company: iCharts (www.icharts.net)

On TechCrunch50: Company Details

Verdict: Ok, charts…it’s not the most exciting thing. But this shows me how attention to user experience…to make it even easier for people to create something as mundane as charts…to create an experience to help people be more productive and rock…is worthwhile!

Charts aren’t new. Charts aren’t sexy. But this company aims to revolutionize charts by helping users create better charts…easier. I think they’re onto something. 

A lot of users hate the “new” Facebook UI. I admit, I was highly anticipating the new look for several months, but also couldn’t embrace it when it actually came out. I was among the minions seeking to protest this great injustice called the “new Facebook”. Why change a good thing?…but the better question…why give users a choice to switch back and forth between the old and new, rather than just forcing us to use the new? Does that mean that you guys aren’t really convinced about the new Facebook too? Are you guys just “testing out” this new interface as some kind of pilot program, and perhaps roll back to the old once you find users hate it?

I think Facebook users are confused. Case in point, as of today, 1,834,841 members in the “1,000,000 against the new facebook layout” group, 1,302,468 members in the “Petition Against the New Facebook” group, and 1,159,068 “I Hate The New Facebook” group.

Did Facebook shoot themselves in the foot by actually giving a users a choice in user interface options? What exactly was your goal Facebook?

Well, the above interview with Scoble and Facebook Mark Slee (lead project manager @ Facebook) answers a lot of the questions (props once again to Robert Scoble for the insightful interview). As revealed in the interview, the option to choose between old and new interface was not truly to give users an option (as evidenced by the eventual discontinuation of the old interface), but it was seen as a way to give user an opportunity to do A/B testing and see the new rich features built into the new interface that can’t be done with the old. 

With this in mind…I tried the new Facebook with a renewed perspective to see the A/B comparison between old vs. new features. I was sold pretty quickly to the new interface. Through the noise of the masses, it seems that once again, Facebook has managed to help user’s rock. 

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. 

Verizon…GET YOUR ACT TOGETHER! I’ve been using the Verizon FIOS package for a year (this is their PREMIUM home service of internet, phone, and TV), and have been underwhelmed to say the least. I’ve honestly never experienced a more frustrating customer service experience in my life! I cannot believe this is a big company! Tonight I’ve decided to cancel my Verizon FIOS service (if I can get through to a service rep that is). If you are trying to decide if Verizon FIOS is right for you, let me save you some headache…don’t do it! Actually, if you are trying to decide on ANY Verizon service…turn back while you can! If their PREMIUM service is this horrible, I really don’t think good service exists for ANY of their services. 

Anyways, although I flame…Verizon, PAY ATTENTION! Even though you’ve been nothing but a pain, and your customer service reps rude and unhelpful, I will give you some some FREE UX advice:

1. Use Relevant Phone Numbers…You’re a Phone Company!

It doesn’t matter what number you call published by Verizon, it all goes to the same phone queue. Tech support…same phone queue. Sales inquiries…same phone queue. Billing questions…same phone queue…you get the idea. Verizon, are you running out of telephone numbers or something? You can’t afford to dedicate a unique phone number for specific purposes? Sure, have a general phone number that can route users, but why not also have dedicated 800 numbers for specific user goals? When I call billing, I don’t want to talk to a computer going through 6 menus items, 3 levels deep, with totally irrelevant service options…I just want to talk to someone about billing! How about 800-VER-BILL for billing? Or 800-VER-TECH for tech support? You’re a phone company, you can make it happen! I just got a message on my Verizon FIOS TV, which says a channel is locked and to call 888-553-1555 to unlock it. Guess what? That’s the general phone queue…FAIL.

2. If a Technology Isn’t Ready, Don’t Use It!…PS, Computerized Robot Operators Aren’t Ready!

Have you ever talked to a computer and liked the experience? Please leave a comment with that phone number, because I’ve never experienced one that got it right! Not only does Verizon not get it right, they get it horribly wrong! (Don’t believe me?…try calling 888-553-1555). Verizon, I know it costs some money to use real people…but it’s worth it if it keeps your customers happy. Your computerized robot isn’t ready for production yet…get it?! I’ve called and talked to that robot about 15 times.

• 7 of those times I got caught in some kinda of phone loop where I never talked to anyone and never got my problem solved. 
• 3 of those times I finally got a live person (after numerous menus and submenus of options), but ended up with the wrong live person and needed to get transfered anyways. 
• 2 of those times I got to a live human only because I kept choosing the option to cancel my service (apparently you take those requests more seriously). 
• 3 of those times I hung up cause the robot either can’t hear me or understand me. 

If you’re following the count…the success rate for a good user experience doesn’t look good. If I eventually DO get to the right person, I’m probably already frustrated just from your phone menu system, even if my problem does get solved. My advice…your robot isn’t saving you any call center money because whoever ends up answering the phone STILL plays operator by transferring you to the right person. In fact, it is costing you money because this horrible service will cost you customer loyalty. If you still INSIST on using a computerized operator, at LEAST give option #0 on the topmost menu, the “talk to a live operator” option. Computer Robot Operator = FAIL.

3. Keep Your Front End Data Updated With Your Back End Data!…Cmon, That’s Web 101!

I first noticed this because I almost paid the same bill twice. Try this if you are a Verizon customer. Login and pay a bill online. Chances are, they don’t update your new current balance to 0. Depending on where you are in your billing cycle, it might show you still owe that amount you just paid for several days…even several WEEKS! So if you pay a bill, login a week later, you’ll still see the amount there in BOLD RED that you still owe money!

C’mon Verizon…this is Web Applications 101. Have your back end data match your front end data. If a user pays the bill… the current balance NEEDS to be updated. If we pay a bill, we need to see it confirmed that it is paid! When I called in to ask a customer service person about this problem, and to clarify if I still owe any money, they said, “What do you mean? That number you still see in BOLD RED means PAID, cause red means PAID in accounting.” I respond…”No sir, to me and probably most of the population, BOLD RED means STOP and WARNING! Instead of BOLD RED, you guys need to show the balance as 0″. He responds, “Hmmm…you have a point there. Actually, your current balance will update to show 0 in 2 weeks when your billing cycle resets”…FAIL. Oh yeah, forgot to mention…nowhere on the online account details or bill details does it show you the bill’s DUE DATE! …don’t get me started!

Verizon. If you want to stay in business, you need to spend some money and work on your customer experience! For me, I have a “3 strikes and you’re out” rule… and it seems you’re all outta strikes!

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)

I read a lot of blogs…about technology, UI, web programming, web trends, business, guitar, drumming, photography, cooking, restaurant reviews, movie reviews, etc, etc (dang…I have too many hobbies). With this much reading, and RSS feeds clogging up my inbox…I usually end up glossing over any given blog post for about 20 seconds or less.

I’m assuming many of you readers of Methink exhibit similar blog reading behavior…so how do I, a blogger, capture your attention and send you off with valuable & memorable information? I considered the Tumblelog approach to fight short attention spans…but I find it ineffective for informational blogs.

In light of this…I decided to adopt a new best practice for Methink.com blog posts…TOP 5 lists! Being an avid blog reader myself, one of the things my eyes are first drawn to (sometimes first and ONLY) are the lists that bloggers include on their posts. What are the best guitars? … 1. Goodalls 2. Collings 3. Froggy Bottoms 4. Larrivees 5. Taylors. What are the cheapest DSLR camera’s on market? … 1. Canon XTi 2. Nikon D40X 3. Sony A100 4. Pentax k100d 5. Olympus EVOLT. On Amazon…I almost always go straight to the list of other things people bought when looking at a product.

Sometimes, I don’t even care what bloggers write in the body of the post…just get me to your list so I can research stuff myself! Lists can be a great way to quickly deduce the conclusions of authors without reading entire posts. As an informational resource, lists are invaluable for quick reference. Lists also allow readers to expect how much information they are expected to absorb.

So how long should lists be? Too long (let’s say 10), means that nothing on the list is really useful enough to narrow down or the author has no opinion. Besides, I hate David Letterman. Too short (let’s say 3)….means that the author hasn’t done his homework and can only come up with 3 things. So…I will be incorporating some kind of TOP 5 lists on EVERY blog subject I write about on Methink.com. So to start…if you’re a fellow blogger looking to get ideas on how to capture your audience…here’s my:  

TOP 5 Resources for Capturing Your Web Audience

1. Creating Passionate Users
2. Seth Godin’s Books and Blog
3. Malcolm Gladwell’s Blink & Tipping Point
4. Made to Stick
5. Methink.com

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.