Scribd
Upload
73 views

Common UI Practices in ASP

This document outlines common practices and standards that should be followed when developing ASP.NET applications. It provides guidance on login pages, site themes, data formatting, validators, controls, grids, details pages, print pages, pop-up pages, error pages, session expiration, test pages, email notifications, file attachments, and user manuals. The goal is to establish a consistent user interface standard template that can be customized for each new project.

Uploaded by

api-3831765
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
73 views

Common UI Practices in ASP

This document outlines common practices and standards that should be followed when developing ASP.NET applications. It provides guidance on login pages, site themes, data formatting, validators, controls, grids, details pages, print pages, pop-up pages, error pages, session expiration, test pages, email notifications, file attachments, and user manuals. The goal is to establish a consistent user interface standard template that can be customized for each new project.

Uploaded by

api-3831765
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
You are on page 1/ 4

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.

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.

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.

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.

Grid:

1. Include ‘Delete Confirmation Box”


2. Include Paging
3. Include Sorting
4. For action buttons use text/ image

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, nextbutton to go to other portions of the corresponding
entity or data tablerow.
b. Include save, cancelbutton
c. save data to databasewhen any of the navigation button for the
corresponding record isclicked.
Print page:

Contains a “Print” and “Close”link, along with all the info of the corresponding
record.

Pop-up page:
No browser buttons will bedisplayed, rather only the page content and browser title
bar will bevisible.

Error page:

When there is an exceptionoccurred while processing info, an error page will be


shown with some text.

Session expirepage:

1. When the session is expired apage will be shown to the user, notifying is session
expiration.
2. If the user doesn’t interactwith the application for 20 minutes (asp.net default),
and tries to interactafter then the user will be automatically redirected to the session
expire page.However we can override the session timeout value.

Test page:

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

E-mailnotification:

1. Once data insertion iscompleted, an automated e-mail notification will be sent to a


predefined and/orthe email that was just provided in the data insertion.
2. Developers will be notifiedthru mail when there is an exception occurred by the
application.
3. Please consider the “EmailFrom” address while sending the automated mail.
Generally this is set to thedevelopers e-mail (example:[email protected]).
4. Consider who will be thedefault E-mail receiver. Generally this is set to the
developers e-mail(example:[email protected]).

File attachment:

1. Uploaded files will be savedwith the “fileid_” prefix, so that no future uploaded file
can replace thisfile.
2. Multiple files can bedownloaded by the dynamic generation of ‘upload’ control by
specifying by theuser 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 thanthat.
4. By default the fileattachments will be placed on “Virtual directory\Attachments”
folder.

User manual:

1. Helplocation:

• a. To get the helpcontent for any page, the ‘Help’ button is located
with the other pagenavigation tab.
• b. For any control, a‘Help’ button icon can be embedded with it.
2. Content:

• a. For each item/ pagethe help text can be placed onto separate html
file.
• b. All of the helpcontents can be placed into one html file.
• c. For a given control, asimple 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 anidea about
the future UI standard of the project and thus can update the UIstandard easily
according to agreed model.

You might also like