Common UI Practices in ASP.NET Applications

Posted by & filed under ASP.NET.

Common UI Practices in ASP.NET Applications – The Code Project – ASP.NET:

Introduction

When we start a new project, there are some common practices that should be followed on the following project. Regarding my development experience on previous 12 ASP.NET projects, I have listed some few practices which can be followed by a developer while developing an ASP.NET application.

The Practices

Login page:

1. Include cookie based “Remember me” check box.

2. Include a “Forgot password” link, the user can request for password.

3. There will be a test log-in page before release the product.

4. If the user doesn’t interact with the application for 30 minutes (asp.net default), and tries to interact after then the user will be automatically redirected to the log-in page. However we can override the authentication timeout value. (http://codeproject.com/useritems/ASpNet_Page_redirecting.asp)

# Relevant resources:

1. <ASP.NET 2.0> Login Controls
2. Building a Custom Registration and Login Control
3. Build an ASP.NET Session Timeout Redirect Control

Site theme:

1. Use verdana as text font.

2. Normal text 10pt, paragraph text 11pt, heading text 12pt, bold (or inlcude in H1 html tag).

3. UI controls having right justified caption, and a spacer of 10 pt width between that.

4. Have common header, footer among all the pages. The footer will include the copyright text.

5. To make styles of text, hyperlinks, UI controls of the application uniform implement style sheet classes where possible. This makes the modification of the site theme easy as well as.

# Relevant resources:

1. <ASP.NET 2.0> Applying Styles, Themes, and Skins

2. Applying Styles to Controls

Data format:

1. Date format:

All dates will be considered in this format: MM/DD/YYYY, or the format specific to target culture.

2. Money format:

All money formats will be considered in 2 degree precision.

Validators:

1. When the user clicks to “Save” data, any field that is bound to validation logic, for which the validation logic fails (for example: no data has been provided for a “Required” field) will show a red “Validation” message at the right side of that control. Once data are entered and the focus is changed to other controls that red “Validation” message will be disappeared.

Here are the common validation types and messages that will be used in the application:

  • a. Required: “Required”
  • b. Email address format: “Valid email address required”
  • c. Date format: “Not a valid date”
  • d. Number: “Not a number”
  • e. Fractional value: “Enter a valid number or value”

2. Include “*” for required fields and a text “* indicates required fields”, at the top right of the UI panel.

3. Text length: when the user exceeds the recommended length of text, a message box will be shown automatically and no characters can be entered.

# Relevant resources:

1. <ASP.NET 2.0> Validating Form Input Controls
2. <ASP.NET 2.0> Validation Controls

3. <ASP.NET 1.1> Server Control Form Validation

Control focus:

When there is required to post back any control during the data insertion and the controls are placed at the bottom of the page (to which the user has been reached by scrolling the window), the next control will be automatically focused after the post-back.

# Relevant resources:

Focus in ASP.NET Controls

Grid:

1. Include ‘Delete Confirmation Box”

2. Include Paging

3. Include Sorting

4. For action buttons use text/ image

# Relevant resources:

1. <ASP.NET 2.0> Grid Sorting and Paging
2. <ASP.NET 1.1> Sorting Columns in DataGrid
3. <ASP.NET 1.1> Paging in DataGrid
4. Delete Confirmation Box

Details page:

The details info of a record of tabular data can be viewed and updated in any of the following ways:

1. Grid

Data can be updated on the grid.

2. Details panel

Details content will be placed on the same caller page and can be updated.

3. Pop-up page

Content will be shown to show the details info of the corresponding record.

4. Multiple pages

a. Include back, next button to go to other portions of the corresponding entity or data table row.

b. Include save, cancel button

c. save data to database when any of the navigation button for the corresponding record is clicked.

# Relevant resources:

1. <ASP.NET 2.0> “DetailsView” Control
2. <ASP.NET 2.0> “FormView” Control

Print page:

Generally web application pages may have graphical images and styles for better UI experience. However, the page containing graphical image may not be useful (or looks good) while this page is printed. A common UI practice is to have a ‘Print this page’ link in the application data pages, which redirects the user to a printer friendly page. This type of page contains a “Print” and a “Close” link, along with all the info of the corresponding record.

# Relevant resources:

1. Using Style sheets to create a ‘Print This Page’ View
2. A Simple HTML Builder Utility Class

Pop-up page:

No browser buttons will be displayed, rather only the page content and browser title bar will be visible.

# Relevant resources:
A Client Script Helper Utility Class

Error page:

When there is an exception occurred while processing info, an error page will be shown with some text.

# Relevant resources:

Customizing Error Pages

Session expire page:

If the user doesn’t interact with the application for 20 minutes (asp.net default), and tries to interact after then the user will be automatically redirected to the session expire page, which contains some text message. However we can override the session timeout value in “web.config” file.

# Relevant resources:

Detecting ASP.NET Session Timeouts

Test page:

There will be some test page which will illustrate complex data processing. However these pages will be placed on the public page, or can be authenticated by the test log-in page.

E-mail notification:

1. Once data insertion is completed, an automated e-mail notification will be sent to a predefined and/or the email that was just provided in the data insertion.

2. Developers will be notified thru mail when there is an exception occurred by the application.

3. Please consider the “Email From” address while sending the automated mail. Generally this is set to the developers e-mail (example: joy_csharp@hotmail.com).

4. Consider who will be the default E-mail receiver. Generally this is set to the developers e-mail (example: joy_csharp@hotmail.com).

# Relevant resources:

1. <ASP.NET 2.0> Sending Email From ASP.Net

2. Sending emails with ASP .NET

File attachment:

1. Uploaded files will be saved with the “fileid_” prefix, so that no future uploaded file can replace this file.

2. Multiple files can be downloaded by the dynamic generation of ‘upload’ control by specifying by the user that how many files will be uploaded.

3. For uploaded file size, asp.net default is 4 MB. Please mention the size if you need greater than that.

4. By default the file attachments will be placed on “Virtual directory\Attachments” folder.

# Relevant resources:

File Upload with ASP.NET

User manual:

1. Help location:
  • a. To get the help content for any page, the ‘Help’ button is located with the other page navigation tab.
  • b. For any control, a ‘Help’ button icon can be embedded with it.
2. Content:
  • a. For each item/ page the help text can be placed onto separate html file.
  • b. All of the help contents can be placed into one html file.
  • c. For a given control, a simple help text can be placed at the below location of that, with a gray, italic format.

Conclusion

However, the provided outlines can be considered as “UI Standard Template”. Before starting a new project, you can use this template to have the clients an idea about the future UI standard of the project and thus can update the UI standard easily according to agreed model.

Comments are closed.