Presentation Layer Guidelines

J.D. Meier, Alex Homer, David Hill, Jason Taylor, Prashant Bansode, Lonnie Wall, Rob Boucher Jr, Akshay Bogawat

Objectives

  • Understand how the presentation layer fits into typical application architecture.
  • Understand the components of the presentation layer.
  • Learn the steps for designing the presentation layer.
  • Learn the common issues faced while designing the presentation layer.
  • Learn the key guidelines for designing the presentation layer.
  • Learn the key patterns and technology considerations for designing the presentation layer.

Overview

The presentation layer contains the components that implement and display the user interface and manage user interaction. This layer includes controls for user input and display, in addition to components that organize user interaction. Figure 1 shows how the presentation layer fits into a common application architecture.

PresentationLayer.PNG
Figure 1 A typical application showing the presentation layer and the components it may contain

Presentation Layer Components

  • User interface (UI) components. User interface components provide a way for users to interact with the application. They render and format data for users. They also acquire and validate data input by the user.
  • User process components. User process components synchronize and orchestrate user interactions. Separate user process components may be useful if you have a complicated UI. Implementing common user interaction patterns as separate user process components allows you to reuse them in multiple UIs.

Approach

The following steps describe the process you should adopt when designing the presentation layer for your application. This approach will ensure that you consider all of the relevant factors as you develop your architecture:
  1. Identify your client type. Choose a client type that satisfies your requirements and adheres to the infrastructure and deployment constraints of your organization. For instance, if your users are on mobile devices and will be intermittently connected to the network, a mobile rich client is probably your best choice.
  2. Determine how you will present data. Choose the data format for your presentation layer and decide how you will present the data in your UI.
  3. Determine your data-validation strategy. Use data-validation techniques to protect your system from untrusted input.
  4. Determine your business logic strategy. Factor out your business logic to decouple it from your presentation layer code.
  5. Determine your strategy for communication with other layers. If your application has multiple layers, such as a data access layer and a business layer, determine a strategy for communication between your presentation layer and other layers.

Design Considerations

There are several key factors that you should consider when designing your presentation layer. Use the following principles to ensure that your design meets the requirements for your application, and follows best practices:
  • Choose the appropriate UI technology. Determine if you will implement a rich (smart) client, a Web client, or a rich Internet application (RIA). Base your decision on application requirements, and on organizational and infrastructure constraints.
  • Use the relevant patterns. Review the presentation layer patterns for proven solutions to common presentation problems.
  • Design for separation of concerns. Use dedicated UI components that focus on rendering and display. Use dedicated presentation entities to manage the data required to present your views. Use dedicated UI process components to manage the processing of user interaction.
  • Consider human interface guidelines. Review your organization’s guidelines for UI design. Review established UI guidelines based on the client type and technologies that you have chosen.
  • Adhere to user-driven design principles. Before designing your presentation layer, understand your customer. Use surveys, usability studies, and interviews to determine the best presentation design to meet your customer’s requirements.

Presentation Layer Frame

There are several common issues that you must consider as your develop your design. These issues can be categorized into specific areas of the design. The following table lists the common issues for each category where mistakes are most often made.

Category Common issues
Caching Caching volatile data.
Caching unencrypted sensitive data.
Incorrect choice of caching store.
Failing to choose a suitable caching mechanism for use in a Web farm.
Assuming that data will still be available in the cache – it may have expired and been removed.
Composition Failing to consider use of patterns and libraries that support dynamic layout and injection of views and presentation at runtime.
Using presentation components that have dependencies on support classes and services instead of considering patterns that support run-time dependency injection.
Failing to use the Publish/Subscribe pattern to support events between components.
Failing to properly decouple the application as separate modules that can be added easily.
Exception Management Failing to catch unhandled exceptions.
Failing to clean up resources and state after an exception occurs.
Revealing sensitive information to the end user.
Using exceptions to control application flow.
Catching exceptions you do not handle.
Using custom exceptions when not necessary.
Input Failing to design for intuitive use, or implementing overly complex interfaces.
Failing to design for accessibility.
Failing to design for different screen sizes and resolutions.
Failing to design for different device and input types, such as mobile devices, touch-screen, and pen and ink–enabled devices.
Layout Using an inappropriate layout style for Web pages.
Implementing an overly complex layout.
Failing to choose appropriate layout components and technologies.
Failing to adhere to accessibility and usability guidelines and standards.
Implementing an inappropriate workflow interface.
Failing to support localization and globalization.
Navigation Inconsistent navigation.
Duplication of logic to handle navigation events.
Using hard-coded navigation.
Failing to manage state with wizard navigation.
Presentation Entities Defining entities that are not necessary.
Failing to implement serialization when necessary.
Request Processing Blocking the UI during long-running requests.
Mixing processing and rendering logic.
Choosing an inappropriate request-handling pattern.
User Experience Displaying unhelpful error messages.
Lack of responsiveness.
Overly complex user interfaces.
Lack of user personalization.
Lack of user empowerment.
Designing inefficient user interfaces.
UI Components Creating custom components that are not necessary.
Failing to maintain state in the Model-View-Controller (MVC) pattern.
Choosing inappropriate UI components.
UI Process Components Implementing UI process components when not necessary.
Implementing the wrong design patterns.
Mixing business logic with UI process logic.
Mixing rendering logic with UI process logic.
Validation Failing to validate all input.
Failure to validate on the server for security concerns.
Failing to correctly handle validation errors.
Not identifying business rules that are appropriate for validation.
Failing to log validation failures.

Caching

Caching is one of the best mechanisms you can use to improve application performance and UI responsiveness. Use data caching to optimize data lookups and avoid network round trips. Cache the results of expensive or repetitive processes to avoid unnecessary duplicate processing.

Consider the following guidelines when designing your caching strategy:
  • Do not cache volatile data.
  • Consider using ready-to-use cache data when working with an in-memory cache. For example, use a specific object instead of caching raw database data.
  • Do not cache sensitive data unless you encrypt it.
  • If your application is deployed in Web farm, avoid using local caches that need to be synchronized; instead, consider using a transactional resource manager such as Microsoft SQL Server® or a product that supports distributed caching.
  • Do not depend on data still being in your cache. It may have been removed.

Composition

Consider whether your application will be easier to develop and maintain if the presentation layer uses independent modules and views that are easily composed at run time. Composition patterns support the creation of views and the presentation layout at run time. These patterns also help to minimize code and library dependencies that would otherwise force recompilation and redeployment of a module when the dependencies change. Composition patterns help you to implement sharing, reuse, and replacement of presentation logic and views.

Consider the following guidelines when designing your composition strategy:
  • Avoid using dynamic layouts. They can be difficult to load and maintain.
  • Be careful with dependencies between components. For example, use abstraction patterns when possible to avoid issues with maintainability.
  • Consider creating templates with placeholders. For example, use the Template View pattern to compose dynamic Web pages in order to ensure reuse and consistency.
  • Consider composing views from reusable modular parts. For example, use the Composite View pattern to build a view from modular, atomic component parts.
  • If you need to allow communication between presentation components, consider implementing the Publish/Subscribe pattern. This will lower the coupling between the components and improve testability.

Exception Management

Design a centralized exception-management mechanism for your application that catches and throws exceptions consistently. Pay particular attention to exceptions that propagate across layer or tier boundaries, as well as exceptions that cross trust boundaries. Design for unhandled exceptions so they do not impact application reliability or expose sensitive information.

Consider the following guidelines when designing your exception management strategy:
  • Use user-friendly error messages to notify users of errors in the application.
  • Avoid exposing sensitive data in error pages, error messages, log files, and audit files.
  • Design a global exception handler that displays a global error page or an error message for all unhandled exceptions.
  • Differentiate between system exceptions and business errors. In the case of business errors, display a user-friendly error message and allow the user to retry the operation. In the case of system exceptions, check to see if the exception was caused by issues such as system or database failure, display a user-friendly error message, and log the error message, which will help in troubleshooting.
  • Avoid using exceptions to control application logic.

Input

Design a user input strategy based on your application input requirements. For maximum usability, follow the established guidelines defined in your organization, and the many established industry usability guidelines based on years of user research into input design and mechanisms.

Consider the following guidelines when designing your input collection strategy:
  • Use forms-based input controls for normal data-collection tasks.
  • Use a document-based input mechanism for collecting input in Microsoft Office–style documents.
  • Implement a wizard-based approach for more complex data collection tasks, or for input that requires a workflow.
  • Design to support localization by avoiding hard-coded strings and using external resources for text and layout.
  • Consider accessibility in your design. You should consider users with disabilities when designing your input strategy; for example, implement text-to-speech software for blind users, or enlarge text and images for users with poor sight. Support keyboard-only scenarios where possible for users who cannot manipulate a pointing device.

Layout

Design your UI layout so that the layout mechanism itself is separate from the individual UI components and UI process components. When choosing a layout strategy, consider whether you will have a separate team of designers building the layout, or whether the development team will create the UI. If designers will be creating the UI, choose a layout approach that does not require code or the use of development-focused tools.

Consider the following guidelines when designing your layout strategy:
  • Use templates to provide a common look and feel to all of the UI screens.
  • Use a common look and feel for all elements of your UI to maximize accessibility and ease of use.
  • Consider device-dependent input, such as touch screens, ink, or speech, in your layout. For example, with touch-screen input you will typically use larger buttons with more spacing between them than you would with mouse or keyboard inputs.
  • When building a Web application, consider using Cascading Style Sheets (CSS) for layout. This will improve rendering performance and maintainability.
  • Use design patterns, such as Model-View-Presenter (MVP), to separate the layout design from interface processing.

Navigation

Design your navigation strategy so that users can navigate easily through your screens or pages, and so that you can separate navigation from presentation and UI processing. Ensure that you display navigation links and controls in a consistent way throughout your application to reduce user confusion and hide application complexity.

Consider the following guidelines when designing your navigation strategy:
  • Use well-known design patterns to decouple the UI from the navigation logic where this logic is complex.
  • Design toolbars and menus to help users find functionality provided by the UI.
  • Consider using wizards to implement navigation between forms in a predictable way.
  • Determine how you will preserve navigation state if the application must preserve this state between sessions.
  • Consider using the Command Pattern to handle common actions from multiple sources.

Presentation Entities

Use presentation entities to store the data you will use in your presentation layer to manage your views. Presentation entities are not always necessary; use them only if your datasets are sufficiently large and complex to require separate storage from the UI controls.

Consider the following guidelines when designing presentation entities:
  • Determine if you require presentation entities. Typically, you may require presentation entities only if the data or the format to be displayed is specific to the presentation layer.
  • If you are working with data-bound controls, consider using custom objects, collections, or datasets as your presentation entity format.
  • If you want to map data directly to business entities, use a custom class for your presentation entities.
  • Do not add business logic to presentation entities.
  • If you need to perform data type validation, consider adding it in your presentation entities.

Request Processing

Design your request processing with user responsiveness in mind, as well as code maintainability and testability.

Consider the following guidelines when designing request processing:
  • Use asynchronous operations or worker threads to avoid blocking the UI for long-running actions.
  • Avoid mixing your UI processing and rendering logic.
  • Consider using the Passive View pattern (a variant of MVP) for interfaces that do not manage a lot of data.
  • Consider using the Supervising Controller pattern (a variant of MVP) for interfaces that manage large amounts of data.

User Experience

Good user experience can make the difference between a usable and unusable application. Carry out usability studies, surveys, and interviews to understand what users require and expect from your application, and design with these results in mind.

Consider the following guidelines when designing for user experience:
  • When developing a rich Internet application (RIA), avoid synchronous processing where possible.
  • When developing a Web application, consider using Asynchronous JavaScript and XML (AJAX) to improve responsiveness and to reduce post backs and page reloads.
  • Do not design overloaded or overly complex interfaces. Provide a clear path through the application for each key user scenario.
  • Design to support user personalization, localization, and accessibility.
  • Design for user empowerment. Allow the user to control how he or she interacts with the application, and how it displays data to them.

UI Components

UI components are the controls and components used to display information to the user and accept user input. Be careful not to create custom controls unless it is necessary for specialized display or data collection.

Consider the following guidelines when designing UI components:
  • Take advantage of the data-binding features of the controls you use in the UI.
  • Create custom controls or use third-party controls only for specialized display and data-collection tasks.
  • When creating custom controls, extend existing controls if possible instead of creating a new control.
  • Consider implementing designer support for custom controls to make it easier to develop with them.
  • Consider maintaining the state of controls as the user interacts with the application instead of reloading controls with each action.

UI Process Components

UI process components synchronize and orchestrate user interactions. UI processing components are not always necessary; create them only if you need to perform significant processing in the presentation layer that must be separated from the UI controls. Be careful not to mix business and display logic within the process components; they should be focused on organizing user interactions with your UI.

Consider the following guidelines when designing UI processing components:
  • Do not create UI process components unless you need them.
  • If your UI requires complex processing or needs to talk to other layers, use UI process components to decouple this processing from the UI.
  • Consider dividing UI processing into three distinct roles: Model, View, and Controller/Presenter, by using the MVC or MVP pattern.
  • Avoid business rules, with the exception of input and data validation, in UI processing components.
  • Consider using abstraction patterns, such as dependency inversion, when UI processing behavior needs to change based on the run-time environment.
  • Where the UI requires complex workflow support, create separate workflow components that use a workflow system such as Windows Workflow or a custom mechanism.

Validation

Designing an effective input and data-validation strategy is critical to the security of your application. Determine the validation rules for user input as well as for business rules that exist in the presentation layer.

Consider the following guidelines when designing your input and data validation strategy:
  • Validate all input data on the client side where possible to improve interactivity and reduce errors caused by invalid data.
  • Do not rely on client-side validation only. Always use server-side validation to constrain input for security purposes and to make security-related decisions.
  • Design your validation strategy to constrain, reject, and sanitize malicious input.
  • Use the built-in validation controls where possible, when working with .NET Framework.
  • In Web applications, consider using AJAX to provide real-time validation.

Pattern Map

Category Relevant patterns
Caching Cache Dependency
Page Cache
Composition Composite View
Transform View
Two-step View
Exception Management Exception Shielding
Layout Template View
Navigation Front Controller
Page Controller
Command Pattern
Presentation Entities Entity Translator
User Experience Asynchronous Callback
Chain of Responsibility
UI Processing Components Model-View-Controller (MVC)
Passive View
Presentation Model
Supervisor Controller

Pattern Descriptions

  • Asynchronous Callback. Execute long-running tasks on a separate thread that executes in the background, and provide a function for the thread to call back into when the task is complete.
  • Cache Dependency. Use external information to determine the state of data stored in a cache.
  • Chain of Responsibility. Avoid coupling the sender of a request to its receiver by giving more than one object a chance to handle the request.
  • Composite View. Combine individual views into a composite representation.
  • Command Pattern. Encapsulate request processing in a separate command object with a common execution interface.
  • Entity Translator. An object that transforms message data types into business types for requests, and reverses the transformation for responses.
  • Exception Shielding. Prevent a service from exposing information about its internal implementation when an exception occurs.
  • Front Controller. Consolidate request handling by channeling all requests through a single handler object, which can be modified at run time with decorators.
  • Model-View-Controller. Separate the UI code into three separate units: Model (data), View (interface), and Presenter (processing logic), with a focus on the View. Two variations on this pattern include Passive View and Supervising Controller, which define how the View interacts with the Model.
  • Page Cache. Improve the response time for dynamic Web pages that are accessed frequently but change less often and consume a large amount of system resources to construct.
  • Page Controller. Accept input from the request and handle it for a specific page or action on a Web site.
  • Passive View. Reduce the view to the absolute minimum by allowing the controller to process user input and maintain the responsibility for updating the view.
  • Presentation Model. Move all view logic and state out of the view, and render the view through data-binding and templates.**
  • Supervising Controller. A variation of the MVC pattern in which the controller handles complex logic, in particular coordinating between views, but the view is responsible for simple view-specific logic.
  • Template View. Implement a common template view, and derive or construct views using this template view.
  • Transform View. Transform the data passed to the presentation tier into HTML for display in the UI.
  • Two-Step View. Transform the model data into a logical presentation without any specific formatting, and then convert that logical presentation to add the actual formatting required.

Technology Considerations

The following guidelines will help you to choose an appropriate implementation technology. The guidelines also contain suggestions for common patterns that are useful for specific types of application and technology.

Mobile Applications

Consider the following guidelines when designing a mobile application:
  • If you want to build full-featured connected, occasionally connected, and disconnected executable applications that run on a wide range of Microsoft Windows®–based devices, consider using the Microsoft Windows Compact Framework.
  • If you want to build connected applications that require Wireless Application Protocol (WAP), compact HTML (cHTML), or similar rendering formats, consider using ASP.NET Mobile Forms and Mobile Controls.
  • If you want to build applications that support rich media and interactivity, consider using Microsoft Silverlight® for Mobile.

Rich Client Applications

Consider the following guidelines when designing a rich client application:
  • If you want to build applications with good performance and interactivity, and have design support in Microsoft Visual Studio®, consider using Windows Forms.
  • If you want to build applications that fully support rich media and graphics, consider using Windows Presentation Foundation (WPF).
  • If you want to build applications that are downloaded from a Web server and then execute on the client, consider using XAML Browser Applications (XBAP).
  • If you want to build applications that are predominantly document-based, or are used for reporting, consider designing a Microsoft Office Business Application.
  • If you decide to use Windows Forms and you are designing composite interfaces, consider using the Smart Client Software Factory.
  • If you decide to use WPF and you are designing composite interfaces, consider using the Composite Application Guidance for WPF.
  • If you decide to use WPF, consider using the Presentation Model (Model-View-ViewModel) pattern.
  • If you decide to use WPF, consider using WPF Commands to communicate between your View and your Presenter or ViewModel.
  • If you decide to use WPF, consider implementing the Presentation Model pattern by using DataTemplates over User Controls to give designers more control.

Rich Internet Applications (RIA)

Consider the following guidelines when designing an RIA:
  • If you want to build browser-based, connected applications that have broad cross-platform reach, are highly graphical, and support rich media and presentation features, consider using Silverlight.
  • If you decide to use Silverlight, consider using the Presentation Model (Model-View-ViewModel) pattern.

Web Applications

Consider the following guidelines when designing a Web application:
  • If you want to build applications that are accessed through a Web browser or specialist user agent, consider using ASP.NET.
  • If you want to build applications that provide increased interactivity and background processing, with fewer page reloads, consider using ASP.NET with AJAX.
  • If you want to build applications that include islands of rich media content and interactivity, consider using ASP.NET with Silverlight controls.
  • If you are using ASP.NET and want to implement a control-centric model with separate controllers and improved testability, consider using the ASP.NET MVC Framework.
  • If you are using ASP.NET, consider using master pages to simplify development and implement a consistent UI across all pages.

patterns & practices Solution Assets

Additional Resources

Last edited Dec 19, 2008 at 9:28 PM by prashantbansode, version 6

Comments

No comments yet.