16 web application GUI style guidelines

Most of the guidelines that are specified for Windows GUI applications can also be applied to Web based application’s User Interface. Web applications must try to keep it close to the windows applications or adhere to the UI Style guide.

Use dialogs and pop-ups

Tabbing, titles, font, resizeability must be addressed as any standard windows based application does. No more than one level of pop-ups must be supported. For example, clicking on an icon would launch a dialog and this can at the most support only one more level of popup. Any dialogs and / or popups must have command controls (OK, Cancel, Help, Submit etc). User must not be forced to close the window using the window’s controls.

If a popup exists to display properties of an object (such as user trying to view user profile which won’t be altered, but only displays attributes), it must have dismiss or close control at the bottom.

Consistency

This is more applicable for web applications than the website development. Establish a layout grid and a style for handling your text and graphics, and then apply it consistently across all the pages.

Grouping of Items

Make sure actions are grouped together consistently either use at left or at right of the page but not both. Make sure all the actions within the group are aligned consistently. Ex: EDIT, DELETE, MOVE UP/DOWN etc can be applied in a table where entities are manipulated.

Disallow scrolling whenever possible

Rule of thumb is: if you have more than 2 screens’ worth of information to be shown in the page use page navigation techniques like next/previous and numbers of all the pages at the top. More than 2 screens’ worth of information forces the user to scroll so much that the utility of the page begins to deteriorate. We can have one pagination script that handles all our requirements.

Do not mix icons/buttons and textual links in same group

If you have navigational bar make sure all the items are aligned consistently and in some cases aligned and indented to show hierarchy. Haphazardly mixed graphics and textual links decrease usability and legibility.

Navigation history and breadcrumbs

Maintain a bread crumb trail when navigating within a page. This implies a need to maintain the history so that the browser back button must be able to take the user back on the trail. This is a good way to keep the user oriented about his tracks and this needs to be cached in the history so that he can go back.

Tool tips

Small description must be provided to every controls (with icons, buttons). This would make it easy for people who would turn off images. Accessibility issues can be addressed this way.

Use consistency in following hyperlinks

When you click a hyperlink say New XYZ…, and refresh the page the titles must be consistent in that the hyperlink.

Help

This will depend on the customer need. Help must be provided with every screen, so that the user can click on the Help button which would popup something like Help for this screen, Help for this tab, and Help for this product.

Cascading style sheet (CSS)

  • When appropriate, define styles globally.
  • Style rules should be provided in independent text files that are linked to or imported into multiple html files.
  • In-line styles are specified within the body of the document content, and affect only individual text elements. Use them only when absolutely necessary, since they are inefficient and hard to maintain.
  • In order for Cascading Style Sheets to work best, they must be assigned at the highest appropriate level. If you apply a style sheet globally, you need to apply it only once. If you apply a style locally when it should be applied globally, you will need to place the code in more than one file.
  • Whenever possible, use style sheets to position elements.
  • Using style sheets to define the placement of elements is more efficient and manageable than using absolute positioning. Using style sheets to position elements gives you more control and consistency.
  • When specifying fonts, provide the desired font, an alternate font, and a default font.

Fonts and text

Always use CSS; never use hard-code font size and font styles.
Handling font attributes from CSS reduces the efforts of GUI whenever any modification is required while development or post development. At some level, it also brings uniformity and consistency in information presentation.
  • Use 8, 10, or 12 point fonts for the elements in the user interface.
  • Use only one or two font sizes.
  • Use a sans serif font for the text.
  • Use only one font type for all of the text.
  • Avoid italics and underlining.
  • User system fonts only (Verdana, Arial)

Use alternate text

User alternate text wherever we have pictures, icons, thumbnails which also helps in SEO and works as image placeholders. Alternatives text is used as a replacement for an image, whenever the image cannot be seen. This can happen, for example, when someone:
  • uses a screen reader (e.g. a visually impaired person)
  • uses a text-only browser (e.g. browsing from a mobile phone)
  • uses a graphical browser with images turned off
  • has not yet downloaded the image
  • browses results from a Web search
  • fails to download the image because of a network problem
  • copies an extract from a Web page into a word processor.
Alternative text is also used for other purposes. For example, Google’s image search uses it to help return appropriate images. Finally, good choice of alternative text and captions makes life easier for people, who are viewing the source of an article, either when editing it, or in a diff, or in Wikipedia’s internal search.

Use icons

Use as much as icons as possible. Icons should be suggestive of the functionality with which they are associated. The best icons help users to get idea of the primary purpose of the program or operation without having to read accompanying text.

Use of colors

  • The human eye is attracted to color before black and white.
  • Build the interface using black, white, and gray first, then add color only if you have a good reason to do so.
  • Use either white, off-white, light gray, pale blue, or pale yellow for an application’s background, and use black for the text.
  • Always use dark text on a light background because it is the easiest to read.
  • Never use a dark color for the background or a light color for the text.
  • Limit the number of colors (other than white, black, and gray) to three.
  • Never use color as the only means of identification for an interface element.

Use of pictures

  • The human eye is attracted to pictures before text, so include a graphic only if it is necessary to do so.
  • If you are including the graphic for aesthetics only, use a small graphic and place it in a location that will not distract the user.

Information presentation

  • Organize the user interface so that the information flows either vertically or horizontally, with the most important information always located in the upper-left corner of the screen.
  • Group related controls together using either white space or a frame.
  • Place the most commonly used command button first.
  • Assign meaningful captions to command buttons.
  • Place the caption on one line and use from one to three words only.
  • Command buttons in the interface should be sized relative to each other.
  • If the command buttons are centered on the bottom of the screen, then each button should be the same height; there widths, however, may vary.
  • If the command buttons are stacked in a corner, then each should be the same height and the same width.