A really really long time ago, I remember hearing Jared Spool report usability research that said text links trumped images. I mean, a really long time ago. In the ’90s, I think.
I don’t know if it’s the “button” or its placement on the screen, but I seem to regularly get a headache trying to find “edit” links when they are disguised as buttons. Maybe it’s because button=submit in my mind. In any case, Diigo is the latest example.
I felt it was time to actually put some content in my Diigo profile. But how do I get to the edit view?
When you look at the Diigo screenshot below — heck, when I look at the screenshot I think this — you’re going to say, “Kathy’s blind. How could she NOT see this edit button?” I can’t answer the question, but I can point to a similarly placed button in the WordPress interface that I also have trouble “seeing.”
I first glanced at the text links below the profile image (1). This is where Facebook has the profile edit link, so I’ll credit Facebook with training my eye to go here.
Then my eye jumped to the infrastructure navigation area (2) — the upper right side of the screen. Sure enough, there is a profile link under my name — which is self-referential. And “account settings” holds traditional information: email address, password, who can follow me, do I want email notifications. This is not the personal profile.
And then I found the button, just as I was thinking about hitting Google up for the answer.
Understand that it is the only navigation link on the page that is a button. Everything else is a text link. (“Go Premium” is a text link with background color, not a textured button.)
This challenge — button blindness — also confronts me with the WordPress interface.
I’ve been using WP for more years than I can remember. Regardless, I used to have a hard time finding the “add new link” (blogroll) link.
As with Diigo’s edit link, it lives to the right of a subhead. Attention UI designers: subheads and buttons just don’t go together!
I don’t know how long the “Add New” link has existed in the left-hand navigation, but I’m guessing it is there because people couldn’t find the “submit button” masquerading as a normal link.
Key take-aways:
- If something looks like a submit button, we might not see it unless we are submitting a form
- If text links are the dominant form of navigation on a page, a button link may not be easily seen
- If conventions about link placement are developing, ignore them at your own risk
I feel so much better now!
2 replies on “UI: Text v Buttons”
Hi, Brook – rather than use event tracking, I suggest testing beforehand with EYE tracking. On an “event” basis … I found the damn thing. It just took forever — and how would you know that I did not intend to go into settings to change or check something? You wouldn’t.
Interestingly, we’re about to switch some of our text links to be styled more like buttons. But we’ve got some big usability challenges on those that are different from your examples. What’s good about the way we’re doing it is that we added event tracking to the links we’re going to change, so once we do it we’ll be able to measure any change in performance.