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 not require a user interface, they 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 412 Module 11: Designing the Presentation Layer Thin Client Environment Slide Objective To present the characteristics of a thin client and identify the operating environment and development tools " $ Accessible anywhere $ Security through server, services through client $ Lead-in The thin client environment has seen tremendous growth due to the popularity of the Internet Characteristics Simplified deployment and management " Client environment is Microsoft Internet Explorer " Development tools $ $ " Microsoft Visual InterDev Microsoft Office 2000 Select when reach is required The popularity and use of the Internet have given a global reach to thin clients, especially Web browsers A user interface developed for a thin client provides users with access to the business system from anywhere they can get an Internet connection Thin clients also have a capability for application security, but the security is implemented at the server, rather than at the client Also, the services available to a user interface are provided by the client and therefore depend on the specific client being used Deployment and management of thin client-based user interfaces are simplified Because the actual code for the interface resides on a server that is maintained by the business, changes to the interface can be made in one place and affect users as soon as they access the application Because the interface is loaded to the user’s computer whenever the user accesses the application, the only software that is required on a user’s computer is the client, or browser The thin client environment for the user interface is Microsoft Internet Explorer Using the latest version of the browser enables developers and users to take advantage of the features of the product Thin client user interfaces can be developed with tools that support HTML development, such as Microsoft Visual InterDev®, and products of the Microsoft Office 2000 family, such as Word, Microsoft FrontPage®, and Microsoft Access The thin client is optimal when users require access to the application from anywhere Module 11: Designing the Presentation Layer 413 Mobile and Specialized Clients Slide Objective To present the characteristics of mobile and specialized application clients and identify the operating environment and development tools Lead-in The mobile client has also seen tremendous growth recently " Characteristics $ High portability of devices $ Processing at client $ Availability of peripheral devices " Operating environment is Microsoft Windows CE " Development tools $ $ Windows CE Toolkit for Visual C++ $ " Windows CE Toolkit for Visual Basic and Windows CE Platform Builder Select when high mobility is required Technology advances have enabled consumer and business electronic devices to be made smaller, and for users to become more mobile These devices include Handheld PCs (H/PCs), specialized industrial controllers, and a variety of consumer electronics These new devices have as much processing power as desktop PCs of just a few years ago and enable users to perform tasks that once required bulky devices or restricted users to their desk Microsoft Windows CE was designed and developed specifically for these types of portable and specialized devices It is a modular operating system developed for embedded systems In addition, it has a user interface, or shell, that is based on Windows 95 Windows CE also supports many kinds of hardware peripherals, including keyboards and mice, serial and parallel ports, and storage devices (ATA or flash media) Developing applications for devices running Windows CE is similar to developing applications for Windows 95 and Windows 98 The tools available include toolkits for both Visual Basic and Visual C++®, as well as the Platform Builder, which is best suited for developing embedded systems A mobile client such as the H/PC should be chosen when business or user requirements demand a highly portable client with a familiar user environment 414 Module 11: Designing the Presentation Layer Activity 11.3: User Interface Technology Selection Slide Objective To introduce the activity In this activity, you will participate in an instructor-led class discussion about the issues associated with selecting user interface technologies After completing this activity, you will be able to: " Articulate the issues associated with selecting user interface technologies Module 11: Designing the Presentation Layer 415 ! User Services Design Basics Slide Objective To introduce the section " Goals of User Services Design " Designer’s Questions " Navigation Considerations " Validation Considerations " Error Processing Considerations " Example: User Services Design In this section In this section In addition to the user interface, you need to design the service layer that communicates with the business services This is the user services layer In this section, you will learn about the process of designing user services, including the goals of the design and questions to ask during the design process 416 Module 11: Designing the Presentation Layer Goals of User Services Design Slide Objective To identify what user services design should accomplish Lead-in User services provide the functionality behind the form of the user interface " Incorporate navigation for UI controls " Incorporate appropriate validation for UI controls " Design validation to optimize the user’s workflow " Provide clear and meaningful validation messages " Incorporate appropriate error processing " Provide clear and meaningful error messages " Facilitate communication with business services " Provide a communication interface for external systems User services focus on the navigation, validation, and error processing for the user interface Additionally, user services provide a mechanism for other systems and applications to access the features and functionality of the system you are designing Navigation includes not only the logic for the previous and next buttons, but it also includes the logic for updating the controls of the user interface, including the information in list boxes, the availability of controls, and updating any additional information such as status bars Validation is also provided by the user services Validation logic determines whether the information that the user submits is complete and of the form required by the business service being called User services also incorporate error processing Whereas validation confirms that data is correct, error processing provides a way to trap for conditions potentially outside of a user’s control The user services are also the means by which the user interface and external systems communicate with the business services The user services process the requests, reformat the request as necessary, and pass the request, if valid, to the appropriate business service For example, if a time reporting system must provide information to an accounting system, it will not so through a user interface Instead, the business services of the time reporting system communicate with the user services of the accounting system The user services then process the information prior to sending it to the business services of the accounting system Module 11: Designing the Presentation Layer 417 Designer’s Questions Slide Objective To introduce the questions that a designer of user services should consider " How will the users navigate through the interface? Lead-in " When in the process should validation occur? " How the user services communicate with the business services? " What types of errors are likely and how should they be processed? " What other systems will access this system? There are several questions to ask when designing user services As with all aspects of the presentation layer, it is crucial to know and understand what users require and how they will their work This knowledge includes understanding how they will use the interface and how they will navigate through it The users can tell you if they require validation of information on a field-byfield basis, validation of the entire screen of information, or whether they want a batch error report at some other time The designer of the user services must work closely with the designer of the business services because these two sets of components will frequently communicate with each other Identifying the possible errors that might occur while a user is using the system is important for developing good error processing logic Because the user services will be the entry point to this system from external systems, the user services must be designed to function as interpreters between external systems and the business services 418 Module 11: Designing the Presentation Layer Navigation Considerations Slide Objective To introduce some of the things to consider when designing the navigation logic of the user services " Design event handlers for UI controls " Update controls as appropriate " Provide user assistance for navigation issues Navigation provides for handling all of the events of a user interface When a button is clicked or an option is selected, the navigation routines process that user action A user action to one control might also affect other controls For example, if a user selects a check box, other options might become available The navigation routines would handle the enabling and disabling of interface controls In addition to designing appropriate logic into the navigation routines, it is important to design and create user assistance for navigation issues Users will want to know why and when certain options are or are not available Module 11: Designing the Presentation Layer 419 Validation Considerations Slide Objective To introduce some of the things to consider when designing the validation logic of the user services " Design validation to happen at the optimal time based on the user’s workflow " Confirm that the information passed from the user interface, or external system, is sufficient and appropriate prior to calling the business services " Reformat information based on business service needs " Design clear and understandable validation messages " Provide user assistance for validation messages It is critical to understand the users’ workflow and business requirements when designing validation Some options to consider are validating each field as it loses focus, validating when a user requests it, validating immediately after a user submits the information, or validating later(perhaps in the business services layer) in the application In a fast-paced, high-quantity, data-entry environment, it is best to not interrupt a user’s workflow Rather, the system should be designed to provide validation reports Validation in the user services includes performing any nonbusiness-specific checks such as checking for empty or null fields or confirming that dates are in the appropriate range Additionally, the validation routines will call the business services with properly formatted parameters When a field or control fails a validation check, the message provided to the user should be clear and meaningful Use the terminology and concepts that you obtained during conceptual design As with navigation, validation should also be incorporated in the user assistance topics Users should know the validation logic for the elements and controls of the user interface 420 Module 11: Designing the Presentation Layer Error Processing Considerations Slide Objective To introduce some of the things to consider when designing the error processing logic of the user services " " " Identify potential problems that can occur between the time the user makes a request of the system and the time the user receives a response from the system Design clear and understandable error messages Provide user assistance for error messages Typical error processing includes communication errors and device errors A well-designed system will process these errors prior to alerting the user The meaningful alert to the user will indicate what error condition exists and perhaps what the user might to correct it For example, if a user is attempting to print a report, but the printer is not turned on, then the error processing should identify that error and indicate to the user that the printer should be turned on As elsewhere, provide user assistance topics for the error messages These topics should not just restate the original message; they should also provide additional details that the user might need to know Module 11: Designing the Presentation Layer 421 Example: User Services Design Slide Objective Validation Name can not be blank To provide an example of how user services might be designed and presented Navigation Fill list when the dialog box appears Validation Date must be in mm/yy format The “mm” must be between 01 and 12 The “yy” must be in the future Validation Validate fields on submit Error Processing Network/ communication problems As you are designing the user interface, you should consider the user services that the interface will require Identify these services and describe what they are required to Validate the design of the user services with the project team and with the users 422 Module 11: Designing the Presentation Layer Activity 11.4: User Services Design Slide Objective To introduce the activity In this activity, you will participate in an instructor-led class discussion about the issues associated with designing the user services layer for a business application You will use the Ferguson and Bardell, Inc case study After completing this activity, you will be able to: " Articulate issues of designing user services Module 11: Designing the Presentation Layer ! Review Slide Objective To reinforce module objectives by reviewing key points Lead-in In this section, you will learn some practical guidelines for practicing the concepts of this module, and you will test yourself on your understanding of those concepts " Guidelines " Review Questions " Looking Forward In this section In this section 423 424 Module 11: Designing the Presentation Layer Guidelines Slide Objective To present some general guidelines related to the information in this module " Involve the users in designing the interface, both in initial design and in the design reviews " Focus on optimizing the users workflow " Select the client environment based on user, solution, and business requirements " Design the interface before selecting technology Lead-in The following are some general guidelines to consider The most crucial aspect of user interface and user services design is to include the users in the design process When users feel they are involved and have contributed to the design and development of the system, they will feel a certain level of ownership of the system By having the users involved early in the design process, you will not only mitigate the risk of alienating the users, but you will also be more likely to design and develop an interface that optimizes the users workflow Part of optimizing the users’ workflow includes selecting the appropriate client environment and technologies for the user interface The design of the user interface should not be driven by technology decisions; instead, let the technology available determine how the interface is developed Module 11: Designing the Presentation Layer 425 Review Questions Slide Objective To reinforce module objectives by reviewing key points " 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 — required for a user interface of a business system Lead-in The review questions cover some of the key concepts taught in the module What is the key focus of user interface design? User requirements and user workflow What are some sources of information for designing the user interface? The outputs of conceptual design, including solution requirements and constraints, future-state usage scenarios, workflow models, user profiles, task descriptions, and user’s terminology and concepts What are some ways to provide feedback to users? Sound, color, simulated movement, progress bars, status bar, and messages What are the ways in which a user might be connected to the system? Connected through a LAN or WAN, connected by dial-up lines, or disconnected 426 Module 11: Designing the Presentation Layer Looking Forward Slide Objective Provide a context in which students can frame what they have just learned and foreshadow what they will be learning 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 The process of designing the user interface can begin after the project team agrees that the conceptual design provides sufficient information All of the design processes are intended to provide correct and sufficient information to the development team The means of communicating the solution design is the functional specification ...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. .. 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. .. 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