MIT Software

Engineering

251
NDMU- 1st
Semester AY 2016-
2017
DESIGNING THE
USER-
INTERFACE
LAYER
OVERVIEW
➤
User interface handle inputs and outputs that involve the
system user directly
Design inputs and outputs involve for each use case
➤ (HCI) can be
Interactions with the user and computer
modeled with dialog designs
➤ User- interface design occurs in each iteration
Address only few use cases at a time
IDENTIFYING AND CLASSIFYING INPUTS AND OUTPUTS
➤
Inputs outputs are defined early in order to: Document
key inputs/ outputs in business cases Identify actors
Define triggers and responses in an event table Identify
the system boundary in use case diagrams
Design use case descriptions ad system sequence diagrams Design
the user-interface layer
Define messages in a use case realization
USER VERSUS SYSTEM INTERFACE
➤
System Interface- involves inputs and outputs that
require minimal human intervention
➤ User Interface- require user interaction to produce inputs and
outputs
➤ Most analysts separate the design of both at both
also requires different expertise and technologies
UNDERSTANDING THE USER INTERFACE
➤
To the end user, the user interface is the system itself
Physical devices, parts or documents
perceptual aspects including seeing, hearing and touching
Conceptual details about how to use the system
-called the user’s model
➤
HCI (human-computer interaction) studies end users
and their interactions with computers
PHYSICAL, PERCEPTUAL AND CONCEPTUAL ASPECTS
OF UI
USER-CENTERED DESIGN
➤
Technique that places users at center of the
development process
Focus early on users and their work: understand user styles and
preference
Evaluate designs to ensure usability: ease of learning
and use dependent on type of user
Use iterative development: continually return to
user requirements and evaluating the system
HUMAN-COMPUTER INTERACTION AS A FIELD OF
STUDY
➤
Evolved from human factor engineering (ergonomics) Important
➤
contribution by Xerox
Worked on the usability of machines
Research at Xerox PACR led t o first language
OO (Smalltalk)
First personal computer with GUI (Xerox Star)
➤ Dependent on several discipline
THE FIELDS CONTRIBUTING TO THE STUDY OF HCI
METAPHORS FOR HUMAN COMPUTER INTERACTION
➤ Desktop
Interaction with screen that includes objects
display commonly found on
➤
a desk
Document
ent eri ng dat a on el ect roni c
Invol ves browsi ng
documents
and using hypertext and hypermedia
➤
Dialog
Carrying on a conversation with the computer by
sending and receiving messages
DESKTOP METAPHOR BASED ON DIRECT
MANIPULATION
DOCUMENT METAPHOR SHOWN AS HYPERMEDIA IN A
WEB BROWSER
DIALOG METAPHOR EXPRESSES THE CONCEPT THAT USER AND COMPUTER INTERACT BY
SENDING MESSAGES
GUIDELINES FOR DESIGNING USER INTERFACE
➤
Interface design guidelines must be followed for the interface
of any system
➤
Two key principles (from HCI researcher Donald Norman)
Visibility
-All controls should be visible and provide
immediate feedback to users
Affordance
-Appearance of any control should suggest its functionality
8 GOLDEN RULES FOR DESIGNING INTERACTIVE
INTERFACES
DOCUMENTN
I G DIALOG DESIGNS
➤
Inputs and outputs are obtained from use cases and use case
scenarios
➤ M enus refl ect t he overal l syst em st ruct ure from
t he standpoint of the user
Each subsystem might be represented as a menu, with each
menu option representing a use case
Menus might have several versions based on user type
Menus should also include options that are not
based on use cases (i.e., system controls, user help)
DIALOGS AND STORYBOARDS
➤
Several options for documenting dialogs ( no de
facto standards exist)
List the key steps for each dialog with description of what
the user and computer do at each step
Write out a human and computer conversation
-used for complicated and uncertain requests
Use storyboarding to show a sequence of sketches
of a display screen during a dialog
-initial design can be a general framework
SAMPLE STORYBOARD
DIALOG DOCUMENTATION WITH UML DIAGRAMS
➤
Use case descriptions show a list of steps followed as a
user and computer interact
➤ Activity diagram document a user-computer dialog for
each use case
➤ SSDs describe sequential actor-computer messages
➤ Class diagram add user-interface classes for forms
➤ Detailed sequence diagram show users interacting
with specific objects in forms
SEQUENCE DIAGRAM FOR LOOK UP ITEM AVAILABILITY WITH PRODUCT QUERY
FORM ADDED
GUIDELINES FOR DESIGNING WINDOWS AND
BROWSER FORMS
➤
principles the same for Microsoft Windows and
Macintosh environments
➤ Two types of forms
Wi ndows forms are programmed i n a ful l -
feat ured programming language
Browser forms are programmed usi ng ht ml ,
scri pt languages and server-side processing
- Companies can use the same browser form
for both intranet and internet purposes
FORM LAYOUT AND FORMATTING
➤
Prototype various alternatives and allow user to test them to
ensure good layout and ease of use
➤ Design considerations
Consistency of all forms in look and feel
Distribution and order of data-entry fields and buttons
according to tradition
Judicious use of font sizes, highlighting and colors
SAMPLE LAYOUT
DATA KEYING AND DATA ENTRY
➤
Objective: require as little data entry as possible
➤
Text boxes accept keyboard data entry
➤
List boxes contain a list of acceptable entries
Spin boxes display entries in a text box
Combo boxes permit users to enter a new
➤ value
Radio buttons enable the user to select one option
➤ from a group
Check boxes enable the user to select multiple options from a group
EXAMPLES OF DATA ENTRY CONTROLS ON AN
INPUT FORM
NAVIGATION AND SUPPORT CONTROLS
➤
Standard window interface contain controls for navigation and
window manipulation
Maximise, Minimise and Close buttons
Scroll bars
Record selection and record navigation
➤
arrows
Designers should add controls to move screens, close
➤
open windows and to find search
Browser forms also provide navigational and support controls
that application should support
HELP SUPPORT
➤ Tutorials
Assists in training new users
➤ Indexed list of help topics
Invoked through a keyword search or a help wizard
➤ Context-sensitive help
Automatically displays the appropriate help topic based on
the location of the cursor
TEN GOOD DEEDS IN WEB DESIGN
➤
Place organisation’s name and logo on every page and
make the logo a link to the homepage
➤ Provide a search function if the site is more than 100 pages
➤ Write straightforward headlines and page titles
➤ Structure the page to facilitate reading scanning
➤ Use hypertext to structure the content page
…CONTINUED
➤
Use product photos with thumbnails on the primary page
➤
Use relevance-enhanced image reduction
➤
Use link titles to provide users with a link preview
➤
Ensure accessibility for users with disabilities
➤
Do (Design) the same as everyone else
WEBSITE DESIGN PRINCIPLES
➤ Website design include many facets
➤ A website design book by Joel Sklar suggests that
designers should focus on three aspects of web design
1. Designing for the computer medium
2. Designing the whole site
3. Designing for the user
DESIGNING FOR THE COMPUTER MEDIUM
➤
Craft the look and feel of the pages to take advantage of
the medium
➤ Make the design portable
➤ Design for low bandwidth
➤ Plan for clear presentation
➤
and easy access to
information
Refor mat i nfor mat i on fr om ot her sour ces for
onl i ne presentation
DESIGNING THE WHOLE WEBSITE
➤
Craft the look and feel of the pages to match the impression
desired by the organisation
➤ Create smooth transition between webpages
➤ Layout each page using a grid pattern to provide
visual structure
➤ Leave a reasonable amount of blank space on each
space between groups of information
DESIGNING FOR THE USER
➤ Design for dynamic interaction
➤ Guide the user’s eye to important information
➤ Keep a flat hierarchy
➤ Use hypertext to facilitate navigation
➤ Do not clutter the pages
➤ Design for accessibility for a diverse
group of users
FINAL POINTS
➤ To the user, the user interface is the system
➤ Design the interaction between the user and the
computer (HCI)
➤ Define an overall user interface concept for the system early in
the project
Focus on users and their work
Ensure usability
Apply iterative development
…CONTINUED
➤
Metaphors to describe the user interface
Dialog
Document
Desktop
➤
Interface
guidelines
and standards
Norman’s visibility and affordance guidelines 8
Golden Rules
…CONTINUED
➤ Dialog Design
Identify dialogs based on use cases
Add dialogs and design for cont rols, user
int egrit y preferences and menu hierarchies
Tool s i ncl ude di al ogue, and sequence,
st or yboar ds
collaboration and class diagrams
➤
Form design (window and browser)
Use guidelines for layout, controls and navigation
Web forms require additional guidelines
CONTROLS AND
SECURITY
OVERVIEW
➤ Integrity and security controls protect the system and its data
➤ System interface can have a technical requirements that pose
high risk
High-risk elements designed early in elaboration phase
Low-risk elements designed in construction phase
INTEGRITY CONTROLS
➤
Controls integrated into application and database
➤
Ensures that:
Only appropriate and correct business transactions
Transactions are processed and recorded correctly
Organisational assets are protected
POINTS OF SECURITY AND INTEGRITY CONTROLS
INPUT INTEGRITY CONTROLS
➤ Field combination control
Reviews various combination of fields to ensure
correct data entry
➤ Value limit control
Checks numeric fields for reasonable amounts
➤ Completeness control
Ensures all necessary fields are completed
➤ Data validation control
Ensures that numeric fields with codes
are correct
DATABASE INTEGRITY CONTROLS
➤
Access controls determine who has access to a system and its
data
DBMS can apply controls at a much finer level of
detail than OS
➤ Encryption used for data within the database and for
data transmission
➤ Transaction logs track updates to a database
Discourages fraudulent transactions and provides
recovery mechanism
…CONTINUED
➤
Update controls provide record locking against
multiple updates that conflict/ overwrite each other
➤ Back up and recovery procedures protect the database
from catastrophe
OUTPUT INTEGRITY CONTROLS
➤
Destination controls ensure that output information
is channelled to correct users/ s
➤ System must ensure completeness, accuracy and
correctness of output
INTEGRITY CONTROLS TO PREVENT FRAUD
➤
Three conditions are present in almost all fraud cases
Personal pressure
Rationalisation
Opportunity
➤
Reduce fraud
automated records of money and assets
by having
➤ adequate manual
Almost every system requires some type of integrity control
controls and
FRAUD RISK AND PREVENTION TECHNIQUES

from Dr. Marshall Romney at Bringham Young

University
DESIGNING SECURITY CONTROLS
➤
Security controls are provided by the operating system or
environment to protect the data and processing systems from
malicious attacks
➤ Objectives:
Maintain a stable, functioning operating environment
for users and application system
Protect information and transaction during
transmission outside the organisation