Graphical user interface design: font size for confidential information

In some self-service human resources software systems, salary or compensation is hidden by default (obfuscated when blurring) on ​​the home page with a close button to hide (blur) the information at the user's convenience. To improve flexibility for the user, you can implement something like this as the global default, but include an option to toggle the behavior in the user's settings. The option may appear in the first option to hide, so that they realize the option and, if they wish, can alter the behavior immediately.

Then you do not need to worry so much about the sensitivity of the information as it relates to your font and size options, and you can use some font / size option that is consistent with the rest of your page / site.

Graphical user interface design: maximum size for confidential information

I don't think there are specific rules about it. If users know that the information they are going to verify is confidential, it is up to them to ensure that there is no one nearby.
Anyway, if it is a screen with different information, it can have a similar approach to the password fields, hide the content and put a button next to show it, you can even protect it with a PIN code or fingerprint in case there is more than one The user can access the device.

enter the description of the image here

Graphical user interface design: correct position to place the search bar in the article catalog

You want to do what probably makes the most intuitive sense to your users. Anyone who responds here will not know the broader context of how the rest of this site / page works, so we will have to make some assumptions.

I have a sample size of one, but the first place I would intuitively search for the search is the upper right area, as in front of "Select your characteristics". After that, I would search the filter / drop-down menu area.

If you have to go in that area, I think you would personally put it in the right half of that section. If it's in the left half, somewhere near that filter, it could confuse users: they might think that the filter and the search are working together.

For example, this will be familiar to users: this tells me that I am looking into "Books"

Amazon filtered search UI example

And if that is not the functionality you are providing …

Speaking of your filter: that drop-down menu must be clearly labeled. I wouldn't know what "Everything" is supposed to be without clicking on it.

Maybe something like this.

sample changes

(I also suggest that you darken those light gray so that they are a good # a11y; they seem to have very little contrast. You can try that with a contrast tester.)

I hope everything is useful!

Graphical user interface design: use the up or down arrow to represent "sort ascending" in the table header

I agree with @SNag in this case that the classification indicator is not really an arrow, but a visual indicator of how the list is sorted.

To offer greater support for this, I present a screenshot of Mac OS 8 (circa 1997) that uses a similar metaphor, but is clearly and intentionally differentiated from an arrow:

enter the description of the image here

I find the analogy with less than (<) and greater-than (>) to be more appropriate than that of an arrow.

In math we write 3 <6 to represent 3 it's less than 6. As I'm sure, we all remember the mnemonic device that the small end of the symbol points to the smallest value. Of course, if the values ​​were organized vertically, the smallest end would be at the top:

enter the description of the image here

As such, one could consider the use of a symbol smaller than or a gallon turned sideways as a more intuitive symbol to represent order. It works intuitively for text (abc <xyz), numbers (3 < 6), and dates (today > Yesterday).

In short, try not to think of it as an arrow that points in one direction and think of it as a symbol that represents order, just like less than and greater than.

To update: It turns out that, by coincidence, the latest version of Mac OS X actually uses a vertical gallon as I had suggested. I didn't realize this when I originally published the idea.

enter the description of the image here

So there you have it. There is some precedent after all.

Graphical user interface design: how to display the section in the timeline without frames

I have an application, where the user can play an animation. The progress of the animation is indicated in the timeline (with blue color). The playable, but not active part of the timeline is gray. The timeline also has a part, where there are no frames, but I also need to show this part of the timeline. And this is the hard part. I have currently shown this section with a border, but it looks strange. I also tried not to show it at all, but my potential client returned it, because it is useful for the user to know that there are no frames, and it is part of the timeline.

enter the description of the image here

Can you restart the graphical interface in Java?

My problem is the following, I have a JTextArea that must show the result of some commands executed in Linux, these commands are received by a socket, the case is that when I execute the command, I get to receive the data of the command, but the Graphical Interface he remains unanswered, ~


                salida = leer();
                    salida = leer();

                JOptionPane.showMessageDialog(null, "Ingrese un comando");                    

This is the method that is executed when I press run, and these are the read and send methods: ~

     public String leer(){
        String Msg ="";
            InputStream fAuxEntrada = Cliente.skCliente.getInputStream();
            DataInputStream fEntrada = new DataInputStream(fAuxEntrada);
            Msg = fEntrada.readUTF();

        }catch(Exception e){

        return Msg;

    public void enviar(String h){
        String Msg = h;
            OutputStream fAuxSalida = Cliente.skCliente.getOutputStream();
            DataOutputStream fSalida  = new DataOutputStream(fAuxSalida);
        }catch(Exception e){


Graphical user interface design: Should I vary the length of the input fields on a single page payment form?

I am currently designing a single page payment form. I would appreciate some comments on the length of my input fields.

In the Billing and Shipping sections, I scaled the length of the fields, trying to maintain the size of the input field in relation to the expected input size.

However, in the Payment section, all input fields are of the same length. Do you think this breaks the coherence of the form since the Billing and Shipping sections have staggered lengths for the input fields? Should I try to vary the length of the entries in the payment section so that it looks more like the other sections?

Single page payment

Graphical user interface design: why do scroll bars return to the original scroll distance when the mouse is dragged too sideways?

I think it is a means to provide the ability to cancel a half executed command. Imagine that a user has 45% less than a long page. The user tries to perform a drag operation on the contents of the window (perhaps to move an icon or select text), but accidentally "catches" the slider on the scroll bar, which causes the page to move to X % down and let the user have to try to find their original place. To mitigate this scenario, the scroll bar is designed so that users can "scroll" from the slider and therefore cancel the command. Since scrolling occurs as the slider moves, users can see that they scroll instead of selecting text or any other reason, so they have the opportunity to realize the error and recover before releasing the button of the mouse

This behavior is not exclusive to scroll bars. Command buttons, menu items, check boxes and option buttons are also canceled if the user turns the control without releasing the mouse button. These other controls do so with approximately 0 pixel deviation. I think that the slider on the scroll bar has a "buffer zone" of ~ 100 pixels because dragging is difficult to do, so it allows the user a range of error when deliberately scrolling to avoid accidentally canceling a scroll.

I don't know if it really works. That is, I don't know if users who accidentally activate these controls react by turning the control without releasing the mouse button. I guess the vast majority of users (and not a few UI designers) are unaware of this feature of the controls. On the other hand, perhaps the natural reaction to clicking wrongly on something is "jumping", a generalization of proximity heuristics. Maybe users make these cancellations without really realizing.

Graphical user interface design: when a button contains text and an icon, what should come first?

Big question! As you correctly assumed, the icons can be used to improve the speed of site navigation, such as web design is a search problem.

The Nielsen Norman Group eye tracking investigation states that users tend to scan a web page in a pattern & # 39; F & # 39; horizontally first (the top bar of the F), down a little on the page, then a short horizontal distance (the bottom bar of the F), to finally scan the left side of the page vertically.

icon image
The F-shaped scan derives from users' desire to minimize their interaction costs, which without realizing it increases their chances of losing potentially important information. A good design will reduce the F-shaped scan and any other scan pattern.

As web designers, what approaches could we use to make the discovery of important information harmless to users?

An effective approach is the conscious use of iconography.

icon image

The icons serve as effective visual aids. An icon placed before the text of a button will save users the cost of reading more than they want, thus improving the ease of scanning the page and ultimately contributing to a pleasant experience for your session.

However, there is a warning (There is always a warning). The icons that appear after the text are not always purely decorative, but are status indicators on the labels or explicit signifiers on the CTA buttons.

icon image

* A great general rule that helped me is Think of the icons as bullet points. Both share some equally important purposes:

  • Call attention to important information
  • Improves the ease of scanning information
  • Disseminate information effectively and efficiently

To read more, click here or here