Graphics Programming
Graphical User Interfaces

Slides can also be advanced by clicking on the left or right border of the slide.

• short: GUI
• User interfaces allow human-computer interaction by graphical components
• Applications are represented as windows
• The window content is composed of graphical components, also known as "widgets"
• Using the graphical components, information is entered and displayed
• Interaction with graphical controls is usually via mouse and keyboard; nowadays often via touch screen

In the early 80s the first devices came into the market with a graphical user interface and mouse input, such as

Apple Lisa

• Apple Lisa (1983)
• MS Windows 1.0 (1985)
• Amiga Workbench (1985)

• Many applications that are used to create creative content, start with a blank "canvas" and a palette of tool icons
• Examples: MS Word, MS Powerpoint, Photoshop, etc.
• Often it is possible to have multiple documents open and to edit them simultaneously

• The advantage of tool icons over menu bars is the fast access with just one mouse click
• One goal in the GUI design of an application is, among other things, to allow quick access
• Frequently used actions should be quickly available, others may require more clicks
• Experienced users frequently use keyboard shortcuts, such as CTRL+C for copying (respect system standards!)

• Depending on the purpose, a GUI looks differently:
  View content, search in a database, create new content, solve a specific task
• Example: A simple video or image viewer only requires very few control elements
• Example: : If the path for solving the task is known, the user can be guided step by step

The Gestalt psychology mentions some laws to group components

• Law of proximity
• Law of similarity
• Law of continuity
• Law of simple shape

Closely placed objects belong together

Objects with the same color, shape, size, orientation, etc. belong together

Components are grouped if they form together a simple shape

Small components are grouped into larger objects if lines/curves can be proceeded continuously

Different types of widgets

• Components that can trigger an action
• Components that query an input
• Components that visualize content
• Components that group something
• Components that change the size or the visible section

Typically, an executable function is associated with these components that is called when the component is activated

• Button
• Menu bar and menu items
• Context menu
• Toolbar
• etc.

These components may call, for example, an executable function when they are edited

• Text input field
• Slider
• Combobox
• Spinbox/Spinner
• Radio button
• Checkbox
• etc.

• Label
• Progress bar
• Lists
• Trees
• Tables
• etc.

• Groupbox

• Tab control

• etc

• Scroll bar

• Size grip

• etc.

• Undo is usually implemented with a stack
• Every action of the user is pushed on the stack
• If the user wants to undo actions, these are successively popped off the stack and for each popped action the reverse function is executed
• This implies high overhead for the programmer because the reverse function must be implemented in addition
• In case of a lossy function (deletes data) the corresponding data must be stored
• Therefore, the stack typically has a defined maximum size

• While longer computations are executed, a progress bar should be displayed
• This gives the user a prediction of how long the computations will be running and encourages to wait
• Longer calculations should be interruptible by the user at any time
• After an abort, the application should be in the identical state as before (working on temporary data structures)
• Ideally, longer calculations should run in the background (not always useful if this allows the user to change the state/data)

Please notify me by e-mail if you have questions, suggestions for improvement, or found typos: Contact

More lecture slides

Slides in German (Folien auf Deutsch)