The importance of GUI layouts

In this article, we will be looking at how to layout the widgets in a GUI and how to change a GUI’s design. IWe will discuss why design is important and consider the different design requirements a GUI might have.

The importance of GUI layouts

One purpose of a GUI is to make it easier for users to interact with computer software. The design process is a big part of enabling this; if the layout of your GUI is confusing or counterintuitive, users might not use it correctly.

Different GUIs will require different designs — a text editor will need to appear different to a virus warning or a survey. There are lots of elements to consider, so we’ll start with an example.

Think about the buttons in a lift. There are lots of design elements that make using a lift simple and intuitive:

• The numbers are in numerical order, making it easy to find the right floor
• Commonly used buttons, for example for the ground floor, might be emphasised with a different colour or border so they are clearly identifiable
• The emergency button is often coloured red and needs to be pulled not pushed so that lift users can’t activate it accidentally
• Some buttons may only be activated under certain conditions (such as when someone has used a key card) to provide restricted access to their floors

Many of these elements can be incorporated into a GUI as well.

You might want to arrange your widgets in an intuitive order, direct users towards particularly important sections, or even layout your GUI so that a user will have to think carefully about their interaction with a widget, and can’t use it accidentally.

Using guizero to design your GUI

GUI libraries have many built-in features that enable you to arrange multiple widgets in an app, change the colour, size, and font of the text, add pictures, and even add widgets that allow users to change these features themselves.

Top tip

Drawing out your GUI is a really useful exercise. This process requires you to think about your layout and allows you to play around with different designs before you start coding.

This will help you to write your code more efficiently and will probably reduce the number of edits you have to make afterwards.

Challenge

Sketch a design for a pop-up alerting a user that they have a new email (you could use pen and paper, MS Paint, GIMP, or any other medium you feel comfortable working in).

Are you going to include a Text widget, and if so, what will it say? How will the user open their email using the pop-up?

You will also need to consider how you’ll use the colour scheme, fonts, and text sizes to draw users towards useful actions. Finally, how are you going to arrange all of your elements?

To learn more about programming with GUI’s, check out the full online course, from Raspberry Pi Foundation, below.