WebSphere Dashboard Framework - Best practices for improving the user interface
A well designed user interface is critical to the success of your dashboard application. Keep these visual design ideas in mind as you develop your own applications.
Consider the screen area.
When developing any Web-based application, you are always challenged by how much screen area you have. In most cases, you should plan for a screen resolution of 1024x768. It is good to allow for larger screens by allowing portlets to stretch, but in development you may want to actually fix the width of your browser. One simple way to do this is to edit your portal theme and set the width of the outer table to 950-1000 pixels. You really want to think about this before you start development because it is difficult to resize an application back to a smaller resolution after you have built the dashboard. This also prevents the situation where you develop at your normal desktop resolution and then try to do a presentation of your work and find that half of the screen is missing.
Simplify your portlet views.
There is a tendency in portals to want to place as much data from as many different sources on a screen at one time. While this can look great for a demonstration or screen capture, this is not the optimal appearance for a production dashboard. Remember that dashboards are not about showing an abundance of data; rather, they are about displaying important metrics and trends to the appropriate users.
You should constantly be asking yourself whether your portlets are showing the most important information and are also allowing users to drill down for more detail. Consider whether the columns you have in your table are all critical. A good technique is to set the default visibility to true for only the most critical columns in a table. Then allow users to show additional columns by using a portlet edit page.
Another technique is to use Status Indicators to highlight values. Often you can remove the information in a given column by using it to drive the formatting of another column. For example, instead of having a column for "Status," you may apply a small indicator icon next to the value in the "Project" column that visually shows the status of the project.
Finally, if portlets cannot fit on a single page, either horizontally or vertically, consider breaking the page into two pages.
Make the display as visual as possible.
Use charts and status indicators (for example, highlight cells and status icons) to make the display as visual as possible. Remember this involves shapes and patterns as well as colors, since many people are colorblind. For example, you may want to stay away from simply changing the text color of table cells and instead apply a style class with a patterned background image. Similarly, instead of a circle that is red, yellow, or green, also use a different shape for each status and consider providing a legend. Finally, try to provide more information in mouseover text by displaying informative alternate text.
Simplify and centralize field formatting, validation, and the user interface.
The Rich Data Definition builder is an extremely powerful builder that will provide a consistent method and a centralized location for formatting your applications.
Make column data easier to use.
Use the Data Column Modifier builder to add formatting to tables by making column headers user-friendly, enabling sorting of columns, enabling paging, and setting messages for empty data behavior.