cs413_design03.ppt

CS413

Design

Object-oriented (OO) graphical user interface (GUI) design model

object oriented framework concise description of complex information items

specification of complex navigation patternsinterface transformations

OO methods

low-tech materialsHi-tech software not required

hi-tech SoftwareLarge applicationsCritical applications (aerospace)

iterative usability testinginternal module testingtesting between modelstesting of system as a whole

Design a GUI

conform to multiple GUI platform stylescommon look and feel for visitor conformabilityease of maintenanceease of enhancements

cs413_design03.ppt

CS413

Designer

1. turn user data into a task flow

2. taskflow into a GUI design

2a. mapping taskflow into abstract task objects

2b. mapping the task objects into GUI objects(such as windows)

3. fill in the GUI's foundation(such as the menus)

cs413_design03.ppt

CS413

1. User Data(requirements)

2. Taskflow

1

2a. Task objects

(high level)

2b. GUI objects

(windows)

3. Foundation

(menus)Abcdef ghijk lmnopAbcdef lmnop

ghijk lmnop

cs413_design03.ppt

CS413

"A well-designed application is important because business owners understand that how a website functions will either create repeat customers or discourage customers from visiting the site. It is essential that a website is easy to navigate and that it functions in an efficient manner. It is also important for a business to be able to correct problems with the system quickly, which will prevent the loss of customers and profits. As a result of the demands that are placed on business to have an efficient website a precise software production process is needed.

(Abrahão, Fons, Pastor 2000, 2) "

cs413_design03.ppt

SUMMARY

well-designed application depends uponhow a website functions

GOALS: create repeat customersdo not discourage customers from visiting

easy to navigatefunctions in an efficient mannercorrect problems quicklyprevent the loss of customers and profits

For an efficient website a precise software production process is needed.

CS413

cs413_design03.ppt

CS413Terminology

Data Design

expressing and referencing data elements, classes, and categories

Data Elements and Data Classes

data element: a single data entity(such  as a last name or phone number)

correspond to a specific piece of informationrepresent streams of data

(such as a user's click stream)

data class: a named set of data elements and/or other data classesinherit the data elements from all classes

they contain

base set: well known data classesneither user nor service can change a base data

classallows for a common understanding between user

agent and servicesimplify the negotiation process between user and

designer

cs413_design03.ppt

CS413

result set: a set of data elements sent by a user agent to the service as a result of a request

Result sets contain traditional value pairs wherein one half of the pair describes the value and the other is the value itself

http://www.pifergolf.com/ contact page

<form method="post“ action="contactformasp.asp">

<input name="emailaddress" type="text" size=25>

Result set: emailaddress.morris.fulcher@baker.edu

<textarea name="textdata" rows=6 cols=45 wrap></textarea>

Result set: textdata.”what ever the visitor typed”

<input type="checkbox" name="newgolfcart" value="yes">

Result set: newgolfcart.yes or newgolfcart.no

<input type="submit" value="Submit">

<input type="reset" value="Clear/Reset">

</form>

cs413_design03.ppt

CS413

Data Categories

data category:

a quality of a data element or class

a hint to the designer

regarding the type of an unrecognized data element

regarding the sensitivity of an unrecognized data element

describe the characteristics of a data element

set/identify user preferences

Example: a data element shoe_size. Demographic data. User preferences, relative to the data element, can be identified, monitored and tracked.

cs413_design03.ppt

CS413

A scenario is a partial description of the application behavior that occurs at a given moment

Desired properties of object orientated design extensibility

reusability

understandability

robustness

portability

efficiency

cs413_design03.ppt

CS413

World Wide Web Consortium (W3C):

lead the World Wide Web to its full potential by developing common protocols that promote its evolution and ensure its interoperability

.Object Oriented Hypermedia Design Model.

cs413_design03.ppt

CS413

Graphical User Interface

Ensure usability in Human-computer Interaction

• User Interface

Thousands of colorsThree-dimensional (3-D) graphicsIconsButtonsInput areas (text, numeric)Animation

The first thing people discuss

To users, the interface is the system

Communication wit the system is at least as important as the computations and manipulations of the system

• Current system problems (or are they?)

The system is down (banks)User misses a screen (airline tickets)Computer won’t let me . . (restaurant – separate checks)The computer is wrong . . . (incorrect information)It’s already in the computer, I’ll never get it figured out …

What is the problem?

cs413_design03.ppt

Graphical User Interface Goals

To the user: usability has become a key issue

Developer Perspective

Ensuring usability has become (finally) an important issueOver 48% of code is to support the user interface

Historical PerspectiveThe user interface is not an integral part of the systemThe user interface is just a box to and from a userThe important areas are the system functions (code)

Reality

The user interface development is an integral part of the overall software engineering process

Cost Factors

Companies are more aware of interface issuesThe interface usability can be costly

Software purchaseHardware purchaseEmployee time

Learning curveFrustration curveProductivity

cs413_design03.ppt

Cost Factors

Companies are more aware of interface issuesThe interface usability can be costly

Software purchaseHardware purchaseEmployee time

Learning curveFrustration curveProductivity

Fighting with the systemRecovering from errors

Initial cost of the system is a one time eventEmployee expenses are daily occurrences

Applications

InternetBusiness (airlines to restaurants)SpreadsheetsWord ProcessorsRealistic computer games

cs413_design03.ppt

What is Usability?

User friendly?

Hassle-free productivity?

User-oriented characteristics for usability

• Ease of learning (learning curve)

• High speed of user task performance

• Low user error rate

• Subjective user satisfaction

• User retention over time (learning curve)

Usability is:

The users effectiveness with the interface

The users efficiency with the interface

The users reaction to the interface

cs413_design03.ppt

Human Design Issues

Programmers viewpoint

WidgetsInteractions (programs, modules, etc.)Calls to modulesEverything to build a user interface

(techie stuff)

FACT: anyone can design a user interface!

“This can’t be hard; it’s just common sense”

Designers and ManagersDo not believe there is a problem

Product planners and marketingLow importance issue

Provides “sales sizzle”

cs413_design03.ppt

Mistakes as Positive Signs

“The system has to be good, it sells so well.”“The marketplace is showing a great deal of interest”

It may be the only product of it’s kindIt may be prolific in the marketplace (Microsoft)

“We aren’t hearing any complaints about the interface”

Some users simply won’t complainUsers may think the problem is their usage abilities

Cost Benefit Analysis

The purchaser may not be the userA large gap between purchaser and user

Insufficient information to the purchaser

cs413_design03.ppt

Characteristics of why interfaces fail

• Designed by software people, not human-computer interactions specialists

• Developed by strict top-down, functional decomposition

• Not developed to meet written, measurable usability specifications

• Not prototyped while being developed

• Not developed with an iterative refinement process

• Not empirically evaluated

cs413_design03.ppt

Human-computer interaction (HCI)

When a human user and a computer system get together to perform tasks

Interaction Component

• How a user interface works

• The interface “look and feel”

• Behavior in response to what a user sees and hears and does

Interface Software

The means for implementing the code

Interaction DevelopmentDevelopment of the interaction component

Software DevelopmentDevelopment of the interface software

Development of the user interface

cs413_design03.ppt

Behavioral and Constructional Domains

Behavioral DomainInteraction ComponentThe people who design and develop the interaction

componentInteraction is described abstractly

Behavior of the userInteractions between user and computer

Involve:Human factors, guidelines and rules, human cognitive limitations, graphic design, interaction styles, scenarios, usability specifications, rapid prototyping, evaluation with human users

Constructional DomainDevelopment ComponentThe people who design and develop the interaction

softwareInvolve:

Widgets, algorithms, programming, procedure libraries, control and data flow, state transition diagrams, event handlers, object-oriented representations

Problem: The domains have requirements that do not overlap

Result: interfaces of varying quality and usability

cs413_design03.ppt

The merged results of both behavioral and constructional designs determines interface usability.

Problem

The domains have requirements that do not overlap

Result

Interfaces of varying quality and usability

cs413_design03.ppt

Comparing Behavioral and Constructional Domains

Behavioral Constructional

What is being developed

Interaction component of interface

Interface software

What view is adopted

View of the user View of the system

What is described User actions, perceptions, and tasks

System actions in response to what the user does

What is involved Human factors, scenarios, detailed representations, usability specifications, evaluation

Algorithms, data structures, widgets, programming

The local Where interaction designers and evaluators do their work

Where interface software implementers do their work

The test Procedures performed by the user

Procedures performed by the system