Systems Analysis & Design Tenth Edition Chapter 10 Object-Oriented Systems Analysis and Design Using UML Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved Learning Objectives (1 of 2) 10.1 Understand what object-oriented systems analysis and design is and appreciate its usefulness 10.2 Comprehend the concepts of Unified Modeling Language (UML), the standard approach for modeling a system in the object-oriented world 10.3 Apply the steps used in UML to break down the system into a use case model and then a class model Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved Learning Objectives (2 of 2) 10.4 Diagram systems with the UML toolset so they can be described and properly designed 10.5 Document and communicate the newly modeled object-oriented system to users and other analysts Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved Object-Oriented Analysis and Design (1 of 2) • Works well in situations where complicated systems are undergoing continuous maintenance, adaptation, and design • Objects, classes are reusable • The Unified Modeling Language (UML) is an industry standard for modeling object-oriented systems. Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved Object-Oriented Analysis and Design (2 of 2) • Reusability – Recycling of program parts should reduce the costs of development in computer-based systems • Maintaining systems – Making a change in one object has a minimal impact on other objects Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved Major Topics • Object-oriented concepts • CRC cards and object think • Unified Modeling Language • Use case and other UML diagrams • Packages • Using UML Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved Object-Oriented Concepts • Objects • Classes • Inheritance Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved Objects • Persons, places, or things that are relevant to the system being analyzed • May be customers, items, orders, and so on • May be GUI displays or text areas on a display Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved Classes • Defines the set of shared attributes and behaviors found in each object in the class • Should have a name that differentiates it from all other classes • Instantiate is when an object is created from a class • An attribute describes some property that is possessed by all objects of the class • A method is an action that can be requested from any object of the class Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved Figure 10.1 An Example of a UML Class Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved Inheritance (1 of 2) • When a derived class inherits all the attributes and behaviors of the base class • Reduces programming labor by using common objects easily • A feature only found in object-oriented systems Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved Figure 10.2 A Class Diagram Showing Inheritance Car and truck are specific examples of vehicles and inherit the characteristics of the more general class vehicle. Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved CRC Cards and Object Think • CRC – Class – Responsibilities – Collaborators • CRC cards are used to represent the responsibilities of classes and the interaction between the classes Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved Figure 10.3 Four CRC Cards Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved Interacting during a CRC Session • Identify all the classes you can • Create scenarios • Identify and refine responsibilities Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved The Unified Modeling Language (UML) Concepts and Diagrams • Things • Relationships • Diagrams Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved Things • Structural things are: – Classes, interfaces, use cases, and other elements that provide a way to create models – They allow the user to describe relationships • Behavioral things • Describe how things work – Interactions and state machines • Group things – Used to define boundaries • Annotational things – Can add notes to the diagrams Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved Relationships (1 of 2) • Structural relationships – Tie things together in structural diagrams • Behavioral relationships – Used in behavioral diagrams Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved Structural Relationships • Dependencies • Aggregations • Associations • Generalizations Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved Behavioral Relationships • Communicates • Includes • Extends • Generalizes Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved Diagrams • Structural diagrams – Used to describe the relation between classes • Behavioral diagrams – Used to describe the interaction between people (actors) and a use case (how the actors use the system) Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved Structural Diagrams • Class diagrams • Object diagrams • Component diagrams • Deployment diagrams Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved Behavioral Diagrams • Use case diagrams • Sequence diagrams • Collaboration diagrams • Statechart diagrams • Activity diagrams Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved Figure 10.4 An Overall View of UML and Its Components: Things, Relationships, and Diagrams (1 of 2) UML Category UML Elements Specific UML Details Things Structural Things Classes Interfaces Collaborations Use Cases Active Classes Components Nodes Things Behavioral Things Interactions State Machines Things Grouping Things Packages Things Annotational Things Notes Relationships Structural Relationships Dependencies Aggregations Associations Generalizations Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved Figure 10.4 An Overall View of UML and Its Components: Things, Relationships, and Diagrams (2 of 2) UML Category UML Elements Specific UML Details Relationships Behavioral Relationships Communicates Includes Extends Generalizes Diagrams Structural Diagrams Class Diagrams Component Diagrams Deployment Diagrams Diagrams Behavioral Diagrams Use Case Diagrams Sequence Diagrams Communication Diagrams Statechart Diagrams Activity Diagrams Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved Commonly Used UML Diagrams (1 of 2) • Use case diagram – Describing how the system is used – The starting point for UML modeling • Use case scenario – A verbal articulation of exceptions to the main behavior described by the primary use case • Activity diagram – Illustrates the overall flow of activities Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved Commonly Used UML Diagrams (2 of 2) • Sequence diagrams – Show the sequence of activities and class relationships • Class diagrams – Show classes and relationships • Statechart diagrams – Show the state transitions Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved Figure 10.5 An Overview of UML Diagrams Showing How Each Diagram Leads to the Development of Other UML Diagrams Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved Use Case Modeling • Describes what the system does, without describing how the system does it • Based on the interactions and relationships of individual use cases • Use case describes – Actor – Event – Use case Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved Figure 10.6 A Use Case Example of Student Enrollment Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved Figure 10.7 A Use Case Scenario is Divided into Three Sections: Identification and Initiation, Steps Performed, and Conditions, Assumptions, and Questions Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved Activity Diagrams • Show the sequence of activities in a process, including sequential and parallel activities, and decisions that are made • Symbols – Rectangle with rounded ends – Arrow – Diamond – Long, flat rectangle – Filled-in circle – Black circle surrounded by a white circle – Swimlanes Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved Figure 10.8 Specialized Symbols are Used to Draw an Activity Diagram Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved Creating Activity Diagrams • Created by asking what happens first, what happens second, and so on • Must determine what activities are done in sequence or in parallel • The sequence of activities can be determined from physical data flow diagrams • Can be created by examining all the scenarios for a use case Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved Swimlanes • Useful to show how the data must be transmitted or converted • Help to divide up the tasks in a team • Makes the activity diagram one that people want to use to communicate with others Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved Figure 10.9 This Activity Diagram Shows Three Swimlanes: Client Web Page, Web Server, and Mainframe Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved Activity Diagrams and Test Plans • Activity diagrams may be used to construct test plans • Each event must be tested to see if the system goes to the next state • Each decision must be tested Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved Activity Diagrams Not Created for All Use Cases • Use an activity diagram when: – It helps to understand the activities of a use case – The flow of control is complex – There is a need to model workflow – When all scenarios for a use case need to be shown Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved Sequence Diagrams • Illustrate a succession of interactions between classes or object instances over time • Often used to show the processing described in use case scenarios • Used to show the overall pattern of the activities or interactions in a use case Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved Figure 10.10 Specialized Symbols Used to Draw a Sequence Diagram Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved Figure 10.11 A Sequence Diagram for Student Admission: Sequence Diagrams Emphasize the Time Ordering of Messages Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved Communication Diagrams • Describes the interactions of two or more things in the system that perform a behavior that is more than any one of the things can do alone • Shows the same information as a sequence diagram, but may be more difficult to read • Emphasizes the organization of objects • Made up of objects, communication links, and the messages that can be passed along those links Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved Figure 10.12 A Communication Diagram for Student Admission Communication diagrams show the same information that is depicted in a sequence diagram but emphasize the organization of objects rather than the time ordering. Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved Class Diagrams (1 of 2) • Show the static features of the system and do not represent any particular processing • Show the nature of the relationships between classes • Show data storage requirements as well as processing requirements Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved Class Diagrams (2 of 2) • Classes • Attributes – Private – Public – Protected • Methods – Standard – Custom Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved Figure 10.13 A Class Diagram for Course Offerings: the Filled-In Diamonds Show Aggregation and the Empty Diamond Shows a Whole-Part Relationship Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved Method Overloading • Including the same method (or operation) several times in a class • The same method may be defined more than once in a given class, as long as the parameters sent as part of the message are different Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved Types of Classes • Entity classes • Interface classes • Abstract classes • Control classes Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved Entity Classes • Represent real-world items • The entities represented on an entity-relationship diagram Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved Interface or Boundary Classes • Provide a means for users to work with the system • Human interfaces may be a display, window, Web form, dialogue box, touch-tone telephone, or other way for users to interact with the system • System interfaces involve sending data to or receiving data from others Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved Abstract Classes (1 of 2) • Linked to concrete classes in a generalization/specialization relationship • Cannot be directly instantiated Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved Control Classes • Used to control the flow of activities • Many small control classes can be used to achieve classes that are reusable Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved Presentation, Business, and Persistence Layers • Sequence diagrams may be discussed using three layers: – Presentation layer, what the user sees, corresponding to the interface or boundary classes – Business layer, containing the unique rules for this application, corresponding roughly to control classes – Persistence or data access layer, for obtaining and storing data, corresponding to the entity classes Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved Defining Messages and Methods • Each message may be defined using a notation similar to that described for the data dictionary • The methods may have logic defined using structured English, a decision table, or a decision tree Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved Figure 10.15 A Sequence Diagram for Using Two Web Pages: One for Student Information, One for Course Information Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved Create Sequence Diagrams • Include the actor from the use case diagram • Define one or more interface classes for each actor • Each use case should have one control class • Examine the use case to see what entity classes are required • The sequence diagram may be modified when doing detailed design Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved Creating a Test Plan from a Sequence Diagram • Does each method return correct results? • Ensure that entity classes store or obtain the correct attribute values • Verify that all JavaScript paths work correctly • Ensure that the server control classes work correctly • Ask, “What may fail?” • Determine what to do if something can fail Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved Relationships (2 of 2) • The connections between classes – Associations – Whole/part Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved Figure 10.18 An Example of an Associative Class in Which a Particular Section Defines the Relationship between a Student and a Course Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved Associations • The simplest type of relationship • Association classes are those that are used to break up a many-to-many association between classes • An object in a class may have a relationship to other objects in the same class, called a reflexive association Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved Whole/Part Relationships • When one class represents the whole object, and other classes represent parts • Categories – Aggregation – Collection – Composition Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved Aggregation • A “has a” relationship • Provides a means of showing that the whole object is composed of the sum of its parts Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved Collection • Consists of a whole and its members • Members may change, but the whole retains its identity • A weak association Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved Composition • The whole has a responsibility for the parts, and is a stronger relationship • If the whole is deleted, all parts are deleted Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved Figure 10.19 An Example of Whole-Part and Aggregation Relationships Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved Generalization/Specialization Diagrams • Generalization • Inheritance • Polymorphism • Abstract classes • Messages Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved Generalization • Describes a relationship between a general kind of thing and a more specific kind of thing • Described as an “is a” relationship • Used for modeling class inheritance and specialization • General class is a parent, base, or superclass • Specialized class is a child, derived, or subclass Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved Inheritance (2 of 2) • Helps to foster reuse • Helps to maintain existing program code Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved Polymorphism • The capability of an object-oriented program to have several versions of the same method with the same name within a superclass/subclass relationship • The subclass method overrides the superclass method • When attributes or methods are defined more than once, the most specific one is used Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved Abstract Classes (2 of 2) • Abstract classes are general classes • No direct objects or class instances, and is only used in conjunction with specialized classes • Usually have attributes and may have a few methods Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved Figure 10.20 A Generalization/Specification Diagram is a Refined Form of a Class Diagram Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved Finding Classes • During interviewing or JAD sessions • During facilitated team sessions • During brainstorming sessions • Analyzing documents and memos • Examining use cases, looking for nouns Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved Determining Class Methods • Standard methods • Examine a CRUD matrix Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved Messages • Used to send information by an object in one class to an object in another class • Acts as a command, telling the receiving class to do something • Consists of the name of the method in the receiving class, as well as the attributes that are passed with the method name • May be thought of as an output or an input Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved Statechart Diagrams (1 of 2) • Used to examine the different states that an object may have • Created for a single class – Objects are created, go through changes, and are deleted or removed • Objects • States • Events – Signals or asynchronous messages – Synchronous – Temporal events Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved Statechart Diagrams (2 of 2) • Created when: – A class has a complex life cycle – An instance of a class may update its attributes in a number of ways through the life cycle – A class has an operational life cycle – Two classes depend on each other – The object’s current behavior depends on what happened previously Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved Figure 10.22 A Statechart Diagram Showing How a Student Progresses from a Potential Student to a Graduated Student Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved Packages • Containers for other UML things • Show system partitioning • Can be component packages • Can be physical subsystems • Use a folder symbol • May have relationships Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved Figure 10.23 Use Cases Can Be Grouped into Packages Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved Putting UML to Work • The steps used in UML are: – Define the use case model – Continue UML diagramming to model the system during the systems analysis phase – Develop the class diagrams – Draw statechart diagrams – Begin systems design by refining the UML diagrams – Document your system design in detail Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved Summary (1 of 2) • Object-oriented systems – Objects – Classes – Inheritance • CRC cards • UML and use case modeling • Components of UML – Things – Relationships – Diagrams Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved Summary (2 of 2) • UML diagrams – Use case diagrams – Activity diagrams – Sequence diagrams – Communication diagrams – Class diagrams – Statechart diagrams • Using UML Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved Copyright Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved Systems Analysis & Design Tenth Edition Chapter 11 Designing Effective Output Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved Learning Objectives 11.1 Understand the objectives for effective output design 11.2 Relate output content to output methods 11.3 Realize how output bias affects users 11.4 Design display output 11.5 Design dashboard, widgets, and gadgets 11.6 Design a websites for ecommerce and corporate uses that include Web 2.0 technologies 11.7 Design output for social media 11.8 Understand the development process for apps used on smartphones and tablets Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved Output • Information delivered to users • Output forms – Hard-copy—printed reports – Soft-copy—computer screens, microforms, and audio • To create output, the analyst works interactively with the user until the output is satisfactory Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved Major Topics • Designing output • Output technologies • Factors in choosing an output technology • Report design • Screen design • Web site design • Smartphone and tablet design • Responsive Web design Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved Output Design Objectives • Serve a specific user or organizational purpose • Meaningful to the user • Deliver the appropriate quantity of output • Make sure the output is where it is needed • Provide output on time • Choosing the most effective output method Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved Relating Output Content to Method • Content of output must be considered as interrelated to the output method – External—going outside the business – Internal—staying within the business Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved External Output • Differs from internal output in: – Distribution – Design – Appearance Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved Internal Output • Examples: – Summary reports – Detailed reports – Historical reports – Exception reports • Might consist of material available on an intranet Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved Figure 11.1 A Comparison of Output Methods (1 of 2) Output Method Advantages Disadvantages Printer Affordable for most organizations Still requires some operator intervention Flexible in types of output, location, and capabilities Handles large volumes of output Highly reliable with little down time Compatibility problems with computer software May require special, expensive supplies Depending on model, may be slow Environmentally unfriendly Display screen Interactive May require cabling and setup space Online, real-time transmission Requires system for taking “snapshots” of screen and storing them for future use Quiet Takes advantage of computer capabilities for movement within databases and files Good for frequently accessed, ephemeral messages Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved Figure 11.1 A Comparison of Output Methods (2 of 2) Output Method Advantages Disadvantages Audio output and podcasts Good for individual user Needs earbuds where output will interfere with other tasks Good for transient messages Good where worker needs hands free Has limited application Good if output needs to be widely distributed Mobile devices Electronic output (email, websites, blogs, and RSS feeds) Highly portable Screen may be too small for text Very interactive using gestures Icons and buttons may be confusing Zoom and magnification are possible May be lost more easily Reduces paper Is not conducive to formatting (email) Can be updated very easily Can be “broadcast” Is difficult to convey context of messages (email) Can be made interactive Websites need diligent maintenance Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved Factors to Consider When Choosing Output Technology (1 of 2) • Who will use the output? • How many people need the output? • Where is the output needed? • What is the purpose? • What is the speed with which output is needed? • How frequently will the output be accessed? Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved Factors to Consider When Choosing Output Technology (2 of 2) • How long will the output be stored? • Regulations depicting output produced, stored, and distributed • Initial and ongoing costs of maintenance and supplies • Human and environmental requirements Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved Green IT Initiatives • May limit the quantity of paper reports that are printed • Electronic transactions • Encourage customers to think about environmental savings Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved Output Bias • Analysts must avoid unnecessarily biasing output and make users aware of the possible biases in output • Bias is introduced in three main ways: – How information is sorted – Setting of acceptable limits – Choice of graphics Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved Avoiding Bias in the Design Output • Be aware of the sources of bias • Design of output that includes users • Work with users so that they are informed of the output’s biases • Creating output that is flexible and allows users to modify limits and ranges • Train users to rely on multiple output for conducting “reality tests” on system output Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved Figure 11.4 A Misleading Graph Will Most Likely Bias the User Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved Designing Printed Output • Detailed reports – Print a report line for every record on the master file • Exception reports – Print a line for all records that match a certain condition • Summary reports – Print one line for a group of records that are used to make decisions Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved Designing Output for Displays • Keep the display simple • Keep the presentation consistent • Facilitate user movement among displayed output • Create an attractive and pleasing display Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved Graphical Output in Screen Design • The purpose of the graph • The kind of data to be displayed • The audience • The effects on the audience of different kinds of graphical output Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved Dashboards (1 of 3) • Make sure the data has context • Display the proper amount of summarization and precision • Choose appropriate performance measures for display • Present data fairly Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved Dashboards (2 of 3) • Choose the correct style of graph or chart for display • Use well-designed display media • Limit the variety of item types • Highlight important data Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved Dashboards (3 of 3) • Highlight important data • Arrange the data in meaningful groups • Keep the screen uncluttered • Keep the entire dashboard on a single screen • Allow flexibility Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved Figure 11.8 Dashboard Example Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved Infographics • Combine numbers, charts, and different types of graphs together in one view at the same time in an infographic • Infographic can mean any graph, chart, or picture that communicates the data better than words or tables • Infographics should be newsworthy Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved Creating Infographics (1 of 2) • Start the infographic with a headline, something brief but catchy • Then artfully design a small page of information • Mix in visuals that together tell a story Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved Creating Infographics (2 of 2) • Design elements include charts and graphs, images (mostly icons, cartoons) • Photos should be rarely used • Summary information in brief text • Contact information • Some action the reader might want to take Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved Figure 11.9 An Infographic Using a Variety of Design Elements Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved Responsive Web Design (1 of 4) • There is no “standard” screen resolution anymore • Individuals may set a browser to use different fonts and may disable the use of JavaScript, cookies, and other Web programming elements Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved Responsive Web Design (2 of 4) • Responsive Web design means that a website is developed so that it can be viewed on any device: a desktop, tablet, or smartphone • This means seeing all of the content, experiencing the same design concepts, and being able to perform all of the tasks on any device Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved Responsive Web Design (3 of 4) • Websites are designed in percentages rather than a fixed number of pixels • The Web designer might need to develop different landing pages for each type of device • Ajax can recognize a device and display different sized advertising components on a page Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved Responsive Web Design (4 of 4) • Adaptive design uses a fixed grid rather than the fluid (percentage) grid in responsive Web design Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved Flat Web Design (1 of 2) • Web design trends moved away from skeuomorphic design to flat Web design • Skeuomorphic design means that objects were meant to look realistic and three-dimensional • Flat Web design is a minimalistic approach to design Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved Flat Web Design (2 of 2) • Web design is clean, two-dimensional, and simple in many ways • Using a bright color palette that is adhered to in all design • Concentrate on only what is necessary Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved Figure 11.10 Comparing Skeuomorphic Icons with Flat Web Design Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved Designing a Website (1 of 3) • Use professional tools • Study other sites • Examine the sites of professional website designers • Use the tools you’ve learned • Use storyboarding, wireframing, and mockups Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved Designing a Website (2 of 3) • Creating Web templates – Style sheets allow you to format all Web pages in a site consistently • Using plug-ins, audio, and video sparingly Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved Storyboarding • In developing a website or app a storyboard could be used to show the differences between screens • It can show how a visitor to the site would navigate the website Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved Wireframing (1 of 2) • Page design can be accomplished using a process called wireframing • Wireframing because it shows only the basics • There is no color, no type style; graphics are shown as a simple box with an X drawn in • In this way, each of the items acts as a placeholder Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved Wireframing (2 of 2) • Wireframing allows the designer to plan: – The overall design, showing what element appears at each position on the page – The navigational design, showing how to move from one page to the next using buttons, tabs, links, and pull-down menus – The interface design, showing how to interact with the Web site by inputting data or responding to questions Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved Mockups (1 of 2) • The term wireframe has largely been replaced with mockup • Mockups show what the output and input will look like • Abundant software is available to help a systems designer develop a mockup Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved Mockups (2 of 2) • The software has objects that can be dragged and dropped onto the screen • Templates are available for any type of display including: – Desktops – Notebooks – Smartphones – Tablets • When designing for smartphones and tablets, both screen orientations are included Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved Designing a Website (3 of 3) • Plan ahead, pay attention to: – Structure – Content – Text – Graphics – Presentations style – Navigation – Promotion Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved Structure • One of the most important steps in developing a professional Web site • Each page in the Web structure should have a distinct message • Can benefit from using Web site diagramming and mapping tools • Look for applications that do Web functionality testing or error checking Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved Content • Appropriate content is needed to keep the user interested • Use a metaphor or images that provide metaphor for your site • Should include a FAQ page • May take advantage of prewritten software Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved Text • Each Web page should have a title • Place meaningful words in the first sentence appearing on your Web page • Clear writing is important Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved Content Management Systems • Content on ecommerce sites needs to be constantly updated • Content management systems (CMSs) are software tools that help to develop and maintain websites and online applications Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved Graphics • Use either JPEG, GIF, or PNG formats • Keep the background simple and readable • Create a few professional-looking graphics for use on your pages • Keep images small and reuse bullets or navigational buttons • Include tooltip help for images and image hot spots • Examine your Web site on a variety of displays and screen resolutions and on mobile devices Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved Presentation Style (1 of 2) • Provide a home page • Keep the number of graphics to a reasonable minimum • Use large and colorful fonts for headings • Use interesting images and buttons for links • Use CSS to control the formatting and layout of the Web page Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved Presentation Style (2 of 2) • Use divisions and cascading styles or tables to enhance a layout • Use the same graphics image on several Web pages • Use Javascript to enhance Web page layout • Avoid overusing animation, sound, and other elements Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved Navigation • The three-clicks rule • Include a navigation bar and links to the home page on every page on the Web site Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved Promotion • Promote your site • Submit often to search engines • Include key words in metatags • Encourage your readers to bookmark your Web site Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved Figure 11.12 Website Example Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved Web 2.0 Technologies and Social Media Design • It is important to include Web 2.0 technologies that focus on enabling and facilitating user-generated content and collaboration • Types of technologies you should think about including: – Blogs – Wikis – Links to social networks on which the company has a presence – Tagging Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved Tagging • Tagging or social bookmarking provides useful pointers to online resources such as: – Web sites – Content on corporate intranets – Corporate documents, or photos that are relevant to the organization and to users Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved Reasons for Using Collaborative Tools • Companies use collaborative tools to: – Communicate an integrated branding and messaging strategy across multiple platforms – To gauge consumer opinion – To gather feedback – To create a community of users Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved Internal Use of Social Media • Inward-facing Web technologies can be useful in: – Building employee relationships – Maintaining trust – Sharing knowledge – Innovating among employees and groups of employees – Locating corporate resources more readily – Nurturing corporate culture and subcultures inside the organization Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved Five Aspects an Analyst Should Consider 1. Realize differences between corporate objectives and objectives of key stakeholders 2. Serve as the voice of the customer to your client organization 3. Recognize the importance of visual page design for effectively displaying collaborative tools 4. Revise and update the Web 2.0 technologies offered frequently 5. Work to integrate Web 2.0 technologies with the existing branding Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved Figure 11.13 Many Different Web 2.0 Sets of Icons Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved Social Media Design (1 of 3) • Businesses use social media for a number of reasons: – Growing their audiences – Increasing traffic to already well-established Web sites – Reinforcing brand awareness – Developing an online persona that can be trusted Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved Social Media Design (2 of 3) • Numerous options, including: – Facebook – Instagram – Twitter – Snapchat – Google+ – YouTube – Others Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved Social Media Design (3 of 3) • Designing content for social media is highly visual • Visual content is 40 times more likely to be shared on social media • Sharing is what allows a designer of social media to leverage social media for its best networking aspects Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved Social Media Design Guidelines • Emphasize the goal of the design • Develop a consistent look • Create appealing design flow • Simplify to use space in a positive way Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved Designing for Smartphones and Tablets (1 of 3) 1. Set up a developer account 2. Choose a development process 3. Be an original 4. Determine how you will price the app Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved Designing for Smartphones and Tablets (2 of 3) 5. Follow the rules for output design 6. Design your icon 7. Choose a name for the app 8. Design for a variety of devices 9. Design the output for the app Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved Designing for Smartphones and Tablets (3 of 3) 10.Design the output a second time for different orientation 11.Design the logic 12.Create the user interface using gestures 13.Protect your property 14.Market your app Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved Choose a Development Process • Prototyping is most likely the best way to develop your app • Quick releases are important • Quality should not be sacrificed, but you can introduce an app and then add features later • Advantages of introducing an app first: – It allows you to gain an advantage – Revise the app adding new features – Increases visibility because the app appears on a list of apps that have been updated Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved Determine Pricing the App • There are six basic options for pricing: 1. Choose a low-cost strategy 2. Introduce an app as a “premium” app 3. Adopt a “freemium” model 4. Offer an app for free 5. Promote an app by reducing its price 6. Accept advertising Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved Figure 11.15 Design the App Icon Icon Required Size for Older iPhones in (pixels) Size for HighResolution iPhone (pixels) Size for Older iPad (pixels) Size for HighResolution iPad (pixels) Display size 320 × 480 640 × 1136 1024 × 768 2048 × 1536 Application icon (Home screen icon) 57 × 57 114 × 114 72 × 72 144 × 144 App icon for the app store 512 × 512 1024 × 1024 recommended 512 × 512 1024 × 1024 recommended Launch image 320 × 480 640 × 960 768 × 1004 and 1024 × 748 1536 × 2008 and 2048 × 1496 Spotlight search icon 29 × 29 58 × 58 50 × 50 100 × 100 Settings icon 29 × 29 50 × 50 29 × 29 50 × 50 Documents icon 22 × 29 44 × 58 64 × 64 and 320 × 320 128 × 128 and 640 × 640 Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved Design the App’s Logic • Tablets and smartphones fit in well with the prototyping method of development • Sometimes the best way is to sketch out the logic using structured decision making techniques Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved Design Movement • Moving from screen to screen may make a big difference in a user’s experience • Don’t leave movement to chance • Plan movement carefully • Use storyboards or an app Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved Figure 11.17 App Cooker Plans Movement Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved Create the User Interface Using Gestures • Smartphones and tablets have innovative user interfaces • Technically called touchscreen capacitive sensing • Design apps assuming that users will demand touchsensitive interfaces • Use gestures such as: – Swipes – Pinches – Tugs – Shakes Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved Market Your App • Need to convince a person to pay for and download your app • To market your app, you will need: – A large icon – A description – A section explaining what is new in the current version – A sample set of screenshots Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved Output Production and XML • An XML document may be transformed into different output media types • Methods: – Extensible Style Language Transformations (XSLT) – Ajax – Cascading style sheets (CSS) Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved Extensible Style Language Transformations (XSLT) XSLT allows you to: • Select XML elements • Sort sequence • Selection of data Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved Figure 11.18 Extensible Style Language Transformation (XSLT) Can Transform XML Documents into Many Different Formats Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved Ajax • Uses both JavaScript and XML to obtain small amounts of data from a server without leaving the Web page • The user does not have to wait for a new Web page to display after making a selection Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved Summary (1 of 2) • Output • Output design objectives • Output content • Output technologies • Presentation of output • Responsive Web design Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved Summary (2 of 2) • Flat Web design • Display output • Web design • Social media • Smart phone and tablet design • XML transformation Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved Copyright Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved From our professor: Course Policies Discussions Every student is expected to participate in the discussion by contributing a posting (Primary Post) of 150 - 200 words about topic in the forum, and at least one (1) responses (replies) to other students' posting. There is, of course, no upper limit on the level of your participation in the discussion. I recommend that you print a copy of your postings to keep as a log of your participation in the discussion forum. Since the quality of the content and format of your posting is important, it is also recommended that you write your submission in a word processor, save the file on your disk, then copy and paste the text in the discussion area. That way you have an archive of your postings. This is our way of sharing our ideas and information. I will NOT respond to every posting that is made, but will make comments when appropriate. Please note that I plan to read every word posted in any section of this class web site by students. Since there are only two posts required – please do not simply post as “I agree”, when I look at a response I want to see if the thread can be continued. For example, having a discussion with your friends, you can even ask a question, pose a problem, or change the focus of the response, something that two people in a conversation could continue. The University is committed to open, frank, and insightful dialogue in all of its courses. Diversity has many manifestations including diversity of thought, opinion and values. We encourage all learners to be respectful of that diversity and to refrain from inappropriate commentary. Should such inappropriate comments occur, the instructors will intervene as they monitor the dialogue in each of their courses. I would expect our discussions to be lively and informative. Again, don’t make comments that you cannot back up with research and references for your postings. …………………………………………………………………………………………………….. From our professor: Week 6 Objectives 10.1 Understand what object-oriented systems analysis and design is and appreciate its usefulness 10.2 Comprehend the concepts of Unified Modeling Language (U M L), the standard approach for modeling a system in the object-oriented world 10.3 Apply the steps used in U M L to break down the system into a use case model and then a class model 10.4 Diagram systems with the U M L toolset so they can be described and properly designed 10.5 Document and communicate the newly modeled object-oriented system to users and other analysts 11.1 Understand the objectives for effective output design 11.2 Relate output content to output methods 11.3 Realize how output bias affects users 11.4 Design display output 11.5 Design dashboard, widgets, and gadgets 11.6 Design a websites for ecommerce and corporate uses that include Web 2.0 technologies 11.7 Design output for social media 11.8 Understand the development process for apps used on smartphones and tablets Week 6 Discussion “Object Oriented Design” Hi everyone An important concept that is leading the way in system analysis and design is objected oriented design. Let’s discuss how object-oriented system design works, and the importance of the Unified Modeling Language (U M L). Responed to this: The Object-Oriented Design video is interesting because it seems to borrow some elements from database systems design. I noticed that the object modeling process adopts a similar scheme from database systems design with the way that entity cardinality constraints are defined. In this case there were actors or objects like the player, coin, and game itself, while it defined a limit for the interaction or relation between each object. This helps establish structure and predictability for system behavior since there are limitations placed. Otherwise it would likely have many errors and designers wouldn’t have as clear of an idea where issues stem from. However, object-oriented design includes a broader approach to detailing system constraints between actors, use cases, and their events to diagram potential output and define appropriate system behaviors. The importance of UML with object-oriented system design is the way that systems can be adapted and be maintained over time. The video helped me understand sequence diagrams better, since I struggled with them in the previous course. The video demonstrated the way that actors can belong to a class with predefined constraints to allow for addition or removal of actors at any time, since they are structured by the player class. This is a benefit because it means we wouldn’t have to establish a structure for each individual actor and helps save time and maintains the system’s structure. Like Mr. Banas mentioned, at the start of a system’s design it will require immense effort and time, but it’ll save you a lot of headache down the line.
Purchase answer to see full attachment