I want to improve mock which is basically a form with similar data all around. The product I'll be discussing here is web, based on a modified bootstrap 3 look.

Where I work, we are now discussing a way to configure the user and password used to communicate with other devices (which is basically what the system is for). The problem is that the user might have a lot of different combinations of user/password depending the point of access (protocol) they would like to use, for example SSH, HTTP, Telnet...

I received a mock for this web configuration modal and it looks like this:

enter image description here

(For privacy's sake, I've recreated the mock to show only what's relevant)

You can see that there a lot of inputs that are basically the same thing, they just happen to be used on another specific case. Please remember that all fields might have identical combinations, or totally different ones, that is up to the user.

This look quite strange to me, specially because if in the future more access point come to be available, more and more inputs will be there.

There must be a cleaner way to do it. What can I suggest to improve this?

  • if all the elements in the page is not known, it would be difficult to give a visually balanced layout. if privacy is a concern then you can just put something like 3 switches or 2 more text box, we don't have to know what that means but we need to know just where it belongs. I would have suggested card model with user1, user2 headings but if there are more elements grouping that would not make sense. – nitesh bhargav Mar 21 '17 at 6:38

I would suggest keeping subsystems shown in rows and moving username and password to separate columns . I think this will make it much more clear.


download bmml source – Wireframes created with Balsamiq Mockups

However, should there be any other fields than username and password at the level of each subsystem, it may be problematic. In this case I would keep your design, just using some dividers to allow Users to easier tell one subsystem from another.

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.