Home > Articles

  • Print
  • + Share This

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.

Figure 15

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

Figure 16

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.

  • + Share This
  • 🔖 Save To Your Account

Related Resources

There are currently no related titles. Please check back later.