The World’s Simplest IS 1 Receive Data 2 Present Data Another Entity An Entity D1 Data Store Input Data Output.

Slides:



Advertisements
Similar presentations
Chapter 11 Designing the User Interface
Advertisements

Designing a Graphical User Interface (GUI) 10 IST – Topic 6.
User Interface Structure Design
COMP 3715 Spring 05. Computer Interface Interaction between human and computer Has to deal with two things  User’s mental model Different user has different.
Tailoring Needs Chapter 3. Contents This presentation covers the following: – Design considerations for tailored data-entry screens – Design considerations.
Chapter 11 Designing Effective Output Systems Analysis and Design Kendall & Kendall Sixth Edition © 2005 Pearson Prentice Hall.
PowerPoint Presentation for Dennis, Wixom & Tegarden Systems Analysis and Design Copyright 2001 © John Wiley & Sons, Inc. All rights reserved. Slide 1.
Chapter 7 Using Data Flow Diagrams
PowerPoint Presentation for Dennis, Wixom & Tegarden Systems Analysis and Design Copyright 2001 © John Wiley & Sons, Inc. All rights reserved. Slide 1.
PowerPoint Presentation for Dennis, Wixom & Tegarden Systems Analysis and Design Copyright 2001 © John Wiley & Sons, Inc. All rights reserved. Slide 1.
Interaction Styles Interface Widgets. What are Interaction Styles?  A Collection of interface objects and associated techniques from which an interaction.
Screen guidelines For data entry. Screen Layout for Data Entry Identify screen (name and purpose). Keep number of screens to a minimum. Ensure that all.
Chapter 9 Using Data Flow Diagrams
Irwin/McGraw-Hill Copyright © 2000 The McGraw-Hill Companies. All Rights reserved Whitten Bentley DittmanSYSTEMS ANALYSIS AND DESIGN METHODS5th Edition.
Chapter 2 Web Site Design Principles Principles of Web Design, 4 th Edition.
IMS Lecture 3.2 Introduction to Interface Design IMS Systems Design and Implementation.
Chapter 12 Designing Effective Input
© 2005 by Prentice Hall Chapter 3c Designing Interfaces and Dialogues.
Systems Analysis I Data Flow Diagrams
Chapter 13: Designing the User Interface
User Interface Design Chapter 11. Objectives  Understand several fundamental user interface (UI) design principles.  Understand the process of UI design.
Chapter 12 Designing Interfaces and Dialogues
Input/Output Design User Interface Design
Chapter 9 Collecting Data with Forms. A form on a web page consists of form objects such as text boxes or radio buttons into which users type information.
Chapter 15 Designing Effective Output
Systems Analysis and Design in a Changing World, 6th Edition
System Analysis and Design Analysis vs. Design Stage During requirement analysis stage –What is the problem? –What can be improved? –What does the user.
CORE 2: Information systems and Databases COLLECTING AND DISPLAYING FOR DATABASE SYSTEMS.
14 Chapter 11: Designing the User Interface. 14 Systems Analysis and Design in a Changing World, 3rd Edition 2 Identifying and Classifying Inputs and.
1 WEB Engineering Introduction to Electronic Commerce COMM1Q.
Chapter 7 Using Data Flow Diagrams
CS 4720 Usability and Accessibility CS 4720 – Web & Mobile Systems.
Navigation Sequences Proper navigation Poor navigation Poor Navigation.
Patterns, effective design patterns Describing patterns Types of patterns – Architecture, data, component, interface design, and webapp patterns – Creational,
1 WEB Engineering E-Commerce Strategy & Management COM350.
Click to edit Master subtitle style USABILITY and USER INTERFACE DESIGN Application.
Designing Interface Components. Components Navigation components - the user uses these components to give instructions. Input – Components that are used.
System Analysis and Design
Productivity Programs Common Features and Commands.
Chapter 6: NavigationCopyright © 2004 by Prentice Hall 6. Navigation Design Site-level navigation: making it easy for the user to get around the site Page-level.
PowerPoint Presentation for Dennis, Wixom, & Tegarden Systems Analysis and Design with UML, 3rd Edition Copyright © 2009 John Wiley & Sons, Inc. All rights.
User Interface Structure Design Chapter 11. Key Definitions The user interface defines how the system will interact with external entities The system.
Slide 1 Chapter 11 User Interface Structure Design Chapter 11 Alan Dennis, Barbara Wixom, and David Tegarden John Wiley & Sons, Inc. Slides by Fred Niederman.
 Whether using paper forms or forms on the web, forms are used for gathering information. User enter information into designated areas, or fields. Forms.
Chapter 2 Web Site Design Principles Principles of Web Design, Third Edition.
Interface Design Inputs and outputs –data flows to and from external entities –data flows into and out of processes that are manual or not fully automated.
12.1 CSC 123 Systems Analysis & Design Part IV: The Essentials of Design Chapter 12 Designing Effective Input.
Chapter 2 Web Site Design Principles Principles of Web Design, 4 th Edition.
E.g.: MS-DOS interface. DIR C: /W /A:D will list all the directories in the root directory of drive C in wide list format. Disadvantage is that commands.
1 User Interface Design Components Chapter Key Definitions The navigation mechanism provides the way for users to tell the system what to do The.
User Interface Components Lecture # 5 From: interface-elements.html.
Technical Communication A Practical Approach Chapter 14: Web Pages and Writing for the Web William Sanborn Pfeiffer Kaye Adkins.
Windows layout. During the design process, the individual elements, or building blocks, of screens will have been identified. A logical flow of information.
Chapter 16 Designing Effective Input Systems Analysis and Design Kendall and Kendall Fifth Edition.
Basic Elements.  Design is the process of collecting ideas, and aesthetically arranging and implementing them, guided by certain principles for a specific.
1 CS 501 Spring 2003 CS 501: Software Engineering Lecture 13 Usability 1.
Systems Development Lifecycle
Software Interfaces. Learning Objectives Describe the characteristics of different types of user interfaces. Discuss the types of user interfaces which.
Printed Reports Analysis questions –Who will use the report? –What is the purpose of the report? –When or how often is the report needed? –Where does the.
Copyright © 2009 Pearson Education, Inc. Publishing as Prentice Hall Chapter 8 Designing the Human Interface 8.1.
Unit 4 Outcome 1, Spreadsheet software Organisations and Information Needs, Ch 5.
Designing Effective Input. Design input forms for users of business systems Design engaging input displays for users of information systems Design useful.
DOCUMENTATION REF: Essentials of IT (Hamilton et al) Chapter 1.
Decision Support System by Simulation Model (Ajarn Chat Chuchuen) 1 Chapter 6 User Interface Management.
6. (supplemental) User Interface Design. User Interface Design System users often judge a system by its interface rather than its functionality A poorly.
User Interface Components
User Interface Design Notes are from: Wilson, Software Design and Development The Preliminary Course. Cambridge Press. pp and Fowler,
MBI 630: Week 11 Interface Design
SDLC Phases Systems Design.
Presentation transcript:

The World’s Simplest IS 1 Receive Data 2 Present Data Another Entity An Entity D1 Data Store Input Data Output

A Slightly More Realistic IS Entity AEntity BEntity C 1 Receive Data 2 Present Data Entity D D1 Data Store Input Data Output Entity FEntity E Input Output

What it usually looks like Entity AEntity BEntity C 1 Receive Data n Present Data Entity D D1 Data Store Data Entity FEntity E 2 Process Data 3 Process Data N-1 Process Data... Input Output

Where to start? Two schools of thought: –evolution: start with current system and identify changes –revolution: start from scratch Either way, there are two approaches to modeling: –data-driven - identify relevant data first –process-driven - identify relevant functions first

System Modeling Approaches Data-driven: Develop ER diagram Translate to data stores Fill in processes between data stores Define data flows and external entities Process-driven: Identify major tasks or processes Identify the inputs and outputs to the tasks Translate to processes and data flows Identify data stores and external entities End Result: a Data Flow Diagram

Data Flow Diagrams Context diagram Level 0 diagram Child diagrams Physical diagrams Partitioned physical diagrams Current diagrams Proposed diagrams Analysis Design

Four parts to a system design System architecture Interface design Database design Process design

Elements of the design Entity AEntity B Entity C 1 Receive Data n Present Data Entity D D1 Data Store Data Entity FEntity E 2 Process Data 3 Process Data N-1 Process Data... Interface System Architecture Database Process Output Input

Developing the Design Elements System architecture: set of processes in the Level 0 DFD of the proposed system (functional decomposition of system) Database design: derived from the ER diagram and data stores on the DFD Interface design: determine form and content of all input and output data flows on DFD, as well as overall interface Process (software) design: add logic and timing to all processes on DFD (logic models)

Interface Design Inputs and outputs –data flows to and from external entities –data flows into and out of processes that are manual or not fully automated User interaction –how the user communicates with the system –mechanisms for navigation, feedback, control, security, etc.

I/O Design Issues Audience –What tasks are they doing? –What level of detail do they provide or need? –How technology-literate are they? –How much time will they spend with the input or output? –How often will they provide the input or generate the output?

Media For a given input or output, you must decide whether it should be: –paper or electronic (or something else) accessibility of computers to system users portability expected life expected frequency –on-line or batch timeliness required underlying hardware and support software

Designing Layout Consistency is key! Throughout the system: –use the same colors for the same purposes –use the same highlighting or borders to convey similar meanings –use terminology and acronyms consistently –put similar pieces of information in the same location

Designing Layout (cont.) Color and highlighting –First of all: CONSISTENCY! –Second: Moderation! –Best combination: black on yellow –Worst combination: red on green –Strong techniques such as blinking and audio should only be used in the rarest occasions, and then only temporarily

Designing Layout (cont.) Bias –Your design outlives you! –Sorting - more attention is given to things listed first –Ranges - make sure they’re the right ones –Graphics: color and appropriateness scale user training –User customization - a double-edged sword –User involvement - required

Designing Layout (cont.) Use plenty of white space Plan for screen and page breaks Include administrative information Top to bottom, left to right Use “Submit” and “Clear” buttons

Input Accuracy and Efficiency Layout –top to bottom, left to right –group related items together –separate titles from body from instructions –clear titles and captions –don’t be stingy with white space Eliminate typing –checkboxes, pull-down menus, icons –default values Checking accuracy –check reasonableness of combinations –predefined acceptable values –check for proper format –check for missing values

Assessing Usability Can assess an entire system for usability, or just one form or report User involvement in usability assessment is necessary Some measures: –learning time –user speed –user accuracy –user’s ability to remember system operation –subjective assessments

Interaction Methods Command language - necessary on some older systems, but pretty much outdated Menus - most common at this point –drop-down, pop-up Forms - good if the interaction consists of specific pieces of information Object-based (icons) - intuitive and space- efficient, but can be designed poorly Natural language - not there yet

Conventions When designing the overall user interface, you must decide on some conventions to be used throughout the system, e.g.: –what different colors mean –what certain symbols mean –navigation mechanisms –terminology –artwork and logos

Navigation Always make the next step clear Don’t overly restrict the user’s movement No dead ends Navigation mechanisms should be used consistently Let the user know (or choose) consequences of leaving a form

Dialogue Diagrams Map out the overall user interaction with the system Represents the expected use of the system Doesn’t necessarily capture all possible scenarios Represents the inputs and outputs and the order in which they will be accessed

Dialogue Diagram Example (Perfect Pizza) 0 Main System Screen 1 New Customer Screen 2,0 2 New Order Screen 3,4,0 3 Delivery Instructions 4,0 4 Cook Order 3,0 5 Weekly Sales Report 0

User Feedback Status –always let the user know what’s going on –don’t let “no news be good news” Prompts –tells the user what is expected of them –convey as much guidance as possible within reason Errors and warnings –convey importance –suggest resolutions –be careful of jargon

Providing Help Provide different levels of help Test a lot under realistic conditions Use a variety of terms to help in searching Starting point should always be visible Navigating help should be simple

Security Often not considered part of user interface design Helpful to choose security mechanisms at user interface design so that the user’s role in security can be integrated into the interface Mechanisms: –Views and authorization rules - restrict access according to who the user is –Authentication schemes - establishes identity of user –Encryption procedures - protects against access from outside

GUIs GUI - Graphical User Interface Allows different parts of user interface to be active at the same time Complicates dialogue design Common components: –data entry boxes –check boxes –radio buttons –drop-down menus or list boxes –command buttons –message windows –tab control dialog boxes

Special Considerations for Web Interfaces Test using different browsers Use and reuse other sites as examples Navigation - no dead ends! Form is not enough Plan for maintenance Using a metaphor can be helpful Use keywords in text Beware of background patterns Home page should load quickly