Usability Institue Logo- A bolt that can be fastened with any of 4 tools
PicoSearch
Reducing Training to Its Sensible Minimum: Zero...
Inexpensive, Independent Usability Consulting by Jack Bellis
Home Page- List of All Content Home Page- All content, in date order Resources: page describing tools you can use Morsels: just our short articles and blurbs Just our Before&After Articles About: details on who I am and what I do Address, phone, number,  and so on

You are here>> JackBellis.com > UsabilityInstitute.com > Generic UI
   

GenericUI, A Free Design for Web-Based Applications
Because developers have better things to do with their time than listen to users whine about which color to use!

    Terms
    The Latest Major Change: Application Gallery
    Revision History, Updated 2004-Apr-22 (Created ~2002)
    Download Zip File, Updated 2003-May-04, 432K
    Download Just the CSS File
    Sample Application This is where a lot of our example work will end up as time goes on, as we develop a real application.
   

Contents*

Introduction

Philosophy

Graphics

Colors

Icons

Images

Styles

Link Styles

Redefined HTML Tags

Custom Styles

Tables

Columns and Alignment

Basic Table Style

Table Cell Styles

Data Table

Two-Tiered Table

"Info Box"

Notepad-Like Table

Error Messages

Standard Wording

Navigation Controls

Left Nav Bar

Basic Text Menu

Outline Control

Drop-Down Menu

Pages

Data Entry Page

Secondary Window

Receipt Page

Receipt Example

Detailed Table

Sample Application

Design Gallery

Application Gallery

*We'll probably make this a floating menu soon (written in 2002 and still thinking about it, folks).


Introduction

What?
 

GenericUI is reusable foundation from which software developers can create the visual components of Web-based software applications. It includes a style sheet, visual design elements such as tables and buttons, and icon artwork. It's specifically designed for the presentation of data and functions but it certainly can be used for "content-centric" sites and pages.

  • The name, GenericUI is modeled after a reusable database foundation, GenericDB.
  • The colors and some design elements are based upon Microsoft Hotmail, with ideas from other great sites and my own experience.
  • It addresses the accessibility guidelines of the WAI in that styles are used for all formatting so users can assign their own style sheet. And fixed font sizes are used as little as possible (table headings) so users can enlarge their own text size. (The remaining aspects of compliance are beyond the control of GenericUI... they're things only you can control.)
  • The style names are prefixed with the HTML element that they are designed for. This one technique alone will pay for itself on any multi-developer project.
Who?
 
  • It's from a usablility analyst/information designer who provides independent usability consulting service.
  • It's for anyone who makes software applications presented in a Web browser, from students and hobbyists to the largest corporations in the world. Please don't be embarrased to use it even for high-profile customers, you're saving money and enhancing usability... it's not cheating or uncreative. It's smart, and good design. And it's what people are accustomed to; they're not accustomed to different designs on every interface they use. 
Why?
  You're wasting time and money by starting a design from scratch, and you're also asking your users to learn a new interface if you create one. When you try to design a Web application interface from scratch, it is equivalent to retracing the last 11 years of Windows/Mac user interface design. You can't do it on a project basis. All you are really doing is finding out all of the things you haven't thought of.
How?
 

Look over the pages to understand them and download the zip file. It includes the CSS, images, and sample pages that you can work from. Contact us if anything is inaccessible. We intentionally place as much as possible on this one long page so the information is easy to disseminate.

How Much?
 
  • GenericUI is free for all use, commercial or otherwise.

 

Design Philosophy and Guidelines

"The goal of information design is the reduction of noise in the communication channel by the elimination of extraneous content, simplifying formal options, and limiting of interpetations." We don't know who said it—probably R. S. Wurman—but it's a good starting point for our direction:
  • We use a plain white background and dark text.
  • We use blue as the primary decorative color. Look at a lot of sites and you'll see it's the most neutral, comfortable, confidence-inspiring color. (Red is used for sales impact. Beyond that you're into pure artistic judgment.)
  • We use sans-serif fonts because all of the top sites do. They're better online. We like Verdana.
  • Unlike content-centric sites that benefit from links that turn purple when you visit them, we keep our basic links unchanged after visiting because our design is for functionality, not information. Our style sheet has a link style for content-centric links, "aContentLink".
  • We don't use underlining for links because it offends our delicate artistic sensibilities. Underlining is the most rudimentary of typographic techniques—the only one an old manual typewriter can do—and we think it's time to move on; it looks distracting. Our links are indicated by bold blue text. It's your style sheet, though; do as you see fit.
  • It would be great if graphic names and style names could all be "purposeful" instead of "descriptive" but it's just not that convenient to do so except for easy things like "tableWarning." For instance, the lightbulb icon could be named "idea" or "note" and that would be handy if the we change from a lightbulb to a thumbtack image, but sooner or later the disadvantages outweigh the advantage. For styles, there are too many different purposes for which we'll use each style. Perhaps some day, with more inheritance and cascading, a level with truly purposeful names would be possible but not yet.
  • We're not CSS gurus, just tired of seeing this wheel reinvented so often, and so poorly... and I hate the idea of every student programmer starting from scratch. If there's a better way to do some of this stuff just say so.

 


Graphics

Colors

Use colors cautiously and conservatively. When in doubt, don't use a special color.
Name Purpose Hex Code Swatch
Header Blue Table header background #006699  
Sorted Blue Table header background for sorted column #A3C1E0
Blue Table rows background for selected row #C3D6E6  
Gray Miscellaneous decorative use #eeeeee  
Gray-Green Form background color #EEEEE2  
Black General use. Used in headings, page text, some functional links such as Expand/Collapse. #000000  
Light blue Table row background, alternating with white for row differentiation #eff7ff  
Light yellow Table row background, for attention or highlighting #fff7e5  
Red Caution, warning, alert. #CC6633  
Green Receipt header #336666  
Yellow Error message header color #F8EE36  

 


Icons

Almost all icons are 16 x 16 pixels.

Image Filename (.gif) Purpose
  Statuses
no No, warning, failure icon
check Yes, OK, success icon
alert Alert, caution, remember to do something
warning Warning, danger, problem
info Information, notice, results
lightbulb Idea, suggestion, tip
   
  Actions
delete Delete item
edit Edit
view View/preview
  undo Undo icon
refresh Refresh, reset icon
print Print a page, printer-friendly, 3-D version
printSimple Print a page, printer-friendly, 2-D version
   
  E-Commerce
  cart  
cart19x16  
  Media and content
download Download a file from a server
zip Zip file
pdf PDF file
page Data page, document
pageEmpty Data page, empty, new
video Video or animated content
audio Sound content
blueRibbon Bookmark, favorite, nice work
   
  Destinations
home Home page
topage Indicates link to another page
inpage Indicates link to another location within the current page
popup Indicates link to a popup over the current page
globe Indicates link to another site
 
  VCR style controls for data records, animations, items in a list, etc.
GoFirst Go to first element
GoFirstDisabled Go to first element, disabled
GoPrev Go to previous element
GoPrevDisabled Go to previous element, disabled
Play Play a sequence
GoNext Go to next element
GoNextDisabled Go to next element, disabled
GoLast Go to final element
GoLastDisabled Go to final element, disabled
Stop Stop sequence
StopDisabled Stop sequence, disabled
More coming every week... and you get three free custom icons if you register!

Images

These are images that are not 16x16. They are in the "imagesSupporting" folder.
Purpose Filename (.gif) Image
Sorted column, descending triangleDown
Sorted column, ascending triangleUp
Emphasis bullet triangleBullet
Warning box headers, left and right barricade5Marks
Warning box headers, as background barricade1Mark
Warning box header, center background for tdHeaderWarning style barricadeSlice
Decorative receipt edge, like money or a certificate certificate
Notepad checkmark checkBoxChecked
Notepad failure mark checkBoxX
Notepad empty checkbox checkBoxEmpty
Notepad red divider line notepadVertBars
Notepad header background notepadHeader.gif


Styles

Link Styles

Name Description Example
 
Note

The first four styles below, redefining the default link appearances, are specifically designed the way they are because GenericUI is first-and-foremost for software applications, not for content-centric sites. You certainly can use GenericUI for content-centric sites, and you'll save a lot of time and money, but use the "aContentLink" styles for links that users visit once.


 
a

Link appearance. Note that we've replaced the underline attribute with bold, as the primary indicator or a link. This is only intended for software application functions, not content-centric links.

Live link
a.active

Link appearance when it has the focus, as when you've tabbed to it. Also appears when you return to a page if it still has the focus.

Static example
a.hover

Link appearance when mouse is over it

Static example
a.visited

Link appearance after visited. For our design, which is intended for applications, not "content-centric" sites, the visited state does not have a different color. We've got another style for traditional, content-centric destinations, where tracking visitation is meaningful; it's "aContentLink," and is listed under Custom CSS Styles.

Visited link appearance (no difference)
aContentLink For HREFs (links) to "content-centric" destinations that would benefit from the color-coding of "visited" pages, typical of default Web pages. Example: link to our Revision History page.
a:visited.aContentLink This is not a style you explicitly apply; instead it is used to render the aContentLink class after the link has been visited. Static Example
a:hover.aContentLink This is not a style you explicitly apply; instead it is used to render the aContentLink class when the mouse is over the link. To see the appearance, hover the mouse over the Revision History link above.
aLinkOnDark   Link

 

Styles for Redefined, Standard HTML Tags

This group specifies new attributes for built-in HTML elements. Not all of the approximately 75 have been customized.

Name Description Example
body Default for all text, we've made it Verdana and "x-small" in size. This is a "relative" size, meaning that users can enlarge it by using their browser's text size control. body
input

Text entry box, again Verdana with height and margin adjusted a little.

textarea

Text entry box, multiple lines.

td Table data default; 5 pixels padding on the left and right so there's space at edges. And we top-align text in table cells because it looks better for data (whereas we bottom-align the text in the headers).  
ul Unordered list (a bulleted list). Use bulleted lists when the order of the items is not significant. Notice the square bullet.
  • List Item 1
  • List Item 2

 

ol Ordered (numbered) list. Nothing special but we've defined it so you have a place to define formatting.
  1. Item 1
  2. Item 2
img Images, no border.
hr

Horizontal rule, 1 pixel, blue.


 
p Paragraph, no padding top and bottom so that custom styles can determine tight spacing

This is a paragraph.

And this is a paragraph!

H1 Heading 1, for major page sections; not intended for page naming.

Heading 1

H2 Heading 2, for minor sections and groups of fields.

Heading 2

em Emphasis, bold Look at this!

 

Custom CSS Styles

I think that technically these are called "class selectors" since you assign them to custom classes.

Name Description Example
txtSupportingInfo Small text for embedded help and incidental messages, not "directive" (do this style) information.

txtSupportingInfo

txtSupportingInfoCenter Same as above but centered.

txtSupportingInfoCenter

txtWarning Warning and caution text that is inside our fancy yellow bar heading. Notice it's slightly gray, connoting a sense that it's temporary. txtWarning txtWarning txtWarning txtWarning txtWarning txtWarning
txtWarningRed Warning and caution text that is NOT inside our fancy yellow bar heading.

txtWarningRed

txtRequiredFieldIndicator Format for any indicator, such as an asterisk, that denotes required fields. *
inputReadOnly

Format for read-only text entry (input) form objects.

aButton Format for a button that is formed from a plain text HRef. Design Gallery
frmButton Format for a form button. This one has the best usability since the whole button, not just the text, is clickable.
tdButton Format for a button that is formed from a table cell.
     
  Cambrian Review  
     
selectBlueBack Blue background for drop-down lists on forms.
imgShadow Content images, for a shadow edge effect. These are images that contribute to the message of a page, as opposed to images used to support functionality that a page provides. Another option: change to 1 pixel, black, on all 4 edges.

 


Tables and Table Styles

Table Borders and Backgrounds

For general purposes, use the following guidelines for table borders and backgrounds. (These guidelines were substantiated by a study by Tom Tullis and Stand Fleischman, published in Intercom (June 2004), the magazine of the Society for Technical Communication.)

  1. Use only horizontal borders between rows; do not use vertical borders.
  2. Where color-coding is not used for other purposes, use alternating color-coded backgrounds (bars) for rows.
  3. Use moderately large inter-row spacing, rather than tightly spaced rows. For instance the space from row to row should be approximately twice the text height.

Rules for Table Columns and Alignment

These are generalizations. Apply with a healthy sprinkling of judgment.

  1. Variable-length text: For columns with variable-length text, left align the data and header rows.
  2. Numbers: When numbers represent quantities or money, right-align the data and center align the header row.
  3. Fixed length data: For columns with fixed length data, or nearly fixed-length data (such as Yes/No/Maybe text), center the data and header rows.
  4. Sorted column: If possible, place the sorted column as the left-most.
  5. Linked values: If the values in a column are links to records, link a column that has distinguishing values (Smith, Jones), not repetitive values (Member, Member, Visitor).
  6. Functions: If multiple functions are present on rows, place them to the right.
  7. Multi-Line Headers: If the header row might be multiple lines of text, consider bottom-aligning the text. It looks nicer.

Basic Table Style

tableBorderAround
Getting a margin inside the blue border---via a single style attribute---is turning out to be more difficult than it should be. Using the table margin or padding doesn't affect the stuff within the table unless it is within another table or some other container. For instance, on our ASP example page, the ASP stuff seems to inherit the padding, but this text doesn't unless we embed it in another table, which we have done.
 

Table Cell Styles

tdhead   tdHeadVertLine  
    tdheadCenter   tdHeaderSelected
      tdHeadVertLineCenter  
  tdBottomSeparator     descending
      tdBottomSeparatorLeftVert ascending
  tdBottomSeparatorCentered      
      tdbottomseparatorleftvertCenter  
        tdbottomseparatorRightVertCopy
  Note: all of the following row styles are top-aligned. That's the only reason that trWhite is needed.    
trYellow For highlighted rows
(Microsoft Hotmail uses
this for new mail)
 
trWhite: For alternating row
color-coding.
trLightblue: For alternating row
color-coding
trBlueGray: For selected rows
trBlueMedium: For two-tiered table
subheadings
   

Data Table with Color-Coded Rows

   
Features
Name Date Sex Status
Smith 04-May-1876 Male
Jones 12-Mar-2003

Female

Wilson 19-Apr-1987

Male

Devries 22-Jun-2000  
Alston 19-Apr-1987

Male

Newlon 22-Jun-2000  

 

Two-Tiered Table

[+] Expand All [-] Collapse All

     
Grouped Columns
tdHead   tdHeadVertLine tdHeadVertLine
[+] Level 1, Row 1
 
tdHeadSub tdHeadSubCenter column 3
Level 2, Row 1 Lorem ipsum dolor sit ametLoremdolor sit amet Lorem Yes
Level 2, Row 2 Lorem ipum dolor sit amet Lorem No
[+] Level 1, Row 2
 
tdHeadSub tdHeadSubCenter column 3
Level 2, Row 1 Lorem ipsum dolor sit ametLoremdolor sit amet Lorem Yes
Level 2, Row 2 Lorem ipum dolor sit amet Lorem Yes
         

"Info Box," A Right-Margin Box or Query Form

 
Lorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit amet Lorem ipsum dolor sit amet
 
 
<table.tableInfo>
<td.tdheadCenter>
Sample Right-Margin Box

<p.txtInfoBoxCenter>
This is a side table typically used for secondary information, supporting text, help information and so on.

Notepad-Like Table, Great for a Checklist

This is great for a checklist, which we use for our Website Survival Report Cards. Check out this example.

  tdHeaderNotepad
This row was just set a little taller.  
  h2, right aligned Pass Fail Let's talk
  Logo in top left? Pass Fail Let's talk
  Tagline? Pass Fail Let's talk
  Welcome Blurb? Pass Fail Let's talk
     
  All rows are trNotepad for the background color All cells are td.tdbottomSeparator
    =imagesSupporting/checkBoxChecked.gif
  The column to the left is td.tdNotepadVertLine =imagesSupporting/checkBoxX.gif
    =imagesSupporting/checkBoxEmpty.gif
    = imagesSupporting/notepadVertBars.gif
     
    The cell to the left has the background manually set to: imagesSupporting/notepadVertBars.gif instead of adding another style.

 

The following table demonstrates each style a little better (the gray border was just added for clarity.)
td.tdHeaderNotepad        
         
tr.trNotepad        
         
td.bottomseparator     To the left is td.tdnotepadvertline  

 


Error Messages

Error Message, Option 1: Header Markings Use Images

Table: tableWarning
tdheaderwarning

txtWarning Do not do that! Look out, don't bang your head. Is this cool or what?

 

This cell: tdWarningBody

Error Message, Option 2: Header Markings Use Cell Background

  tdheaderwarning  

txtWarning Do not do that! Lorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit amet Lorem ipsum dolor sit amet

 

This cell: tdWarningBody (for dashed border)

 

 

 

How the error message table is set up:
  To the left is a cell with tdHeaderWarningMarks. This fills the cell with a background graphic. If you want more control over the width, use tdHeaderWarning and insert one of the graphics barricade5Marks or barricade1Mark into the cell.
   
  To the left is tdHeaderWarning, for the center of the header. It has a thin slice set to the background.
   
  This cell: tdWarningBody (for dashed border)

Embedded Error Text

Danger Earthlings: use this style, "txtWarningRed," for messages that appear outside of the yellow-bar motif, shown above.

Standard Message Wording

We've got a whole page of typical phrases that you should model your messages after, such as server down, copyright, "off-ramp" language, and so on. Standard Wording Page


Navigation Controls

Left Navigation Bar

Here's one of the the most common navigation schemes, a vertical bar on the left. For each of the two levels, we use a style for the A Href tag and another style for the table row. Instructions

 

 
JackBellis.com
Shackleton Sculpture
World's Greatest Chess Set
RSIRescue.com
Usability Institute.com
Permanent Resources
Morsels
Before & After
Reviews

 

Basic Text Menu Links

Use the following two styles for site maps, simple left navigation menus, and menus within the body of pages. The main formatting that they employ is the left margin spacing and line height. If you want a third level deep, clone L2 and set the Box/Margin in another 10 pixels.

 

Tables

Columns and Alignment

Basic Table Style

Table Cell Styles

Data Table

Two-Tiered Table

"Info Box"

Notepad-Like Table

class="aSimpleNavL1"

class="aSimpleNavL2"

class="aSimpleNavL2"

class="aSimpleNavL2"

class="aSimpleNavL2"

class="aSimpleNavL2"

class="aSimpleNavL2"

Collapsing Outline Control

Ooooh, ahhhh. A collapsing/expanding outline control. We don't write this stuff, we get it free from smart guys at DynamicDrive and apply our styles. Instructions

Top Navigation Drop-Down Menu

Another bit of Javascript alchemy from DynamicDrive with our styles applied. Instructions


Page Designs

This is where it all comes together, showing you samples of various application situations.

Data Entry Page

Basic Information
Your ID Number:
*First Name:
*Last Name:
Month/Day of Birth:
Favorite Answer:
Yes No
Favorite Color(s):
Neutral Beige Off-White Whiter Shade of Pale
Explanation for the Cosmos:
(15 words or fewer)
 
             
  OK   Cancel      
             

Secondary (Pop-Up) Window

Open secondary window

Receipt Page

Use the following formats for any data that is irrecoverable by the user and should be printed. They share the table and body styles with the warning messages. If you want special formatting clone and modify the styles. Note that a subtable is used inside a single bottom cell.

 

See a full-page example

Format 1, Plain

This is Your Receipt ~ Print this Page

table: class= tableWarning    
  header row: class= tdheadReceiptCenter  
single bottom cell: class=tdwarningbody    

Format 2, Fancy

 

This is Your Receipt ~ Print this Page

table: class= tableWarning    
  top header row: no class, background=imagesSupporting/certificate.gif  
  second header row: class=tdheadReceiptCenter  
single bottom cell: class=tdwarningbody    

Detailed Data Table Page

Here's a data listing—simulated with static HTML—with lots of links and details, to see the styles in action. Show me>>>

Live Database Application

We changed hosts and would have to pay extra for MS Access support, so the sample below has been temporarily replaced with an actual live site [not a sample] that's on another hosting site. But it doesn't use the GenericUI styles.

 

(((Eli Robillard's GenericDB, interpreted with our styles.

This is where a lot of our example work will end up as time goes on, as we develop a real application. See it work>>> )))


© 2003, UsabilityInstitute.com   All Rights Reserved    jackbellis@hotmail.com