4

Is a tag cloud acceptable on a touch screen device? The nature of a tag cloud is that you have small links and large links all positioned in close proximity to each other. This can cause issues with touch screen interfaces as the wrong link could be accidentally tapped.

If a tag cloud doesn't work for touch screen then what is a valid equivalent?

My particular challenge is I have a list of trending pages on a web app. On the website version of this app I am using a tag cloud, easy to interact with, with a mouse. But I am now designing the android app for this website and I need to represent the trending pages in some way. I have came up with a list of equal sized links of the top 5 trending pages. There is then a button to see all trending, the page you reach will then have a full list of trending pages in order of trending. Maybe this full list could be split into seperate small lists, with headers of how much they are trending.

Any thoughts or solutions to this will be appreciated

0

5 Answers 5

5

Assuming that you really do want a tag-cloud or equivalent functionality (and I'm not sure that you really do) then the actual tag cloud isn't going to work on a touch device, no. The touch area is far too large to allow for such intricate operation unless you're using a stylus (and who uses those these days?)

I suggest a different approach.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

This way each tag is easily readable and clickable, they're ordered in priority order so it's easy to see which tags are more frequently used than others (which is harder if it's a tag cloud as 'PIG' written in 20pt would likely appear smaller than 'CHICKEN' in 18pt just because of the number of characters present in the word). Plus, for tags that are very infrequently used their touch area is still just as large as the most commonly used tag so is just as easy to select.

The negative issues of tag clouds referred to above aren't just present on a mobile, but also on a larger 'desktop' size environment too. Therefore you might be better off scrapping the traditional tag cloud approach and thinking of something better overall to achieve the same ends.

Addition by Dave Haigh:

I thought you may like to see an example of your idea used on the web - found it on one of IBM's blogs (https://www-304.ibm.com/connections/blogs/ibmx86).

enter image description here

2
  • +1 for interesting solution, even though I have different idea how to deal with the constraints. Aug 13, 2013 at 15:43
  • interesting. a bar to represent popularity. I have used a similar device for representing relevance of individual search results.
    – Dave Haigh
    Aug 13, 2013 at 16:34
6

One solution is to have an ordered list with different sized font sizes to represent weight/popularity. The row heights could even vary depending on popularity, down to a minimum height of course. See mock up below:

enter image description here

EDIT:

In combination with @JonW 's idea, I could even use popularity/page view meters to indicate their popularity, and even a figure beside this representing page views or other figure to indicate usage. Percentage of page hits for example.

enter image description here

EDIT/ADDITION:

In addition, the coloured meter bars (blue bars in image) could decrease in saturation and/or brightness down to a minimum value in order to further represent popularity/weighting. The percentage of the most popular value could be used to determine the saturation/brightness levels. The mockup below is an example, the colours look a lot better if the levels are thought out properly.

enter image description here

3

I cannot give you an example, and I have never implemented such thing, but I think it's pretty fine to have a tag cloud (even 3D one) on a touch screen.

The whole idea behind tag cloud is that less popular tags (it does not depend on screen type) are smaller and thus:

  • less visible
  • harder to trigger (click or tap)

In other words, both visibility and clickability decrease with decreasing popularity.

While the first factor can be preserved without any problem, let's investigate the latter in the context of transferring it to a touch screen. On touch devices, to make a target (optimally) tappable, you should not go below some agreed limit. This limit is physical and is sometimes referred to ax 7x7 mm (Windows Phone, if memory serves). But it is just something agreed on, because people have different fingers, finger operability etc. Going further - producers refer to it as display size in pixels/points; for example, having just two densities for their phones, Apple refers to it as 44x44 points in their "iOS Human Interface Guidelines":

44 x 44 points is the comfortable minimum size of a tappable UI element.

Source: http://developer.apple.com/library/ios/documentation/userexperience/conceptual/mobilehig/Characteristics/Characteristics.html

Let's not fix at this 44x44 points limit, though, but let's use this points based metrics. In general, making targets smaller will make them less tappable not depending on this limit, e.g. 50x50 will be easier to tap than 44x44, while 40x40 will be still quite ok, and 10x10 will be barely usable.

Having this in mind, a question arises: should the tags' tappability decrease with decreasing popularity?

I would say it is quite aligned with the primal idea of tag cloud, which assumes decreasing the usability of particular elements depending on their popularity. However, I would put some limits to it and not go below, say, 20x20 (in Apple's metrics), totally ignoring less popular tags. In fact, this is the same way you do it in desktop tag clouds (e.g. only most popular 100 out of 20000 tags are displayed, the rest is ignored). So when transferring the tag cloud to a touch device, this limit is a thing to consider, define and test.

Another thought is that you could use other pattern for decreasing the importance of tags. As less popular tags are less visible, you can achieve (or continue it below the forementioned minimum, put by me at 20x20 points level) by operating one of these:

  • font color intensivity - less important would be lighter
  • font color - you could use a color palette from red to, say, blue or any other to expose/hide some tags
  • font weight - less important again would be lighter (just the meanning of 'light' changes ;))

Edit (an example of the above patterns):

*The tag cloud example in Wikipedia article uses altering colors and intensivity plus of course font size: http://en.wikipedia.org/wiki/File:Web_2.0_Map.svg*

7
  • Good analysis, and I like your closing suggestions, although I disagree that tappability should decrease with decreasing popularity. I think you do need to indicate lower popularity but you shouldn't make it harder to pick the less popular options. Going with a font colour / weight instead to signify popularity and leaving the clickable area the same is a more usable approach in my opinion.
    – JonW
    Aug 13, 2013 at 15:58
  • In case of tag clouds, I assume, however, that operating both visibility and tappability (as something that derives from clickability on desktops) is a playground here, mapping the importance. Both of these are altered in desktops (bigger tags are easier to click, of course it does not get really hard). In case of smaller screens it just gets more complicated, but I think it is feasible to use it effectively, so that it will not render a pattern unusable and will keep the idea of a tag cloud. One more thing came across my mind: white space cannot be wasted on smaller screens. Aug 13, 2013 at 16:08
  • That's part of the issue with tag clouds though. For example the tag of 'cat' is always going to be harder to click than that of 'velociraptor' just because the word itself is a different size, so by that nature the clickability is less related to popularity and more related to 'number of characters in the word', which is clearly not the desired use.
    – JonW
    Aug 13, 2013 at 16:13
  • True that. However, this is a general limitation of tag clouds, and thus should be considered a given constraint in this case. Tag clouds are just not perfect. I wonder if someone altered the font size depending on the number of characters (seems quite logical) to provide the same 'weight' of 'velociraptor' and 'cat' being at the same level. Aug 13, 2013 at 16:18
  • 1
    On a second thought, it may be not that much intended, maybe it's just a (dark?) side feature of a tag cloud that comes with, and derives from limiting visibility. But even if not intended, having elements of different sizes in one interface makes ones easier to point at and click (also: tap) than the others. And I totally agree that these should be kept usable, by e.g. making most popular tags 70 points high, and going down to say, 30 points for the least popular ones within the top 100 tags. Below it would be unusable, that's why I mention proper limit in my answer. Aug 13, 2013 at 17:14
0

Tag clouds don't work on mobile devices. They don't really work on desktops either.

When I am trying to design something and it doesn't seem to work, sometimes I take a step back and try to figure out what is the job to do. Don't get caught up in the form (tag cloud) or the platform (mobile). What are the problems are you trying to solve? And what is the best way to solve it?

A list ordered by popularity as suggested by the other answers is your best solution. You can add the numeric and visual indicators as to the level of popularity but in the end, the job to be done is to show users what is popular so they visit it and increase your pageviews, usage etc. A list does this function very well and works well on mobile and across all devices.

0

There could be a fun UI in fixing the tag cloud UI for touch.

Your tag cloud could dynamically expand on first touch to offer a spaced out view of the tags within say 50 pixels (device dependent) of the centre of the touch event. Easy then to select required target. Touches are very fast so user is not inconvenienced much by touching twice, as long as expanding animation renders quickly.

This is similar to when my browser on the Android phone sees my fat finger (seriously, size XL) land on multiple links, it then offers up a zoomed in view of the links so that I can discriminate.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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