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 foranyone
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 understandthem 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.
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.
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.
Variable-length text: For columns with variable-length
text, left align the data and header rows.
Numbers: When numbers represent quantities
or money, right-align the data and center align the
header row.
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.
Sorted column: If
possible, place the sorted column as the left-most.
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).
Functions: If multiple functions are present
on rows, place them to the right.
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)
