In Week 1 we learnt how to make a simple GUI and about the different kinds of widgets it can contain. This week we will be looking at how to lay out the widgets in a GUI and how to change a GUI’s design. In this step we will discuss why design is important and consider the different design requirements a GUI might have.
The importance of a design
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 I’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 lay out 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 text, add pictures, and even add widgets that allow users to change these features themselves.
This week we will look at how to do all of these things using guizero.
As we saw last week, 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.
Sketch a design for a pop-up alerting a user that they have a new email (you could use pen and paper, MS Paint, 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?
Post a link to your design in the comments below. What elements of other people’s designs do you particularly like? Reply to their comment to tell them.
© 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