3

I have tried to looking for best practices on charts, especially line graphs viewed on mobile devices and seems like there isn't much information about it. This is my first project involving charts displayed on mobile devices. I have made prototypes for the desktop and mobile versions and would like some feedback to improve the mobile version if possible.

The chart below is for desktops and tablets. There are quite a number of interactions on this screen as users can quickly access

  1. different metrics (tabs below the chart title)

  2. different time periods (tabs below the chart)

    The number of dots plotted can differ; some charts can have a lot of data.

Desktop view with Chart

Below are my prototype solutions for Mobile version: enter image description here

  1. Maintain height of the chart, and adjust the width of the chart to fit on the x-axis of the chart

  2. Make the chart scrollable on x-axis so that the dots are not squeezed together.

  3. Just resize down accordingly (I don't this can work as a solution, just putting out here to hear thoughts).

2

The way you are approaching it looks correct to me.

  1. Maintain the height at 100% and let the width adapt
  2. Make the width scrollable

I would suggest you take out some of the options that are not used in the screen to leave it cleaner while maintaining the necessary ones. A dropdown list might work correctly.

The scrollbar could possibly me mixed with the weeks indicator in some way. The buttons (left/right) are too narrow, maybe it would be better to remove them or make them wider.

graph

  • Thanks! I see that you have cleverly hide the options of the tabs into dropdown list. But wouldn't this require re-ordering of the html structure when it comes to mobile view for the month options? – Elaine Poh Nov 20 '16 at 16:12
  • Like in any responsive design, the HTML displays differently along the different screens. Depending on how the HTML is made the list can be "restyled" or hidden and a different list shown. You could serve the same HTML to all devices and adapt only using CSS. – Alvaro Nov 20 '16 at 16:25

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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