1

I need to display the counts of a lot (between 10-30) of ordinal values on a mobile screen (in an app). At the moment I'm thinking of doing a bar chart, with wrapped labels:

   Something quite |
   long that won't |███████████████
   fit on one line |
                   |
Another long label |
   that takes lots |██████
          of space |
                   |
   And a third for |
      good measure |██
                   |

Is there another chart format that's better suited to a vertically-oriented mobile screen? The chart bars have to be big enough to be tappable.

Edit: here's a mockup of what I've got so far: User taps "thumbs up" to add their vote to the ordinal category. Labels are shown above bars.

enter image description here

  • Why do the bars need to be long enough to tap? Is there a reason why the labels can't be used as interaction points too (i.e. the whole row)? What action will tapping bring about? – Andrew Martin Jan 4 '18 at 13:49
  • I've made an edit to show a mockup of what I've got so far, also explaining the tapping bars (modified to tapping "+1" icons) – Escher Jan 4 '18 at 14:37
1

You will have problems trying to fit the labels even if the chart was designed so that more vertical space is given to the display of the actual data. The problem is that the labels are long and it is problem best to hide or truncate them unless it is very important to display it in full all the time.

Because you have a fixed range for the count (10-30), you can use this to set a fixed height for chart so that no scrolling is required in a vertical graph. Alternatively you can also use this to set a fixed width so that no scrolling is required in a horizontal graph. The same goes for labels that have a fixed text which won't change.

I actually think a grid/dashboard style of display works best in mobile view because you are only comparing three values that have a defined range, and it doesn't make much sense for users to visually compare the length or height of three different values on a mobile device unless you have a very specific reason to do so.

UPDATE: Based on the comment, an example was provided

Row A |||||||||(Label)|||||||||| 35

Row B |||||||||(Label)|| 12

Row C |||| 8 (Label)

  • With reference to your last paragraph, the bar lengths represent "votes" or "number of opinions". I think you've misunderstood: the size of the set of ordinal values is <30, not fixed at 3 (that's just an example). I could possibly move the labels to the same side of the axis as the bars to improve readibility. What did you have in mind by a grid layout? – Escher Jan 3 '18 at 10:52
  • @Escher sorry for the misunderstanding :p In that case, I think you can consider using a colour or symbol for the label and just use the space in the chart to put your label, and perhaps with a count number to the right of the label (see updated answer for example). – Michael Lai Jan 4 '18 at 13:02

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

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