- 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
Aesthetics: Spacing
I mentioned earlier that user-interface design was about managing users' expectations and their attention. Most of the work to this point focused on managing users' content expectations. However, one of the main reasons that the user interface still doesn't look right—although it's quite usable—is that the information isn't spaced correctly. Without proper information spacing, the interface becomes distracting. We need to manage users' attention better so that they can ignore the content they're not interested in and quickly focus on the content they are interested in. Spacing accomplishes both goals. The last action we'll perform is to remove the layout borders—since they're distracting—and then space out the content.
Unfortunately, I don't have any good rules for properly spacing out content. You simply have to experiment. Add spaces, look to see whether the interface looks better, and then add or subtract space until it does.
With spaces added and the layout borders removed, our final user interface looks like Figure 15.
){kind=link}
Spacing added.
The HTML for spacing content makes extensive use of the <BR> (short for break, this tag simply adds a line break) and <TABLE> tags. You may also have to add (or remove) ALIGN parameters inside the <TD> tag (used to denote the start of a table cell) to properly space information within a table cell (see Listing 7). The ALIGN parameter affects your content's horizontal alignment within a cell. The most common alignments are CENTER, LEFT, and RIGHT, for example ALIGN=LEFT, ALIGN=CENTER, ALIGN=RIGHT. There's also a VALIGN parameter that affects the vertical alignment of content. Common values for VALIGN include CENTER, TOP, and BOTTOM.
Listing 7 Better spacing
<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=0>
<TR>
<TD WIDTH=120 VALIGN=TOP BGCOLOR=#DFCCAC>
<img src=logo.gif><BR><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><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><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=1 CELLSPACING=0 BORDER=0 HEIGHT=340>
<TR>
<TD WIDTH=360 VALIGN=TOP><BR>
<CENTER><FONT STYLE="font-size:16pt" COLOR=#572119><B>
Professor F's IT-Forum</B>
</FONT></CENTER>
<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>
<TABLE>
<TR><TD VALIGN=TOP>Phrase</TD>
<TD><B>Sure, you're bitter</B></TD></TR>
<TR><TD VALIGN=TOP>Usage</TD>
<TD>Whenever a friend or coworker
complains too much.
</TD></TR>
<TR><TD VALIGN=TOP>Example</TD><TD>Barney: I spend all night
hacking this algorithm and
I still can't get it to work<BR>
Fred: Sure, you're bitter.
</TD></TR></TABLE>
</TD>
<TD WIDTH=120 VALIGN=TOP>
<CENTER><FONT STYLE="font-size:12pt" COLOR=#572119><B>
Top 5<BR>Phrases
</CENTER></B></FONT>
<TABLE WIDTH=100% CELLPADDING=0 CELLSPACING=0 BORDER=1
BGCOLOR=#DFCCAC BORDERCOLOR=#572119>
<TR><TD>
<TABLE>
<TR><TD VALIGN=TOP>1.</TD>
<TD>Sure, you're bitter </TD></TR>
<TR><TD VALIGN=TOP>2.</TD>
<TD>Any other questions? </TD></TR>
<TR><TD VALIGN=TOP>3.</TD>
<TD>Help me Spock! </TD></TR>
<TR><TD VALIGN=TOP>4.</TD>
<TD>Are you threatening me?</TD></TR>
<TR><TD VALIGN=TOP>5.</TD>
<TD>Did you just get in? </TD></TR>
</TABLE>
</TD></TR></TABLE>
<BR>
<CENTER><FONT STYLE="font-size:12pt" COLOR=#572119><B>
Top 5<BR>Words
</CENTER></B></FONT>
<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>
Note that the changes are slight, but the effects are considerable, as you can see when you compare the UI without and with the design rules (see Figure 16).
){kind=link}
The user interface without design rules (left) and with design rules applied (right).
Of course, we can continue tweaking this interface to make it look even better, but I think the main points have been made. So that's it for personal Web business user interfaces! Next week we'll look at implementing some of the autonomous content.