Tuesday, March 02, 2010

Don't Assume...Your UI Should Help Guide, Not Hinder

Today I was working with an internal system. I was filling out a web-based form and got to a required field in which I could not enter any data. It was rather annoying and at the time I couldn't figure out what the problem was. I knew I was probably working on one too many things at once, so I left it to come back and try to figure it out later. Sure enough I did, but even on second glance it wasn't obvious. The sad thing was, I had filled out this form once before and had the same problem, but because some time had passed, I had forgotten all about it!

Here's what it looked like.

Since you are probably a little more astute than me, you've likely guessed that in order to populate the field, you have to click on the label! Once you click the 'Product' link, a list of possible values appears in a modal dialog. So what's wrong with this? Sure it works and once I figured that out, all was fine. However, I wasted time that was completely unnecessary.

While the label is in a different color, it wasn't underlined, even when I hovered over it. There were no tool tips, so basically I had no idea that this text was actionable until I clicked it. The cursor changed at least, but when users are in a hurry, this is easy to miss. I've talked about the idea of affordance before. This is the concept that an object's properties or characteristics imply the functionality of that object. In this case, the label did not have any affordances that I normally attribute to actionable text except for the color, which explains why I missed it at first. I just thought the field was being highlighted for some purpose I was not yet aware of. The designer assumed I would take it's meaning one way, but I assumed something completely different. The old warning about assuming is definitely true in interface design!

In addition to the affordance problem, another glaring deficiency here was the poor learnability of the system. Learnability is a measure of how quickly the user can figure out the system and remember the functionality for next time. Because the designer used non-intuitive functionality, it was difficult to learn and then hard to remember. Now that this has happened twice, I THINK I should remember this, but if I don't revist this application for another 6 months, it's quite possible I won't.

When you are building your interface, remember that your goal is to gently guide the user through the task before them. Each element that requires input should be blindingly obvious and if not, you need to take some steps to make it so. The designer could easily fix the problem in this example by adding some text telling the user that they must click the field label to view the list of choices. Perhaps more elegant would be a button next to the field or in modern UIs, the ability to just start typing and using auto-suggest functionality. Any of these options would be fairly trivial to implement, but would go a long way toward increasing the form's usability.

As a designer, I challenge you to approach these constructs through a user's eyes. Better yet, make sure you are doing testing from the very beginning so that you can capture these issues before you write any code. Test early, test often and don't assume. Your users will love you for it.


John Kingsley said...

Excellent observation! And how about those other fields that had that little drop down arrow - what is so different from the Product field that it couldn't get the same treatment as the other 'pick from a list of choices' fields?

Maria Helm said...

I Agree with John. Having the lsit method be different on the Product field is part of what messed the whole thing up. You had already used a drop-down to get the value several times, so you are expecting to use a drop-down to pick a value, and a blue text must mean something *else*, right? A little consistency goes a long way.

Skinderma Pro said...

I totally agree... There are huge user interface deficiencies like this in notes. IBM should take "note".

Anonymous said...

What is Breitling? Do you know Breitling Watches? Buy these Breitling Watches sale on line.More cheap Breitling Watches for sale! 岩姐测试!如有雷同,纯属巧合!

Tổng Hợp said...

mua hộ hàng Mỹ
mua hàng trên Amazon
Vietjet Air
Order hàng Mỹ

Vận tải Đường bộ said...

Chúng tôi nhận vận chuyển hàng hóa từ TPHCM đi các tỉnh miền Trung uy tín chất lượng như :
Vận chuyển hàng hóa đi Thanh Hóa , Nghệ An , Hà Tĩnh
Vận chuyển hàng hóa đi Quảng Bình , Quảng Trị ,Huế
Vận chuyển hàng hóa đi Đà Nẵng , Quảng Nam, Quảng Ngãi
Vận chuyển hàng hóa đi Bình Định , Phú Yên
Vận chuyển hàng hóa đi Nha Trang , Ninh Thuận , Bình Thuận
Với nhiều năm kinh nghiệm trong lĩnh vực vận chuyển hàng hóa chúng tôi đã ngày càng hoàn thiện và phát triển theo nhu cầu ngày càng khắt khe hơn của khách hàng. Nhằm nâng cao chất lượng phục vụ chúng tôi không ngừng đổi mới đầu tư tài lực cũng như về nhân lực dồi dào hơn.
HOTLINE : 19001733 – 0914 857 068 – 0962 704 839
EMAIL : info@vanchuyenachau.com.vn

Tổng Hợp said...

iq test online for adults
accurate iq test online free
iq test online free for kids
real iq test online
iq test online free for teenagers
brain iq test online