How to Design Screens – The Hateful Eight in Screen Design

Probably the most common question about UX is how to start screen design and what principles should we care about? Designing screens starts with sketching. We at UX studio start with quick paper sketches, then build wireframes and clickable prototypes, test them, repair them, and finally get to the pixel perfect, colorful detailed design plans. In what follows we will show you the eight most important rules of thumb which one needs to take into account when designing screens. These are the basics for anyone who is working on designing a digital product.

Eight basic principles of screen design:

The three questions all screens need to give an answer to

The importance of visual hierarchy

The copy is part of design

Conventions are important, we should use them

When designing for the mobile phone, we design for our hands, too

Pay attention to the effective surface area ratio

Aim at simplicity and transparency

Be careful with animations and motion

Let’s have a look at these in more detail.

1. The three questions

When we arrive at a new screen, we are looking for the answer to three questions:

Where are we?

What can I do here?

How can I move forward?

After arriving at a new screen, we instinctively take a look around to see where we are. Many clues help answer this question. For example we may instantly see the logo of the page. When we are moving between pages within one application, similar structures and colors may reassure us that we are on the right track. If we click on a link, and the text of the link is echoed in the title on the next page, we know we arrived at the right place. It is also usually highlighted in the menu which page the user is at.

The “where am I?” question seems too simplistic, but in many applications, the users don’t get any feedback about what just happened. At any given moment they have to know what they reached, what processes are going on, or have ended. Applications which do not give a continuous feedback about its status are very annoying to use.

After this the next question is what I can do on this screen. What content can I see? What functions can I use? If I do not get a clear answer to this question, I would rather step back and retreat from the interface. The more things you are able to do on a screen, the more difficult it is to understand what the given page is for.

Users usually find the answer to the third question (“How can I move forward?”) in a form of a call-to-action button. They don’t just ask this question when they have already played enough on the page and want to move forward. It is useful at arrival, too, to see where we can go from there.

Most news pages get a pass grade in the three-question test. Let’s take a look at CNN. When we arrive at the page, we instantly see in the upper right corner that we landed on the page named CNN. From the way the content is displayed on the page we immediately realize we are on a news page. It becomes obvious we can move forward by clicking on the titles.

2. Visual hierarchy

Visual hierarchy is one of the most important parameters when designing a screen. We can rank the elements of a given screen according to how bold they are, how emphasized, how easily we spot them. This is what we call visual hierarchy. The bold and highlighted elements are at the top of the hierarchy and the tiny stashed elements at the bottom.

Visual hierarchy helps lead the eye. It determines what order we notice things. This is why it is important to develop this hierarchy consciously. Think carefully what the goal of a given page is, what the user wants to achieve and what we want to call attention to. The previously introduced three questions can help you with this.

The illustration which follows is a very simple school example of visual hierarchy: we read the title in capital letters before we read the text in brackets.

The hierarchy also helps understanding. When our eyes run through a river of concise text, there is no chance we will understand what it is about. If, however, we scan through a text full of subtitles, we get an idea from them about the content.

How do we create visual hierarchy?

Most beginner designers are only concerned with emphasizing certain elements. And it’s even worse if they try to highlight too many elements. Unfortunately, only one or two elements can be at the top of the hierarchy and it is up to us which these elements will be. To make the right decision we need to know what the most important goal of the screen is.

We can highlight certain elements like: size, color, position, texture, form and orientation.

Eye camera studies revealed precisely how we scan a page. When we arrive at a page, we browse through it twice from left to right at the top of the page and then we scroll down. This is referred to as Nielsen F, as seen on the heat map image below.

This also shows that things in the upper left corner are more likely to be noticed. Also, the left column and the part above the fold (accessible without scrolling) are more emphasized.

3. The copy is part of the design

Many designers think writing is not in their job description, but this could not be farther from the truth. Copywriting is part of the design.

The best method for writing is similar to the one in case of drawing: we need to make sketches first. In other words, at least six-eight versions of the copy need to be written down. If we are ready with that, we need to choose the best. It is worth spending time on formulating the text. The best results usually come out from melting the previous versions together.

The text needs to be read by colleagues, so you will discover if something is incomprehensible or weird. It also helps a lot if you read it out loud. The most important goal of the copy is to be comprehensible. And we can ensure this one way only: if we test it with real users. We will talk about this more in the chapter about research. The next is to use the expressions people use during the tests. When doing interviews, we need to note the words used by our interviewees, so we can use their own words later in the product or marketing.

Microcopy – part of the screen design

We call the copy you can read on interfaces microcopy. Microcopy is just a few words, but with a huge impact. It is the text on a button, a tiny piece of instructions, or the label on a form field.

It is general experience that you should avoid using terminology as much as possible (except when designing only for professionals). It is useful to use an informal tone, but do not exaggerate and become cheesy. Well-written microcopy has a human touch. It gives the feeling that there’s an actual person on the other side. It builds trust.

The copy of a form should be encouraging. Assuring you that you don’t need much to finish the form. Error messages should be written with empathy and solidarity. Be careful with being funny in a stressful situation, and never blame your users. There always has to be a sense of us all being in it together. And don’t forget to offer a solution.

If there are more than one people writing copy for the same product, you should create a short style guide, that describes the tone of voice they should use. You can collect adjectives, and list a few good and bad examples. It’s also useful to search for other websites or blogs with the same tone of voice and read it frequently. When you have to write you can hit them up to get in the mood.

4. Use the conventions!

The web and the mobile world are the most recent achievements of humankind, but even during this short period of time plenty of solutions were born which the majority of applications use in general. These de facto standard solutions are called conventions. Conventions like this are: logo in the upper left corner, blue color of the link and the underlined text of the link.

Most users are already used to these conventions. We use them because they shorten the learning curve. Solutions different from conventions usually get on people’s nerves.

They often ask if this contradicts innovation. The answer is simple. It is not the conventions you need to be innovative about. We don’t have to reinvent the wheel and we don’t have to change proven, tested things. We should build new castles with these building blocks instead.

The illustration shows an old and a new design of Amazon. Note how many interfacial elements we are still using today (links, tabs, search box, basket, drop-down menu)!

5. When designing for touch, we design for our hands (too)

When designing for touch screens, the most important parameter is our own hand, with which we are using the product. We can only design an easy-to-use interface if we take into account the size of our hands and how they function. We especially have to pay attention to the size and movement of our fingers: what can we reach and when can we safely tap on certain buttons.

Let’s start with the latter. When we tap on something, our finger covers a fairly large space on the screen. In order to feel it is safe to click, we have to have only one thing under our fingers when we click. If our finger covers more elements, we will feel discomfort because we can never be sure enough what we clicked on.

If we study a modern phone’s screen and look at how many times our thumb fits the screen breadthwise, we see that we can put 4 clickable things in one row.

Another interesting point is reachability, namely, what we can reach with our fingers. There has been an observational study: notes were made about people walking on the street and holding their phones. There were three basic positions – nothing new here.

The first is when we hold our phones with one hand. The sub-versions are supporting the phone with our small finger and one where we hold the phone fully. The small finger support gives a sense of safety, but in return we can only reach the lower bottom of the screen.

Another position is holding on to the phone with both hands. This way we are safe because of the helping hand, but in return, we do not always have the possibility to hold it in both hands.

The third version: both hands holding the phone at the same time and both thumbs used at the same time.

The illustrations above show which areas we can easily reach and which not at all. The following diagram illustrates which was the most common holding position among people on the street, besides listening to music and speaking on the phone. It may not be so surprising that the one-hand position won.

When designing for mobile, we cannot know how the users will hold the phone, so it is worth creating interfaces which can be used in the majority of cases. In other words, we should not design clickable elements which cannot be reached in certain positions. Looking at all the illustrations, this is the upper-left part of the screen and the lower right corner, which is only reachable by bending the thumb uncomfortably.

The situation is even more nuanced if we look at how these positions have changed due to the growing size of the phones. Reachable spaces are becoming smaller on large screens. We have to get our second hand in for reaching things in the upper third of the screen.

Consequently, the interface needs to be designed so as to be able to control them from the lower half of the screen. Frequently used functions should not be put on top of the screen.

6. Effective surface area ratio

When we design screens, we have to work with the space at our disposal. The aim of the game is to see which content element appears where, in what form and how big of a space it takes up. Note how small the effective surface area ratio is on a given screen! We grayed out areas on a news page showing you the content which is not the priority.

Menu or Facebook sharing buttons are only secondary functions on this page. Nobody arrives at this page to read the Menu. Visitors come to read the articles. Consequently, everything else is a “necessary evil”, especially when we open the page.

7. Simple and clear

The best user-friendly interfaces are simple and clear. Interfaces like these are easy to understand, people get familiar with them easily, they get used to using them, and feel joy when opening them the next time, too.

This simplicity is not easy to reach, though. In a design project, new ideas and new information, which needs to be shown on the interface appear one after the other. It may be the case that the different departments of the company or the different participants in the project consider different things to be important to appear. The responsibility of the designer is to govern the participants during the planning phase in such a manner to achieve clear, easy-to-understand interface. You probably guessed that in the majority of cases this can only be achieved if the designer reaches a consensus among the participants which makes this possible. This is a diplomacy or management task, but still the designer’s task.

What is needed to make it possible? First of all, straightforward business objectives and a very clear idea of what the given product’s goal is. If we have these, the interfaces can be easily managed. Then it is also more simple to determine which elements are important and which not so much. Not knowing what the product is for may appear as a huge problem for the first time during the design of the interfaces. It is the designer’s responsibility to realize that this is the real reason of the problems, and to convince the others to step back and establish the main goals.

The designer’s second important task is to continuously educate other team members. The designer needs to explain the difference between a packed screen and a beautiful sleek minimalist screen. The designer is the one to dismiss ideas and to manage related fears. For example, a huge logo at the third step of the sign-up process is not relevant, since branding doesn’t happen here.

The next picture shows two different versions of a mobile application screen. At first glance the one on the left seems a bit more exciting due to the colorful icons, but when we try to understand exactly what the page is for, the one on the right is more useful. Here the same content appears in a more clear, simpler structure. Note the difference between the two and how the one on the right achieved this!

8. Motion and Animations

UI animations are one of the most controversial areas of screen design. Many people just want to use animations because they look cool. I don’t recommend that. Others use them to communicate how the interface works, or have some emotional impact on the users. Google’s material design guide has a wise, moderate standpoint of animations, but even some Google products use them so heavily, it is annoying.

The first and most important rule of animations: don’t use them for just the sake of animations. People are wired to focus on moving objects. We needed this reflex to survive when a tiger surprised us in the jungle. It’s easy to distract people with some moving objects from their original goals. So you have to be very careful with motion, and use it with purpose. Every animation has to be meaningful.

Animations can explain how your interface works. One of the well-known examples is how you minimize the window in your desktop operating system. The window shrinks down to an icon on the tray, so you will know where to find it later.

When you select an item on a list, it can grow and expand to full screen. This animation will tell the users that they see the detailed view of the same element. In many mobile applications the menu is sliding in from the left side of the screen and it hides back there too. The sliding animation shows where the menu panel is, and it teaches us to swipe from the left to get it back.

Animations can also add to the character of your application. Cartoon animators are very good at expressing feelings with just the motion of characters. A movement can also be done in a playful, aggressive or modest way. This can amplify the style of your app. But still: be careful. As always in design, less is more. Keep these animations for the best moments only.