Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

I'm developing a application that allows business users to create forms with fields such as text, select boxes, check boxes, radio buttons, numeric, etc with a easy drag-n-drop UI like:

enter image description here

Once the form is created, end-users fill out the form like:

enter image description here

and then based on that data users can search and create charts from it.

enter image description here

Pretty simple concept. My problem is I'm not sure what the best way to illustrate how users would create charts from this data. The charts vary from bar to pie to gauge.

I need to show how the data is constructed to create a chart. As you see here, its just flat but based on the data I could create a chart like: Average Numeric Grouped by Text. The group would be the 'y-axis' but I can't really use that as it wouldn't apply for a pie chart. The 'x-axis' would be have values like count of, average, sum, etc based on the group.

Excel accomplishes this pretty well but the overall data is already in place when you launch the chart dialog like:

enter image description here

I was thinking of UI like this but I'm not sure its the most clear UI:

enter image description here

anyone have any ideas?

share|improve this question

2 Answers 2

I think it would benefit the user to be able to create the chart using a blank canvas, in a WYSIWYG format wherever possible. This way there is something tangible to think about right away, rather than having to select from potentially confusing options ("statistics"?).

On the "canvas" there are two main areas to start: the chart box and the legend. In the chart the user must first select the type of chart, and then can click each data element to modify it. In the legend, the user can add/remove new sets of data.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Once a chart type is selected, the axes areas appear and can offer some customization options.

share|improve this answer
up vote 0 down vote accepted

enter image description here

Ended up going with a WYSIWYG approach like @Luke suggested but slightly different UI. See:

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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