How to indicate data in a table is clickable on a touch device?

Question

For users on a touch device, what is the convention for indicating each figure (cell) is clickable to a page with information on where the figure originated?

On desktop it would be easy to have a tooltip or something, but there is no hover on touch.

Excel style red triangles in the corner of each cell would clearly indicate more information but having that in every cell isn't desirable since it would be overwhelming, and not look great. It also doesn't allow for any supplemental clue as to what the user gets when clicking on the figure as a hover tool tip would.

Matching each figure with link style (blue or blue and underline) would also be clear but readability of the data suffers with this approach. It also doesn't allow for any supplemental clue as to what the user gets when clicking on the figure as a hover tool tip would.

Have an (i) or (?) icon next to each figure would clearly indicate more information but it would also make the interface more cluttered and less readable.

Failing a typical convention for this, what would be the best way of visually indicating these cells are clickable?

Answer 1

Personally I think you may be over-engineering this as based on your question it seems you are concerned about indicating a data-point is clickable and user not knowing the information they will receive when clicking on that data-point.

Short answer for this question is style them as links (as essentially that's what they are). Based on the premise of the concerns you raised in your question, I'll break my answer down into two parts.

Indicating a data-point is clickable

Accessibility Perspective

Now I know you stated that "readability of the data suffers with this approach", but this is not the case. Firstly I'll refer to the W3C Technical documentation to highlight the accessibility importance in styling links. In Guideline 1.3 - Provide highlighting for selection, keyboard focus, enabled elements, visited links the guideline states that:

The user can visually distinguish between selected, focused, and enabled items; and recently visited links (1.3.1); with a choice of highlighting options that at least include foreground and background colors, and border color and thickness (1.3.2).

In particular, I'll reference the intent of guideline 1.3.1:

1.3.1 - Users need to be able to easily discover web content they can interact with. One effective way to do this is to highlight enabled elements and links (including recently visited links). Highlighted selection and content focus lets people who use keyboard, gesture and speech input know where they are working. On some pages controls may be difficult to discern amid a large amount of other content, or may be styled so the controls are difficult to distinguish from other content. This can be particularly difficult for people with visual impairments, who may not be able to distinguish subtle visual differences. People with some cognitive impairments may have difficulty distinguishing between items with similar or non-standard appearance. Visually distinguishing these items reduces the amount of time or number of commands these groups require to examine a page.

By styling these data-points as links, it will actually help visually impaired users (and users who aren't visually impaired) identify what is available to be selected, what they are currently focusing on and what they have already visited.

Taking advantage of a well established convention

The styling of a link is a well established convention in which there are perceived affordances already associated with it. Taking advantage of this established convention, the majority of users will quickly understand that the data-point is clickable. This Nielsen Norman Group article discusses about that you can style the link to go beyond the blue text / underlined standard, but stresses the importance "signalling clickability" (to ensure that any signifiers aren't lost).

A user not knowing the information they will receive

I think that you can leverage a combination of the perceived affordances of links in tables and the labelling you have used in the table for a user to understand the information they will be receiving.

Firstly your rows are clearly labelled as to what each line item is in the financial statement, which indicates that the value is associated with that row. Secondly your columns are also clearly labelled to indicate what time of year the value is associated with. This should provide an initial indication to the user as to what the value is about.

Secondly to talk about the perceived affordances associated with values styled as links in a table. As styled links indicate to the user that there is information to be accessed by clicking the link, styled links in a table indicate to a user that there is a function that can 'drill-down' on the associated value. It's seen commonly in major products such as SAP, Oracle and Tableau.

In summary, though styled links may not the most exciting answer for this question, it is the best way to indicate to the user that a data-point in the table is clickable.

Answer 2

This might be a good application of animations. What if on pageload a finger-cursor icon briefly appears and moves in a curve, diagonally over the cells. As the finger passes over each cell, that cell grows/shrinks, or a drop shadow fades in/out, or whatever other state you might use on mouseover to indicate clickablity on desktop.

If the animation is subtle enough, you could replay it on page state change, or scroll, to remind the user.

Answer 3

I suppose this is a web page that can be seen even from the mobile. Normally a user is used in furniture that all you see is clickable. In a table like this that we are showing I believe that the addition of any icon would make the interface suffered heavy.

But you have instead tried to tackle the problem differently? If you said explicitly it with a message when the user enters the page? This way you would be sure that the user has very clear what he can do and the interface would not weighted.

In any case I would draw borders around each cell, so that they are well-defined areas.

Answer 4

• A table like this on a cellular phone that is not a phablet or tablet is difficult to read no matter how you choose to indicate a link;

• A clear message on top could do it but this would fail the guideline that if you need instructions its not an easy to use interface. You could also use any type of tutorial or message here and fall in the same case. If the information displayed after the click is critical for the user's task I'd create a heavier intervention and go over this guideline;

• Guidelines tell that some differentiation is appropriate to indicate links. Your choice of blue or some other color with no underline is the smallest compromise you can make when creating a differentiation in this situation, in my opinion. Anything fancier than that increases the total visual weight and may cause visual overload (like painting the background of each cell). I'd advise against creating all-around borders since it would only add to the overall visual weight and convey no additional meaning;

• Remember to follow the style or convention you created to indicate links in other tables/pages/screens of the system/app/website as this helps the user recognize and recall what a link looks like.

Answer 5

Another way to approach this problem, is having one of the table cells whenever the viewport switches to mobile to be active. What this tells the user is that there is a way to interact with the table by hinting behavior.

There are also visual hints that you can use to guide the user to interact with the table. Here's an article for visual hints from Smashing Magazine https://www.smashingmagazine.com/2015/05/functional-ux-design-animations/