Windowing systems.

User interface toolkits.

Dialog modelling.

WINDOWING SYSTEMS

Windowing systems are the foundation of modern WIMP interfaces. Windowing systems
are a central environment for both the programmer and user of an interactive system,
allowing a single workstation to support separate user–system threads of action
simultaneously.

A windowing system (or window system) is software that manages separately different
parts of display screens. It is a type of graphical user interface (GUI) which implements
the WIMP (windows, icons, menus, pointer) paradigm for a user interface.

Each currently running application is assigned a usually resizable and usually rectangular
surface of the display to present its GUI to the user; these windows may overlap each
other, as opposed to a tiling interface where they are not allowed to overlap. Usually a
window decoration is drawn around each window. The programming of both the window
decoration and of available widgets inside of the window, which are graphical elements
for direct user interaction, such as sliders, buttons, etc., is eased and simplified through
the use of widget toolkits.

Typical elements of a window. The window decoration is either drawn by the window
manager or by the client. The drawing of the content is the task of the client.

1
The main component of any windowing system is usually called the display server,
although alternative denominations such as window server or compositor are also in use.
Any application that runs and presents its GUI in a window, is a client of the display
server. The display server and its clients communicate with each other over a
communications protocol, which is usually called display server protocol, the display
server being the mediator between the clients and the user. It receives all the input from
the kernel, that the kernel receives from all attached input devices, such as keyboard,
pointing devices, or touchscreen and transmits it to the correct client. The display server is
also responsible for the output of the clients to the computer monitor. The output of sound
is usually not managed by the display server, but the sound volume is usually handled
through GUI applets and it is the display server who decides which applications are on
top. A windowing system enables the computer user to work with several programs at the
same time. Each program presents its GUI in its own window, which is generally a
rectangular area of the screen.

From a programmer's point of view, a windowing system implements graphical

primitives. For example: rendering fonts or drawing a line on the screen. It provides an
abstraction of the graphics hardware for use by higher-level elements of the graphical
interface such as a window manager.

A display server protocol can be network capable or even network transparent, facilitating
the implementation of thin clients.

Display server

A display server or window server is a program whose primary task is to coordinate the
input and output of its clients to and from the rest of the operating system, the hardware,
and each other. The display server communicates with its clients over the display server
protocol, a communications protocol, which can be network-transparent or simply
network-capable.

The display server is a key component in any graphical user interface, specifically the
windowing system.

2
 The basic components of a GUI: The display server implements the windowing system. A
simple window manager merely draws the window decorations, but compositing window
managers do more.

Display server communications protocols

 X11
 Wayland
 Mir
 SurfaceFlinger: Google developed a display server called SurfaceFlinger
 Quartz Compositor: For Apple's macOS family of operating systems, Quartz Compositor
fulfils the tasks of a display server and of a window manager in the windowing system.
 Desktop Window Manager: For Microsoft Windows, from Windows Vista onward,
Desktop Window Manager enables the use of hardware acceleration to render the graphical user
interface.

List of windowing systems

For Unix-like operating systems: 8½ and rio for Plan 9: FramebufferUI in-kernel
windowing system, HP Windows/9000 (on early versions of HP-UX), Sapphire for the
PERQ, ManaGeR (MGR), Metisse, Mir, NeWS / OpenWindows, NeXT DPS, Orbital
(Redox), Qt Extended, Quartz Compositor (Mac OS X), SunView, Twin (Text
WINdows), W Window System, Wayland, X Window System, XFast, Xynth

For Windows NT-family operating systems: Desktop Window Manager (DWM) in

Microsoft Windows (Vista and later), ReactOS Explorer, Classic Shell, Pokki, RetroUI,
Talisman Desktop

Web windowing systems : Dojo, ExtJS, TIBCO General Interface, Web Window Manager

3
Other: DM, GEM, Intuition, Microwindows, MiniGUI, OOHG, Visi On, VWS (VAX
Workstation Software)
Commercial systems such as Microsoft Windows (XP, 9x and earlier), the classic Mac OS
(version 9 and earlier), and Palm OS, contain a windowing system which is integrated
with the OS.

The WIMP interface

Currently many common environments for interactive computing are examples of the
WIMP interface style, often simply called windowing systems. WIMP stands for
windows, icons, menus and pointers (sometimes windows, icons, mice and pull-down
menus), and is the default interface style for the majority of interactive computer systems
in use today, especially in the PC and desktop workstation arena. Examples of WIMP
interfaces include Microsoft Windows for IBM PC compatibles, MacOS for Apple
Macintosh compatibles and various X Windows-based systems for UNIX.

Elements of the WIMP interface (with respect to how they enhance the interaction with
the end-user.)
There are four key features of the WIMP interface that give it its name – windows, icons,
pointers and menus. There are also many additional interaction objects and techniques
commonly used in WIMP interfaces, some designed for specific purposes and others more
general. We will look at buttons, toolbars, palettes and dialog boxes. Together, these
elements of the WIMP interfaces are called widgets, and they comprise the toolkit for
interaction between user and system. Though most modern windowing systems
provide the same set of basic widgets, the ‘look and feel’ – how widgets are physically
displayed and how users can interact with them to access their functionality – of different
windowing systems and toolkits can differ drastically.

4
Elements of the WIMP interface – Microsoft Word 5.1 on an Apple Macintosh.

Windows
Windows are areas on the screen that behave as if they were independent terminals in
their own right: it can contain any information and can be resized or moved around. Some
systems allow windows within windows.
Icons
An icon is a small picture used to represent a closed window.
Pointers
The different shapes of the cursor are often used to distinguish modes. Cursors are also
used to give information about the systems activity (hour-glass). In essence pointers are
nothing more than small bitmap images with a hotspot: the locatin to which they point.
Menus
A menu presents a choice of operations or services that can be performed by the system at
a given time. Menus provide information cues in the form of an ordered list of operations
that can be scanned and selected by using the pointer. There are two types: pop-up menus,
that represent context-dependent options, and pull-down menus, that are always visible.
The right grouping of the menu-items is the most difficult part of designing a menu. The
last main feature of windowing systems is the menu, an interaction technique that is
common across many non-windowing systems as well.
Buttons
Buttons are individual and isolated regions within a display that can be selected
by the user to invoke a specific action. Radio buttons are used for selecting one option
from a group. When there are multiple options selectable, check boxes are more common.

5
Toolbars
Mostly equivalent to menus, except for that a toolbar can also hold buttons.
Palettes
Palettes are mechanisms for making the set of possible modes and the active mode visible
to the user (collection of icons).
Dialog boxes
Dialog boxes are information windows used by the system to bring the user’s attention to
some important information, possibly an error or a warning used to prevent a possible
error, or as a subdialog for a very specific task.

Elements of Windowing Systems

The first important feature of a windowing system is its ability to provide programmer
independence from the specifics of the hardware devices.
A given windowing system will have a fixed generic language for the abstract
terminal which is called its imaging model. The imaging models are sufficient
to describe very arbitrary images. For efficiency reasons, specific primitives are
used to handle text images, either as specific pixel images or as more generic font
definitions.
When we discussed the WIMP interface as an interaction paradigm, we pointed out its
ability to support several separate user tasks simultaneously. Windowing systems provide
this capability by sharing the resources of a single hardware configuration with several
copies of an abstract terminal.
In summary, the role of a windowing system, is providing:
independence from the specifics of programming separate hardware devices;
management of multiple, independent but simultaneously active applications.

USER INTERFACE TOOLKITS

Toolkits used with particular windowing systems add another level of abstraction by
combining input and output behaviors to provide the programmer with access to
interaction objects from which to build the components of the interactive system. Toolkits
are amenable to external dialog control by means of callback procedures within the
application.

A user interface (UI) kit is a collection of graphic files (usually PSD) and resources that
can help designers with the task of building UIs for their applications.

UI kits typically include the user interface components that convey meaning and provide
functionality to users – think buttons, widgets, checkboxes, progress bars, and navigation
buttons. Some kits may also provide a framework to underpin your site or app’s layout.
Essentially, UI kits include all of the components of a user interface that you may not
need to be spending time designing yourself.

6
 benefits of the UI kit
 UI kits can save you time
 increase your profits
 free up your creative energy and resources to focus on essential design tasks
 make your designs easier to change
 and give you opportunities to learn.

DIALOG DESIGN

Dialog is the syntactic level of human–computer interaction.

Dialog, as opposed to a monolog, is a conversation between two or more parties.

It has also come to imply a level of cooperation or at least intent to resolve conflict.
In the design of user interfaces, the dialog has a more specific meaning, namely the
structure of the conversation between the user and the computer system.
We can look at computer language at three levels:
Lexical The lowest level: the shape of icons on the screen and the actual keys
pressed. In human language, the sounds and spellings of words.
Syntactic The order and structure of inputs and outputs. In human language, the
grammar of sentence construction.
Semantic The meaning of the conversation in terms of its effect on the computer’s
internal data structures and/or the external world. In human language, the meaning
ascribed by the different participants to the conversation.
In user interfaces, the term dialog is often taken to be almost synonymous with the
syntactic level. However, the lexical/syntactic barrier is somewhat fuzzy and actual
use of dialog description often includes some lexical features.

Dialog Representation
To represent dialogs, we need formal techniques that serves two purposes −
 It helps in understanding the proposed design in a better way.
 It helps in analyzing dialogs to identify usability issues. E.g., Questions such as “does the
design actually support undo?” can be answered.
Introduction to Formalism
There are many formalism techniques that we can use to signify dialogs. In this chapter,
we will discuss on three of these formalism techniques, which are −
 The state transition networks (STN)
 The state charts
 The classical Petri nets
State Transition Network (STN)
STNs are the most spontaneous, which knows that a dialog fundamentally denotes to a
progression from one state of the system to the next.
The syntax of an STN consists of the following two entities −

7
 Circles − A circle refers to a state of the system, which is branded by giving a name to the
state.
 Arcs − The circles are connected with arcs that refers to the action/event resulting in the
transition from the state where the arc initiates, to the state where it ends.
STN Diagram

StateCharts
StateCharts represent complex reactive systems that extends Finite State Machines
(FSM), handle concurrency, and adds memory to FSM. It also simplifies complex system
representations. StateCharts has the following states −
 Active state − The present state of the underlying FSM.
 Basic states − These are individual states and are not composed of other states.
 Super states − These states are composed of other states.

Petri Nets
Petri Net is a simple model of active behavior, which has four behavior elements such as
− places, transitions, arcs and tokens. Petri Nets provide a graphical explanation for easy
understanding.
 Place − This element is used to symbolize passive elements of the reactive system. A
place is represented by a circle.
 Transition − This element is used to symbolize active elements of the reactive system.
Transitions are represented by squares/rectangles.
 Arc − This element is used to represent causal relations. Arc is represented by arrows.

8
  Token − This element is subject to change. Tokens are represented by small filled circles.

Item Presentation Sequence

In HCI, the presentation sequence can be planned according to the task or application
requirements. The natural sequence of items in the menu should be taken care of. Main
factors in presentation sequence are −

 Time
 Numeric ordering
 Physical properties
A designer must select one of the following prospects when there are no task-related
arrangements −

 Alphabetic sequence of terms

 Grouping of related items
 Most frequently used items first
 Most important items first

Menu Layout
 Menus should be organized using task semantics.
 Broad-shallow should be preferred to narrow-deep.
 Positions should be shown by graphics, numbers or titles.
 Subtrees should use items as titles.
 Items should be grouped meaningfully.
 Items should be sequenced meaningfully.
 Brief items should be used.
 Consistent grammar, layout and technology should be used.
 Type ahead, jump ahead, or other shortcuts should be allowed.
 Jumps to previous and main menu should be allowed.
 Online help should be considered.
Guidelines for consistency should be defined for the following components −

 Titles
 Item placement
 Instructions
 Error messages
 Status reports
9
Form Fill-in Dialog Boxes
Appropriate for multiple entry of data fields −

 Complete information should be visible to the user.

 The display should resemble familiar paper forms.
 Some instructions should be given for different types of entries.
Users must be familiar with −

 Keyboards
 Use of TAB key or mouse to move the cursor
 Error correction methods
 Field-label meanings
 Permissible field contents
 Use of the ENTER and/or RETURN key.
Form Fill-in Design Guidelines −

 Title should be meaningful.

 Instructions should be comprehensible.
 Fields should be logically grouped and sequenced.
 The form should be visually appealing.
 Familiar field labels should be provided.
 Consistent terminology and abbreviations should be used.
 Convenient cursor movement should be available.
 Error correction for individual characters and entire field’s facility should be
present.
 Error prevention.
 Error messages for unacceptable values should be populated.
 Optional fields should be clearly marked.
 Explanatory messages for fields should be available.
 Completion signal should populate.

10