Visibility — The way we see thing

Leo Hoang
5 min readOct 15, 2019

The second principle that all designers from the User Interface to the User Experience fields always focus on is Visibility — the rule defines that is it obvious for users to see what they can do.

8Principles of Interaction Design

What is "Visibility"?

Is it visible? How does the vision look like? Yeah, all of these silly questions mention about visibility. It is the way we see things but we know where we can act, what we can do and why we remember it.

Visibility can suggest users that it is meaning something and it is existing for them to interact with: the signal and sign.

Text colouring examples

Unlike her brother Mapping, visibility is fairly simple questions: does it stand out? Can the user locate it easy?

Choose your colour wisely

The use of colour example

Does the colour grab your attention? We've started colouring since we started to know how to use colour pencils. When we were at an early age, we put all of the colours we like into the pictures without worrying about it is OK or not. However, we chose colours wisely than we got older, we always picked the colours which get our attention; that is the reason why I always ran out of red, blue, green and yellow but the black and the brown are like brand new. Let's have a look with the example above: a mobile screen but with 4 different colour buttons. Honestly, I really like the grey button because it looks fancy with the text colour, but it is hard to tell users that it is a button there; they might miss it. In another hand, the green and blue look ok but they have no chance against the red.

It is about Contrast!

Three examples from good to perfect uses of contrast.

My friend, who's working in mobile application developer always come to me and ask: "why my application looks suck? I always pick attractive colours". And the moment he shows me his application, my eyes get burn: in the top bar, my deal friend puts GREEN text in the RED background. He said that both of these colours are damn taking users attention — Yes it is but it exists a bad contrast between green and red; for example: if you play Pokemon Gen 1 then you will know that Green never like Red, it is hard for them to get along with each other. Thus, there are few better choices for him that I gave him: light green text on a dark green background, white text on a green background (not too good but it is ok) or white text on a red background. As a designer, you can pick attractive colours but I believe that if it doesn't feel good then it is about CONTRAST, not the COLOUR.

Size is important, right ladies?

Small or Big?

If you ask a lady that you want big or small? Trust me she gonna slap your face and then she will say depend. But in design, big or small is really matter: please always ask how big is it compared to other elements on the screen, or on this panel or thing? On the example above, it is a welcome screen of a mobile application: logo, pictures with slider and Login/Signup buttons. The slider will have some attractive pictures like sexy girls, or majestic landscapes… The current problem is what size of the buttons will be the OK for all users. It depends on what element you want your users to focus on, how big are other elements? who is your target audience? age? living status? It seems like the answer will be DEPEND but in this case, the BIG is standing out, grabbing users attention more than the SMALL, as most ladies prefer…

Placement — where is this?

Which is good?

Let's have a look with these 2 examples: same reading mobile application but the buttons are in different locations. On the left example, users must scroll all down to have back and save buttons. Alternatively, on the right example shows that these 2 buttons always on top, users only need to scroll the contents. A lot of people argue that the left is better because it is easy for users to use their thumbs. However, what if the content is boring as hell and they want to go back: forcing them to scroll down will be a bad idea. If you fix the buttons' location at the bottom bar as we did with the right version, please remember that users also use the thumb to scroll down and they might be miss-touching the buttons. Thus, I highly recommend the left version as the best design for the buttons' locations.

Visibility is the closest one with User Interface (UI) because it defines how the colours look like. Many designers state that this rule must become to UI rather than Interaction Design but still, it has effects on user experience. Choosing colours wisely is important for making attention to your products, please remember that is is about contrast, not colour; size is matter.

This is all about VISIBILITY — the second sister of 8Principles family. We shall meet again with the third brothers: CONSTRAINT and FEEDBACK.

--

--

Leo Hoang

A tramp, a gentleman, a writer, a dreamer, a lonely fellow, always hopeful of romance and adventure.