CS4 Already????

Adobe Systems is offering two-day trials of three beta applications from its next Creative Suite package.

The previews of Dreamweaver for Web design, Fireworks for image editing, and Soundbooth for audio editing became available Monday.

Trials expire after 48 hours for most people, but registered CS3 users get to keep using the CS4 betas until the final applications replace them.

Adobe hasn't publicly confirmed its planned shipping date or the name for the next Creative Suite, which we're nicknaming CS4. Adobe Creative Suite 3 was released in March 2007.

We took a quick test drive of the Dreamweaver trial and liked some of the changes. Among the touted enhancements are a Related Files Toolbar and Code Navigator. The Properties panel integrates HTML and CSS coding, which could save time for those who edit dynamic sites. A new Live View Mode, driven by Webkit open-source rendering, previews pages within Dreamweaver, eliminating the need to open a browser. Adobe intends for this feature to make it easier to debug JavaScript as well as to work with Flash animation.

The interface of Fireworks, originally from Macromedia, finally resembles those of other applications in the Creative Suite. Fireworks features compatibility with Adobe's AIR, Flash, and Flex Builder as well as HTML. And users can export design mockups as high fidelity, interactive, and secure Adobe PDF files.

Soundbooth adds support for multiple track editing as well as volume matching across audio files. Users can preview the compression settings before saving MP3s. Speech recognition is supposed to enable quick, searchable transcripts of dialog content.

There's no word yet on whether the next rough draft of Photoshop will be available for a free trial. However, Photoshop's next iteration may become available in widgets, enabling users to mix and mash up some features with third-party content, according to a blog post last week by Photoshop product manager John Nash. We suspect that there will be more opportunities to blur the lines between the desktop, the Web, and mobile platforms within the next Creative Suite.

System requirements for the Windows trials demand a machine running XP or Vista with at least 512MB of RAM, 1 gigabyte of disk space, and a Pentium 4 processor. Mac users must have OS X version 10.4.11 or later on a PowerPC G5 or Intel-based system. Soundbooth, however, won't run on a PowerPC Mac.

You can download some trial BETA versions by clicking HERE.

Thanks for the research Elsa Wenzel

Do's and Dont's of Amazing Web Design

When followed, this guide will prove to be quite a valuable web design resource. From the inexperienced to the experienced, this guide has something for everyone.

The Process of Great Web Design Just to make sure we are all on the same page, lets begin with the basic definition for “web design”. According to Wikipedia, web design is:

“a process of conceptualization, planning, modeling, and execution of electronic media delivery via Internet in the form of Markup language suitable for interpretation by Web browser and display as Graphical user interface”.

The process of web design can be compared to the process of writing a research paper. In the conceptualization/planning stage, flowcharts (the outline) are created which illustrate the navigational structure of your website. In the modeling stage, static wireframes are created (the rough draft) which illustrate the skeletal layout for each section of your website. After the wire frames are created, graphics, colors and text are used to create the design of your web pages based on the layout of the wire frames. In the execution stage, your design is converted into a format supported by web browsers, text and content are added, and finally, your website is published live to the Internet for the world to see (final draft).

All three stages of the design process are equally important. Many web designers skip a stage in order to save time or because they don’t think that is is necessary. However, all three stages are necessary if your goal is to create a successful design and respectable website. Even if the three stages are used, there are many mistakes that web designers can make that will lead to poor-quality, non user-friendly websites.
It’s time to clean out the cabinet of bad web design practices and restock it with the good ones.

Stage 1: Conceptualization and planning
This stage is skipped more often than the other two stages. Most writers don’t enjoy creating outlines for research papers, and most web designers don’t like creating flowcharts either. Don’t be lazy. If you put forth the effort and plan out your website, then you will find the web design process to go smoothly with fewer mistakes made along the way.

There are a few things that you will need in order to effectively conceptualize and plan your website:

-a brain
-a pen and paper
-(optional) flowchart software
-a general idea of the different sections of your website

To begin, grab your pen and paper or launch your favorite flowchart software. We use OmniGraffle Professiona for Mac OS X which costs $150 per license but is well worth it if you create websites on a regular basis. If you’re on a PC, then SmartDraw is a great FREE piece of flowchart software that you can use. A pen and paper work just fine, though.

There are many methods to creating flowcharts. We are going to show you the most basic way to do it for the sake of time and the length of this article. If you want to learn more about flowcharts search for flowcharts on Google or Yahoo.

View this flowchart below when conceptualizing Chromatic Sites:

(1) At the top of the flowchart we list the name of our website. (2) Next, we include each primary section of our website: Home, About, and Services. These sections are the main navigation for your website. What the names of each section will be is entirely dependent on the content of your website. Try to use as few sections as possible so that your visitors are not overwhelmed when navigating through your website.

(3) Next, add all of the secondary pages (subsections) that will be listed on each of the primary pages. For Home, we have included Professional Web Design, Web Development, and Search Engine Optimization. The secondary navigation needs to be more descriptive than the primary navigation. The deeper your websites’ navigational hierarchy goes, the more descriptive each label should be.

The Dos
-Less is more; keep the number of primary sections to a minimum. We use 6 sections on our website which is more than enough -Whether you use a pen and paper or flowchart software, keep things as clean and organized as possible. Although you (and anyone working with you) are the only ones that will be using the flowchart, it still needs to make sense -Your primary sections should use broader terms, while secondary and tertiary terms should be more descriptive

The Donts
Creating a flowchart is pretty straight forward; however, there are a few mistakes that can easily be made:

-Don’t use very descriptive terms in your primary navigation unless your entire website focuses on one narrow topic -Don’t try and lump multiple topics on the same page. Create a general section for these topics and from that section create subsections. This will make the subsection (descriptive) web pages more likely to have better rankings in the search engines (Google, Yahoo, MSN, Ask) Once you have created a concise and descriptive flowchart, you’re ready to move on to the second stage of the web design process:
modeling.

Stage 2: Modeling
In the modeling stage, static “wireframe” mock ups are created. Each mockup illustrates a bare-bones skeleton of the layout for each of the web pages that will be included in your website. This stage is important because it gives us an idea of where different elements will be placed in our design. Some of these elements are:

-logo
-navigational menu
-content
-images, videos

To create these mockups, you can use a pen and paper or your preferred mockup software. In the past we have used Photoshop, but lately we have been using OmniGraffle Professional. OmniGraffle is not as resource intensive as Photoshop is and it allows us to assemble our wireframe mockups much quicker.

In addition, make sure that you have the flowchart(s) that you created nearby as you will need to reference these from time to time to make sure that you are mocking up all of the pages that will appear on your website.

Below is our example of how a wireframe mock-up should look. As you can see, there are no colors or graphics included. This is exactly how a wireframe mockup should be - a skeletal layout of your design. The purpose is to be able to have a general idea of where each of the web page’s elements will be placed.

We usually begin from the top left and work our way down to the bottom. There is no specific way that a wireframe should look. Use your imagination. However, make sure that when creating your wireframes you don’t forget to include the most important elements of a website (logo, navigational menu, content placement, images/video placement).

If some of your pages will be using the same layout, then it is not necessary to mock all of those pages up (although you certainly can).
Just be sure to mockup any unique layout that your website will have.
You’ll thank yourself later.

The Dos
-mockup all unique pages
-include important elements (logo, navigation, content placement, images/video placement) -start from the top and work your way down -reference your flowchart created in stage 1 to make you don’t forget to mockup any pages -save, save, save - like with anything on the computer, save your mockup(s) every 10 minutes or so
-focus on clean, user friendly layouts -label your elements so you don’t forget what they are when you reference them in stage 3, execution -use other web sites as inspiration; there is nothing wrong with taking elements from other sites and making them your own (see “donts”)

The Donts
-don’t include graphics or colors (that’s for the next stage) -don’t make your mockups too “busy”; focus on clean, well organized, user friendly layouts -don’t skip this stage; it is just as important as the first and the last -if you take elements from other websites, make sure you don’t plagiarize; there is a difference between being inspired by another website to create certain elements of your design and blatantly ripping off their layout and colors

Stage 3: Execution
In the third and final stage, execution, the planning from stages 1 and 2 are combined to assist in creating a live, interactive website.
The third stage is by far the most time intensive since you will be 1) creating the graphics 2) creating the content, and finally, 3) converting the web designs from images into code that web browsers use to present your website to the world.

By the time you reach the third stage, you should have a clear idea of:

-how your visitors will get from one place to another (stage 1, flowchart) -how your web pages will be laid out (stage 2, wireframe mockups)

If you don’t have a clear idea of these two things, go back to the first and second stagees and continue to develop them. You will find that the third stage is easiest when you have constructed a clear, concise battle plan for designing your website.

Ditch the pen and paper
In stage 3, you need to be using Photoshop or another image editing program since you will be using colors and graphics to create the layout for your website.

We usually begin creating the “home” page (index) first. Use your wireframes that you created in stage 2 as a template for each of the pages you create. However, instead of using solid boxes, use graphics, colors and text instead. Each page must look exactly how you want them to look on the Internet since this is the final stage of the design process.

Be sure to include the background for your navigation (but don’t actually add the text to your image). When converted using CSS (cascading style sheets), your navigation should be in the form of text and not images. Images are not crawl-able by the search engines (the keywords used in your navigation won’t be indexed in the search engine results pages, meaning fewer people will be able to find your website).

When you’re happy with your designs and feel that they are ready to be put on the Internet, it’s time to break apart the designs so that you can create a CSS based layout. For more information on converting your layouts to CSS or marking up your website in CSS, visit w3schools.com. After looking around the Internet, we couldn’t find a decent image-to-CSS tutorial - so expect one from us in the coming weeks. Converting your designs into CSS is extremely important since table layouts are a thing of the past.

Here is an example of a nearly-completed website of the layout we mocked up in stage 2. As you can see, there is now a logo, colors, a pretty navigation system, a footer, and a most importantly, a clean, organized layout.

Thanks to the planning in stages 1 and 2, our layout is well-organized and easy to use.

The Dos
-reference your templates that were created in stage 2; though it is fine to deviate from your original layout, you shouldn’t need to -do some research before creating your actual design; get ideas from other sites and make them your own (without plagiarizing) -include color and graphics to create the final look for your web pages -use CSS (cascading style sheets) to convert your designs from images into markup understandable by web browsers -reference your flowchart from stage 1 when coding your pages with hyperlinks; it is better to use a drop down menu that includes all (or the majority) of the links in your website on every page; this will allow for easier navigation and also make your pages easier to crawl when the search engine spiders stop by; a great place to get CSS drop down menus is at DynamicDrive.com -finalize your design while working in Photoshop or whatever image editing software you use; it can be a pain to make changes to your design once it is converted into markup (code)

The Donts
-don’t include the text in your navigation menus when converting to CSS; instead of using image text, use regular text that is readable by search engine spiders -don’t use tables when converting; even if you need to buy a book on CSS, it will be worth it; tables are dead -don’t skip the first two stages just to save time; your website WILL be better if you start from the beginning of the web design process (instead of at the end) -don’t forget to compress your images when they are cut apart for CSS; there is nothing worse than a slow loading website because of large image files; Photoshop has a “Save Optimized For Web” option (CS3 - “Save for Web and Devices”)

Process Makes Perfect
By following a web design process such as the one illustrated in this article, you increase the chances of creating a website that is well-organized, easily navigable, and very user-friendly. Lets face it - if visitors get lost or become confused while attempting to surf your website, they might hit the back button and look for a more user friendly website. People do not like to think when it comes to finding their way around websites. Don’t make them think. You do the thinking by planning out your website from stage 1 to stage 3 and you will find that more people will enjoy visiting your website.

Learn Programming in 10 Years

Why is everyone in such a rush?

Walk into any bookstore, and you'll see how to Teach Yourself Java in 7 Days alongside endless variations offering to teach Visual Basic, Windows, the Internet, and so on in a few days or hours. I did the following power search at Amazon.com:

     pubdate: after 1992 and title: days and
     (title: learn or title: teach yourself)

and got back 248 hits. The first 78 were computer books (number 79 was Learn Bengali in 30 days). I replaced "days" with "hours" and got remarkably similar results: 253 more books, with 77 computer books followed by Teach Yourself Grammar and Style in 24 Hours at number 78. Out of the top 200 total, 96% were computer books.

The conclusion is that either people are in a big rush to learn about computers, or that computers are somehow fabulously easier to learn than anything else. There are no books on how to learn Beethoven, or Quantum Physics, or even Dog Grooming in a few days.

Let's analyze what a title like Learn Pascal in Three Days could mean:

• Learn: In 3 days you won't have time to write several significant programs, and learn from your successes and failures with them. You won't have time to work with an experienced programmer and understand what it is like to live in that environment. In short, you won't have time to learn much. So they can only be talking about a superficial familiarity, not a deep understanding. As Alexander Pope said, a little learning is a dangerous thing.

• Pascal: In 3 days you might be able to learn the syntax of Pascal (if you already knew a similar language), but you couldn't learn much about how to use the syntax. In short, if you were, say, a Basic programmer, you could learn to write programs in the style of Basic using Pascal syntax, but you couldn't learn what Pascal is actually good (and bad) for. So what's the point? Alan Perlis once said: "A language that doesn't affect the way you think about programming, is not worth knowing". One possible point is that you have to learn a tiny bit of Pascal (or more likely, something like Visual Basic or JavaScript) because you need to interface with an existing tool to accomplish a specific task. But then you're not learning how to program; you're learning to accomplish that task.

• in Three Days: Unfortunately, this is not enough, as the next section shows.

Teach Yourself Programming in Ten Years

Researchers (Bloom (1985), Bryan & Harter (1899), Hayes (1989), Simmon & Chase (1973)) have shown it takes about ten years to develop expertise in any of a wide variety of areas, including chess playing, music composition, telegraph operation, painting, piano playing, swimming, tennis, and research in neuropsychology and topology. There appear to be no real shortcuts: even Mozart, who was a musical prodigy at age 4, took 13 more years before he began to produce world-class music. In another genre, the Beatles seemed to burst onto the scene with a string of #1 hits and an appearance on the Ed Sullivan show in 1964. But they had been playing small clubs in Liverpool and Hamburg since 1957, and while they had mass appeal early on, their first great critical success, Sgt. Peppers, was released in 1967. Samuel Johnson (1709-1784) thought it took longer than ten years: "Excellence in any department can be attained only by the labor of a lifetime; it is not to be purchased at a lesser price." And Chaucer (1340-1400) complained "the lyf so short, the craft so long to lerne." Hippocrates (c. 400BC) is known for the excerpt "ars longa, vita brevis", which is part of the longer quotation "Ars longa, vita brevis, occasio praeceps, experimentum periculosum, iudicium difficile", which in English renders as "Life is short, [the] craft long, opportunity fleeting, experiment treacherous, judgment difficult." Although in Latin, ars can mean either art or craft, in the original Greek the word "techne" can only mean "skill", not "art".

Here's my recipe for programming success:

• Get interested in programming, and do some because it is fun. Make sure that it keeps being enough fun so that you will be willing to put in ten years.

• Talk to other programmers; read other programs. This is more important than any book or training course.

• Program. The best kind of learning is learning by doing. To put it more technically, "the maximal level of performance for individuals in a given domain is not attained automatically as a function of extended experience, but the level of performance can be increased even by highly experienced individuals as a result of deliberate efforts to improve." (p. 366) and "the most effective learning requires a well-defined task with an appropriate difficulty level for the particular individual, informative feedback, and opportunities for repetition and corrections of errors." (p. 20-21) The book Cognition in Practice: Mind, Mathematics, and Culture in Everyday Life is an interesting reference for this viewpoint.

• If you want, put in four years at a college (or more at a graduate school). This will give you access to some jobs that require credentials, and it will give you a deeper understanding of the field, but if you don't enjoy school, you can (with some dedication) get similar experience on the job. In any case, book learning alone won't be enough. "Computer science education cannot make anybody an expert programmer any more than studying brushes and pigment can make somebody an expert painter" says Eric Raymond, author of The New Hacker's Dictionary. One of the best programmers I ever hired had only a High School degree; he's produced a lot of great software, has his own news group, and made enough in stock options to buy his own nightclub.
• Work on projects with other programmers. Be the best programmer on some projects; be the worst on some others. When you're the best, you get to test your abilities to lead a project, and to inspire others with your vision. When you're the worst, you learn what the masters do, and you learn what they don't like to do (because they make you do it for them).

• Work on projects after other programmers. Be involved in understanding a program written by someone else. See what it takes to understand and fix it when the original programmers are not around. Think about how to design your programs to make it easier for those who will maintain it after you.

• Learn at least a half dozen programming languages. Include one language that supports class abstractions (like Java or C++), one that supports functional abstraction (like Lisp or ML), one that supports syntactic abstraction (like Lisp), one that supports declarative specifications (like Prolog or C++ templates), one that supports coroutines (like Icon or Scheme), and one that supports parallelism (like Sisal).

• Remember that there is a "computer" in "computer science". Know how long it takes your computer to execute an instruction, fetch a word from memory (with and without a cache miss), read consecutive words from disk, and seek to a new location on disk. (Answers here.)

• Get involved in a language standardization effort. It could be the ANSI C++ committee, or it could be deciding if your local coding style will have 2 or 4 space indentation levels. Either way, you learn about what other people like in a language, how deeply they feel so, and perhaps even a little about why they feel so.

• Have the good sense to get off the language standardization effort as quickly as possible.

With all that in mind, its questionable how far you can get just by book learning. Before my first child was born, I read all the How To books, and still felt like a clueless novice. 30 Months later, when my second child was due, did I go back to the books for a refresher? No. Instead, I relied on my personal experience, which turned out to be far more useful and reassuring to me than the thousands of pages written by experts.

Fred Brooks, in his essay No Silver Bullets identified a three-part plan for finding great software designers:

1. Systematically identify top designers as early as possible.

2. Assign a career mentor to be responsible for the development of the prospect and carefully keep a career file.

3. Provide opportunities for growing designers to interact and stimulate each other.

This assumes that some people already have the qualities necessary for being a great designer; the job is to properly coax them along. Alan Perlis put it more succinctly: "Everyone can be taught to sculpt: Michelangelo would have had to be taught how not to. So it is with the great programmers".

So go ahead and buy that Java book; you'll probably get some use out of it. But you won't change your life, or your real overall expertise as a programmer in 24 hours, days, or even months.

Seven Incredibly Useful Tools for Evaluating Your Web Design

An effective web design is one in which your users are able to find information quickly and in a logical fashion.

Do they visit the content you want them to visit? Are they looking in the right places of your web page? Are you able to keep your user’s attention, or do they just leave quickly?

It’s not just about the content either. If your design loads slowly - or if moving from one section to another takes a long time - it affects the user’s experience.

These things can be the make-or-break factors between a user clicking on a link to find more information, or the back button to find it elsewhere.

Some things to consider:

• Are important information being seen by the user?
• Are the navigation and action items intuitive?
• Is the user being directed to sections in a logical manner?
• Does the web page load quickly enough to not turn away the user?

If you’re interested in analyzing and optimizing your page layout - here’s some extremely useful tools that you can use to help.

1. ClickHeat

ClickHeat is an open source visual tool for showing “hot” and “cold” zones of a web page. It allows you to see which spots users click on most, and which spots are being ignored.

It’s very easy to implement on your website, you only have to include an external JavaScript file.

Download: Clickheat on SourceForge.net.

2. Crazy Egg

Crazy Egg offers a myriad of analytical tools to help you visualize what visitors are doing.

Features include: Confetti - allowing you to see what people are clicking on based on certain factors such as their operating system and where they came from, Overlay - providing you with tons of data about particular links, and Report sharing - enabling you to share the data with team members and clients.

The free version only allows 4 pages to be tracked - so use your top landing pages to get the most data.

3. YSlow for Firebug

A key tenet of a strong design is that, not only should information be presented in a logical and elegant fashion, but that it must also be served quickly, with very little delay.

YSlow for Firebug is a free tool for Mozilla Firefox that gives you information about your front-end design to see if it performs well. It gives you a letter grade (A through F) and outlines your web page’s trouble spots.

It’s based on the Yahoo! Developer Network’s “Best Practices for Speeding Up Your Web Site” initially written by Steve Souders, who was once the Chief of Performance at Yahoo! and is now working over at Google on web performance and open source initiatives.

Downloads: Firebug extension for Firefox (required) and YSlow.

4. clickdensity

clickdensity is a full suite of usability analysis tools that will help you assess your web page design.

You can use heat maps showing where users click on the most, hover maps - which shows people scrolling over links but not clicking on them, and A/B Tests which allows you to change certain page elements to see which style is more effective.

The free subscription give you 5,000 clicks and only one page and one site to monitor.

5. ClickTale

ClickTale offers a lot of user data pertaining to how visitors use your website.

There are plenty of things you can look at such as average time it takes for a user to click on a link, a user’s hesitation on clicking a link, hover to click ratio, and much more. It also provides detailed reports and charts on your users’ monitor sizes to better optimize your web page design to cater for the typical visitor.

6. Clicky

Perhaps the most interesting feature that Clicky has is its real-time tracking and monitoring feature, called Spy (check out the demo here).

Besides Spy, there’s a host of other analytics data you can look at such as user Actions - which records click data from your users and Visitors - providing you user data.

7. Google Analytics

One of the best free services that Google offers is Google Analytics and probably the most well-known analytics tool. It’s incredibly easy to install and offers plenty of user and content data to help you learn more about your web pages’ performance.

It has a feature called Site Overlay, which gives you a visual representation of the popular places your users like to click on. It also offers data on bounce rates and your top exit pages (to see what pages make users leave).

So there they are, some of the best tools in the market to help you troubleshoot and optimize your page layout. In the end, it’s a combination of great content, as well as how you present this content — that will lead to an effective design.

Some Basic Web Design Tips

useit.com " align="bottom" height="9" width="13"> Alertbox " align="bottom" height="9" width="13"> Top 10 Design Mistakes

Jakob Nielsen's Alertbox:

Top Ten Mistakes in Web Design

Summary:
The ten most egregious offenses against users. Web design disasters and HTML horrors are legion, though many usability atrocities are less common than they used to be.

Since my first attempt in 1996, I have compiled many top-10 lists of the biggest mistakes in Web design. See links to all these lists at the bottom of this article. This article presents the highlights: the very worst mistakes of Web design. (Updated 2007.)

1. Bad Search

Overly literal search engines reduce usability in that they're unable to handle typos, plurals, hyphens, and other variants of the query terms. Such search engines are particularly difficult for elderly users, but they hurt everybody.

A related problem is when search engines prioritize results purely on the basis of how many query terms they contain, rather than on each document's importance. Much better if your search engine calls out "best bets" at the top of the list -- especially for important queries, such as the names of your products.

Search is the user's lifeline when navigation fails. Even though advanced search can sometimes help, simple search usually works best, and search should be presented as a simple box, since that's what users are looking for.

2. PDF Files for Online Reading

Users hate coming across a PDF file while browsing, because it breaks their flow. Even simple things like printing or saving documents are difficult because standard browser commands don't work. Layouts are often optimized for a sheet of paper, which rarely matches the size of the user's browser window. Bye-bye smooth scrolling. Hello tiny fonts.

Worst of all, PDF is an undifferentiated blob of content that's hard to navigate.

PDF is great for printing and for distributing manuals and other big documents that need to be printed. Reserve it for this purpose and convert any information that needs to be browsed or read on the screen into real web pages.

> Detailed discussion of why PDF is bad for online reading

3. Not Changing the Color of Visited Links

A good grasp of past navigation helps you understand your current location, since it's the culmination of your journey. Knowing your past and present locations in turn makes it easier to decide where to go next. Links are a key factor in this navigation process. Users can exclude links that proved fruitless in their earlier visits. Conversely, they might revisit links they found helpful in the past.

Most important, knowing which pages they've already visited frees users from unintentionally revisiting the same pages over and over again.

These benefits only accrue under one important assumption: that users can tell the difference between visited and unvisited links because the site shows them in different colors. When visited links don't change color, users exhibit more navigational disorientation in usability testing and unintentionally revisit the same pages repeatedly.

> Usability implications of changing link colors
> Guidelines for showing links

4. Non-Scannable Text

A wall of text is deadly for an interactive experience. Intimidating. Boring. Painful to read.

Write for online, not print. To draw users into the text and support scannability, use well-documented tricks:

• subheads
• bulleted lists
• highlighted keywords
• short paragraphs
• the inverted pyramid
• a simple writing style, and
• de-fluffed language devoid of marketese.

> Eyetracking of reading patterns

5. Fixed Font Size

CSS style sheets unfortunately give websites the power to disable a Web browser's "change font size" button and specify a fixed font size. About 95% of the time, this fixed size is tiny, reducing readability significantly for most people over the age of 40.

Respect the user's preferences and let them resize text as needed. Also, specify font sizes in relative terms -- not as an absolute number of pixels.

6. Page Titles With Low Search Engine Visibility

Search is the most important way users discover websites. Search is also one of the most important ways users find their way around individual websites. The humble page title is your main tool to attract new visitors from search listings and to help your existing users to locate the specific pages that they need.

The page title is contained within the HTML “title” tag and is almost always used as the clickable headline for listings on search engine result pages (SERP). Search engines typically show the first 66 characters or so of the title, so it's truly microcontent.

Page titles are also used as the default entry in the Favorites when users bookmark a site. For your homepage, begin the with the company name, followed by a brief description of the site. Don't start with words like "The" or "Welcome to" unless you want to be alphabetized under "T" or "W."

For other pages than the homepage, start the title with a few of the most salient information-carrying words that describe the specifics of what users will find on that page. Since the page title is used as the window title in the browser, it's also used as the label for that window in the taskbar under Windows, meaning that advanced users will move between multiple windows under the guidance of the first one or two words of each page title. If all your page titles start with the same words, you have severely reduced usability for your multi-windowing users.

Taglines on homepages are a related subject: they also need to be short and quickly communicate the purpose of the site.

7. Anything That Looks Like an Advertisement

Selective attention is very powerful, and Web users have learned to stop paying attention to any ads that get in the way of their goal-driven navigation. (The main exception being text-only search-engine ads.)

Unfortunately, users also ignore legitimate design elements that look like prevalent forms of advertising. After all, when you ignore something, you don't study it in detail to find out what it is.

Therefore, it is best to avoid any designs that look like advertisements. The exact implications of this guideline will vary with new forms of ads; currently follow these rules:

• banner blindness means that users never fixate their eyes on anything that looks like a banner ad due to shape or position on the page
• animation avoidance makes users ignore areas with blinking or flashing text or other aggressive animations
• pop-up purges mean that users close pop-up windoids before they have even fully rendered; sometimes with great viciousness (a sort of getting-back-at-GeoCities triumph).

8. Violating Design Conventions

Consistency is one of the most powerful usability principles: when things always behave the same, users don't have to worry about what will happen. Instead, they know what will happen based on earlier experience. Every time you release an apple over Sir Isaac Newton, it will drop on his head. That's good.

The more users' expectations prove right, the more they will feel in control of the system and the more they will like it. And the more the system breaks users' expectations, the more they will feel insecure. Oops, maybe if I let go of this apple, it will turn into a tomato and jump a mile into the sky.

Jakob's Law of the Web User Experience states that "users spend most of their time on other websites."

This means that they form their expectations for your site based on what's commonly done on most other sites. If you deviate, your site will be harder to use and users will leave.

9. Opening New Browser Windows

Opening up new browser windows is like a vacuum cleaner sales person who starts a visit by emptying an ash tray on the customer's carpet. Don't pollute my screen with any more windows, thanks (particularly since current operating systems have miserable window management).

Designers open new browser windows on the theory that it keeps users on their site. But even disregarding the user-hostile message implied in taking over the user's machine, the strategy is self-defeating since it disables the Back button which is the normal way users return to previous sites. Users often don't notice that a new window has opened, especially if they are using a small monitor where the windows are maximized to fill up the screen. So a user who tries to return to the origin will be confused by a grayed out Back button.

Links that don't behave as expected undermine users' understanding of their own system. A link should be a simple hypertext reference that replaces the current page with new content. Users hate unwarranted pop-up windows. When they want the destination to appear in a new page, they can use their browser's "open in new window" command -- assuming, of course, that the link is not a piece of code that interferes with the browser’s standard behavior.

10. Not Answering Users' Questions

Users are highly goal-driven on the Web. They visit sites because there's something they want to accomplish -- maybe even buy your product. The ultimate failure of a website is to fail to provide the information users are looking for.

Sometimes the answer is simply not there and you lose the sale because users have to assume that your product or service doesn't meet their needs if you don't tell them the specifics. Other times the specifics are buried under a thick layer of marketese and bland slogans. Since users don't have time to read everything, such hidden info might almost as well not be there.

The worst example of not answering users' questions is to avoid listing the price of products and services. No B2C ecommerce site would make this mistake, but it's rife in B2B, where most "enterprise solutions" are presented so that you can't tell whether they are suited for 100 people or 100,000 people. Price is the most specific piece of info customers use to understand the nature of an offering, and not providing it makes people feel lost and reduces their understanding of a product line. We have miles of videotape of users asking "Where's the price?" while tearing their hair out.

Even B2C sites often make the associated mistake of forgetting prices in product lists, such as category pages or search results. Knowing the price is key in both situations; it lets users differentiate among products and click through to the most relevant ones.

Other Top-10 Lists

• 10 High-Profit Redesign Priorities
• Usability in the Movies — Top 10 Bloopers
• Most violated homepage guidelines
• Top homepage usability guidelines
• Good deeds in Web design
• Web design mistakes (2005)
• Web design mistakes (2003)
• Web design mistakes (2002)
  With cartoons.
• Web design mistakes (1999)
• Web design mistakes (1996)
  My first list. Luckily, many of these mistakes have been fixed by now.
• Application design mistakes

See also: Usability 101: Introduction to Usability

I'll present my newest usability guidelines in the tutorial on Fundamental Guidelines for Web Usability at the Usability Week 2008 conference in San Francisco, London, and Melbourne.

---

> Other Alertbox columns (complete list)
> Sign up for newsletter that will notify you of new Alertboxes

---

Copyright © 1996-2008 by Jakob Nielsen. ISSN 1548-5552