Skip to content
Skip to main content

The Graphical User Interface (GUI): WIMP and Interaction

JSS2 Term 1 • Week 4
About 40 minutes
Learning goals: Trace the evolution of user interfaces from Command Line Interfaces (CLI) to Graphical User Interfaces (GUI). • Identify the four pillars of the WIMP interaction model: Windows, Icons, Menus, and Pointer. • Explain standard window controls (Minimize, Maximize/Restore, Close). • Evaluate accessibility and touch-screen adaptations in modern user interfaces.

Before the 1980s, using a computer looked like a scene from an old science fiction movie: a completely black screen with a flashing green or white cursor, where the user had to memorize and type cryptic text commands like:

C:\> COPY A:\DOCS\REPORT.TXT C:\RECORDS\ /V /Y

If you forgot a single slash, mistyped a letter, or put a space in the wrong place, the computer would coldly respond: "Bad command or file name" and refuse to do anything! This was called a Command Line Interface (CLI).

Today, even a five-year-old child can use a tablet or laptop without memorizing code. Why? Because modern operating systems use a Graphical User Interface (GUI)! In this lesson, we will dissect the WIMP model and explore how visual computing transformed human-computer interaction.

Learning Outcomes

By the end of this lesson, you will be able to:

  1. Compare a Command Line Interface (CLI) with a Graphical User Interface (GUI).
  2. Deconstruct the WIMP model: Windows, Icons, Menus, and Pointer.
  3. Operate standard window controls: Minimize, Maximize/Restore, and Close.
  4. Identify modern touch and voice adaptations of visual interfaces.

Key Vocabulary

Term Technical Role
CLI (Command Line Interface) A text-only interface where users type written commands to operate the system.
GUI (Graphical User Interface) A visual interface that uses pictures, icons, windows, and pointers for intuitive interaction.
WIMP The classic GUI paradigm: Windows, Icons, Menus, Pointer.
Icon A small graphic symbol or picture that represents a file, folder, application, or device.
Taskbar The horizontal anchor bar (usually at the bottom of the screen) showing open applications and the system clock.

Study Notes: CLI vs. GUI and the WIMP Paradigm

COMMAND LINE INTERFACE (CLI):
+----------------------------------------------------+
| C:\> DIR                                           |
| C:\> COPY FILE.TXT B:\                             |
| [ Requires memorizing hundreds of text commands! ] |
+----------------------------------------------------+

GRAPHICAL USER INTERFACE (GUI / WIMP):
+----------------------------------------------------+
| [ Window Header: My Homework             [-] [ ] [X]|
| +------------------------------------------------+ |
| | [ File ] [ Edit ] [ View ]  <-- (MENU)         | |
| |                                                | |
| |  [ Folder Icon ]    [ Word Document Icon ]     | |
| |                                                | |
| |            \   <-- (POINTER / ARROW)           | |
| +------------------------------------------------+ |
| [ Start ] [ Taskbar: Open Apps ]         [ 14:30 ] |
+----------------------------------------------------+

1. The Four Pillars of the WIMP Model

Invented at Xerox PARC and popularized by Apple Macintosh and Microsoft Windows, WIMP revolutionized personal computing: 1. Windows: A rectangular visual frame on the screen that houses a specific running program or folder. You can resize windows, move them around the desktop, or overlap them. 2. Icons: Intuitive pictorial metaphors. A picture of a manila paper folder represents a directory; a picture of a miniature gear represents settings; a picture of a trash can represents deleted files! 3. Menus: Organized dropdown or context lists of available commands (e.g., File -> Save, Open, Print). Menus save human memory because you do not have to memorize commands; you simply select from choices! 4. Pointer (Cursor): A small floating arrow or symbol on the screen controlled by a mouse, touchpad, or trackball, allowing you to click, drag, and drop digital objects.

2. Standard Window Controls (Top-Right Corner)

Every standard window in modern operating systems features three control buttons: - Minimize (-): Shrinks the window down into an icon on the bottom Taskbar. The program keeps running in RAM, but gets out of your way! - Maximize / Restore ([ ]): - Maximize: Expands the window to fill the entire computer screen. - Restore: Shrinks the window back to its previous floating rectangular size. - Close (X): Safely terminates the application process and removes it from active display.

3. Beyond WIMP: Touchscreens and Voice UI

Modern technology extends beyond mice and keyboards: - Natural User Interfaces (NUI): On smartphones and tablets, your physical finger replaces the mouse pointer: pinching to zoom, swiping to scroll, and double-tapping to open. - Voice User Interfaces (VUI): Using natural spoken words with virtual assistants (like Siri, Google Assistant, or Alexa) to operate devices hands-free.

Worked Example: Comparing CLI vs. GUI for Deleting a File

Task: Delete an old test file called draft.txt from a folder called homework.

  • On a Command Line Interface (CLI):
  • The user must type: cd C:\students\chidi\homework and press Enter.
  • The user must type: del draft.txt and press Enter.
    Risk: If the user accidentally types del *.*, every single file in the directory is instantly wiped out without warning!
  • On a Graphical User Interface (GUI):
  • The user double-clicks the yellow homework folder icon.
  • The user spots the draft.txt document icon.
  • The user drags the icon and drops it into the Recycle Bin icon.
    Safety: If it was an accident, the user can open the Recycle Bin and drag the file back out!

Practical Class Activity: The Window Management Drill

If using a desktop or laptop computer: 1. Open your word processor, web browser, and calculator at the same time so you have three open windows. 2. Practice resizing: Move your mouse pointer to the exact edge or bottom-right corner of the calculator window until the cursor turns into a double-ended arrow (<->). Drag inward to make it smaller. 3. Click the Title Bar at the top of the browser window and drag it across the screen to reposition it. 4. Click the Minimize button (-) on the word processor and watch it fold into the Taskbar. 5. Restore it by clicking its icon on the Taskbar.

Common Mistakes & Corrections

Common Mistake Why It Is Incorrect Proper Correction
"Clicking the Close button (X) is the same as Minimizing." Closing terminates the program; unsaved changes will be lost if not saved first! Use Minimize (-) if you plan to return to the document later; use Close (X) only when completely finished.
"Command Line interfaces are completely obsolete and never used anymore." Software engineers, network administrators, and server operators rely on CLI terminals every day for fast automation. GUIs are best for everyday visual tasks; CLIs remain essential for high-level administration.

Notebook Summary

Copy Into Your Computing Notebook

  • CLI (Command Line): Text-only interface requiring memorized commands.
  • GUI (Graphical User Interface): Visual, intuitive interface using graphics and pointers.
  • WIMP Model: Windows, Icons, Menus, and Pointer.
  • Window controls: Minimize (-) hides to taskbar, Maximize ([ ]) fills screen, Close (X) terminates program.

Check your understanding

What does the abbreviation 'GUI' stand for in computer systems?
What is a 'Command Line Interface' (CLI)?
What do the letters in the 'WIMP' interaction model stand for?
Which window control button temporarily hides an open application window down into the bottom Taskbar without closing or losing your work?
Feedback appears after you check your answer.