lesson 03 - graphical user interfaces
A Graphical User Interface (GUI) enables users to interact with computers through visual elements like windows, icons, menus, and pointers, making technology more intuitive and accessible.
So far, we've explored interfaces that require you to type commands, navigate rigid menus or use natural language. But the type of interface you almost certainly use every single day is the Graphical User Interface, or GUI. It revolutionised computing and is the reason we can all use powerful devices without needing to be programming experts.
Learning Outcomes
The Building Blocks (Factual Knowledge)
The Connections and Theories (Conceptual Knowledge)
The Skills and Methods (Procedural Knowledge)
Recall the four components of a WIMP interface.
Describe the characteristics of a Graphical User Interface (GUI).
The Connections and Theories (Conceptual Knowledge)
Analyse how the different elements of a WIMP interface work together to allow a user to interact with a computer system.
The Skills and Methods (Procedural Knowledge)
Apply knowledge of GUI and WIMP to identify interface components on a range of different devices, such as computers and entertainment systems.
Evaluate the effectiveness of a given GUI for a specific purpose or audience.
Skill Focus: This lesson focuses on understanding the fundamental components of the primary interface you use daily. It reinforces your knowledge of how a mouse (pointer) and on-screen icons are used to control a computer system, enhancing your digital proficiency.
What is a GUI?
A GUI allows users to interact with a computer using visual elements instead of just text. If you can see pictures, buttons, and windows on your screen and use a mouse or your finger to interact with them, you're using a GUI!
The vast majority of modern GUIs are based on a principle known as WIMP.
Breaking Down WIMP
WIMP is an acronym that stands for the four core elements that make a graphical interface work.
W is for Windows
A window is a rectangular area on the screen that displays an application, a document, or a message. The key feature of windows is that you can have several open at once, allowing you to multitask. You can be writing an essay in one window, have a web page open for research in another, and see your files in a third. You can move, resize, minimise, and close them as you wish.
A window is a rectangular area on the screen that displays an application, a document, or a message. The key feature of windows is that you can have several open at once, allowing you to multitask. You can be writing an essay in one window, have a web page open for research in another, and see your files in a third. You can move, resize, minimise, and close them as you wish.
I is for Icons
An icon is a small, simple picture that represents an object or an action. A picture of a bin for deleting files, a folder for storing files, or a company's logo for launching an app. Icons are intuitive; they are like a universal visual language that makes an interface easier to learn and faster to use.
An icon is a small, simple picture that represents an object or an action. A picture of a bin for deleting files, a folder for storing files, or a company's logo for launching an app. Icons are intuitive; they are like a universal visual language that makes an interface easier to learn and faster to use.
M is for Menus
A menu is a list of choices presented to the user. This could be the menu bar at the top of an application (File, Edit, View), or a 'context menu' that pops up when you right-click on something. Menus organise all of a program's commands neatly, so you don't have to memorise them.
A menu is a list of choices presented to the user. This could be the menu bar at the top of an application (File, Edit, View), or a 'context menu' that pops up when you right-click on something. Menus organise all of a program's commands neatly, so you don't have to memorise them.
P is for Pointer
The pointer is the on-screen symbol that shows you where the action is happening. You control it with a mouse, trackpad, or other input device. It's your 'digital finger', used to point at, click on, select, and drag the other elements of the interface, like windows, icons, and menu options.
The pointer is the on-screen symbol that shows you where the action is happening. You control it with a mouse, trackpad, or other input device. It's your 'digital finger', used to point at, click on, select, and drag the other elements of the interface, like windows, icons, and menu options.
The combination of these four elements created the intuitive, user-friendly computing experience that we all know and rely on today, and they will be the foundation of our design for The Majestic Cinema project.
Task GUI Time Machine
1
The History and Future of the GUI
Your mission is to travel through time, exploring not only the history of the GUI but also where it's heading next. You will create a visual timeline.
1
Open a new presentation (e.g., Google Slides or PowerPoint).
2
Use the "Starter Timeline" below as your guide. For each event, create a new slide.
3
On each slide, you must:
Include the year and the name of the event.
Research and find a picture. For the "Future" events, find a concept image or diagram that shows what it might look like.
Write 1-2 sentences explaining what it was (or will be) and why it's important.
GUI Development Starter Timeline
1973: Xerox Alto
1984: Apple Macintosh
1995: Microsoft Windows 95
2007: Apple iPhone & iOS (Touch Interface Revolution)
2012: Microsoft Windows 8 (Attempted Touch/Desktop Hybrid)
2020: Meta Quest 2 (Mainstream VR Spatial Interfaces)
Late 2020s (Future): Widespread Augmented Reality (AR) Interfaces
2040s (Future): Mainstream Brain-Computer Interfaces (BCI)
2
The Power of WIMP
The WIMP interface has been dominant for decades. Let's quickly break down why it works so well.
1
Add a new slide to the end of your presentation entitled "The Power of WIMP"
2
List the four components: Windows, Icons, Menus, Pointer. You might want to present this as a quadrant diagram.
3
Next to each component, write a short explanation of its benefit to the user. Explain why it helps make a computer easier to use.
4
Can you see the WIMP interface persisting into the future of GUIs? What alternative could there be do you think?
Outcome: "I can create an illustrated timeline showing the key milestones in the development of the GUI, predict its future evolution, and explain the benefits of the WIMP features."
Application to the component sample PSA
A strong understanding of Graphical User Interfaces (GUIs) is absolutely fundamental to succeeding in the Component 1 PSA, as the entire "Majestic Cinema" information point you are tasked with creating is a GUI.
Every aspect of the design and build process for the PSA relies on the principles covered in this lesson:
Task 2 (Interface Designs): When you create your initial designs for the four screens ('Home', 'What's On', 'Facilities & Accessibility', and 'Ticket Booking'), you will be designing a WIMP (Windows, Icons, Menus, Pointer) interface. You will need to make deliberate choices about:
Windows: How will you structure the layout of each of the four screens?
Icons: What icons will you use to represent different functions, like a home button, a search icon, or accessibility features? You will need to design these to be clear and intuitive for the cinema's customers.
Menus: How will you design the navigation menu to allow users to move easily between the four screens?
Pointer: You will need to consider which elements on the screen are interactive and will respond to a user's click or touch.
Task 3 (User Interface Prototype): When you build your prototype, you will be implementing your GUI design. Your choice of colours, fonts, button styles, and the placement of images (like film posters on the 'What's On' screen) are all key components of creating an effective and visually appealing GUI that meets the needs of the cinema.
Essentially, this lesson provides the foundational knowledge for the entire practical component of the PSA. You will need to use the key terminology and principles from this lesson to justify your design choices and explain how your GUI provides a positive user experience for customers of The Majestic Cinema.
Last modified: October 8th, 2025
