Systems Analysis and Design in a Changing World, sixth edition 7-1

Chapter 7 Designing the User and System Interfaces

Solutions to End-of-Chapter Problems

Review Questions
1. Why is interface design often referred to as dialog design?

The user interface involves communication between the user and the computer, which is much
like a dialog. One of the metaphors for designing the user interface is called the dialog
metaphor.

2. What are the three aspects of the system that make up the user interface for a user?

Physical, perceptual, and conceptual aspects. (p189)

3. What are some examples of the physical, perceptual, and conceptual aspects of the user
interface?

Keyboard, mouse, touch screen, reference manuals, documents, data entry forms.
Data on the screen, shapes, lines, numbers, words, beeps, clicks, menus, dialog boxes, icons,
drawings.
Conceptual aspects of the user interface include everything the user knows about using the
system, including all of the problem domain things in the system the user is manipulating, the
operations that can be performed, and the procedures followed to carry out the operations.

4. What are the four metaphors used to describe human-computer interaction?

Direct manipulation metaphor, desktop metaphor, document metaphor, and dialog metaphor.

5. A desktop on the screen is an example of which of the metaphors used to describe human-
computer interaction?

This started as a direct manipulation metaphor, which over time grew into the desktop metaphor
itself.

6. What type of document allows the user to click a link and jump to another part of the
document?

Hypertext

7. List and briefly describe four guidelines for interface layout and formatting that apply to all
types of user display and input devices. What additional guidelines apply to Web sites/pages and
user interfaces for mobile computing devices?
Systems Analysis and Design in a Changing World, sixth edition 7-2

ConsistencyAll the forms within a system need to have the same look and feel. Consistent
use of function keys, shortcuts, control buttons, color, and layout makes a system much more
useful and professional looking.
Labels and headingsLabels should also be easy to identify and read. A clear, descriptive title
at the top of the interface helps to minimize confusion about a forms use.
Distribution and orderRelated fields are usually placed next to each other and can be grouped
within a box. Tab order should follow the users usual reading order.
Fonts and colorsVariations in font face and size can help users distinguish different parts of
the form, but only a handful of font and size variations should be used for larger screens and as
few as possible should be used for small screens.

Additional guidelines for Web sites and mobile devices include:

Consistency
Performance
Pictures and video display
Users with disabilities
Small screen sizes

8. What is the technique that shows a sequence of sketches of the display screen during a dialog?

Storyboarding

9. What UML diagram can be used to show how the interface objects are plugged in between the
actor and the problem domain classes during a dialog? [This question should have been deleted.]

Sequence diagram and communication diagrams. (See Chapter 11.)

10. What are some of the input controls that can be used to select an item from a list?

List boxes and combo boxes. Radio buttons and check boxes also show lists (or groups).

11. What two types of input controls are included in groups?

Groups are radio buttons and check boxes.

12. What popular analogy is used for direct customer access with a Web site when customers
shop online?

Shopping cart analogy.

13. What does XML stand for? Explain how XML is similar to HTML. Also discuss the
differences between XML and HTML.

XML stands for Extensible Markup Language. It is similar to HTML in that it has tags that are
used to identify groups of elements. It also allows nested tags. However, in XML the tags are
Systems Analysis and Design in a Changing World, sixth edition 7-3

user defined and must be done with another data definition file to define what the tags are and
how they relate to each other.

14. How do you identify the data fields of a system interface by using UML and the object-
oriented approach?

In a system sequence diagram, the parameters on the input messages are the data fields that are
passed into the system (e.g. to the user interface) from the user.

15. What are the different considerations for output screen design and output report design?

Output screens are more dynamic but have limited information available at one time. It is harder to
view multiple pages at the same time with screen output. However, dynamic features, such as drill
down, can be provided so that summary information does not have to stand alone.

Printed output is more permanent. Consequently, it should always include identifying fields, such as
date printed. Because reports are not dynamic, they must be self-contained and include all necessary
information to be understandable.

16. What is meant by drill down? Give an example of how you might use it in a report design.

Drill down means the ability (with online reports or output screens) to select a field and drill
down to show more detail on the data in that field. It is often used on summary reports.
Clicking on a summary amount, for example a yearly total, could open up another window
showing the month by month totals.

17. What is the danger from information overload? What solutions can you think of to avoid it?

Information overload can cause users to miss important facts, such as exception conditions.
Users can also become discouraged when they are unable to find the information they need
within reams of unimportant data.

Solutions generally include identifying the information that is important and highlighting it
using color or graphics, or by visually separating it from the other data.
Systems Analysis and Design in a Changing World, sixth edition 7-4

Problems and Exercises

1. Think of all the software you have used. What are some examples of ease of learning
conflicting with ease of use?

Answers will vary. Students might discuss the difficulty of a multi-level menu selection where a
hot key to go directly to a screen would facilitate ease of use. Students might also mention some
websites, maybe even Amazon, where there is no obvious hot link to another page, so the user
must navigate either with the back button or with a menu hierarchy.

2. Visit some Web sites and then identify all the controls used for navigation and input. Are they
all obvious? Discuss some differences in visibility and affordance among the controls.

Answers will vary. Most sites have good affordance and visibility, but sometimes there will be a
file download or an update to a field that is not obvious that it has completed.

Web sites include many clickable objects. It is hard to tell which objects can be clicked and
which cannot. Many objects do not indicate that they have been clicked. In addition, it is not
always easy to tell what the control doesdoes it go to another part of the current page, to
another page at the site, or to another site altogether?

3. A common maxim for designing a man-machine interface is that it is better to change the
machine than to try to change the human to accommodate the machine. Are there machines (or
systems) that you use in your daily life that have room for improvement? Are the current
generations of Windows PC and Apple Mac as usable as they might be? If not, what
improvements can you suggest? Is the World Wide Web as usable as it might be? If not, what
improvements can you suggest? Are we just beginning to see some breakthroughs in usability, or
have most of the big improvements already been made?

Student solutions will vary (probably wildly).

Some students might want to compare Windows and Mac interfaces with other user interfaces
on physical devices. Some devices for comparison might be:
automobile user interfaces (with GPS, mobile phone, etc.)
home appliances (microwave and other programmable devices)
home entertainment systems (TV, DVRs, DVD players, etc.)

4. Download and install App Inventor from Google. Use it to develop a prototype interface that
implements the storyboard in Figure 7-7.

Student solutions will vary.

5. Evaluate the course registration system at your university. List the basic steps of a users
dialog with the system. What are some of the problems with the system from the perspective of
Systems Analysis and Design in a Changing World, sixth edition 7-5

ease of learning and ease of use? In what ways is the system inflexible? In what ways is needed
information not available? Is too much information provided that distracts from the task at
hand?

Student solutions will vary.

6. Evaluate the online catalog system at your university library. Write a dialog that shows the
interaction between the user and the system. Rewrite the dialog to improve it. Create a
storyboard to show how your design would look and feel.

Student solutions will vary.

7. Find a Web site with direct customer ordering. Browse through some product descriptions and
note the design of the dialog and the Web pages. What do you like and dislike about the design?
Evaluate the Web site based on visibility and affordance. Does the site achieve an optimal balance
between the number of page refreshes and the delay between page refreshes? Would your answer
change if you were using a different computing device, a different network, or accessing the
system at a different time of day?

Student solutions will vary. The instructor might want to suggest some specific company
websites.
Systems Analysis and Design in a Changing World, sixth edition 7-6

Solutions to End-of-Chapter Cases

Case Study: Video Rental Service
Develop a storyboard that encompasses the following sample dialog. The system supports rental
and download of movies or television shows to a computer or digital video recording and
playback device. A dialog between the system and user might follow this pattern:
Systems Analysis and Design in a Changing World, sixth edition 7-7

Running Cases: Community Board of Realtors

One of the key use cases for the multiple listing service system is Create new listing, where the
Realtor enters all the important information about a new listing he or she has obtained.
Consider the information that must be entered when creating a new listing, and list the dialog
steps that are necessary. Keep in mind that when designing for a smartphone, less information can be
entered in each step compared to a full screen Web application. Also keep in mind that typing is error-
prone and awkward for many users, so think about opportunities to use check boxes, radio buttons, and
list boxes to aid selection. Create a storyboard of this use case for a mobile device, showing each step of the
dialog that maximizes the use of check boxes, radio buttons, and list boxes.

Answers will vary: Designing smartphone apps is a whole new endeavor and quite different from
normal browser based apps. The following design is based on one screen to act as a menu screen (what
to do). The second screen allows entry of all the data. It is on one screen which is a scrolling screen
with data entry on entire screen. Again for smartphone apps, there are combinations of screen data
entry, keyboard, Save hot link sometime on the screen, sometimes on the keyboard, and settings
popup menu option.
Systems Analysis and Design in a Changing World, sixth edition 7-8

Running Cases: The Spring Breaks 'R' Us Travel Service

Imagine resort security with a large, wide-screen monitor tracking traveler activities. Design a main
screen that includes multiple locations, paths and roads, traveler location and status, messages traveling
from traveler to traveler, and other features that security should monitor. Create a storyboard that shows
an example of a pop-up alert and a menu of options that security might select after an alert. Should you
also show security the staff members locations and status? How about clicking security staff members to
send them a message? How about clicking a location to turn up the lights or to close a security gate? Be
creative as you think through the design possibilities. You should include four or five screen layouts for the
storyboard.
Student answers will vary. Here is an example of a main screen and four popups.
Systems Analysis and Design in a Changing World, sixth edition 7-9

Running Cases: On the Spot Courier Services

Review the case description and your solution for the Web scenario of the use case Request package
pickup from Chapter 5. Then, using a presentation tool, such as Microsoft PowerPoint or Apple Keynote,
create a storyboard of the Web pages necessary to support the use case. The case description in Chapter 5
also identified a new use case, which we can call View scheduled pickups/deliveries. Based on current
technology, write a dialog showing how this might be supported with a portable digital device. You may
use any current technology that you deem applicable, such as GPS tracking, map and directions software,
and real-time updates of pickup locations. Consider the possibility that the driver may want to get an
overview of his or her stops for the entire run, view the next few stops, or just get directions to the next
stop.
Systems Analysis and Design in a Changing World, sixth edition 7-10

Dialog for Driver and System:

System: What do you what to do?
Driver: Give me the address of the next stop.
System: It is a delivery at this address ----
Driver: How far is that from where I am now?
System: 6.3 miles
Driver: Can you show me the best route to get there?
System: Here is a map showing the shortest route using primary roads. Do you want printed
instructions?
Driver: No
Driver: How many pickups do I have left today?
System: 14
Driver: How many deliveries do I still have?
System: 37
Driver: Show me the next 5
System: Here is a list. Do you want to see a map?
Driver: Yes. Show me a map of the next five stops.
System: OK
Driver: Do you have any new additions that have come in?
System: Yes. There is one new pickup recently received. It will be best to pick it up on the
return trip to the warehouse.
Systems Analysis and Design in a Changing World, sixth edition 7-11

Running Cases: Sandia Medical Devices

No industry group has yet defined XML tags suitable for the RTGM application. Thus, designers must
develop appropriate tags for this application. If you arent already familiar with XML, do at least 30
minutes of background research on the Web. Refer to the class diagram in the Chapter 4 RTGM case to
determine required data content. Then, design XML tags and message formats suitable to transmit time-
stamped glucose levels from the cell phone app to the server and to transmit updated alert conditions from
the server to the cell phone app. If medical personnel choose to send a text message to the patient, how will
the server transmit that message? To help answer that question, research Short Message Service (SMS),
Enhanced Messaging Service (EMS), and SMS gateways.

Glucose Level sample tags

<GlucoseLevelMessage>
<Patient>
<ID>2342394287</ID>
<MedicalRecordNo> 7343-34535-4654 </MedicalRecordNo>
<GlocoseObservation>
<DateTime> 2/22/2013; 22:29:38</DateTime>
<Level> 95 mgl</Level>
</GlocoseObservation>
<SendingCellPhone>
<CellNumber>555-345-5678</CellNumber>
<AppVersion>5.3</AppVersion>
</SendingCellPhone>
</Patient>
</GlucoseLevelMessage>

Return Alert Message

<AlertMessage>
<Patient>
<ID>2342394287</ID>
<MedicalRecordNo> 7343-34535-4654 </MedicalRecordNo>
<LastName>Smith</LastName>
<AlertInformation>
<DateTime> 2/22/2013; 22:29:38</DateTime>
<MessageText>Your glucose level is approaching critical levels at 190 mgl level.
Please take another dosage of medication.
</MessageText>
</AlertInformation>
</Patient>
</AlertMessage>

Messages will be transmitted through normal SMS gateways to send an SMS message to the users cell
phone. The user should open up the app and send a response that the instruction was received.