Graphical User Interfaces

1
Graphical User Interfaces

• Lecture 6A
• MSIT 159 User Interface Design Development

2
Graphical User Interfaces

• Abbreviated GUI (pronounced GOO-ee).
• A program interface that takes advantage of the
  computer's graphics capabilities to make the
  program easier to use.
• Well-designed graphical user interfaces can free
  the user from learning complex command languages.
  
• On the other hand, many users find that they work
  more effectively with a command-driven interface,
  especially if they already know the command
  language

3
Examples of GUIs

• Microsoft Windows
• Apple Macintosh
• X Window System
• Gnome
• KDE

4
Basic Components of GUIs

• pointer A symbol that appears on the display
  screen and that you move to select objects and
  commands.
• pointing device A device, such as a mouse or
  trackball, that enables you to select objects on
  the display screen.
• icons Small pictures that represent commands,
  files, or windows.
• desktop The area on the display screen where
  icons are grouped is often referred to as the
  desktop because the icons are intended to
  represent real objects on a real desktop.
• windows the screen is divided into different
  areas, each division is a window.
• menus Most graphical user interfaces let you
  execute commands by selecting a choice from a
  menus.

5
GUI Trivia

• The first graphical user interface was designed
  by Xerox Corporation's Palo Alto Research Center
  in the 1970s, but it was not until the 1980s and
  the emergence of the Apple Macintosh that
  graphical user interfaces became popular.
• One reason for their slow acceptance was the fact
  that they require considerable CPU power and a
  high-quality monitor, which until recently were
  prohibitively expensive.

6
GUI Trivia

• In addition to their visual components, graphical
  user interfaces also make it easier to move data
  from one application to another. A true GUI
  includes standard formats for representing text
  and graphics. Because the formats are
  well-defined, different programs that run under a
  common GUI can share data. This makes it
  possible, for example, to copy a graph created by
  a spreadsheet program into a document created by
  a word processor.
• Many DOS programs include some features of GUIs,
  such as menus, but are not graphics based. Such
  interfaces are sometimes called graphical
  character-based user interfaces to distinguish
  them from true GUIs.

7
Pointer

• In graphical user interfaces, a pointer is a
  small arrow or other symbol on the display screen
  that moves as you move the mouse. You can select
  commands and options by positioning the tip of
  the arrow over the desired choice and clicking a
  mouse button. Many text processing programs use
  an I-beam pointer. Pointers are often referred to
  as mouse pointers.

8
Pointing Device

• A device with which you can control the movement
  of the pointer to select items on a display
  screen. Examples of pointing devices include
  mice, trackballs, joysticks, touchpads, and light
  pens.

9
Icon

• A small picture that represents an object or
  program. Icons are very useful in applications
  that use windows, because with the click of a
  mouse button you can shrink an entire window into
  a small icon. (This is sometimes called
  minimizing.) To redisplay the window, you merely
  move the pointer to the icon and click (or double
  click) a mouse button. (This is sometimes called
  restoring or maximizing). Icons are a principal
  feature of graphical user interfaces.

10
Desktop.

• In graphical user interfaces, a desktop is the
  metaphor used to portray file systems. Such a
  desktop consists of pictures, called icons, that
  show cabinets, files, folders, and various types
  of documents (that is, letters, reports,
  pictures). You can arrange the icons on the
  electronic desktop just as you can arrange real
  objects on a real desktop -- moving them around,
  putting one on top of another, reshuffling them,
  and throwing them away.

11
Window

• An enclosed, rectangular area on a display
  screen. Most modern operating systems and
  applications have graphical user interfaces
  (GUIs) that let you divide your display into
  several windows. Within each window, you can run
  a different program or display different data.
• Windows are particularly valuable in multitasking
  environments , which allow you to execute several
  programs at once. By dividing your display into
  windows, you can see the output from all the
  programs at the same time. To enter input into a
  program, you simply click on the desired window
  to make it the foreground process.

12
Window

• GUIs, such as the one supported by the Apple
  Macintosh or Windows, enable you to set the
  dimensions and position of each window by moving
  the mouse and clicking appropriate buttons.
  Windows can be arranged so that they do not
  overlap (tiled windows) or so they do overlap
  (overlaid windows). Overlaid windows (also called
  cascading windows) resemble a stack of pieces of
  paper lying on top of one another only the
  topmost window is displayed in full. You can move
  a window to the top of the stack by positioning
  the pointer in the portion of the window that is
  visible and clicking the mouse buttons. This is
  known as popping. You can expand a window to fill
  the entire screen by selecting the window's zoom
  box.

13
Window

• In addition to moving windows, changing their
  size, popping and zooming them, you can also
  replace an entire window with an icon (this is
  sometimes called minimizing). An icon is a small
  picture that represents the program running in
  the window. By converting a window into an icon,
  you can free up space on the display screen
  without erasing the window entirely. It is always
  possible to reconvert the icon into a window
  whenever you want.

14
Menu

• A list of commands or options from which you can
  choose. Most applications now have a menu-driven
  component. You can choose an item from the menu
  by highlighting it and then pressing the Enter or
  Return key, or by simply pointing to the item
  with a mouse and clicking one of the mouse
  buttons.
• The antithesis of a menu-driven program is a
  command-driven system, in which you must
  explicitly enter the command you want rather than
  choose from a list of possible commands.
  Menu-driven systems are simpler and easier to
  learn but are generally not as flexible as
  command-driven systems, which lend themselves
  more naturally to interaction with programs.

15
Types of Menus

• pop-up menu A menu that appears temporarily
  when you click the mouse button on a selection.
  Once you make a selection from a pop-up menu, the
  menu usually disappears.
• cascading menu A submenu that opens when you
  select a choice from another menu.
• pull-down menu A special type of pop-up menu
  that appears directly beneath the command you
  selected.
• moving-bar menu A menu in which options are
  highlighted by a bar that you can move from one
  item to another. Most menus are moving-bar menus.
  
• menu bar A menu arranged horizontally. Each
  menu option is generally associated with another
  pull-down menu that appears when you make a
  selection.
• tear-off menu A pop-up menu that you can move
  around the screen like a window.

16
Douglas Engelbart

• In the late 1940s, Douglas Engelbart was
  stationed in the Philippines when he read
  Vannevar Bush's "As We May Think" in a Red Cross
  library. He became an early believer in Bush's
  idea of a machine that would aid human cognition.
  Later, he worked at Ames aeronautical lab, and
  developed the idea that would form the basis of
  today's computer interfaces.
• "Augmentation not automation" was the slogan, the
  goal being the enhancement of human abilities
  through computer technology.

17
Douglas Engelbart

• In the early 1960s, Engelbart began the
  Augmentation Research Centre (ARC), a development
  environment at the Stanford Research Institute.
  Here, he and his colleagues (William K. English
  and John F. Rulifson) created the On-Line System
  (NLS), the world's first implementation of what
  was to be called hypertext. Yet this was only a
  small part of what ARC was about. As he states in
  "Working Together," Engelbart was particularity
  concerned with "asynchronous collaboration among
  teams distributed geographically" (245). This
  endeavour is part of the study of Computer
  Supported Co-operative Work (CSCW) software
  which supports this goal is often called
  groupware.

18
The key tools that NLS provided were

• outline editors for idea development
• hypertext linking
• tele-conferencing
• word processing
• e-mail
• user configurability and programmability

19
The development of these required the creation
of

• the mouse pointing device for on-screen selection
  
• a one-hand chording device for keyboard entry
• a full windowing software environment
• on-line help systems
• the concept of consistency in user interfaces

20
Douglas Engelbart

• Itemizing these accomplishments using today's
  terminology emphasizes their detachment from one
  another. However, NLS was an integrated
  environment for natural idea processing. The
  emphasis was on a visual environment--a
  revolutionary idea at a time when most people
  (even programmers) had no direct contact with a
  computer. Input was by punched cards and output
  by paper tape.

21
Douglas Engelbart

• Engelbart's work directly influenced the research
  at Xerox's PARC, which in turn was the
  inspiration for Apple Computers. Ted Nelson cites
  him as a major influence. In 1991, Engelbart and
  his colleagues were given the ACM Software System
  Award for their work on NLS.
• Recently, Engelbart has been working at Stanford
  University, where he is director of the Bootstrap
  Project. As explained in "On Bootstrapping," the
  focus of this work is to bring together computer
  vendors, developers, and end-users to work in
  commonality on the technology that today's
  rapidly changing world requires.

22
Douglas Engelbart