- 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
My Favorite Personal Web Business User Interface: Layout Issues
In designing a general user interface for your personal Web business, it's helpful to try to keep the interface within a 600x400 pixel area. It's okay to make your interface longer (bigger than 400 pixels), but not wider. The reason is that you want an interface that can be seen easily on most computer monitors, which includes people accessing the Web via a WebTV box. Even if you don't care about WebTV users, you should still try to limit the width of your user interface to 600 pixels so that users have extra screen space available for simultaneously working with other applications.
So let's start off with a blank user interface (UI) no bigger than 600x400 pixels (see Figure 2).
){kind=link}
The blank user interface.
First you need to manage the users' content expectations; you need to make users aware of the content your site offers. An incorrect way to do this is to have one long page with several paragraphs that describe all the content on your site, with links inside these paragraphs to the actual pages of content. Don't laugh. Most of your friends' personal Web pages are probably designed like this, and you'd be surprised how many novice Web business entrepreneurs start off designing the UI for a Web business this way. Remember that you aren't building a personal Web page, you're building a personal Web business, and you need to make sure that you not only set and meet expectations about your site's content, but make it easy for the user to access this content as well. A more effective design is to divide your interface into two sections, a control (a.k.a. menu) section and a content section. The idea is that by looking at the control section, the user can quickly get a sense of what your site offers (see Figure 3).
){kind=link}
Control and content sections.
Now we're setting content expectations correctly. As a Web business, you should also place your logo in a prominent but non-intrusive location for branding purposes. The upper-left corner provides such a location (see Figure 4).
){kind=link}
Adding a section for a logo.
To satisfy your advertisers, you need to allocate some space for banners. Most advertisers expect that, at minimum, you'll place their banner at the top of your page (see Figure 5).
){kind=link}
Making room for a banner advertisement.
We're almost done. Because a personal Web business is based on the autonomous business model, your content is constantly changing. You should make it easy for your existing customers to see what's new on your site. To accomplish this, divide the main content area into two sections: the main section for relatively slowly changing or persistent content, and a smaller section for new, more dynamically changing content, such as late-breaking news (see Figure 6).
){kind=link}
Final UI with the content section divided into persistent and dynamic content.
And that's it. For personal Web businesses, what's good about this UI is considerable variability in terms of adding more advertisements. For example, you can add another banner advertisement at the bottom (see Figure 7).
){kind=link}
Variation 1: Banners at the top and bottom.
As I'll show in a later article, banner advertisements come in all shapes and sizes. It's relatively easy to incorporate such banners into the user interface (see Figure 8).
){kind=link}
Variation 2: Banners at the top and bottoms, small banners and miscellaneous "tiny ads" on the sides.
Another nice feature of the layout for this user interface is that it keeps the key content in the center and the ads in the periphery, although there actually are some instances where you may want to put ads in the center. Next, let's look at how to implement this interface, starting with the layout.