How to make text look *not* clickable

Question

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.

---

Use in the wild:

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

Answer 1

tl;dr → use familiar patterns

1. Make the text objects look less like navigational tab controls.

2. The elements seem unnecessarily divided: Place the search field in the main header.

3. Make search look more like search.

Position matters

The subconscious factor making your test subjects want to tap those text objects is positioning. They appear to be tabbed navigation. Look at this example from the Material Design spec that is so popular on mobile and elsewhere.

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?

Take a minute to think carefully about those questions. I think there are valuable user stories there worth investigating.

Iterate based on test findings

Someone, somewhere once said ...

You can only make it once, but you can make it better as many times as you need.

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.

Answer 2

Well, since people are trying to interact with this information, I'd use it 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 a homogeneous message. The way it is now, it looks like a mix of a marketing and an 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 successful 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 "successful listings"? Are there unsuccessful ones? If so, why to do an implicit mention to that negative aspect?

Answer 3

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".

Answer 4

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 doesn't seem like useful information on its own, and it creates the expectation that successful listings are something relevant to users, that they can interact with.

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!).

Answer 5

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.

Answer 6

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

*sigh*

In the olden days there used to be a standard that clickable text (a hyperlink) was underlined. And another one that grayed out text was inactive. How far have those standard been violated? Look no further than Stack Exchange itself:

Notice the links from my profile page are not underlined, and in gray. But they are clickable. Now that we have trained users to expect anything to be clickable, you can't just "design" that behaviour away.

As many others have said, since you are saying "6 books listed" it is logical to list those 6 books if you click on those words. Don't fight it.

Answer 7

Since 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.

Answer 8

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

Answer 9

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.

Answer 10

Theoretically you could make the text look a bit more "graphic" in nature, something more like a sort of a 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.

Answer 11

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.

Answer 12

Present it as a table

Links are typically shown as buttons or lines of text. Information is typically shown as a table.

Therefore showing the stats in a slightly more tabular format would deter users from trying to click it.

Example in the wild

In fact you already can see in your own instagram example how you could implement this in a subltle way.

Instagram has basically presented their statistic in a table with 3 columns and 2 rows. 1 row of key figures (slightly big) and 1 row with descriptions.

Answer 13

Make it look more complex than a single line of text.

Your Twitter example splits each stat into two lines with different font weight. That should be enough to discourage people from thinking they are links:

You may change font size, style, color, or add subtle graphics (such as a faint rule between the two lines) to further make it seem as something more complex than a single line of text, which is what a link usually looks like.

Answer 14

If making them clickable is not an option, you can try some other treatements. Leave them black, so they look like body copy. You can also add dots (·) between them, to make them look like stats.

The most important thing though is to style the number differently. In your instagram example the number is on its own line, you should do this too.

Answer 15

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'.