- Introduction
- Thinking About User_Interface Design for Your Personal Web Business
- My Favorite Personal Web Business User Interface: Layout Issues
- Implementing the Layout
- Adding Content
- Form: Font Issues
- Form: Color Issues
- Form: Border Issues
- Aesthetics: Spacing
- Homework Assignment 5: Designing Your User Interface
- Glossary of Business and Technical Terms
Form: Border Issues
Identify related groups of information within an area and bound those groups with lines or boxes. Lines and boxes help users by directing attention more effectively to that content. Conversely, they also help users ignore content they're not interested in. These are my general border rules:
-
Within a control (menu) area, group related links using a fat dark line as a separator. Label the line appropriately.
-
Use thin dark lines to surround the top and bottom of an instruction block.
-
Use simple boxes to group lists of items; use the light color for the background color of the box and the dark color for the border of the box.
Applying these rules results in the changes shown in Figure 14.
){kind=link}
Grouping rules applied.
I used the HTML <HR> and <TABLE> tags to create the borders and boxes, respectively. The <HR> tag allows you to place horizontal lines in your Web pages. You can vary the thickness, length, and color of these lines. The <TABLE> tag allows you to format content into rows and columns. You have tremendous flexibility in creating tables—you can draw your table with borders of various thickness and colors, as well as have different colored cell backgrounds. In the menu, I use a table with a dark background to create the fat lines (see Listing 6).
Listing 6 Border rules added
<HTML>
<HEAD>
<TITLE>Professor F's IT-Forum</TITLE>
<STYLE>
<!--
BODY {font-family:verdana,arial,helvetica;font-size:9pt}
TD {font-family:verdana,arial,helvetica;font-size:9pt}
A {color: #572119; font-weight: bold}
-->
</STYLE>
</HEAD>
<BODY>
<TABLE WIDTH=600 HEIGHT=400 CELLPADDING=0 CELLSPACING=0 BORDER=1>
<TR>
<TD WIDTH=120 VALIGN=TOP BGCOLOR=#DFCCAC>
<img src=logo.gif><BR>
<TABLE WIDTH=100%><TR><TD BGCOLOR=#572119 ALIGN=CENTER>
<FONT COLOR=#DFCCAC><B>WORDAGE</B></FONT>
</TD></TR></TABLE>
<A HREF=" ">Phrases</A><BR>
<A HREF=" ">Dictionary</A><BR>
<A HREF=" ">Archive</A><BR>
<TABLE WIDTH=100%><TR><TD BGCOLOR=#572119 ALIGN=CENTER>
<FONT COLOR=#DFCCAC><B>CULTURE</B></FONT>
</TD></TR></TABLE>
<A HREF=" ">History</A><BR>
<A HREF=" ">Definition</A><BR>
<TABLE WIDTH=100%><TR><TD BGCOLOR=#572119 ALIGN=CENTER>
<FONT COLOR=#DFCCAC><B>DISCUSSION</B></FONT>
</TD></TR></TABLE>
<A HREF=" ">Forum</A><BR>
<A HREF=" ">Chat</A>
</TD>
<TD WIDTH=480 VALIGN=TOP>
<IMG src=informitad1.gif>
<TABLE WIDTH=100% CELLPADDING=0 CELLSPACING=0 BORDER=1 HEIGHT=340>
<TR>
<TD WIDTH=360>
<CENTER><FONT STYLE="font-size:16pt" COLOR=#572119><B>
Professor F's IT-Forum</B>
</FONT></CENTER><BR>
<HR COLOR=#572119>
<TABLE CELLSPACING=0 CELLPADDING=0 BORDER=0>
<TR><TD BGCOLOR=LIGHTGREY>
Welcome to <B>Professor F . com</B>--a repository of hacker
culture and a forum for discussing I.T. issues.
Our mission is to correct the negative, misportrayal of the
hacker by the media. So, you won't find anything about breaking
into computers on this site. Instead, you'll find something much
more valuable--the truth. Enjoy!
</TD></TR></TABLE>
<HR COLOR=#572119><BR>
Phrase: Sure, you're bitter <BR>
Usage: Whenever a friend or coworker complains too much. <BR>
Example: Barney: I spend all night hacking this algorithm and
I still can't get it to work<BR>
Fred: Sure, you're bitter. <BR>
</TD>
<TD WIDTH=120>
<CENTER><FONT STYLE="font-size:12pt" COLOR=#572119><B>
Top 5 Phrases
</CENTER></B></FONT><BR>
<TABLE WIDTH=100% CELLPADDING=0 CELLSPACING=0 BORDER=1
BGCOLOR=#DFCCAC BORDERCOLOR=#572119>
<TR><TD>
1. Sure, you're bitter<BR>
2. Any other questions?<BR>
3. Help me Spock!<BR>
4. Are you threatening me?<BR>
5. Did you just get in?<BR>
</TD></TR></TABLE>
<BR>
<CENTER><FONT STYLE="font-size:12pt" COLOR=#572119><B>
Top 5 Words<BR>
</CENTER></B></FONT><BR>
<TABLE WIDTH=100% CELLPADDING=0 CELLSPACING=0 BORDER=1
BGCOLOR=#DFCCAC BORDERCOLOR=#572119>
<TR><TD>
1. Foo<BR>
2. Bar<BR>
3. Baz<BR>
4. Frob<BR>
5. Grok
</TD></TR></TABLE>
</TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>
At this point, we have a user interface that manages users' content expectations and makes it easy to acquire content. Unfortunately, the user interface still doesn't look quite right. The next section explores some of the issues related to aesthetics.