One important interaction indicator on the web is the mouse cursor. The default cursor arrow changes into a pointing hand when you hover over links for example, which indicates they are indeed links and can be clicked on. It also changes into other things to differentiate context, for example it can change into a text input cursor when hovering over text fields to indicate you can type there.

When styling your website with CSS, in some cases you may lose the correct cursor type for certain elements. It’s important to retain this indicator as it will inform the user about how the item they’re hovering over can be used (see affordances). The solution is easy: if the cursor type is wrong, specify it using the CSS “cursor” property.

Continue reading more comments and examples on the the original post on from Usability Post

Punchcut is explaining some of the things we need to consider when designing UIs for touch-based interfaces such as the Apple’s iPhone and iPod Touch, HP’s TouchSmart tx2 multi-touch laptop, Microsoft Surface.

An ugly url such as http://www.example.com/page.html?sid=asdf314159265 can specify in the HEAD part of the document the following:

<link rel="canonical" href="http://example.com/page.html"/>

That tells search engines that the preferred location of this url (the “canonical” location, in search engine speak) is http://example.com/page.html instead of http://www.example.com/page.html?sid=asdf314159265 .

Check out this video by Matt Cutts of Google who explains the new element in-depth:

There are already some plugin for WP Canonical links, or e-commerce Magento plugin canonical URL’s extension, and Drupal CMS.

I would love to hear what you think about the canonical links.

Discover more about how this works in practice…

• Read Effective Browser Support
• Read A Demonstration of Graded Browser Support

]]> http://www.candesprojects.com/usability-seo/ui-screen-patterns/feed/ 0 http://www.candesprojects.com/usability-seo/tracking-user-behavior/ http://www.candesprojects.com/usability-seo/tracking-user-behavior/#comments Wed, 21 Jan 2009 08:29:46 +0000 Cristian http://www.candesprojects.com/?p=530

Chris Coyier has post a very interesting tutorial of tracking clicks. Why do I need this? Well it’s a cool proof of concept and can be used in production as tool for examine users behavior in some situations.  Some major design decisions can depend on it.

The tutorial shows you how to develop a clickmap using PHP, Mysql and of course …. jQuery. Basic we will track the mouse clicks and post the clicks data to the PHP file doing the database saving. Then some graphics are displayed on the click locations.

Read the tutorial

SmashingMagazine presents the first part of an extensive research on design patterns and useful design solutions in modern web applications. You’ll find a collection of 10 useful interface design techniques and best practices used in many successful web-applications.

The heat map helps to visualize the current trend in banner advertising. It shows banner size and placement (highlighted in white) on 50 different popular sites. The brightest white areas are where banner ads were most frequently placed and the black areas are where no banner ads were displayed. The two red lines are 1,024 pixels apart to provide scale.

His conclusions are:

• The most frequently used areas are along the top and right sides of the page.
• The most popular ad sizes are 728×90 Leaderboards and 300×250 Medium Rectangles.
• More sites place Leaderboards above the main navigation than below.
• Very few sites are placing banner ads along the left side of the page.
• The observed common placements do not match up very closely with Google’s suggestions.

• The use of buttons in web forms
• Buttons on Forms – where to put them, and what to call them
• Previous and Next Actions in Web Forms
• OK–Cancel or Cancel–OK?
• OK and Cancel Buttons: What’s the Right Order?
• Primary & Secondary Actions in Web Forms
• 50 Add To Cart Buttons Compared
• Submit Button Usability Split Test Results: Size DOES Matter!

If you know more or have a suggestion add a comment please.

If you are usability practitioners, this is article if for you. Her toughs are can not only be applied to email applications, they can be applied also any other registration process because it contain the basic elements that you need to convince the prospects to became users.

The image below shows the mapping between the user’s intentions and expectations and the ways in which the usability practitioner can help accommodate them in order to ensure the ultimate success of online application forms.

Continue reading the article

The team from www.webdesignbeach.com has launched a new website where they are running some Flash SEO experiments. They want to discover how the search engines like Google, Yahoo and MSN are indexing the content in Adobe Flash. They will offer a set of SEO friendly rules and share them with internet community.

Some experiments running in the lab:

• How Google index text embedded in Adobe Flash?
• Does Google follow links embedded in Adobe Flash?
• Can Google index external content loaded in Adobe Flash?
• Can Google index imported swf files?
• Can Google index Flash created with JavaScript Object?

I share a list with 7 sources for UI-Patters sources and hopefully people will contribue the list and tell their opinion about UI-Patters.

UI Pattern Factory

UI Pattern Factory is a mix of user interface design pattern library and UI gallery. It is a place to find user interface best practices, get design inspiration, and share design solutions with others.

UI Patterns

Their purpose is to fill some of the gaps – especially by providing code examples as to how how the different patterns can be implemented: to join theory with practice.

Yahoo! Design Pattern Library

UxMatters

Dynamic Help in Web Forms

Welie.com

Pattern library

I will to the list also some Flickr Patters gallery:

• Brian Christiansen – Design Patterns
• Peters Moville – Search Patterns

If you know more sources please contribute to the list!

However, designing effective web forms isn’t easy. And it has one simple reason: nobody likes to fill in forms — neither offline nor online. Therefore, as designers, we need to figure out sound design decisions to make the form completion easy, intuitive and painless.

But how exactly can we figure out these decisions? Where should the link to the form be placed in the layout? How should we design it? How should we highlight the labels and how should we align them? How do web form design patterns look like in modern web-sites? These were exactly the questions we’ve asked ourselves. And to get the answers Smashingmagazine have conducted a survey and they are presenting the findings of the survey of current web form design patterns.

The main objective of the survey was to provide designers and developers with some intuition of how effective web forms are designed in practice; they also wanted to present some guidelines of how a user-friendly web form can be achieved. For this they have selected the first 100 largest and popular websites where web-forms (should) matter. Read more ..

• Web Form Design Patterns: Sign-Up Forms Part 1
• Web Form Design Patterns: Sign-Up Forms, Part 2

If you’re among the quarter of people who don’t know what SEO is or understand how it can help you, you should really read this article.

They write a SEO guide for designers who want to learn about making it easier for websites or blogs to be found by search engines. They explain the common mistakes made by designers and developers and provide some basic tips that you should be practicing to optimize your site for search engines.

Read more

As well as sharing tips from her design experience, Denise discusses the important role that copy plays in building a credible, web app too. She delivers some advice on making your web app seem more human, confident.

So what’s an honest web designer to do? Here are few practical suggestions:

• Try to use Flash only where it is needed. Many rich media sites such as Google’s YouTube use Flash for rich media but rely on HTML for content and navigation. You can too, by limiting Flash to on-page accents and rich media, not content and navigation. In addition to making your site bot-friendly, this makes you site accessible to a larger audience, including, for example, blind people using screen readers, users of old or non-standard browsers, and those on limited low-bandwidth connections such as on a cell phone or PDA. As a bonus, your visitors can use bookmarks effectively, and can email links to your pages to their friends.
• sIFR: Some websites use Flash to force the browser to display headers, pull quotes, or other textual elements in a font that the user may not have installed on their computer. A technique like sIFR still lets non-Flash readers read a page, since the content/navigation is actually in the HTML — it’s just displayed by an embedded Flash object.
• Non-Flash Versions: A common way that we see Flash used is as a front page “splash screen” where the root URL of a website has a Flash intro that links to HTML content deeper into the site. In this case, make sure there is a regular HTML link on that front page to a non-Flash page where a user can navigate throughout your site without the need for Flash.

Hiding text or links in your content can cause your site to be perceived as untrustworthy since it presents information to search engines differently than to visitors. Text (such as excessive keywords) can be hidden in several ways, including:

• Using white text on a white background
• Including text behind an image
• Using CSS to hide text
• Setting the font size to 0

Hidden links are links that are intended to be crawled by Googlebot, but are unreadable to humans because:

• The link consists of hidden text (for example, the text color and background color are identical).
• CSS has been used to make tiny hyperlinks, as little as one pixel high.
• The link is hidden in a small character – for example, a hyphen in the middle of a paragraph.

If your site is perceived to contain hidden text and links that are deceptive in intent, your site may be removed from the Google index, and will not appear in search results pages. When evaluating your site to see if it includes hidden text or links, look for anything that’s not easily viewable by visitors of your site. Are any text or links there solely for search engines rather than visitors?

If you’re using text to try to describe something search engines can’t access – for example, Javascript, images, or Flash files – remember that many human visitors using screen readers, mobile browsers, browsers without plug-ins, and slow connections will not be able to view that content either. Using descriptive text for these items will improve the accessibility of your site. You can test accessibility by turning off Javascript, Flash, and images in your browser, or by using a text-only browser such as Lynx. Some tips on making your site accessible include:

• Images: Use the alt attribute to provide descriptive text. In addition, we recommend using a human-readable caption and descriptive text around the image.
• Javascript: Place the same content from the Javascript in a no script tag. If you use this method, ensure the contents are exactly same as what is contained in the Javascript and that this content is shown to visitors who do not have Javascript enabled in their browser.
• Flash: Consider placing descriptive text and site navigation outside of Flash.
• Videos: Include descriptive text about the video in HTML. You might also consider providing transcripts.

If you do find hidden text or links on your site, either remove them or, if they are relevant for your site’s visitors, make them easily viewable. If your site has been removed from Google search results, review our webmaster guidelines for more information.

The Box Model

This is perhaps the most common and frustrating bug of all in IE 6 and below. Let’s say you declare a box like this:

div#box {
width: 100px;
border: 2px solid black;
padding: 10px;
}

IE 6 will calculate the width of the box to be 100px.
Modern browsers will calculate the width of the box to be 124px.

This kind of discrepancy can cause HUGE layout problems. I even think the IE version makes a little bit more sense logically, but that is not how the spec was written. IE 6 can actually get it right if you are in standards-compliant mode, which is rare these days as just using an HTML 4.0 transitional doctype will trigger quirks mode and the box model problem.

I generally work around this issue by just not using padding on boxes I am using for layout. If that box has some text inside it in a <p> element, I’ll apply the padding it needs directly to that p element. Just side-steps the issue, but it works.

The Double Margin Bug

Using our box example from above, let’s say we need that floated to the right:

div#box {
float: right;
margin-right: 20px;
}

IE 6 will double the 20px to 40px. Again, causing potentially huge layout borks. The commonly thrown-around “fix” for this is to add “display: inline;” to the div. I’m not sure how this “fix” got so much traction, but its a bit impractical. We can’t set static widths on inline elements, now can we?

I also like to side-step this bug whenever possible. If you really need to push that box away from the right side of it’s parent element, you can likely do so by adding padding to the parent element, which is more likely to keep your grid consistent anyway. Also don’t forget about padding. This bug does not affect padding, so you can offen get away with adding padding to the side you need an achieve the same result.

No Min Widths / Min Height

Setting min-width and min-height on elements is such a natural and logical thing that it makes me tear up sometimes thinking I can’t count on them. IE 6 doesn’t just get it wrong, it just completely ignores them. Min-height is incredibly useful for something like a footer. Say your footer needs to be at least 100px tall because you are using a background image down there, but you don’t want to set a static height because you want it to grow nicely if, say, the text size is bumped up significantly. Min-height is perfect for this, but using it alone will get you no height whatsoever from IE 6. In a bizarre twist of luck, IE 6 treats the regular height property like modern browsers treat min-height, so you can use a “hack” to fix it. I call it a “hack”, because I don’t really consider it a hack since it validates just fine.

Stepdown

Normally when floating objects you can count on them lining up vertically until they break. That is, you could if you weren’t using IE 6. IE 6 appends a line break effect after each floated block element which will cause “stepdown”. The fix here is to make sure the line-height in the parent element is set to zero (0), or that the elements being floated are inline elements. More on preventing stepdown here.

No Hover States

Most modern browsers support hover states on just about any element, but not IE 6. IE 6 only support the hover pseudo-class on anchor (<a>) elements, and even then you don’t get them if your anchor doesn’t have a href attribute. The solution here is to use a proprietary fix, or just deal with not having hover states on everything you want.

No Alpha Transparent PNG Support

Kind of funny that Microsoft themselves developed the PNG format, but their own browser doesn’t natively support it (until IE 7)*. I have a whole roundup of different fixes for this. Do remember that regular non-alpha transparent PNG files work fine without any fix in IE 6, and are often better than their GIF sisters.

*Update: I was totally wrong about the Microsoft thing, no idea how that got in my head. Tom Boutell actually developed the PNG format. Thanks all!

So…

All these bugs are either fixable or side-steppable, but they will get ya if you don’t do your testing. My general philosophy is: design with the most modern techniques possible, but then just make sure it ain’t busted in older ones.