2

I am developing an android app. I have a fragment where I display incoming data from a device in a chart, I also show information at the bottom of the fragment (extended version of a "chart legend"). But I also want to provide settings to customize that chart - and I don't know where to put them.

My idea was to show a drawer on the right side which contains the settings. I like that idea - but how can I tell my user that the settings are there? I added an menu settings icon to open and close the drawer without swiping (the chart is also "swipeable"/scalable).
Ideas:

  1. I can show them that there are settings the first time they arrive on said fragment - but it is likely that I do have multiple users which interact with the app. So User 1 knows about the settings, User 2 doesn't.
  2. Let the drawer "peek" - show a small bit of it everytime. The shown part could either be the "plain drawer" or something like a rectangle with an arrow depending on whether the drawer is opened or not.

And also, does that drawer fall under "good design"/"good ux"/material design guidelines?

Closed drawer:

Opened drawer:

2

The shown designs have the disadvantage that the settings dialog covers the chart. Therefore it is not possible to update the graph immediately - while the user is editing the settings.

You could instead attach a collapsable section below (or maybe above) the chart. The heading and the collapse arrow could be designed unobtrusive, but clearly visible. On click, the section rolls out, pushing down or overlapping the legend section.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

  • I am thinking about collapse the chart a little, also minimize the legend to expand a settings view... Like a bottom sheet or something like that. Do you have any idea to suggest "scrolling up" or "click here to show settings" to the user? Where would be the better position for this - above or below the chart? – yennsarah Jan 6 '17 at 13:49
  • IMO it is important that the settings button is as close to the diagram as possible. This way it can be easily found by the user. It should not matter whether you put the settings above or below the chart. Furthermore I think users are familiar with collapse buttons or arrows. Or you could style the settings header underlined - like a link. – Anna Prenzel Jan 6 '17 at 14:03
  • +1 "the settings dialog covers the chart" right now. Expandable panel is a good idea. – Alvaro Jan 6 '17 at 14:22
  • I followed your advice - I know have a "settingsbar" with an arrow right below my chart which expands onclick (while the chart collapses). Thank you! :) – yennsarah Jan 9 '17 at 10:13
  • I'm pleased to help you! – Anna Prenzel Jan 9 '17 at 11:09
0

You can use the dialogue component instead of right drawer which might be difficult to discover in first time.

you can follow google's material design style. something like this:

enter image description here

there will be a settings button on the right side of screen which is most accessible to user, on clicking this you can open settings dialogue. It's just the example I have shared you can polish your UI accordingly.

  • I don't want to use a Floating Action Action in the bottom right corner since it covers other parts of my UI - which is not acceptable, also a FAB should represent the main interaction with a screen, which is not the case. But I will think about using a dialog, thank you for your suggestion. – yennsarah Jan 6 '17 at 10:10
  • If you don't want to use floating action then you can use a guided tour inside your application i.e educating user when he uses your app for the first time. in this case you show there is a right drawer for customizing your chart may be. glad I could help. – prazor9 Jan 6 '17 at 10:17
  • Unfortunately, since the app may have multiple users on one device, I can't rely on a guided tour. – yennsarah Jan 6 '17 at 10:19

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.