3

I'm currently building a single page web app for my company and ran into an issue.

We want to display a result graph+text and an input form which updates the graph immediately.

Currently, the web page looks like this: The result view consists of a graph and two text views which you can navigate via slide or the dots and the form is huge and scrollable on the screen.

However I'm a bit worried that there are separate swipe areas on such a small screen + add the native browser zoom and drag events, I can see this resulting in a horrible user experience

The issue I see with this design is that the user does not neccessarily need to see either the form when he just wants to view the results or the other way around does not need to see the result when he is inputting values, so my current idea is to expand the form on user interaction.

I am looking for a more elegant yet easy to use solution. What could be improved? I was toying with the idea of completely separating result and form view, but couldn't come up with a good enough solution.

Improve this question
1
  • Why is the graph shown at the top if the form below it effects it? Maybe you can have a button that is sticky below that once tapped, would generate a graph?
    – UXerUIer
    May 22, 2017 at 13:09

3 Answers 3

Reset to default
1

The field descriptions should simply be on top of their input fields instead of the current 50% - 50% side by side arrangement you have.

As such, your input fields should be 100%, as in: each on a row, from one end to the other.

Remember when phones are held (for typing purposes), most users use both hands and type using both thumbs as well; you shouldn't make that experience painful!

Don't forget to wrap your input fields with at least 15px left and right.

Improve this answer
3
  • Visually, I'd agree with you, however, in which way would the current form design interfer with typing? Most of these fields are numberfields so making it 50/50 was an idea to reduce the form length.
    – mboerr
    May 21, 2017 at 19:14
  • 1
    By the way phones are held; it will not reduce typing speed but may inconveniencing users as well. Remember: not possibly all your users will be right-handed. Your focus shouldn't be about reducing the length of the form if all fields are necessary. Rather, stick to the 100, then use switches to be toggled so as to display optional field only when necessary. Simplicity is key.
    – nyedidikeke
    May 21, 2017 at 19:28
  • 1
    You can also group them into categories of fields based on things they share in common, then show a progress status so users know after filling in category one, they will move on to two or three to end it all (still with the 100 I mean; I strongly recommend that).
    – nyedidikeke
    May 21, 2017 at 19:37
1

I would separate them like you have said, with a progress/step counter.

From past experience I've found that users seeing the results whilst inputting information can influence them to input incorrect information get better results.

Improve this answer
0

I actually think your solution is good. However if the input fields are only restrict to certain value which provide by the system, I'd look into the quick start ui which allow user quickly select the desire value by dial fashion.

Otherwise, i like your design because after user fill in the field, i assume they need to hit "apply" or "update" the you can close the input expand panel and do the update on the graph, i think the transition can be pretty good.

Improve this answer
1
  • Curently, the graph is updated onBlur of the form fields. Only some fields are actually required and with the old design, it made sense to display the changes after every new input.
    – mboerr
    May 21, 2017 at 19:10

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.