Tài liệu Module 11: Designing the Presentation Layer pdf

Module 11: Designing the Presentation
Layer


384

Module 11: Designing the Presentation Layer

Module Overview

Module 12: Introduction to
Functional Specifications
Module 11: Designing the
Presentation Layer

Module 1: Course Overview

Module 10: Completing the
Physical Design

Designing Business
Solutions

Module 9: Designing Solutions with
Microsoft Technologies
Module 8: Solution Design and the
Component Object Model
Module 7: Selecting Solution
Technologies

Module 2: Solution Design Using

the MSF
Module 3: A Services-Based
Approach to Solution Design
Module 4: Business Solution
Conceptual Design

Module 5: Business Solution
Logical Design

Module 6: Beginning Physical
Design

Application
Presentation Layer
User Interface
Design Basics

Review
Activity 11.4: User Services
Design

Module 11:
Designing the
Presentation Layer

User Interface Design
Process

User Services
Design Basics

Activity 11.3: User Interface
Technology Selection

Activity 11.1: Experience
with User Interfaces

Activity 11.2: Creating an
Initial User Interface Design
Selecting the Client
Environment


Module 11: Designing the Presentation Layer

385

! Overview
Slide Objective

To provide an overview of
the module topics and
objectives.

"

Application Presentation Layer

"

User Interface Design Basics

"

User Interface Design Process

"

Activity 11.2: Creating an Initial User Interface Design

"

Selecting the Client Environment

"

Activity 11.3: User Interface Technology Selection

"

User Services Design Basics

"

Activity 11.4: User Services Design

"

Review
In this module...
In this module...

In previous modules, you learned the process of designing a business solution,
stepping through conceptual, logical, and physical phases. However, the design
of any system is not complete without a way for users to interact with that
system. That user interaction takes place through the application’s presentation
layer.
In this module, you will learn about designing the presentation layer of an
application. You will also learn about the two pieces of the presentation layer —
the user interface (UI) and the user services — and how to design them.
After completing this module, you will be able to:
"

Determine the appropriate user interface metaphors for the business
solution.

"

Design a user interface that accommodates user needs and business
requirements.

"

Create an initial design of a user interface.

"

Identify the methods of providing feedback to users.

"

Identify the methods of providing user assistance.

"

Identify the technology options and considerations for the client
environment.

"

Determine the user services — validation, navigation, and error processing
— that are required for a user interface of a business system.


386

Module 11: Designing the Presentation Layer

! Application Presentation Layer
Slide Objective

To introduce the section.
"

Purpose of the Presentation Layer

"

Duality of the Presentation Layer

"

Benefits of Presentation Layer Duality

"

Inputs to Presentation Layer Design

In this section...
In this section...

The client side of a business application is represented through a presentation
layer.
In this section, you will learn about the presentation layer of an application,
what is consists of, and how it enables a separation of form from function.


Module 11: Designing the Presentation Layer

387

Purpose of the Presentation Layer
Slide Objective

To introduce students to the
presentation layer and its
purpose.

"

Lead-in

The presentation layer is
what enables users to
interact with a business
system.

Provide access to system features and functionality
$

Human to system (through a user interface)

$

System to system (through user services)

"

Provide navigation, validation, and error processing

"

Communicate with business services

The presentation layer is that part of the business application that provides a
communication mechanism between the user and the business service layer of
the system.
There are two types of users to consider. Human users require an interface
through which they can interact with the system. But other computer systems
can also be considered users. Although these systems do not require a user
interface, they do require an intermediary to the system with which they want to

interact. This intermediary is the user services layer.
Whereas a user interface provides visual and tactile means for humans to
interact with systems, user services provides the navigation, validation, and
error-processing logic. This application logic, designed and implemented as
Component Object Model (COM) components, can be called from either the
user interface or from other systems.


388

Module 11: Designing the Presentation Layer

Duality of the Presentation Layer
Slide Objective

To identify the composition
of the presentation layer.

Presentation layer
www.companyname.com
www.companyname.com

Data
services

www.companyname.com

Lead-in

Business

services

www.companyname.com

The presentation layer is
composed of two distinct
pieces, each with a different
purpose.
"

User interface
$

Delivery Tip

This slide relates the
Windows DNA terminology
to the services-based
approach used in this
course.

What the user
sees and
interacts with

"

User services
$

The application
logic that
provides access
to system
features and
functionality

Data
store

The presentation layer has two parts, the user interface and the user services.
The user interface is how users interact with the system. To users, the user
interface often is the system. If the user interface is not usable, then users say
that the system does not work.
The user services contain the application logic that enables the user interface to
access the business system functionality. The user services are also the entry
points used by external systems to access the features and functionality of the
system.


Module 11: Designing the Presentation Layer

389

Benefits of Presentation Layer Duality
Slide Objective

To present the basics of the
presentation layer,
especially the separation of

the user interface from user
services.

"

Separates the form from the functionality

"

Facilitates parallel design and development of user
interface and services

"

Leverages available design and development skills

"

Enables changing the user services logic without
changing the user interface

Lead-in

The division of the
presentation layer into two
parts provides benefits to
the solution designer and
developer.

In the same manner that the COM specification requires separating interface

from implementation, the presentation layer separates form from function by
separating the user interface from the user services.
One of the benefits of this separation is that the user interface can be designed
and developed by a different team than the user services. Additionally, the most
appropriate tools can then be used to develop the user interface and user
services.
The parallelism of design and development enables the optimal use of available
skills. The design of the user interface requires knowledge of usability, and the
design of the user services requires knowledge of COM component
development practices.
Also — like all modular designs — the logic of the user services components can
be changed without changing the user interface.


390

Module 11: Designing the Presentation Layer

Inputs to Presentation Layer Design
Slide Objective

To connect the presentation
layer design to the outputs
of conceptual design.

Lead-in

The inputs to the
presentation layer design
are typically the outputs of

conceptual design.

"

Solution requirements and constraints

"

Future-state usage scenarios

"

Workflow models

"

User profiles

"

Task descriptions

"

User’s terminology and concepts

The inputs to the design of the presentation layer enable you to create an
effective communication mechanism between users and the business services
layer of the system. The information that you researched, analyzed, and
optimized during the conceptual design phase has provided the inputs for the

design of the presentation layer.


Module 11: Designing the Presentation Layer

391

! User Interface Design Basics
Slide Objective

To introduce the section.

"

Types of User Interfaces

"

Goals of User Interface Design

"

Designer’s Questions

"

Activity 11.1: Experience with User Interfaces

"

User Interface Metaphors and Elements

"

User Assistance Options

"

Characteristics of a Well-Designed
User Interface

"

Example: A Well-Designed User Interface

In this section...
In this section...

The first area of the presentation layer that you will learn about is the user
interface. In some ways, this interface could be considered the most important
part of the business system because to most users, it is the system. A welldesigned user interface helps drive the success and acceptance of a business
system.
In this section, you will learn about the basics of user interface design,
including the different types of user interfaces, the goals of the design process,
and the characteristics of a good user interface design.


392

Module 11: Designing the Presentation Layer

Types of User Interfaces
Slide Objective

To present some of the
options for user interfaces.

"

Lead-in

Outputs
$

Paper

$

"

Monitor

$

There are two types of user
interfaces, outputs and
inputs.

Speech

Inputs
$

Keyboard

$

Pointing device

$

Speech

The typical perception of a user interface is what appears on the computer’s
monitor when a user starts a business application. However, the user interface is
really any input or output of the system with which a user interacts.
There are many possible types of user interfaces available, and advancing
technology is constantly increasing the options.
Some inputs and outputs less commonly viewed as user interfaces include:
"

Monitors, such as those displaying airline flight arrivals and departures.

"

Paper-based output, such as invoices, catalogs, and reports.

"

Specialized hardware devices, such as barcode scanners.

"

Image-capturing devices, such as scanners, digital cameras, and graphics
tablets.

"

Accessibility devices.

When designing the user interface of a system, consider the user needs and
future-state usage scenarios of the solution design.
Note The focus of this module is on designing graphical user interfaces (GUIs)
to business computer systems. However, the principles and guidelines presented
will apply to any user interface design.


Module 11: Designing the Presentation Layer

393

Goals of User Interface Design
Slide Objective

To present a focus for the
user interface design.

Lead-in

The goals of user interface

design are relatively simple,
and clearly focused on the
user.

"

Provide a good user experience

"

Focus on user needs and workflow

"

Make the system simple to use

"

Include users in the design process

"

Adhere to user interface guidelines and standards

Designing and developing a user interface that provides a good user experience
requires a knowledge and understanding of the users’ needs and workflow.
Make sure that the design of the interface implements the users’ tasks in a way
that is simple but not simplistic. This aim is accomplished by including users in
all stages of the design and development of the user interface. Finally, adhering
to accepted guidelines and standards, such as those in The Windows Interface

Guidelines for Software Design, will help you succeed in designing a usable
user interface.


394

Module 11: Designing the Presentation Layer

Designer’s Questions
Slide Objective

To present the questions
that a user interface
designer should ask.

"

How are users going to interact with the system?

"

Does the user interface reflect the concepts and
terminology of the users?

"

Are the appropriate metaphors used in the
design of the user interface?

"

Do the users have the control they require?

"

Can users easily find the features required to
complete common tasks?

"

Is the workflow correct and complete?

"

Does the interface optimize the workflow of the users?

Lead-in

Although it may seem that
user interface design is
trivial, in reality there are
many aspects to consider.

It might seem obvious that a user interface should be designed for the users and
with their input and feedback. However, often the design of the user interface
seems little more than an afterthought.
The success or failure of an application might depend on the user interface. If
users are unhappy with the interface, they see that as a failure of the system.
Designing and developing a user interface that truly caters to users involves
asking user-focused questions and incorporating the answers in your design.

Module 11: Designing the Presentation Layer

395

Activity 11.1: Experience with User Interfaces
Slide Objective

To introduce the activity.

User interfaces are more common than you might think. They are not limited to
computer systems, and are a part of anything with which humans need to
interact. Doorknobs, coffee mugs, and televisions all have user interfaces.
In this activity, you will participate in an instructor-lead discussion about
aspects of user interface design in everyday items.
After completing this activity, you will be able to:
"

Articulate the aspects of user interface design.


396

Module 11: Designing the Presentation Layer

User Interface Metaphors and Elements
Slide Objective

To present the concepts of

interface metaphors and
elements, and the
relationship between them.

"

Interface metaphors
$
$

Lead-in

People frequently use
metaphors to communicate
new ideas. This use of
metaphors is quite evident
in computer applications.

$

"

Real-world analogies that aid in system design and use
Help to structure and organize the
functionality of the system
Reality is the best metaphor!

Food
Menu

Interface elements
$

Implement metaphors

$

Represent the user’s reality in a different medium

$

Enable users to predict system behavior by
building on their existing knowledge

Metaphors enable a business application to imitate the actual business process
by implementing the representation of the artifacts used by the business.
One of the most obvious metaphors in computer applications is the menu. A
menu in a restaurant provides you with a list of available items from which you
can select what you want. When you try to order something that is not
available, the waitperson informs you of that fact and you make another
selection. A computer menu provides the same type of functionality by
providing a list of available and unavailable options from which you can select
what you want.
Using metaphors that represent the artifacts of the business enable you to
present to the user a reality with which they are familiar, but in a different
medium: the computer screen. The following metaphors are often used in a
business environment:
"

Cash registers represent sales in a retail environment.

"

World currencies have standard graphical representations.

"

Pushpins hold a note in place on a corkboard.

Work with users to identify metaphors and their computer representations or
elements. This approach will make the system more usable by building on
users’ existing knowledge of the business. As a result, users will be able to
work by recognizing familiar elements rather than having to memorize specific
steps.


Module 11: Designing the Presentation Layer

397

User Assistance Options
Slide Objective

To illustrate the options for
providing user assistance.

Lead-in

No matter how intuitive a
user interface might be,

users will need some sort of
help at various times in their
use of the system. There
are several ways to provide
user assistance.

Delivery Tip

The images on the slide
represent the variety of
ways to provide user
assistance. The options
external to the system are
books, product support, and
training. Within the
application you can use
ToolTips, the assistant or
agent, and a Help system.

A business system, and its user interface in particular, are expected to have
some means of assisting users in using the system. There are several options for
user assistance, each with benefits and liabilities.
"

Books enable users to search for information they need or to read specific
sections that interest them. However, books are bulky and mobile users are
unlikely to carry them.

"

Product support is a good option when expert help is needed; however, it
can be a costly investment.

"

Instructor-lead training provides users with an opportunity to use a system
in a controlled environment in which the trainer can explain the finer points
of how the system works and why it works the way it does. Training classes
require that users apply or practice what they learn; otherwise, they might
forget critical information.

"

User assistance can also be incorporated into the application. This form of
assistance can help a user with a specific task or with general information
about the system. Online Help systems typically provide users with a search
feature as well. However, these online user assistance systems require a
considerable degree of integration with the application and can occupy
significant amounts of disk space.


398

Module 11: Designing the Presentation Layer

Characteristics of a Well-Designed User Interface
Slide Objective

To present the
characteristics of good user

interface design.

"

Accessible and usable

Lead-in

"

Discoverable and forgiving

"

Direct and intuitive

"

Simple and aesthetic

"

Interactive and responsive

There are several
characteristics that are part
of a well-designed user
interface.

Delivery Tip

The common point of all
these characteristics is that
they focus on the user.

Ultimately, a good user interface is one that users believe is good. To get users
to accept an interface requires that the interface be designed and developed with
the users’ needs and workflow foremost in mind. Users with special needs, such
as physical, visual, or auditory impairments, must be considered in the user
interface design.
The features of a well-designed user interface are discoverable by the user, but
the interface should help the user avoid making errors. In case the user does
make an error, it should be easy for the user to recover and correct the error.
A direct and intuitive interface uses metaphors to enable users to manipulate
representations of real-life artifacts. The users can then work by recognizing the
artifact rather than by trying to remember the name of a particular command.
A simple user interface is easy to learn and easy to use, but it still must provide
access to all of the necessary features and functionality of the system. The
interface designer must balance these somewhat contradictory goals. By
limiting the interface to the information and controls that are necessary, the
visual design is enhanced.
Users appreciate interfaces that provide an appropriate amount of interaction
while letting them stay in control. By providing a variety of ways to accomplish
a task, users can select the technique that best suits them. When a user performs
a task, the system should immediately provide some feedback in response to the
user’s action.


Module 11: Designing the Presentation Layer

399

Example: A Well-Designed User Interface
Slide Objective

To present an example of a
well-designed user
interface.

Lead-in

There are many examples
of well-designed interfaces;
Expedia.com is one of them.

The Fight Wizard in Microsoft® Expedia® provides an example of a user
interface that embodies many characteristics of good design.
The interface is designed with the users’ workflow in mind and provides easy
access to the features and functionality that a user is most likely to need.
As you work through the interface, you will find that it is easy to discover the
information presented, as well as how to perform the tasks you wish. When you
make a mistake — for example, by typing a return date that is earlier than your
departure date — you are informed of the error and how to rectify it. The Flight
Wizard interface also uses common metaphors, such as an icon of a calendar,
that are easy to recognize.
Although the user interface does not appear simple, it clearly presents the
information required and provides access to more detailed information. The use
of colors, boarders, and white space helps make it aesthetically pleasing.
When you perform a task — for example, modifying your search — you are
immediately provided with feedback and an indication that the application is

processing your request.


400

Module 11: Designing the Presentation Layer

! User Interface Design Process
Slide Objective

To introduce the section.
"

Elements of a Visual Design

"

Creating an Initial User Interface Design

"

Creating a Navigation and Flow Map

"

Validating the User Interface Design

"

Providing Feedback to Users

"

Providing User Assistance

"

Deliverables of User Interface Design
In this section...
In this section...

Now that you have learned the basics of designing a user interface, the next step
is to learn about the process.
In this section, you will learn about the process of designing a user interface
and the deliverables of this process.


Module 11: Designing the Presentation Layer

401

Elements of a Visual Design
Slide Objective

"

Window models and standards

"

Menu and toolbar organization

"

To identify the primary
elements of a visual design.

Common controls

Lead-in

Although visual interfaces
are not the only way to
interact with users, they are
the most common,
especially in a graphical
environment such as
Windows.

Delivery Tip

The window models include
a single document interface
(SDI) and a multiple
document interface (MDI)

A GUI is designed around the concepts of windows, menus, toolbars, and
controls. In addition, your design should include the elements that represent the
metaphors and concepts of the users.
Windows provide the environment within which all other elements exist and are

classified by use. Applications will have a primary window in which most
interactivity takes place. Additionally, there may be secondary windows that
allow users to set properties or options, or to provide information or feedback.
Users frequently have to work with more than one type of information at a time.
It is usually best to display the different information in different windows.
There are a few models for managing multiple windows.
Single-document interface (SDI) is used when an application can only handle a
single view of a single set of information. A typical example of an SDI
application is Microsoft Notepad. Using Notepad, you can only open one file at
a time.
Multiple-document interface (MDI) is a technique that uses a single primary
window, or parent, that can contain several child or document windows. An
example of an MDI application is Microsoft Word. You can open several
documents in Word and work on all of them. Some other models for managing
windows are workspaces, workbooks, and projects.
Menus and toolbars list the commands that are available to the user. Menus list
the words for accomplishing a task while toolbars use icons to represent the
tasks.


402

Module 11: Designing the Presentation Layer

Creating an Initial User Interface Design
Slide Objective

Visual representations

To show low- and highfidelity visual

representations of a user
interface design.

Lead-in

Initial user interface designs
can be either a pencil and
paper sketch, or developed
with a prototyping tool.

Delivery Tip

Point out to the students
that they should not hesitate
to sketch on paper and
present it to the users. This
is quite an efficient and
effective way to quickly get
feedback without investing a
lot of time.

High fidelity
Low fidelity

The first part of designing a user interface is creating an initial design that the
users can review. This initial design can be either low fidelity (for example, a
pencil and paper sketch) or high fidelity (for example, prototype created with a
tool such as Microsoft Visual Basic®).
Low fidelity

High fidelity

Shows main features, structure, and
navigation

Detailed screen layouts and interface
elements

Quickly and easily explores alternative
designs

Fairly quick to implement and change, but
requires a computer and software

Great for brainstorming, quick feedback

Provides means to clearly identify design
problems
Typically developed from a low-fidelity
design

By involving the users early in the design process, you mitigate the risk of
design flaws and increase the likelihood of designing an interface that the users
will find acceptable. Consider providing a low-fidelity representation, rather
than a prototype, to the users. This would reinforce that what they are reviewing
is truly a design and that they can have an influence on the ultimate version.
These initial designs should use the metaphors and elements that were agreed
upon with the users. They should also incorporate the terminology and concepts
of the users.

Module 11: Designing the Presentation Layer

403

Creating a Navigation and Flow Map
Slide Objective

To illustrate an example of
an interface navigation and
flow map.

Lead-in

After creating the initial user
interface designs for several
screens, you should show
the users the navigation and
flow from one screen to the
next.

The navigation map for the user interface shows what form is called when user
interface events fire. To keep the focus on the flow of the user interface, do not
yet include field validation or error processing.


404

Module 11: Designing the Presentation Layer

Validating the User Interface Design
Slide Objective

To identify ways of testing
the user interface design.

Lead-in

When the user interface
design is fairly stable, you
should baseline the design
and validate it.

"

Evaluate the metaphors, elements, and controls

"

Use future-state usage scenarios to validate navigation
and flow maps

"

Obtain user validation and consensus

"

Create prototypes and perform usability testing

As part of the design process, you should validate that the user interface is
addressing the requirements of the users. The process of validation involves
evaluating the metaphors selected and the controls and elements used to
represent those metaphors.
The navigation and flow are also validated to ensure that the flow is as
expected. The maps should be compared to the future-state usage scenarios to
confirm that the user interface is able to handle the scenarios.
Finally, validate the design with the users and obtain their agreement (or buyin) that it satisfies their requirements.
The next step would be to create prototypes, of limited functionality, so that the
use interface can be validated in usability tests.


Module 11: Designing the Presentation Layer

405

Providing Feedback to Users
Slide Objective

To illustrate ways of
providing feedback to users.

Lead-in

In addition to the layout of
the user interface, there are
some other aspects that
must be addressed. One of
these is providing feedback
to the users.

"

Cues to the state of an
interface element

"

Cues to what the system
is doing

"

Visual, audio, and tactile

"

Timely and appropriate

After you have obtained consensus on the user interface design with the project
team and the users, you should consider the types of feedback that the interface
should provide to the users.
You should always let the user know the status of the interface, of the elements
of the interface, and of the system action. These cues could be implemented in
three ways. Visual cues include progress bars and the Windows hourglass;
audio cues include the sounds you set for certain events, such as a critical stop;
and tactile cues include the physical movement of the mouse button when you
click.
All cues should be timely, happening immediately after the user’s action. The
cues should also be appropriate for the feedback being presented. Simple

information can be communicated with ToolTips or in the status bar. More
complex information might require a message box.


406

Module 11: Designing the Presentation Layer

Providing User Assistance
Slide Objective

To discuss the ways of
providing online user
assistance.

Slide Objective

Another aspect of the user
interface design that
requires your attention is
how to provide users with
guidance and references
while they are working with
the application.

"

Contextual
$

"

For example: ToolTips

Reference
$

For example: Help menu

User assistance is frequently neglected, or poorly implemented, in computer
applications. There are several options available; online and on-screen displays
are best suited for consideration by the user interface designer.
Online Help refers to any help that is immediately available upon user request
while the user is interacting with the system. This assistance can be installed
with the application, located on a CD, or located on an intranet or the Internet.
The assistance provided can be contextual, relating to the specific field by
which the user is confused, or it can be in reference format, enabling the user to
search for information or to read the Help contents in the order presented.


Module 11: Designing the Presentation Layer

407

Deliverables of User Interface Design
Slide Objective

To list the outputs of the
interface design process.
"

Agreement with users on user interface guidelines,
including metaphors and archetypes (elements)

"

Documented common elements

"

Navigation and flow map

"

Feedback cues identified

"

User assistance design

"

Validated design

The user interface design process produces several deliverables.
The project team, customer, and users should have an agreement on the
guidelines for the design, including the metaphors that are being represented in
the system by elements. The guidelines, and an identification of common
interface elements, should be documented for the development team.
The design should include descriptions of how the interface will provide

appropriate feedback (such as progress bars) and user assistance (such as
ToolTips) to the user.
The design produced should be testable by storyboarding and by comparing it
against the future-state usage scenarios.