COLLEGE OF ENGINEERING

ENG 341: COMPUTER PROGRAMMING AND APPLICATION

2.0 INTRODUCTION TO PROGRAM DEVELOPMENT

2.1 USER INTERFACE PROBLEMS

Human–computer interaction (HCI) is the study of how humans interact with computer systems. Many
disciplines contribute to HCI, including computer science, psychology, ergonomics, engineering, and
graphic design. When users interact with a computer system, they do so via a user interface (UI). The
user interface (or just interface) is that part of the computer system with which a user interacts in order
to undertake his or her tasks and achieve his or her goals. The user interface and the ways of interacting
with computer-based systems are different for each system. For example, digital watches generally
have buttons that users press to set the time or use the stopwatch facility. Microwave ovens might have
dials to turn or a digital display and a touchpad of buttons to set the cooking time. PCs have a screen, a
keyboard, and a mouse (or sometimes a trackball or a joystick) that enable interaction to take place. So
each user interface is different. Depending on the design of the interface, each of these systems will
either be usable —that is, easy to learn and easy to use —or problematic for users. The user’s view of a
computer system is often limited to and based solely on his or her experience of the user interface (See
Figure 2.1).

Figure 2.1 To the user, the interface is the computer system (Constantine and Lockwood, 1999)

2.1.1 Good vs Bad User Interface Design

One way of demonstrating the importance of good user interface design is by showing tangible benefits
that can be discussed in cash terms.
Businesses: good user interfaces can lead to benefits such as higher staff productivity, lower staff
turnover, higher staff morale, and higher job satisfaction.

Economically: these benefits should translate into lower operating costs. In addition, computer systems
that are easy to use and easy to understand require less training, again saving employers money.

Bad user interfaces, on the other hand, may result in stress and unhappiness among staff, leading to
high staff turnover, reduced productivity, Computer Rage, and, consequently, financial losses for the
business.

It is easy to give examples of the effects of bad design, but showing the financial benefits of good user
interface design can be more difficult. Invariably, many factors are involved and this makes it difficult to
attribute success directly to good user interface design.

2.1.2 User-Centered Design

User-centered design (UCD) is an approach to user interface design and development that involves
users throughout the design and development process. User centered design not only focuses on
understanding the users of a computer system under development but also requires an understanding
of the tasks that users will perform with the system and of the environment (organizational, social, and
physical) in which they will use the system. Taking a user-centered design approach should optimize a
computer system’s usability.

ISO 13407, Human- Centered Design Processes for Interactive Systems (ISO, 1997), provides guidance
on and lists the main principles and essential activities for human (user)-centered design, for achieving
usability in systems. Briefly, the four main principles of human centered design are (ISO, 1997 p. 7):

 The active involvement of users

 An appropriate allocation of function between user and system
 The iteration of design solutions
 Multidisciplinary design teams

The four essential human-centered design activities are (ISO, 1997 p. 10):

 Understand and specify the context of use

 Specify the user and organizational requirements
 Produce design solutions (prototypes)
 Evaluate designs with users against requirements

Adopting the approach prescribed by ISO 13407 ensures that the users’ perspectives form part of the
HCI design and development process, which will positively influence the usability of the final product.

2.1.3 Graphical User Interface

Most modern software used by people has a graphical user interface (GUI). It is usual for GUIs to blend
a variety of interaction styles, including menu selection, form-filling, and direct manipulation. In
addition, they allow for the inclusion of metaphors. This may be a version of Microsoft Windows, the
Apple Macintosh operating system, Android or some other application. Most GUIs have a familiar
mixture of windows, dialog boxes, and tabs to help structure the interaction. They use menus, tool bars,
and command buttons, which enable the user to control the interaction.

Option buttons, check boxes, list boxes, and text boxes enable the user to enter information. These
various building blocks of a GUI are sometimes referred to as widgets.

Figure 2.2 Windows XP typical Print Screen

Figure 2.3 Apple MAC OS typical Print Screen

2.1.4 Primary Windows

A typical primary window contains a frame, title bar, menus, scroll bars, and so on. Primary windows
often correspond to the main task objects in the conceptual design. For example, there is a primary
window for the word processor and another for the spreadsheet program. In these cases, the
corresponding main task objects would be the document being written and the spreadsheet being
created.

Using Menus

Most GUIs contain a variety of types of menu.

• Drop-down menus appear when a menu title on the menu bar or an icon on a tool bar is selected
(their existence is sometimes indicated by a down arrow).This is the most common form of menu.
Example: File Menu

• Cascading menus are submenus that appear when the user moves his or her mouse over a menu item
that has a triangular arrow beside it. This can result in a number of menus being displayed on the screen
at the same time. Cascading menus require the user to have particularly good mouse control.
Example: View Menu –> Zoom Menu
• Roll-up menus are free-standing movable menus. These are often invoked from drop-down menus
and can be moved according to need. To save screen space, they can be rolled up (contracted, so that
only the menu header is displayed) and rolled down again.
Example: View Menu –> Print Menu

• Pop-up menus are floating menus that are invoked by the user. The position of a pop-up menu on the
screen and its precise menu items depend on the cursor position when it is invoked. The menu contains
the most common tasks associated with the object at that cursor position. Thus, pop-up menus provide
shortcuts for expert users. Example: custom mouse right click menu

Tool Bars

Tool bars complement the menu hierarchy. They contain a range of frequently used commands,
represented by icons. The icons are often explained by ToolTips, small pop-up windows that contain the
associated menu command. Tool bars enable the experienced user to operate the software quickly. It is
common to have a selection of different tool bars each specializing in a different area of the program’s
functionality. Often these can be made invisible if they are not required.

Command Buttons
Command buttons are typically used for controlling the operation of dialog boxes. Like tool bars, they
have the advantage of always being visible. There are a number of issues that you need to consider
when using command buttons:

 How will you label them?

It is extremely important that the user should understand what action the button carries out.

 How will you position them on the screen?

They are often found at the bottom of dialog boxes, but this is not always the case.

 What order should you put them in?

The usual approach is to have the most important buttons at the left end of horizontal lines of buttons
and at the top of vertical columns of buttons. In our culture, this reflects the order in which people
read.

 What size should the buttons be?

To visually group the buttons, they should be the same size and shape. Buttons of different width are
acceptable if the labels are different lengths and the buttons are in a row.

Option Buttons and Check Boxes

We have grouped option buttons and check boxes together, as they perform a similar function and are
often confused. Both represent a quick and accurate way of entering information into the computer
system. Option buttons (sometimes referred to as radio buttons) are used when the user needs to
choose one option out of a selection, whereas check boxes are used when the user needs to choose
more than one option out of a selection.

Example: PDF print screen

List Boxes

If you want to allow the user to choose from a large number of options, then list boxes can be the
answer. Some list boxes restrict the user to selecting one option; multiple selection list boxes allow the
user to select more than one option. In addition, some list boxes drop down and others are
permanently displayed. Both types are illustrated in Figure 16.18. Drop-down boxes allow the user to
select only one option. Some permanently displayed list boxes allow the user to select more than one
option using the CTRL key, but unfortunately many users do not know how to do this; if this type of
input is desirable, then you may need to add extra instructions near the box that explain how to do it.
 There are
several questions you need to consider when using list boxes:

 How many options should be displayed?

Some authors recommend displaying between three and eight options, but sometimes options that are
out of sight and need to be scrolled to will never be seen by users.

 How much space is available?

Is there space for a permanently displayed list box, or should a drop-down list box be used?

 Are the options likely to change?

If they are, a list box is much more flexible than option buttons or check boxes.

 Are multiple selections needed?

If so, the list box should allow for this.

 What default values should be used?

Defaults can speed up the use of the program significantly.

Text Boxes

The text box is the most flexible widget for entering information. If it is not possible to anticipate the
user input, or if you do not wish to constrain choice, then a text box will be appropriate.

However, this flexibility can be a disadvantage when the GUI requires standardized information to be
entered. For example, if the GUI is a front end for a database, the data will need to be in a standardized
form. Searching the database would be difficult if different users specify their sex as “female,”
“Female,” “FEMALE,” or just “F.” Text boxes are often used in conjunction with list boxes. The resulting
widget is known as a combo box.

Combo boxes overcome the standardization problem by matching the characters being entered into the
text box against the list.
 2.1.5 Secondary Windows

Secondary windows typically complement primary windows, providing additional functionality and
support for the user. There are several different types of secondary windows. Two especially useful
types are message boxes and dialog boxes.

Message Boxes

Message boxes, as their name suggests, pass messages to the user. These messages often relate to
problems that have arisen or situations that the user needs to deal with urgently.

Dialog Boxes

Dialog boxes are invoked by the user. They are often used where additional information is needed to
carry out a task.

Visit the web link below for summary of Principles for User-Interface Design:
http://www.sylvantech.com/~talin/projects/ui_design.html

2.2 STEPWISE REFINEMENT

Software developers need practical approach to conquer complexity. Stepwise refinement is a widely
applicable approach. Niklaus Wirth formalized the technique in his 1971 paper, “Program Development
by Stepwise Refinement.” Stepwise Refinement contends that designing programs consists of a set of
refinement steps. Many variations of it exist, such as top-down, bottom-up, functional decomposition
and even round-trip gestalt design. SR is a standard method for organizing and writing essays, term
paper and books. The guiding principle behind stepwise refinement is that humans can concentrate on
only a few things at a time.

In general, with stepwise refinement, a problem is approached in stages. Similar steps are followed
during each stage, with the only different reflecting the level of detail involved. The completion of each
stage brings us closer to solving our problem.

Some of the variations of stepwise refinement are as follows:

Top-Down

Top-Down approach first breaks down the problem into several large parts. Each of these parts is, in
turn, divided into sections. The sections are subdivided, and so on. The important feature is that details
are deferred as long as possible as we move from a general to a specific solution. For example to write a
book an author first determines the main theme and the major subthemes. Next, the chapter topics can
be identified, followed by section and subsection topics. Outlines can be produced and further refined
for each subsection. At some point the author is ready to add detail-to actually begin writing sentences.

Miller’s proposed the 7 +/- 2 chunks of data rule. One works by

  Analyzing the problem and trying to identify the outlines of a solution and the pros and cons of
each possibility;
 Then, designing the top levels first;
 Steering clear of language-specific details;
 Pushing down the details until you get to the lower levels;
 Formalizing each level;
 Verifying each level; and
 Moving to the next lower level to make the next set of refinements. (That is, repeat.)

One continues to refine the solution until it seems as if it would be easier to code than to decompose.
That is, you work until you become impatient at how obvious and easy the design becomes.

The down-side is that you really don’t know when to stop.” It just takes practice.

Bottom-Up

Bottom-Up approach addresses the details first. Invariably it is the reverse of Top-down approach. After
the detailed components are identified and designed, they are brought together into increasingly
higher-level components. Example of this technique is an author of a cookbook who first writes all the
recipes and then decides how to organize them into sections and chapters.

Starting at the bottom can help overcome challenges of starting at the top.

 Ask yourself, “What do I know that the system needs to do?” This usually involves lower level
I/O operations, other low-level operations on data structures, and so on.
 Identify as many low-level functions and components as you can from that question.
 Identify common aspects of the low-level components and group them together.
 Continue with the next level up, or go back to the top and try again to work down.

Bottom-up assessment usually results in early identification of function routines, which can lead to a
more compact design. It also helps promote reuse – because you are reusing the lower level routines.

On the downside, bottom-up assessment is hard to use exclusively – you always end up switching to a
top-down approach at some point because you find out you can’t put a larger piece of the program
together from the bottom-up.

Stepwise refinements involve alternating between top-down and bottom-up design elements. Top-
down and bottom-up design methodologies can be very complementary.

Functional Decomposition

Functional Decomposition approaches encourage programming in logical action units, called functions.
The main module of the design becomes the main program (main function), and subsections developed
into functions. This hierarchy of tasks forms the basis for functional decomposition, with the main
program or function controlling the processing. The general function of the method is continually
divided into sub functions until the level of detail is considered fine enough to code. Functional
Decomposition is top-down stepwise refinement with an emphasis on functionality.
Round-Trip Gestalt Design

The term is used to define the stepwise refinement approach to object-oriented design suggested by
Grady Booch (Pro Object-Oriented movement). First tangible items and events in the problem domain
are identified ad assigned to candidate classes and objects. Next, the external properties and
relationships of these classes and objects are defined. Finally, the internal details are addressed; unless
these are trivial, the designer must return to the first step for another round of design. This approach
entails top-down stepwise refinement with an emphasis on objects and data.

Requirements for Next Class:

Software: MATLAB and Microsoft Visual Studio Express Edition 2008 (or Higher)
Venue:???
Reference

 John Dooley, Software Development and Professional Practice Copyright, Publisher Apress
 Ian Sommerville, Software Engineering Ninth Edition, Publisher Addison-Wesley
 Grady Booch, Object Oriented Design with Applications (Benjamin Cummings, 1991)
 Wirth, N. “Program Development by Stepwise Refinement.” CACM 14(4): 221-227. (1971)
 Miller, G. A. “The magical number seven, plus or minus two: Some limits on our capacity for
processing information.” Psychological Review 63: 81-97. (1956)
 Tobin A. Driscoll, Learning MATLAB 2009. The Society for Industrial and Applied Mathematics (SIAM).
 Joseph V. Tranquillo, MATLAB for Engineering and the Life Sciences 2011, Morgan & Claypool
Publishers
 Nell Dale, C++ Plus Data Structures Third Edition, Jones and Bartlett Publishers, 2003
 Debbie Stone, Caroline Jarrett, Mark Woodroffe and Shailey Minocha, User Interface Design and
Evaluation, Morgan Kaufmann Publishers, 2005.