Transcript of Episode 3 Screen Space: Starting with a Strong Homepage
In episode 3 of Screen Space: Starting with a Strong Homepage
Hello and welcome to Episode 3 of Screen Space: Starting with a Strong Homepage. Screen Space is a web design podcast for all of you out there with websites, blogs, and other new media and you want to make them more usable, accessible, effective, and efficient. This podcast is not designed for web design experts, but for the rest of you. Experts, you are of course welcome to listen and you may even pick up a few things.
I, your podcast host, am Dr. Jennifer L. Bowie. I am an assistant professor at Georgia State University, where I teach and do research in web design, user-centered design, and digital rhetoric. In these episodes, I integrate my own work with that of other experts.
Of course, one problem with being an academic is the end of the semester craziness, which put a delay in my podcasting production. However, I am back on track and even have the interview for the next episode, on the use of sound in websites, recorded.
In this episode, I am focusing on what is often considered the most important page of any website—the homepage. Often users see this page first and the homepage has to act like a book or magazine cover, brochure, lobby, introduction, secretary, and more. Like a book cover, your website will be judged by your homepage (and unlike a book cover perhaps, your site should be judged by its homepage). So, what can you do to make your homepage as usable, accessible, effective, and efficient as possible? Sit (run drive or whatever) tight and I will tell you.
The most important thing to do on your homepage is to make the purpose of the site clear. Users who come to your homepage should be able to tell at a glance what the site is about. Make sure your homepage answers these questions:
- Who are you?
- What do you do? (important if it is a company site)
- What is the purpose of the site? Is it to sell a product? Is it a rant about the political process? Is it to ridicule clothing of the stars? Is it a personal blog? Whatever the purpose is, make it clear. This is especially important of blog, because so often the purpose of the blog is not clear. There is no better way to turn away a potential audience then having the blog’s purpose unclear.
- Why should I (the user) care? You should not, of course, actually explicitly state “you should care because” on your site, but you should implicitly make this clear. Users can quickly and easily move to a competitor’s site, another blog, or another page, so on your homepage you need to give them a reason to stay. Make it clear what you can uniquely offer the users—your expertise, a different view, a great deal.
- What is new or what has changed? If your users frequently visit your site you need to make the new content clear. This is easy on a blog, but not always on website and other new media. Work out a way to make this clear—whether it be location, color, icon, or something else.
Once these questions are clearly answered on your homepage, users will know if they are in the right spot. If these questions are not answered users may need to wander around the site to find this information. Some users may wander around, but they might get grumpy or frustrated with the site. Most users will not take the time and will go to a site that makes the answers to these questions clear with a glance.
Most of these suggestions for a strong homepage are interrelated. Part of making the purpose of the site clear with a glance is also making it clear in a screen. Your homepage should fit into a single screen and should not require the user to scroll down at all. Of course, as I said in episode 2, you should never have right scrolling, but on the homepage there should be no scrolling at all. The 1024×768 screen size/resolution is the mostly commonly used now, so make sure your homepage easily fits into this size. However the 800×600 is still commonly used, so the design should work well in this size. While many people may be accessing your site with smaller screens—say from their phones—designing for such small screen sizes may be hard, so feel free to stick with the more common monitors resolutions. You should make your homepage design all relative, as I covered in episode 1, so it easily resizes for a variety of browser sizes.
If you cannot make your homepage fit onto a single screen, at the least make it clear that there is material “below the fold” (the bottom of the window) to scroll to. Sometime webpages will have a large gap or space that doesn’t make this clear. Just make sure that if someone quickly glances at your page that they can tell that there is more information to scroll to. However, if you can, get this all on one screen—“above the fold”.
The next suggestion is the quickest. Make the title tag of the homepage clear, detailed, and brief. The title tag is easily added to the HEAD element of your code if you hand code. Many web design programs have easy ways to add this information. In Dreamweaver there is a box at the top of the page you are working on that says “title”. Many blogs programs have an easy way to out in a title. Do not start your title with an article like “the,” because the page may then be alphabetized (in a search engine or whatever) and put under the first letter of the article. Instead start with the name of your site or company and then add descriptive text. For example, the title of Screen Space’s blog is “Screen Space: A blog & podcast about users, texts, and technology”. This is short—under 70 characters including spaces. It starts with the name of the site and tells the user that it is not only a blog, but also a podcast and provides information on what the site is about (users, texts, and technology). Just having the title “Screen Space” would not be make the site clear from the title. Just the tagline of “A blog & podcast about users, texts, and technology” would tell users what the site is about, but not connect this to the name, which is key. So, make sure the homepage title is brief, yet includes the site name and descriptive text.
My final recommendation in this episode is to keep any text on your homepage concise and direct. People do not expect or want to do much reading on your homepage. Think of your homepage as a lobby to an office building. People don’t really want to spend much time in the lobby. They want to make sure they are in the correct building for their needs (or correct website for their needs) and then they want to go somewhere in the building or the site. If it is a commerce site they want to find a product. If it is an informational site then they want to find the information. So don’t bog the reader down with a lot of text on the homepage. Provide only enough text to make the purpose of the site clear and provide any needed explanations for navigating the site. Do not include you mission statement or history—put those on other pages.
Now of course there is one exception to this rule—a blog. Blogs often have a great deal of text, in the form of posts, on the homepage. This is fine, it is part of the genre. But do limit other text on the main page of the blog.
On all your websites, blogs, or other new media, along with limited text, also limit the number of links. Some sites fill the homepage with lists of links, which can be overwhelming. Focus on the key links, a strong navigational structure and limited text.
In summary, to have a strong homepage to your site make sure the purpose of your site is clear and make is clear in one screen. Don’t make the user scroll. Also, make the title tag for the website clear, detailed, and brief. And finally, limit the amount of text and links on your homepage. Of course, make sure your homepage reflects you, your company or organization (if applicable), and the purpose of the site. Remember, your site will and should be judged by the homepage.
Thank you for joining me for this episode of Screen Space. Our next episode is an interview with Brian Snead, who will talk about the use of sound in website design. He’s done some great work in this area and it will be a fascinating episode.
If you have questions, comments, or thoughts on what you want me to cover please send me an email at jbowie@screenspace.org or check out the Screen Space blog—www.screenspace.org. Have fun and design well!
Screen Space is licensed under a Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 United States License. So, feel free to share as long as you don’t change it, do give me and Screen Space credit, and don’t make any money off of it.
Screen Space’s opening music today is “African Dance” by Apa Ya off of Headroom Project and the closing music is “Survival” by Beth Quist off of “Shall We Dance”. Both these selections are available from Magnatune.
The Blog Feed