Name: Jamera, Queen Bernadeth D.

Score:
Year & Section: BSIT-3B November 20, 2021

DESIGN PHASE: USER INTERFACE DESIGN

Quizzes:
1. Explain three important user interface design principles.
 The authors list six principles of user interface design:
• Layout - the interface should be a series of areas on the screen that are used
consistently for different purposes.
• Content Awareness - the user is always aware of where they are in the system
and what information is being displayed.
• Aesthetics - interfaces should look inviting and should be easy to use.
• User Experience - experiences users prefer ease of use, while inexperienced
users prefer ease of learning.
• Consistency - users can predict what will happen before a function is performed.
• Minimize Effort - interface should be simple to use.

2. What are three fundamental parts of most user interfaces?

 • Navigation mechanism - the way the user gives instructions to the system and
tells it what to do.
• Input mechanism - the way in which the system captures information
• Output mechanism - the way the system provides information to the user or to
other systems.

3. Why is content awareness important?

 Content awareness means that the interface makes the user aware of the
information delivered through the interface with the least amount of user effort.
This is important because if the user is constantly aware of where he is and what
he is seeing, he will find the system much easier to use and his satisfaction will be
high.

4. What is white space, and why is it important?

 White space refers to areas on an interface that are intentionally left blank. The
more white space on an interface, the less dense the information content.

5. Under what circumstances should densities be low? high?

 Low densities are preferred by infrequent or novice users of an interface. These
users will be unfamiliar with the interface and will be helped by having a balance
 of information and white space on the interface. High densities can be acceptable
to experienced users of the interface, because they are highly familiar with the
information on the interface and do not need as much white space to help them
find what they are looking for.

6. How can a system be designed to be used by both experienced and first-time users?
 Experienced users prefer systems that focus on ease of use, while novice users
prefer systems that are easy to learn. These two goals are not necessarily mutually
exclusive. Generally, systems should be set up so that the commonly used
functions can be accessed quickly, pleasing the experienced users. To assist the
novice users, guidance should be readily available, perhaps through the "show
me" functions that demonstrate menus and buttons.

7. Why is consistency in design important? Why can too much consistency cause problems?
 Consistency means that all parts of the same system work in the same way. This
enables the users to predict what will happen because a function in one part of the
system works the same way in other parts of the system. Users will be confident
as they work with different parts of the system if they can predict the behavior of
functions throughout the system. The problem with too much consistency is that
sometimes the users don't differentiate forms or reports that look very similar to
each other, and inadvertently use the wrong one. So, in these cases, there should
be enough unique characteristics to distinguish each form and report from the
others.

8. How can different parts of the interface be consistent?

 The navigation controls can be consistent, using the same icon or command to
trigger an action throughout the system. Terminology can be consistent
throughout the interface.

9. Describe the basic process of user interface design.

 First, identify 'use cases' that describe commonly used patterns of actions that
users will perform. These use cases will be valuable in ensuring that the interface
permits the users to enact these use cases quickly and smoothly. Next, develop the
interface structure diagram, defining the basic structure of the interface (screens,
forms, and reports) and how the interface components connect. Third, develop
interface standards, the basic design elements that will be used throughout the
interface. Fourth, create prototypes of the various interface components
(navigation controls, input screens, output screens, forms, and reports). Finally,
evaluate the prototypes and make changes as needed.

10. What are use scenarios, and why are they important?
 Use cases describe commonly used patterns of actions that users will perform.
Use cases describe how users will interact with the system. Use cases are
 developed for the most common ways of working through the system. These use
cases will be valuable in ensuring that the interface permits the users to enact
these use cases quickly and smoothly.

11. What is an interface structure diagram (ISD), and why is it used?

 An interface structure diagram shows all the screens, forms, and reports in the
system, how they are related, and how the user moves from one to another. The
diagram helps depict the basic components of the interface and how they work
together to provide users the needed functionality. The structure of the interface
depicted in the ISD can be examined using the use cases to see how well the use
cases can be performed. This is an important early step in developing simple paths
through the most common activities performed in the system.

12. Why are interface standards important?

 An interface structure diagram shows all the screens, forms, and reports in the
system, how they are related, and how the user moves from one to another. The
diagram helps depict the basic components of the interface and how they work
together to provide users the needed functionality. The structure of the interface
depicted in the ISD can be examined using the use cases to see how well the use
cases can be performed. This is an important early step in developing simple paths
through the most common activities performed in the system.

13. Explain the purpose and contents of interface metaphors, interface objects, interface
actions, interface icons, and interface templates.
 • The interface metaphor provides a concept from the real world that helps the
user understand the system and how it works. If the user understands the
metaphor being used, he will probably be able to predict where to find things and
how things will work even without actually using the system.
• Interface objects are the fundamental building blocks of the system. Object
names should be based on the most understandable terms.
• Interface actions specify the navigation and command language style and the
grammar of the system. Action terminology is also defined.
• Interface icons are pictures that are used to represent objects and actions in the
system, often shortcuts, that are available throughout the system.
• The interface template defines the general appearance of all screens in the
information system and all forms and reports that are used. The template
consolidates all the other major interface design elements - metaphors, objects,
actions, and icons.

14. Why do we prototype the user interface design?

 Prototyping helps the users and programmers understand how the system will
perform. Prototypes can be very useful in helping the users conceptualize how
 they will actually work with the system, and prototypes can help identify
problems or misconceptions in the interface before it is actually implemented.

15. Compare and contrast the three types of interface design prototypes.
 Storyboards are really just pictures or drawings of the interface and how the
system flows from one interface to another. HTML prototypes are web pages that
show the fundamental parts of the system. Users can interact with the system by
clicking buttons and entering data, moving from page to page to simulate
navigating through the system. Language prototypes create models of the
interface in the actual language that will be used to implement the system. These
will show the user exactly what the interface will look like, which is not possible
with the other two methods.

16. Why is it important to perform an interface evaluation before the system is built?
 An interface assessment is important before the system is built because we need
to do as much as we can to improve the interface design prior to implementation.
It is wasteful to wait until after implementation to evaluate the interface because it
will be expensive to go back and modify the interface at that point.

17. Compare and contrast the four types of interface evaluation.

 These techniques vary in terms of the degree of formality and the amount of user
involvement. Heuristic evaluation involves assessing the interface based on a
checklist of design principles. This assessment is usually performed by team
members, who independently assess the interface and then compare their
assessments. Weaknesses that are common in all the evaluations then point to
areas that need modification. Users are not involved in this process. In a
walkthrough evaluation, the users see the interface at a meeting presentation, and
they are "walked-through" the parts of the interface. The interactive evaluation
can be used when the prototype as been created as an HTML or language
prototype.

18. Under what conditions is heuristic evaluation justified?

 Heuristic evaluation is probably justified in situations where the interface is well
understood. When there is little uncertainly about how the interface should
function, then it is probably sufficient to just assess it internally by comparison to
a checklist of design principles. It would be dangerous to use this technique
(which does not involve users) if there was uncertainty about what should appear
in the interface or how it should function.

19. What type of interface evaluation did you perform in the “Your Turn 9.1”?
 This is an example of heuristic evaluation, since the interface is being compared
to a set of design principles.
20. Describe three basic principles of navigation design.
 • Prevent Mistakes - this principle is directed toward developing the navigation
controls to help the user avoid making mistakes.
• Simplify Recovery from Mistakes - this principle recognizes that mistakes will
happen, and so is directed toward making it as easy as possible to recover from
those mistakes.
• Use Consistent Grammar Order - This principle states that the order of
commands should be consistent throughout the system.

21. How can you prevent mistakes?

 While it is impossible to completely prevent mistakes, there are some things that
will help the user avoid mistakes. First, make sure all commands and actions are
clearly labeled. Limit the number of choices that are presented to the user at one
time to help reduce confusion. Never display a command or action that is
inappropriate for the situation. Also, give users a chance to confirm potentially
destructive actions (such as deleting a record).

22. Explain the differences between object–action order and action–object order.
 Commands given to the system usually follow a sequence of 'specify the object,
then specify the action' or 'specify the action, then specify the object.' This is
referred to as the grammar order of the commands. The designers should select
the grammar order desired for the system and use it consistently.

23. Describe four types of navigation controls.

 • Languages - most often this navigation control refers to a command language, or
a set of specials instructions that are used to instruct the system. In order to
perform a task the user must know the correct command to give the system.
Natural language interfaces free the user to give instructions in everyday
terminology, but these types of systems are not common.
• Menus - this navigation control presents the user with a list of options that can
be performed as needed. Menu structures present the user with an organized set of
commands to apply
• Direct manipulation - this type of navigation control involves working directly
with interface objects, such as dragging a file from one location to another.
• Voice recognition - this navigation control involves giving instructions to the
computer verbally. Some of the systems only recognize certain commands, while
others recognize more natural speech. Progress is being made in this technology,
but it is not yet common in systems.

24. Why are menus the most commonly used navigation control?
 Menus are the most commonly used navigation control because they are much
easier to learn than a language, and they are very simple to work with, enhancing
the ease of use of the system.
25. Compare and contrast four types of menus.
 The menu bar is usually the main menu of the system. It consists of a list of
commands across the top of the screen that is always displayed. The commands
on the menu bar represent the main objects and/or actions of the system, and lead
to other menus. Drop-down menus appear immediately below another menu. A
series of commands are listed, and these lead to direct actions or other menus. The
drop-
down menu disappears after one use. Pop-up menus appear to 'float' on the screen,
usually triggered by a right-click on the mouse. A series of commands that pertain
to the work the users was doing are listed. Pop-up menus are often used to present
an experienced user with shortcuts to common commands. Pop-up menus
disappear after one use. A tab menu is a multi-page menu, each page represented
by a tab on the menu. Each tab represents a set of related actions or settings. The
tab menu will remain on the screen until the user closes it.

26. Under what circumstances would you use a dropdown menu versus a tab menu?
 A drop-down menu is commonly used as the second-level menu, triggered when
one of the main menu options is selected. The drop-down menu lists another set
of more specific commands that will either lead directly to an action or to another,
more detailed menu. The tab menu is chosen whenever the user needs to make
multiple choices (such as specifying several settings) or perform several related
commands. The tab menu stays open until the user has completed making the
choices and closes the menu. Use a tab menu whenever the user needs to do
several related tasks at one time.

27. Describe five types of messages.

 Error messages are displayed when the user has done something that is not
permitted or cannot be carried out. An error message should inform the user why
the attempted action is illegal or incorrect.
Confirmation messages are displayed whenever the user has entered a command
that has major significance and may be destructive (such as shutting down the
system or deleting a record.). The confirmation message is used to force the user
to verify that the action is the correct one.
Acknowledgment messages signify that an action or task is complete. These
messages can be used to ensure that the user knows what the system is doing, but
they can become very annoying if encountered frequently.
Delay messages indicate that the system is performing a task and that the user
should wait until the task is completed. These messages keep the user informed
about the system status, and can be very helpful, especially to novice users who
may not appreciate the time certain tasks require.
Help messages provide the user with additional information, and are an important
 means of giving users instructions and guidance when needed. Even experienced
users will need access to help for rarely used system functions.

28. What are the key factors in designing an error message?

 An error message should first identify the error. Some additional explanation of
the problem is also usually provided. Then, the message should inform the user
how to correct the problem. Finally, a button for user response is usually included
that clears the message off the screen and enables the user to take the corrective
action.

29. What is context-sensitive help? Does your word processor have context-sensitive help?
 Context-sensitive help means that the help system recognizes what the user was
doing when the help was requested, and help specific for that task is displayed.
MS Word does have context-sensitive help.

30. Explain three principles in the design of inputs.

 The most significant input design principle is to capture data as close to its point
of origin as possible. By electronically collecting the data at its point of origin,
time delays are minimized and errors can be reduced.

A second important input design principle is to minimize user keystrokes. Use

source data automation techniques whenever possible. Only ask the user to enter
new data into the system; use reference tables and lookups whenever possible.
When the inputs have known values, use default values check boxes, radio
buttons, or drop-down lists.

Finally, use the appropriate mode of processing (online versus batch) for the
application. Batch applications are generally simpler than online applications, but
have the disadvantage of not updating the databases or files immediately. Online
applications are more complex than batch, but are used when it is necessary to
have immediate update of the databases or files.

31. Compare and contrast batch processing and online processing. Describe one application
that would use batch processing and one that would use online processing.
 Online applications process the entire transaction, including updates to the files or
databases, immediately when the transaction occurs. Batch applications, on the
other hand, accumulate transactions over some time period, then process all
transactions from the batch completely and post them to the files and databases at
one time. An airline reservation system is a classic example of an online system,
since the flight reservation is immediately reflected in the system database.
Payroll systems are commonly batch applications, with payroll transactions
accumulated over the pay period and processed as a batch at one time.
32. Why is capturing data at the source important?
 Capturing data at the source has three advantages. First, it can reduce costs
because work does not have to be duplicated. Second, it reduces delays in
processing. Third, it reduces the likelihood of error.

33. Describe four devices that can be used for source data automation.
 Bar code readers scan bar codes found on products to enter data directly into the
system. Optical character readers can read and enter printed numbers and
text.Magnetic stripe readers enter information from a stripe of magnetic material.
Smart cards contain microprocessors, memory chips, and batteries to maintain
information which then can be read by smart card readers.

34. Describe five types of inputs.

 1- Text boxes are areas defined on the screen where the user enters text. The text
can be a single line or a scrollable region. Text boxes are used whenever the user
needs to enter free-form data.
2- Number boxes are used when the user must enter numeric data.
3- Check boxes are used whenever the user can choose one or more items from a
known list.
4- Radio buttons are used when the user needs to select one choice from a known
set of options.
5- List boxes present the user with a list of items from which one is selected.

35. Compare and contrast check boxes and radio buttons. When would you use one versus
the other?
 Physically, check boxes are usually represented as small squares, and radio
buttons are small circles. Operationally, they are used very differently. Check
boxes are used when the user can select one or more choices from a list of
options. Radio buttons are mutually exclusive. Only one button can be chosen at a
time. Selecting one radio button removes the selection from any button previously
selected. Use radio buttons when you want to force the user to make one choice.
Use check boxes when the user can select multiple items from the list.

36. Compare and contrast on-screen list boxes and dropdown list boxes. When would you use
one versus the other?
 On-screen list boxes present the user with a list of choices that are always
displayed. A drop-down list box displays the list of choices as needed. Generally,
there is not enough screen space to use on-screen list boxes unless the list is quite
short. Therefore, the drop-down list box is used to display longer lists temporarily
and then disappear from the screen after the choice is made. The amount of
available screen space dictates which type of list box will be used.
37. Why is input validation important?
 Input is validated in order to try and reduce the amount of erroneous data that is
entered into the system. Clearly, the quality of the information that comes out of a
system is dependent on the quality of the input data. Therefore, we must do as
much as is reasonable to assure high quality data is input in the system. The
various techniques of data validation help us do that.

38. Describe five types of input validation methods.

 Completeness checks are performed to verify that all required data items have
been entered. In some cases, data is optional in a transaction. However, when
specific data is required, a completeness check will ensure that something is
entered in every required field
Format checks are used when a particular data format is expected in the field and
can be verified.
Range checks are commonly used when a numeric item falls within some
expected range of values.
A check digit check is used to validate numeric code fields. In these situations, an
algorithm establishes a check digit for each occurrence of the numeric code.
Whenever a numeric code is re-entered into the system its check digit is
recalculated. If the calculated check digit does not match the expected check digit,
there has probably been a data entry error in the code, and it needs to be re-
entered.

39. Explain three principles in the design of outputs.

 First, it is important to understand how the report will be used. It is not enough
just to know what data should appear on the report. The report designer needs to
know how the user will utilize the report; what sequence or sorting arrangement is
needed, what subtotals are needed, when the information is needed, etc. Second,
the report design needs to manage the information load presented in the report. A
report that dumps in 'everything but the kitchen sink' will probably not be useful
to the recipient. Have the user specify the question(s) he wants to answer by using
the report, and then provide just the information needed to answer those
questions. Third, avoid presenting the information in a biased way. Bias can be
unintentional, so carefully assess choices made on information sorting or
structuring graphical outputs.

40. Describe five types of outputs.

 Detail reports are reports that only list detailed information about a few items.
Detail reports are designed for situations where complete information is sought.
Summary reports list summarized information about a large number of items.
Exception reports list information only about items that meet some predefined
criterion (e.g., accounts over 30 days past due).
 Turnaround documents provide information about some system output (e.g., a
bill), but also include a section that will re-enter the system as an input (e.g., a
payment coupon).
A graph is a depiction of numerical relationships using a two or three dimensional
chart

41. When would you use electronic reports rather than paper reports, and vice versa?
 Paper reports have the advantage of being permanent, easy to use, and portable (if
they are small). Paper reports do not require the presence of a computer in order
to be used. A report should be printed on paper if its content is fairly static and if
it needs to be taken from place to place to be used, and computers are not readily
available. Electronic reports store the reports on servers so that they can be readily
viewed from any computer. Electronic reports are so inexpensive that often many
variations of the reports are created. Users can refer to the reports online or print
them locally as needed. It is generally advantageous and less costly for users to
print reports locally as needed rather than printing all reports centrally.

42. What do you think are three common mistakes that novice analysts make in interface
design?
 • Failing to focus on the most common paths through the interface
• Making the interface too crowded
• Failing to think about whether the primary users of the system are casual,
occasional users or frequent, experienced users
• Being inconsistent from one place in the interface to another in terms of
standard design features and terminology

43. How would you improve the form in Fig. 9-4?

 A user who has not seen this form before and does not know how it is used will
find it difficult to make suggestions for improvement. The form is very dense,
however, and so it might be useful to segment it into two pages that are logical
subsets of the form content. Each page could be much less dense and therefore
easier to use.
Performance Task: Exercise A-P
A. Develop two use scenarios for a Web site that sells some retail products (e.g., books,
music, clothes).
Answer:

Use Scenario 1: Shopper looks for specific item

1. User searches for specific item
2. User looks at price and description to ensure the item is the one wanted
3. User places the item in the shopping cart
4. User will want to complete the purchase by checking out; or will go on to look for
other specific item.

Use Scenario 2: Shopper looks an item for sale

1. User goes to sale area on the web site
2. User looks browses through the sale items, reading descriptions of many
3. User place item(s) in shopping cart or may just
4. User will want to complete the purchase by checking out; pr will go on to look for
other items.
 B. Draw an ISD for a Web site that sells some retail products (e.g., books, music,
clothes).
Answer:
 C. Describe the primary components of the interface standards for a Web site that sells
some retail products (metaphors, objects, actions, icons, and templates)
Answer:

Metaphor > store with shopping cart

Objects > shopping cart, major classes of goods that are
sold such as books
Actions > browse, select, purchase, modify and checkout
Icons > small image of shopping cart used for the shopping
cart
Template > navigation area and status area at top of screen;
shopping cart in upper right corner; body of screen is the
work area.

D. Develop two use scenarios for the DFD in exercise C in Chapter 5.

Answer:

Use Scenario 1: Maintain Department Course Offering

1. User request course offering list
2. User obtains new course information and creates new course record
3. User obtains course number for course to be deleted
4. User obtains course number for course to be modified

Use Scenario 2: Maintain Student Enrollment

1. Student request list of available courses. Lists of available courses is generated.
2. Students adds course to current schedule. Fee payment status in checked is total hours
enrolled is checked. If okay, course is added to student scheduled.
3. Students removes course from scheduled.
 4. Student reviews current scheduled courses

E. Draw an ISD for the DFD in exercise C in Chapter 5.

Answer:
 F. Develop the interface standards (omitting the interface template) for the DFD in
exercise C in Chapter 5.
Answer:

Interface Standards – University Registration System

Interface Metaphor: Any university system requirement
maintenance of student records, course offerings.
Interface Objects: Students – anyone who wants to register
for a course
Staff – anyone who wants to
add/delete /modify a course
- anyone who wants to view course report
Interface Actions: Find – display existing student schedule
Find – display current course listing
Retrieve – display current course
availability
Schedule – confirm course registration

G. Develop two use scenarios for the DFD in exercise E in Chapter 5.

Answer:
Use Scenario 1: New Customer Rents Video
1. New customer present video to rent
2. User obtains customer information and enter in a system. AVS card is issue to
customer.
3. Video rental is processed.

Use Scenario 2: Customer Rents Video

1. Customer presents video to rent and AVS card
2. User enters customer ID from AVS card in system. Customer has unpaid fine. User
collects fine from customer and enters payment in system.
3. User checks to be sure all overdue videos rented to customer are returned.
4. User process video rental
 H. Develop the interface standards (omitting the interface template) for the DFD in
exercise E in Chapter 5.
Answer:
Interface Standard: A video store system
Interface Metaphor: Video rental store
Interface Objects: Customers – people who rent videos
Videos – Videos available to rent
Rented video – video rented to a
customer
Overdue video – video that was not
returned within its rental period
Fine – charge assessed for late, damaged
or lost videos
 I. Design an interface template for Exercise E.

J. Draw an ISD for the DFD in Exercise E in Chapter 5.

Answer for I & J:
K. Design a storyboard for Exercise E in Chapter 5.
Answer:

L. Develop an HTML, prototype for Exercise E in this chapter.

M. Develop an HTML prototype for Exercise F in this chapter.
Answer:
 N. Develop the interface standards (omitting the interface template) for the DFD in
Exercise I in Chapter 5.
Answer:

Interface Standards: Library Lending System – checking out

and returning books
Interface Objects: Books – titles held by library
Borrowers – person who borrow books from
library
Borrowed books – title checked by
borrower
Fine – charge assessed for book not
returned within lending period
Special Fine – charged assessed for
damaging or losing book
Interface Actions: Screen- verify that borrower has no
outstanding fines before checking out
new books
Check out – borrower takes book for the
lending period
Mark overdue – record expiration of
lending term for book
Assess fine – fine is added to
borrower’s record for overdue book
Collect fine – fine is collected from
borrower and removes from borrower
records
Interface Icons: Use University Logo on Screen; buttons
should look like books
O. Draw an ISD for the DFD in Exercise I in Chapter 5.
Answer:
P. Design a storyboard for Exercise I in Chapter 5.
Answer: