Skip main navigation

The importance of GUI layouts

In this article, we will discuss why design is important and consider the different design requirements a GUI might have.
© Lift control panel image from user Kgbo on Wikimedia Commons, shared under a Creative Commons Attribution-Share Alike 4.0 International license. https://creativecommons.org/licenses/by-sa/4.0/deed.en

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

An image of a lift control panel with the ground floor separate, the phone button protected by a ridge, and a series of key holes underneath.

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.

© Lift control panel image from user Kgbo on Wikimedia Commons, shared under a Creative Commons Attribution-Share Alike 4.0 International license. https://creativecommons.org/licenses/by-sa/4.0/deed.en
This article is from the free online

Programming with GUIs

Created by
FutureLearn - Learning For Life

Our purpose is to transform access to education.

We offer a diverse selection of courses from leading universities and cultural institutions from around the world. These are delivered one step at a time, and are accessible on mobile, tablet and desktop, so you can fit learning around your life.

We believe learning should be an enjoyable, social experience, so our courses offer the opportunity to discuss what you’re learning with others as you go, helping you make fresh discoveries and form new ideas.
You can unlock new opportunities with unlimited access to hundreds of online short courses for a year by subscribing to our Unlimited package. Build your knowledge with top universities and organisations.

Learn more about how FutureLearn is transforming access to education