I'm working on a desktop application which requires to enter an IP V4 address plus a port to define an UDP socket (port is an integer value between 0 and 65535).

This is a scientific operation, users are mostly engineers or technicians The following form is used to describe a device and additional information about how to connect to it.

enter image description here

In that case, the device already have a Wifi IP address. I need the user to enter an additional UDP socket address below it.

I am wondering which option is the best (for IP address, I've already chosen Option 3 of this post for the rest of the application)

Option 1:

enter image description here

Option 2:

enter image description here


Who are your users? There is no best answer here, at least that we can fully provide. You need to examine the situation from your users' perspective and from their work flow -- this will guide you in finding the most appropriate method of input.

The fact that you're asking someone to set up a "UDP Socket" implies that my grandmother isn't going to be using this application. The type of information you are requesting from the user would seem to imply that they know what their doing with a network configuration.

On the other hand, if you do expect my grandmother to be able to use this, you have a much bigger problem with asking her to enter a "UDP Socket" in the first place.


Neither option expresses what exactly you are asking for in the text fields.

In Option 2 there is no instruction that I should enter both an IP and a port, or how that should be done. While ":" is a common address/port separator, it is not the only one used. Some users will undoubtedly enter just an IP address or will use an alternate separator without such guidance.

While Option 1 is better, in that it gives better guidance in that you're seeking both an IP address and port, the fields are still not labeled. Knowing that your users are likely familiar with a socket definition, you might be able to get away with avoiding labels... but why do that?


download bmml source – Wireframes created with Balsamiq Mockups

Now I know exactly what to enter and where to enter it!

What you're running into with your current two options is an increase in the Gulf of Evaluation. You're providing artifacts to the user, but not explaining fully what they are. As a result the user must make additional effort in determining the intentions of those artifacts. Reducing the gulf of evaluation reduces the cognitive load required for the user to figure out the system, and makes their job easier.

  • 1
    This is a scientific application, I have updated the question – AlexH Sep 25 '15 at 7:36
  • As a user of a "scientific application" do I understand what a "UDP Socket" or a "WLAN IP Address" is, and what exactly it can be set to? In the update, I don't see mention of a port in the field text. Are the fields in your option images and your gray-background mockup different? – Nicholas Pappas Sep 25 '15 at 15:11
  • Our users are experimented and they know that WLAN IP Address refers to Wifi interface. The "UDP socket" will be renamed to "LTE UDP socket". For Wifi, we don't need to specify a port. The fields of the option images will be added below the grey-background mockup – AlexH Sep 25 '15 at 16:03

I'd go with option 1. You're separating the fields visually, so it signifies that you need two pieces on information. The second option doesn't explain that very well.

I'd also add a label explaining what each input box requires (IP address and Socket). A placeholder may be a good option


Port Numbers can be also set to Random between the value-set 0 to 65535.

Option 2 will not allow you to be scalable to offer randomization of port numbers.

Also, if the user only wants to edit the Port number, in Option 2, he might accidently edit out the IP Address as well, which will be destructive.

Popular Torrent clients tend to use this as a separate field so that randomization and control can be exercised without the loss of the IP Address.

Port Addresses

Hence Option 1 will be the correct choice.

  • One more precision: my application opens the port. It doesn't listen, so the port is never random – AlexH Sep 25 '15 at 7:32

There might not be a best answer in a vacuum.

Where is this data coming from and where is it going? Who are the users and what are they trying to do?

I made a similar form in the past, and the deciding factor was that the users wanted to be able to copy & paste to and from other systems they used. Including the port in the same field saved them time since they only had to copy & paste once. They were technical users who were comfortable with the dot and colon notation.

On the other hand, if this is to be the final resting place of the data, or the users are less familiar with the technical syntax, separate fields may be desirable. It allows you to label them clearly and makes it obvious that there are two pieces of data. It also makes it clearer if a user is tasked with changing the IP or port but doesn't want to accidentally change the other part.

Like so many things in UX, it depends.

  • Question updated with more information about the context. Data will be entered only once for the project. We can consider that almost all user knows the xxx.xxx.xxx.xxx:port notation – AlexH Sep 25 '15 at 7:41

Since you've already decided on Option 3 from the other post, I would probably go with Option 2 for consistency. Since the user is responsible for the formatting of the IP address, it doesn't seem like a big stretch for them to also tack on the port number. This would also allow them to paste the whole IP with port number from the clipboard.

It would be good if you provided an example of the format on the form so that user knows how it should be entered. I would also recommend that it be fairly forgiving in terms of white space around the colon.

Is the port optional? If so, there may be some additional benefit from a UX standpoint of not having a field on the form that is left blank (I really have no idea how beneficial that is...).

  • In that case, the udp port is mandatory – AlexH Sep 25 '15 at 7:45

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.