I'm developing a page where the user can ask for firewall rules to be open. The user should be able to enter the IPs, IP's ranges, ports and port ranges that s/he wants to be opened. s/he should be able to enter any number of groups of IPs and ports like this:,                    tcp 80,8080-8088  udp 21,23,,    tcp 80,443        udp 10

A group can have one or many IPs/ranges and one or many ports/ranges for tcp or udp. So initially I made the interface more or less like this:

UX example

And let the user type a comma separated list of IPs/ranges and ports/ranges and validate the whole string on submit. The user can include lines clicking in "+ Add new destiny" link.

But this way it's feeling a bit amateurish. Maybe it's just me. Anyone can think in a better way of doing this ?

  • 1
    Just thought you might want to read something about structured number input from a previous post: ux.stackexchange.com/questions/74035/… – Michael Lai Aug 14 '18 at 22:59
  • Also, you might need to change the text from '+ Add new destiny' to '+ Add new destination' to make it clearer for the user. – Michael Lai Aug 14 '18 at 22:59
  • It's just a mistranslation I made in the image for this site. The real text is in portuguese. – Nelson Teixeira Aug 14 '18 at 23:29

I had to do this for an app and we ended up going with a multi line textarea (with a fixed width font) for several reasons and it worked really well.

  1. It made copy/pasting from anywhere else super easy in one shot (eg from a text editor or excel)
  2. By naturally breaking each entry by the line breaks they visually sort vertically
  3. By its nature this was a technical “I.T.” Interface this didn’t need much/any guidance for the end user (we just added a note to put each entry on a new line)
|improve this answer|||||

Just to contribute to someone developing something similar I'll include the solution I adopted. The grey bar in the left of IPs field is a scroll bar, because it's possible to have many IPs in one rule. Hope it helps someone. Comments are welcome :)

interface's screenshot

|improve this answer|||||

Masking multiple comma separated values in a single form field could easily become challenging for the user.

You might consider each group being laid out on a card.

A typical form pattern may not be the best fit for this interaction (similar to https://www.nngroup.com/articles/forms-vs-applications/).

It definitely depends on your users though and their comfort level/familiarity with interfaces of similar services/use cases.

I would test a few options to see what is easiest for your user to interact with.

|improve this answer|||||

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.