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
Contact me for a FREE usability review!
 

GenericUI from UsabilityInstitute.com,
a Reusable Shareware Design for Web-Based Applications

Updated 31-Mar-2003: Live database example!

Revision History   Download Zip File (209K)

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.

How Much?
 
  • For non-commercial use and for indefinite trial use whether commercial or not, it's completely free, but please spread the word by referencing our site with the icon below.
  • Commercial Use: If you use it on a commercial system, please pay our shareware fee of US$125.00. You're entirely welcome to wait until the time you receive your first revenue from your system. This is expected to save you thousands of dollars of equivalent user interface design work so we hope it's well worth the small fee.
  • And, when you register, you get periodic updates and I will create three custom icons for you. Just E-mail me with what you want!
  • Register Now ($98.00)
    Goods and services provided by Simax (PA, USA), our corporate name.
    Sold by 2CheckOut.com Inc. (Ohio, USA), our secure shopping cart hosting site.


Colors

Name Purpose Hex Code Swatch
Header Blue Table header background #006699  
Sorted Blue Table header background for sorted column #A3C1E0
Blue Table cell background for selected row #C3D6E6  
Gray Decorative use #eeeeee  
Black General use. Used in headings, page text, some functional links such as Expand/Collapse. #003366  
Light blue Table rows, alternating with light yellow for row differentiation #eff7ff  
Light yellow Table rows, alternating with light blue for row differentiation #fff7e5  
Red Caution, warning, alert. #CC6633  
Green Receipt header #336666  

 


Icons

All icons are 16 x 16 pixels.

Purpose Filename (.gif) Image
Undo icon undo  
Refresh, reset icon refresh
No, warning, failure icon no
Yes, OK, success icon check
Alert, caution, remember to do something alert
Warning, danger, problem warning
Information, notice, results info
Idea, suggestion, tip lightbulb
More soon... and you get three free custom icons if you register!    

Supporting Images

Purpose Filename (.gif) Image
Sorted column, descending triangleDown
Sorted column, ascending triangleUp
Emphasis bullet triangleBullet
More soon...    

 

Link Styles

Name Description Example
a

Link appearance. Note that we've replaced the underline attribute with bold, as the primary indicator or a link.

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. body
input

Text entry box.

textarea

Text entry box, multiple lines.

td Table data default.  
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

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 messages.

txtWarning

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. Button
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.
     
  Button  
     
selectBlueBack Blue background for drop-down lists on forms.

 

Tables

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 Characteristics

tableBorderAround
 
 

Samples of Table Cell Styles

tdhead   tdHeadVertLine  
    tdheadCenter   tdHeaderSelected
      tdHeadVertLineCenter  
  tdBottomSeparator     descending
      tdBottomSeparatorLeftVert ascending
  tdBottomSeparatorCentered      
      tdbottomseparatorleftvertCenter  
         
trYellow For highlighted rows (Microsoft Hotmail uses this for new mail)  
trLightblue For alternating row color-coding  
trBlueGray For selected rows
trBlueMedium For two-tiered table subheadings

Sample 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  

 

A 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
         

A Right-Margin Box

tableBorderAround
Lorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit amet Lorem ipsum dolor sit amet
 
 
<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.

Error Message

tableBorderAroundWarning tdheaderwarning
txtWarning Do not do that!
 

Page Examples

This is where a fair amount more value will be coming soon, compound pages and samples of various data 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 Pages

Format 1 (Plain)

 

This is Your Receipt ~ Print this Page

 
     
     

Format 2 (Fancy)

     
  This is Your Receipt ~ Print this Page  
     
     
     

 

Sample of a Detailed, Data Table Page, ala Ebay

Live database example!

Eli Robillard's GenericDB, interpreted with our styles.


Contact me for a FREE usability review!

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