User Experience Stack Exchange is a question and answer site for user experience researchers and experts. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

Problem:

I am currently building a textbook exchange website as pictured below. During beta testing users kept trying to click the three snippets of text under the logo ("6 books listed," "12 successful listings," and "2 active users").

Clarification: These snippets are simply text; they are not meant to be clicked.

Clarification 2: "Successful listings" counts the number of books that sellers/renters have exchanged with buyers. You can interact with open listings (in particular you can edit yours and make offers on others) but the stats are there to demonstrate the effectiveness of the website.

Question:

What can I do to make these three pieces of text seem totally unclickable? They're already grayed out as you can see.

Example


Use in the wild:

Instagram uses a similar list of stats, and these are not clickable. Instagram

share|improve this question
14  
Why do you need to make them explicitly non-clickable? ARE the clickable but the users shouldn't click them? Are you seeing people try to click them repeatedly in testing? And if thats the case, why AREN'T they clickable? I would totally expect that clicking on "6 Books listed" would take me to a full list. – Mattynabib yesterday
52  
If testing shows uses want to click them then take advantage of that. This is useful information. Make them clickable. – Mayo yesterday
7  
what's your intetion in showing these numbers? – Kweamod yesterday
14  
Considering these days clickable text looks exactly the same as non-clickable text... you probably can't. – immibis 23 hours ago
14  
Re: immibis's comment: We've broken the internet. – Michael Zuschlag 20 hours ago

12 Answers 12

Well, since people is trying to interact with this information, I'd use as an advantage, as mentioned by Mattynabib, it really makes sense.

However, if for some reason you prefer not to, the answer would be to make this snippets of information an homogeneous message. The way it is now, it looks like a mix of marketing and interactive element (hence the clicks) . So what you need is to keep the marketing side and get rid of this perceived affordance. And in order to do it, simply join the information snippets in a sentence, like

6 books listed, 12 succesful listings and 2 active users

Note: I'm not sure if you really want to use this as a marketing copy. If so, I'd look for something better. Also, why "succesful listings"? Are there unsuccessful ones? If so, why to do an implicit mention to that negative aspect?

share|improve this answer
1  
Good answer, maybe replacing numbers with words will also make it look more like free text. – DesignerAnalyst yesterday
2  
Might help the click problem, but kind of a kludge. Presumably the OP probably had a good UX reason to make these numbers easy to spot, scan for, and read, which this solution undermines. – Michael Zuschlag 20 hours ago
    
Yeah, the placement of the elements makes it look like they could be tabs. – Pyritie 20 hours ago
3  
Re: the speculation about "successful listings", my interpretation is that it refers to exchanges that have taken place. I agree that the phrasing isn't ideal; perhaps something like "12 books exchanged" would be more appropriate. – Mikkel 16 hours ago
1  
@Mikkel, "books exchanged" is far better. Thank you. We have actually changed the phrasing to exactly that in the time since I posted this. – JosephSlote 12 hours ago

They should be clickable if users can interact with those things.

If you are displaying something that summarizes content that is relevant to users, it should be clickable to reach the underlying content.

Presumably on a textbook exchange website, users should be able to view the books that are listed. So let them click on "6 books listed" to get to that view.

Are "successful listings" relevant to users of the site? If so, again, let them click on that to view all the successful listings.

The same goes for "users". Can users view the list of users? If so, let them click on it.

If users can't interact with what you are counting, why show it?

For example, if "successful listings" are not something users can interact with, then what is the purpose of telling them how many there are? It creates the expectation that they can view and interact with them.

Perhaps you just want to impress users with the amount of usage of your site. If so, make sure the information looks like a promotion and not meaningful data. e.g.:

CHTB: the second largest book exchange on the internet, used by 1234 users to post 5678 books (and counting!).

share|improve this answer
    
Could you elaborate on "If the information is relevant to users, it should be clickable." a bit more? The way I read that line right now is "all content should be clickable", because you don't place content on a website which isn't relevant. – MJB 20 hours ago
    
I see, if there is underlying content, it should definitely be clickable, we're on the same page again ;)! – MJB 20 hours ago
    
Hi dan1111, thanks so much for your answer. I added this clarification in my question, but "successful listings" counts the number of books that sellers/renters have exchanged with buyers. You can interact with open listings (in particular you can edit yours and make offers on others) but the stats are there to demonstrate the effectiveness of the website. – JosephSlote 9 hours ago
    
@JosephSlote On a side note, I would just call that "listings exchanged". "Successful listing" is awkward at best. – jpmc26 8 hours ago

Position matters

The subconscious factor making your test subjects want to tap those text objects is positioning. They are very much like the tabbed navigation solution that has become so popular on mobile (and now elsewhere).

Material Design tabbed navigation


It’s hard to retrain users

Despite your efforts to downplay them, the position appeals to users who want to explore the different views:

I wonder what books are already listed?

What is a "successful" listing?

Do I know the users that are active here?


Work with known patterns

  1. Make the text objects look less like navigational tab controls. Positioning them away from the lower edge of the "card" will help. Reformatting them into a single block will also reinforce their meaning.

  2. Your design feels unnecessarily divided. Is there any reason not to place the search field in the main header?

  3. Make search look more like search.

Simplified design suggestion


Iterate based on test findings

As others have mentioned, users want those things to be navigation. My imagined questions above are hinting at reasons users may want to navigate to the data behind those things.

You don't have to answer every user desire, but when you start to see a pattern you may have stumbled onto something valuable.

share|improve this answer
3  
Ah, there's a search box! Having skimmed over the original design, the search box totally did not register as a search box until I saw your mockup that made it obvious that there's supposed to be a search box! – Hurkyl 9 hours ago
    
I love the treatment you made on the text. It definitely makes them feel less clickable. I don't know how but that's just how my brain reacted when I saw it. – Andrew 8 hours ago

It's a matter of relative 'clickiness' as well. Make the unclickable items less clickable by making the rest more clickable. The phrase here is: 'affordance'.

  • the position of the three not-clickable items is very prominent: in your design, it's in the center of the page and it intregrates with the logo and the pay-off. That gives them a strong click-affordance.
  • graying out hasn't helped you. In this design, it's easily understood as simply a stylistic choice to make this text gray.
  • Your 'search' input is maybe not clear enough. Try to make this look more like search-input:add a border, a search-glass and a submit button (for example).
  • You might also switch the position of the search bar and the 'unclickable statistics' and make the search bar part of the logo --> mimicking the Google default page.
share|improve this answer
1  
By that definition, the greyness already makes them seem (even) less clickable IMO, but maybe I'm just a super-intuitive user... – underscore_d 17 hours ago
    
@underscor_d I agree, it makes them less clickable, but not enough. – Ideogram 17 hours ago
    
I meant that due to the dim colour, I wouldn't be likely to think they're clickable anyway... except that they list counts of things, which separately would make me more likely to think they are clickable... so it kinda breaks even IMO. – underscore_d 17 hours ago

The grey text actually makes them look more clickable as they stand out from the rest of the header. I would change them to the same color as the rest of the text (black).

Also, instead of "6 books Listed", I would use "Books Listed: 6". The colon subtly implies, "here's info" rather than "I'm a link".

share|improve this answer
    
Finally, the correct answer. I was scrolling down the page hoping someone would recognize this. When I looked at the OP's screenshot, it was immediately clear to me why the text looked like a link - it wasn't the same color as the header. – Nathan Osman 7 hours ago

enter image description hereSince the numbers "6 books listed" "12 successful things" .. are more like highlights.

I would try one of these to make it look like highlight or dashboard sort of numbers:

Increase the font - it makes it pretty obvious that its a heading of sorts. Have a panel for each item, in this case 3 panels. When I say panel it means having a light background and padding to the text.

Some thing like I tried above, but you can always play around with colors and fonts that suits your design.

share|improve this answer
18  
If users are clicking on these sections all you've done is give them a bigger target. How does size imply "don't click me"? – Evil Closet Monkey yesterday
3  
I'm not sure that I'd interpret the text in the original example as links, but I would certainly interpret these as buttons. Plus the marketing copy now takes up a lot more space despite providing no value to the user. – Mikkel 16 hours ago
    
So your suggestion to make them look less clickable is to make them look like buttons? lolwut – BlueRaja - Danny Pflughoeft 15 hours ago
    
@EvilClosetMonkey My intention here is to make it look like informative blocks. – Pavithra Olety 15 hours ago
1  
Well, with a "flat" design, they look like buttons. Blame Google? – Wayne Werner 13 hours ago

You want to make the numbers bigger, change the font/color to differentiate them, and put them on top of the information they are describing. For example, check out the layout of a certain very popular site (look at the bottom right of this image). This makes the numbers look more like meters/indicators rather than links.

From StackExchange

share|improve this answer
1  
In that blue box in your picture, there are two things that I can definitely interact with, and three things that I'd wave my mouse over just to see if anything happens. The only thing that's clearly not clickable is the headline text. – Mark 10 hours ago
    
I didn't realize that those stats aren't clickable but I never had the motivation to click them. – Andrew 9 hours ago

Theoretically you could make the text look a bit more "graphic" in nature, something more like a sort of hype-decoration on that panel; otherwise, I think graying it out is about as far as you can go - once they try clicking and it doesn't work, they'll probably stop.

But if you've tested this and people are consistently clicking there, you may want to consider finding out what they expect to happen when they click in those spots, and then consider MAKING them clickable... you could be missing an opportunity.

share|improve this answer
    
What do you mean by "hype-decoration"? – JosephSlote yesterday
    
Something more like an advertisement, something graphic and integrated into the panel than a block of live text that might be a link. It's a stretch, but it's the only thing I could think of offhand to make text look LESS clickable. – Mattynabib yesterday

using inset text shadow gives the appearance of something set in stone: (with and without)

enter image description here

share|improve this answer
5  
Sorry, I don't see how one of those looks any more or less "clickable" than the other. I don't think text style is the problem or the solution here. – dan1111 18 hours ago
    
@dan1111 I do but it's very slight and I agree that it is not the solution. Still, it is worth a +1 from me. – Andrew 9 hours ago

It's because:

  1. (probably hard to change) The content begs the question "which?" so people follow their urge to find out.
  2. (probably easy to change) They are in a body type font that suggests possible link material. Choose a presentational form - maybe sans-serif, maybe with thin caps, maybe with different weights and/or sizes between digits and letters etc.
share|improve this answer

It may be worth changing location in the page.

If these are user-specific stats, move them to the top-right box or remove them completely from the main page and put them in the user's profile.

If they are site stats, I'd bring them closer together, darken the text, and possibly change the font of the digits. A more 'digital' looking monospace font might indicate that they are information and not links.

That being said, I am one of those people that would look at those stats regardless of where they are or how they look and try clicking on them. Like others have said, if you have the data and feel the need to display it to the user, why not actually do so?

share|improve this answer

You could precede those texts with an 'info' icon, with Font Awesome http://fontawesome.io/icon/info-circle/ or whatever you like. And make sure that texts' 'cursor' CSS property is not 'pointer'.

share|improve this answer
10  
Surely this icon would just make them look more clickable, not less? – JonW 22 hours ago
    
I have to agree with @JonW on this one. – MJB 20 hours ago

protected by Benny Skogberg 6 mins ago

Thank you for your interest in this question. Because it has attracted low-quality or spam answers that had to be removed, posting an answer now requires 10 reputation on this site (the association bonus does not count).

Would you like to answer one of these unanswered questions instead?

Not the answer you're looking for? Browse other questions tagged or ask your own question.