We have a standardized paginated table template. We already use FontAwesome icons to represent paging operations

  • << to go to the first page
  • < to go to previous page
  • Numbers to a specific page
  • > to next page
  • >> to last page

I am required to add a new button to the table footer, which will initiate a count operation to get the total row count.

Question is: what icon should I use than fa-abacus?

The person that required the activity says they not like that icon, it is barely visible, and requested me to replace that icon with text, like "Count". I argument that using text than an icon would conflict with the design choice of using icons with tooltip text. But it is a fact that the abacus icon does not render great at small sizes, and also that I am one of the few comfortable with high resolutions and small elements

FontAwesome's Abacus

More info:

We are using forked version of Lorenzofox's Smart Table for Angularjs. Our paginated tables do not necessarily report the total count of the result set, because we found that for some customers with extremely slow Oracle instances and with tables full of more than 160M records, the count query takes an excessive time.

Recently, the customer requested us to implement the count operation for such tables, and my task is to add a button that does this operation asynchronously.

Following is an example Table example

With a descriptive tooltip

Count with tooltip

I have explicitly cited FontAwesome in the question title because this is the library we currently use for icons. I initially googled for "count icon" and the best match was an abacus, then I searched for abacus in FontAwesome.

My question is not necessarily related at which FA icon represents a count, but which icon in general can represent a count. In my case I chose an abacus thanks to Google Images

  • What is the worst case scenario in terms of time delay to count the rows? And also, is this number always needed by the user or is it a limited use case? – Nicolas Hung Jun 7 '19 at 14:56
  • Worst case: 15 minutes (not kidding, but I haven't witnessed). How many times required? I'd say not often. Another point is: if the user discovers to be using a filter that is too broad, then they will narrow the search and then run the real count when they are confident that the long-running count will return the correct result. Filters are made by a dozen of possible fields – usr-local-ΕΨΗΕΛΩΝ Jun 7 '19 at 15:00
  • The point is that I am developing code for a library/platform/framework project that has to be used in web project of which I have very limited visibility – usr-local-ΕΨΗΕΛΩΝ Jun 7 '19 at 15:01

Your icon-based table pagination works well because it uses standard iconography that people are familiar with. Unfortunately, there is no commonly understood icon for "count".

Aurora Harley from the Nielsen Norman Group has this rule of thumb: "Use the 5-second rule: if it takes you more than 5 seconds to think of an appropriate icon for something, it is unlikely that an icon can effectively communicate that meaning."

While consistency is important, clarity is moreso. I'd side with your coworker in this case, and use a clear text button.

| improve this answer | |

Maybe the problem is not the icon selection but the word that represents it. I propose to look for count synonyms and the related icons.

  • Summary


  • Sum

enter image description here

  • Calculation


  • Inventory


| improve this answer | |

Thank you for your response.

The issue with choosing icons is hoping people understand them. And since the meaning of the icon can change depending on context and who sees it, it is almost guaranteed that most if not all users will not guess it right.

There are only a few standardized icons in the digital world. For example, the home button, arrows to to forward and back, etc. "Count" is not one of them.

So, back to the issue. If the meaning of the icon will certainly be misunderstood, your other option is supplementing with descriptive text. Following convention, you could reuse a component often associated with listings:

Showing 1-15 of 3000 items

Using this familiar component, you can start twisting it to your needs. For example, by not requiring the system to count the items:

Showing 1-15 of multiple items

Adding an option for users to run the count:

Showing 1-15 of multiple items [Σ Count all items]

Adding a disclaimer for processing time:

Showing 1-15 of multiple items [Σ Count all items]*

*Might take up to 15 minutes depending on number of items.

Showing the system is counting:

Showing 1-15 of (counting...) items

*Might take up to 15 minutes depending on number of items.

Lastly, I would argue that if the current design choice of using an icon with tooltip text proves to not work, as shown in your testing, it signals to at least consider using a different component.

| improve this answer | |

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