I'm making a UX/UI for Telenor software that we are developing as summer project. How to do the navigation/controls for this Software style:
I'm stuck on how best to do the Add Entry for this tab. The Problem is: We are using scroll pane. Our professor warn us for scroll pane as user will distract so how we should redesign this Add Entry? the below picture is also part of Add Entry
First of all start with visually grouping the elements.
Then get rid of the hints "Current value" next to the respective field. Instead make it a predefined values field with the current value filled in already.
And, as was said already, differentiate the "Submit" button from "Reset form" functionality.
The main form may look like this:
download bmml source – Wireframes created with Balsamiq Mockups
Now, when changing the "Real xxx" values you drop the word "current" and "existing" unless the user comes back to the particular value (additional indication that no change will be made).
Also use the units corresponding to the value you are setting, e.g. if "Real HLR" is an integer value (no fractional parts possible), display it as 297 instead of 297,0.
With some smart placing of the elements you can fit all the items in one screen.
How long IS that panel? If it is a many-page monster scroller, you may want to reconsider how you are grouping the information. Do users need to enter ALL of that information for each entry? Could you show it progressively (say, in expanding accordion panels) rather than all at once? Are there places where you could pre-select or fill in information for them?
That said, if it needs to be all of those fields, if nothing else you could start by making it a 2-column layout to shorten it.
Obviously we would need to know a lot more about the requirements, users, and use cases to give you intelligent feedback, but those are some places to start.
You can make the labels and fields aligned in two columns by keeping the two columns logically different by grouping the input fields, and also for the best practice right align your labels with the input fields which will help the user easier to map the label with fields..
visit https://www.smashingmagazine.com/2008/07/web-form-design-patterns-sign-up-forms/ to view the best practices in form design..
good luck
As I am seeing just for 5 more fields, scroll is there and also there is lot of free space. If we put two fields in a row then all fields can come in a single page, and then there won't be any scroll bar. Also mandatory fields can be shown by asterisk, reduces the chance of error. Also if all fields are in single page then RESET and SUBMIT button will always be visible, that is also good thing to do as user might need reset button any time. If this form is in steps, can also use wizard on the top to give direction to user.
Remove the reset button, it is a bad idea. At least move it away from the Submit button and change the design of it.
Check this article from NN/g on the matter
https://www.nngroup.com/articles/reset-and-cancel-buttons/
When it comes to the rest of your form you should consider 2 columns and you should group the fields so that it's not just a log row of fields. That should help keep it on the page without having to scroll.
You can use pagination instead of long scroll. User will be aware of number of pages he has to add entry in.
