copied from http://seablick.com/blog/tabid/53/articletype/articleview/articleid/66/dnn-seo-quickstart-guide.aspx

Posted by Tom on Monday, July 09, 2007 at 12:14 AM to DotNetNuke, SEO, SEM, DNN Tips and Tricks

This post is meant as a springboard for consultants, designers,
programmers and end-users who are well-versed in DNN, but who may
have some catching up to do when it comes to search engine optimization
and search marketing. While I make some DNN-specific recommendations,
most tips given here are applicable to any website, build on DotNetNuke
or not. So here are my top ten SEO tips in order of priority. Actually,
forget the order, it’s not worth the fight. Just try to implement as
many of these suggestions as you can.

1. Take care of your meta tags, especially the page title and description.
   Include your most important keywords, but limit your titles to 65
   characters including spaces. Choose modules with SEO in mind, such as
   Ventrian’s News Articles, which writes the article title into the page
   title for you. Furthermore, write unique page descriptions for all your
   pages.

2. Start attracting relevant links to your
   website. Note the word “relevant”, meaning that some links are
   more valuable that others. If you are running a business around
   DNN as we do, then one link from dotnetnuke.com is much more
   beneficial than all the links in footers of client
   sites. As attractive links are hard to come by, consider submitting
   your URL to industry specific directories.

3. Don’t skimp on quality copy and content. That’s what search engines live off. Use a free tool
   to do some basic keyword research and then
   sprinkle them around your copy. Don’t forget the spell
   and grammar check, you are targeting (mainly) people after all. In my
   opinion, a professional copywriter is the most overlooked member of
   most web teams.

4. Create an XML sitemap of your website and submit it to all major search engines.
   I prefer a tool such as xml-sitemaps.com to build my sitemaps over DNNs
   dynamically created sitemap file. Don’t confuse this with a sitemap
   page, listing links to all of your pages, which is beneficial as well.

5. Place a robots.txt file into the root of your site to guide search engine spiders. Take a look at the robots.txt file of the mothership for a DNN-centric example.

6. Get into the game of local search if your websites promotes a “brick and mortar” business.
   Many searchers include some kind of local identifier such as the town,
   city or zip code, which catapults you to the top of the organic search
   results with minimal effort.

7. Write well-formed,
   standard compliant HTML to improve accessibility and
   “crawlability.” Consider excessive in-page JavaScript, HTML
   layout tables and frames junk food for search engines spiders. I’m well
   aware that strict XHTML remains a challenge with DNN, but let’s make an
   effort to move away from quirks mode by adhering at least to XHTML transitional.

8. Seek
   an alternative to DNN’s default solpart menu and lead spiders
   deeper into and around your site with well-formed internal links (don’t
   use tracking or logging with the announcement module and pay attention
   to how your editor of choice “builds” links.)

9. Make DNNs friendly URls even friendlier with 3rd party URL rewrite providers such as this one or that one. These providers do have their limitations though, which is why I recommend them only for small to mid-size websites.

10. Cut down on duplicate content by implementing a 301 redirect from non-www to www
    or vice versa. I also recommend going as far as hard-coding your login
    and register links into your skin to further minimize
    duplicate content created by the “returnurl” querystring parameter.

So
there you have it, a high-level overview of search engine optimization
techniques geared towards DotNetNuke based websites. Don’t be
fooled though, SEO and SEM have grown into vast fields with search
engines constantly refining and tweaking their ranking algorithms.
Another important point I would like you to carry close to your
heart is that you are designing and building websites
primarily for people and not for search engines. As long as you strive
to serve your visitors well, search engines will follow.

Powered by ScribeFire.

In this article we present 30 important usability issues, terms, rules and principles which are usually forgotten, ignored or misunderstood.

Usability: Rules and Principles

7±2 Principle
Since human brain has some limits on its capacity for processing information, it deals with complexity dividing information into chunks and units. According to George A. Miller’s studies humans’ short term memory can retain only about 5-9 things at one time. This fact is often used as an argument for limiting the number of options in navigation menus to 7; however there are heated debates about The Myth of “Seven, Plus or Minus 2″. Therefore it’s not clear how the 7±2 Principle can, could or should be applied to the Web. Miller’s studies.

2-Second-Rule
A loose principle that a user shouldn’t need to wait more than 2 seconds for certain types of system response, such as application-switching and application launch time. The choice of 2 seconds is somewhat arbitrary, but a reasonable order of magnitude. Reliable principle: the less users have to wait, the better is the user experience. [UF]

3-Click-Rule
According to this rule users stop using the site if they aren’t able to find the information or access the site feature within 3 mouse clicks. In other words, the rule emphasizes the importance of clear navigation, logical structure and easy-to-follow site hierarchy. In most situations the number of clicks is irrelevant; what is really important is that visitors always know where they are, where they were and where they can go next. Even 10 clicks are OK if users feel that they have a full understanding of how the system works.

80/20 Rule (The Pareto principle)
The Pareto principle (also known as the law of the vital few and the principle of factor sparsity) states that 80% of the effects comes from 20% of the causes. This is the basic rule of thumb in business (”80% of your sales comes from 20% of your clients”), but can also be applied to design and usability. For instance, dramatic improvements can often be achieved by identifying the 20% of users, customers, activities, products or processes that account for the 80% of contribution to profit and maximizing the attention applied to them. [Wikipedia]

Eight Golden Rules of Interface Design
As a result of Interface Design Studies, Ben Shneiderman proposed a collection of principles that are derived heuristically from experience and applicable in most interactive systems. These principles are common for user interface design, and as such also for web design.

1. Strive for consistency.
2. Enable frequent users to use shortcuts.
3. Offer informative feedback.
4. Design dialog to yield closure.
5. Offer simple error handling.
6. Permit easy reversal of actions.
7. Provide the sense of control. Support internal locus of control.
8. Reduce short-term memory load.

You can learn more details about Shneiderman’s Rules For Design in Wikipedia: Shneiderman’s rules for design.

Fitts’ Law
Published by Paul Fitts in 1954, Fitts’ law is a model of human movement which predicts the time required to rapidly move to a target area, as a function of the distance to the target and the size of the target. The law is usually applied to the movement of the mouse visitors have to perform to get from point A to point B. For instance, the rule can be important to place the content areas in a more usable way to maximize their accessibility and improve click rates.

Inverted Pyramid
The inverted pyramid is a writing style where the summary of the article is presented in the beginning of the article. This approach makes use of the “waterfall effect” well-known in journalism where writers try to give their readers an instant idea about the topic they’re reporting. The article begins with a conclusion, followed by key points and finally the minor details such as background information. Since web users want instant gratification, the inverted pyramid style, as supported by Nielsen, is important for web writing and for better user experience.

Satisficing
Web users don’t prefer optimal ways to find the information they’re looking for. They aren’t interested in the most reasonable and sound solution to their problem. Instead they permanently scan for quick’n’dirty-solutions which are “good enough”. Applied to Web, satisficing describes exactly this approach: users settle with a solution to a problem that is “good enough” — even if alternative solutions can better fulfill their requirements in a long run. [I-D]

Psychology Behind Usability

Baby-Duck-Syndrome
Baby Duck Syndrome describes the tendency for visitors to stick to the first design they learn and judge other designs by their similarity to that first design. The result is that users generally prefer systems similar to those they learned on and dislike unfamiliar systems. This results in the usability problems most re-designs have: users, get used with previous designs, feel uncomfortable with new site structure they have to find their way through.

Banner-Blindness
Web users tend to ignore everything that looks like advertisement and, what is interesting, they’re pretty good at it. Although advertisement is noticed, it is almost always ignored. Since users have constructed web related schemata for different tasks on the Web, when searching for specific information on a website, they focus only on the parts of the page where they would assume the relevant information could be, i.e. small text and hyperlinks. Large colourful or animated banners and other graphics are in this case ignored.

Source: Banner Blindness: Old and New Findings

Cliffhanger-Effect (Zeigarnik-Effect)
Human beings can’t stand uncertainty. We tend to find answers to unanswered questions we are interested in as soon as possible. Cliffhanger-effects are based upon this fact; movies, articles and plots with Cliffhanger-effect have an abrupt ending, often leaving with a sudden shock revelation or difficult situation. The effect is often used in advertisement: asking the visitors unanswered and provocative questions advertisers often tend to force them to read the ad, click on the banner or follow a link.

Found out by Bluma W. Zeigarnik in 1927, this effect establishes an emotional connection with readers and is extremely effective in terms of marketing. Visitors can better remember what the ad is about and even smallest details are stored more clearly and precisely. In Web writing the Cliffhanger-effect is also used to bound the visitors to a web-site (e.g. “Grab our RSS-Feed to ensure you don’t miss the second part of the article!”).

Gestalt principles of form perception
These principles are the fundamental rules of human psychology in terms of human-computer-interaction-design.

• The law of proximity posits that when we perceive a collection of objects, we will see objects close to each other as forming a group.
  A real-world example of the law of proximity from MTV Music Awards 2002. Source.
• The law of similarity captures the idea that elements will be grouped perceptually if they are similar to each other.
• The Law of Prägnanz (figure-ground) captures the idea that in perceiving a visual field, some objects take a prominent role (the figures) while others recede into the background (the ground).
  The Macintosh logo can be viewed as a regular happy face and a happy face in profile (looking at a computer screen). Source.
• The law of symmetry captures the idea that when we perceive objects we tend to perceive them as symmetrical shapes that form around their centre.
• The law of closure posits that we perceptually close up, or complete, objects that are not, in fact, complete.
  We perceive the letters ‘I’, ‘B’, and ‘M’ although the shapes we see, in fact, are only lines of white space of differing length hovering above each other. Source.

You can find more information in the article Gestalt principles of form perception

The Self-Reference Effect
Self-reference effect is particularly important for web writing and can dramatically improve the communication between authors and readers. Things that are connected to our personal concept are remembered better than those which aren’t directly connected to us. For instance, after reading an article users better remember the characters, stories or facts they had personal experience with. In Usability the self-reference effect is usually used in terms of web writing and content presented on a web-site.

read more | digg story

In Designing by Collis

Step 1 - Clarity:

You will hear me say this time and time again but when you design for the web it is ALL about the pixels. One of your aims should always be to keep things sharp and clean. This means for example:

1. Text Clarity
   When laying out text you should give thought to what Anti-Aliasing you use. To do this you would bring up the Character panel which you can do by going to Window > Character or when you have the type tool selected and some text highlighted, press CTRL-T (yes it’s the same shortcut for transform so you have to make sure the text is selected). In your Character panel down the bottom right you can choose between None | Sharp | Crisp | Strong. For different fonts and different sizes you should experiment. I mostly use the setting Sharp which will force some pixels to be aligned and sometimes distorts the font a little at smaller settings. But for example in the image below the text “Making” is set to sharp which is why when I apply a 1px outline it is very clearly defined.

2. Lining
   As you can see between the lighter grey and darker grey bars I have added a faint 1px line. This trick mimicks the effect of the sharpening filter. If you have ever run one of the sharpen filters too often on a photo you will notice that little borders start appearing, this is because emphasizing the border between makes the two parts appear more separate to your eye and hence sharper. So often times as in the image I will use a faint line to emphasize the border and make the two parts seem clearer.
3. Colouring
   Colour can also make a big difference in sharpening things up. In this instance I desaturated the background from a sort of off-grey/green to pure grey. This means that the safe which has a greenish tone stands out more from the background and winds up looking sharper.
4. Cleaning Up Objects
   Another thing that I did not do in this image but which you can do to sharpen things up is to go through objects like the logo or the safe and make sure that edges are pixel aligned. So for example have a look at the left edge of the safe compared to the right edge. You will see that the right edge looks slightly blurry, we could fixed this by using the Polygonal Lasso Tool (L) and selected a tiny edge off the right side and hit delete. Of course this isn’t essential and I don’t mean to sound nit-picky, but it’s a good idea to think about these details and make sure everything is nice and crisp!

One other element to discuss here is that on the text you will see a faint gradient / stroke effect. This is achieved with two layer styles, an inner stroke of 1px and a subtle gradient. I’ve used this here because it is part of the FreelanceSwitch brand, it also is quite a web 2.0 sort of effect. It is best done with Sharp text as mentioned previously. You can see the exact layer styles in the Sample PSD below.

Step 2 - Light and Shade:

Gradients, Gradients, Gradients. Some would say they are the hallmark of web 2.0 design, and I must admit to using them constantly in my designs. In the image below you will see that I have added shadows and gradients to a few different places to give the design more depth.

One of the principal differences between print and web design in my opinion is the amount of depth you need in your design. What I mean by this is that in print design, if you were to have a brochure cover which was a straight, flat colour, often times it will still look lovely because of the paper stock or a celloglaze that might be applied and the reaction of light to that paper/coating. So in the ‘design’ it might look like a simple flat colour, but in the output it will have depth nonetheless. On the screen you don’t have this effect.

This is not to say that you can’t have flat backgrounds or panels of colour in web design, however in all the print designers I have ever art directed to create websites, the most common two failings I have noticed are

1. Failing to focus on sharpness and clarity of the design
   In print, you rarely zoom right in to modify individual pixels since when something is printed out that level of detail will often escape the eye anyhow. You think in millimetres not pixels.
2. Failing to add depth cues and sufficient visual interest
   Gradients generally don’t work that well in print, but on screen they work a treat. Similarly adding faint shadows and highlights work well on screen. Together they can make a site much more visually appealing as the different elements on the screen play against each other. In the image below for example, the money bags which were intially straight vector images with flat colouring, were given very subtle graduations using the Burn Tool (O) so that they looked softer.

Step 3 - Precedence:

Precedence is the single most important visual aspect of information design. And since web design is largely about how you lay out and present information to your user, precedence is therefore of the utmost importance.

What do I mean by precedence? Well when you look at page you have to ask yourself, what do I look at first, what’s next, what’s after that, and so on. And why do you look at certain things in a certain order?

Visual precedence is a mix of factors:

1. Size
   It’s pretty obvious that something big is going to take precedence over something small. So in this design the safe and the main title have top precedence. When you look at the page the first thing you notice are those two elements.
2. Colour
   Colour also creates precedence. For example in the Before image you will see the subtitles in the area marked 4 in that image below, were intially the same Dark Blue as the words “Hi There!”. This meant that there was less distinction between the two and it was not as clear which was meant to be read first. By fading them back to a beige they are given less importance and it is more obvious that they are of less importance in the information heirarchy.
3. Background Colour
   With both background colour and colour the important thing is not so much what specific colour something is, as what colours everything else is in relation. So for example if everything is black on a page and there is one white object, obviously that white object is going to leap out at you. In this instance by contrasting bright yellow with the dark grey we get emphasis. So although the very first thing on the page that you see might be the safe and the words “Making Passive Income”, you will probably notice “A Guide to” next, and the “Part 1| Part 2 | …” navigation second. This is on purpose as I want the user to see first a visual image and a title so they know what they are looking at, then I want them to see the primary navigation so that they understand how to get around the site.
4. Position
   Finally position in the layout also makes a difference in how items are perceived. As you have probably heard studies show that the user’s eye goes from top left to bottom right in some variation (I’ve seen both studies that say it goes top left to top right and then bottom left to bottom right, and alternately that it goes in a kind of arc from corner to corner.) The important thing here is that having something higher up usually gives more precedence, and having something further left usually gives something more precedence.

Step 4:

I’ve said it before, I’ll say it again… It’s all about the pixels!

In this image you will see what appears to be a fairly straightforward gradient. In fact there are 3 gradients drawn in and 3 one pixel lines used. It’s quite subtle, and arguably doesn’t make that much difference, but in my opinion every detail counts towards the end.

Step 5:

Someone in the comments asked about web 2.0 sorts of styles, here is a simple effect where you give a 1 or 2 pixel outline and then a faint gradient for a background. If you hadn’t already noticed it already, you’ll start to realise it’s all over the place, possibly a little overused, but kind of nice anyhow.

Step 6:

In this image you can see how sometimes during the polish you may even change the actual information on the page. In this instance I decided that although it was more infromationally rich having all the titles for the different parts underneath the money bags, it looked so messy I didn’t think it was particularly informative - though this is somewhat debatable. So instead I removed the excess brown on brown text and replaced it with bold yellow on dark grey which because of the contrast leaps out.

Powered by ScribeFire.

copied from http://www.useit.com/alertbox/9710a.html

Jakob Nielsen’s Alertbox, April 17, 2006:

F-Shaped Pattern For Reading Web Content

Summary:
Eyetracking visualizations show that users often read Web pages in an F-shaped pattern: two horizontal stripes followed by a vertical stripe.

F for fast. That’s how users read your precious content. In a few seconds, their eyes move at amazing speeds across your website’s words in a pattern that’s very different from what you learned in school.

In our new eyetracking study, we recorded how 232 users looked at thousands of Web pages. We found that users’ main reading behavior was fairly consistent across many different sites and tasks. This dominant reading pattern looks somewhat like an F and has the following three components:

• Users first read in a horizontal movement, usually across the upper part of the content area. This initial element forms the F’s top bar.
• Next, users move down the page a bit and then read across in a second horizontal movement that typically covers a shorter area than the previous movement. This additional element forms the F’s lower bar.
• Finally, users scan the content’s left side in a vertical movement. Sometimes this is a fairly slow and systematic scan that appears as a solid stripe on an eyetracking heatmap. Other times users move faster, creating a spottier heatmap. This last element forms the F’s stem.

Obviously, users’ scan patterns are not always comprised of exactly three parts. Sometimes users will read across a third part of the content, making the pattern look more like an E than an F. Other times they’ll only read across once, making the pattern look like an inverted L (with the crossbar at the top). Generally, however, reading patterns roughly resemble an F, though the distance between the top and lower bar varies.
Heatmaps from user eyetracking studies of three websites. The areas where users looked the most are colored red; the yellow areas indicate fewer views, followed by the least-viewed blue areas. Gray areas didn’t attract any fixations.

The above heatmaps show how users read three different types of Web pages:

• an article in the “about us” section of a corporate website (far left),
• a product page on an e-commerce site (center), and
• a search engine results page (SERP; far right).

If you squint and focus on the red (most-viewed) areas, all three heatmaps show the expected F pattern. Of course, there are some differences. The F viewing pattern is a rough, general shape rather than a uniform, pixel-perfect behavior. On the e-commerce page (middle example), the second crossbar of the F is lower than usual because of the intervening product image. Users also allocated significant fixation time to a box in the upper right part of the page where the price and “add to cart” button are found.

On the SERP (right example), the second crossbar of the F is longer than the top crossbar, mainly because the second headline is longer than the first. In this case, both headlines proved equally interesting to users, though users typically read less of the second area they view on a page.

Implications of the F Pattern

The F pattern’s implications for Web design are clear and show the importance of following the guidelines for writing for the Web instead of repurposing print content:

• Users won’t read your text thoroughly in a word-by-word manner. Exhaustive reading is rare, especially when prospective customers are conducting their initial research to compile a shortlist of vendors. Yes, some people will read more, but most won’t.
• The first two paragraphs must state the most important information. There’s some hope that users will actually read this material, though they’ll probably read more of the first paragraph than the second.
• Start subheads, paragraphs, and bullet points with information-carrying words that users will notice when scanning down the left side of your content in the final stem of their F-behavior. They’ll read the third word on a line much less often than the first two words.

The biggest determinant for content usability is how users read online - and because people read differently, you have to write differently.