2

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:enter image description here

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

enter image description here

  • 4
    "Scroll pane will distract the user"... what? – Majo0od Sep 21 '16 at 13:13
  • 6
    Looks like a "do my course work for me" question – Andrew Martin Oct 21 '16 at 12:47
0

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.

0

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

0

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.

0

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.

0

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:

mockup

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.

  • I've just realised that the thread is older than dirt... Nevertheless, visual grouping, using correct decimal type and hinting in the field already are quite universal advice in such topic. – Mike Dec 11 '18 at 13:02
-3

You can use pagination instead of long scroll. User will be aware of number of pages he has to add entry in.

Please elaborate the question for better understanding.

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.