Filtering

We want to include as much information as we can to assist in narrowing the results. Look at the difference of these two filter patterns…

While both of these filters have their advantages both serve the same purpose… so which one is better?
The example on the left allows you to choose multiple options under the each category, allowing you to choose a bunch of search options before submitting the form and seeing the results.

The example on the right is a link that will immediately change the results by removing the options that don’t match the filter from view; it also gives the number of results before the filter is applied.

Even though you can choose multiple options in the example on the left, the one on the right is the better choice because the user can foresee the results and get immediate responses. In the example on the right the user does not run the risk of over filtering the results and returning zero matches. Imagine a case where the user over filters and then struggles to then figure out which filters to remove.

Auto Complete

Basic type ahead is nice, but having the ability to also display the number of results with each suggestion? Now that’s helpful

When suggesting searches don’t just offer up the most common searches but instead display an actual live search of the sites content. If your site offers products allow searching by product numbers, product names and descriptions.

Displaying the number of results with each live search offers better suggestions. Another thought is to also group results by categories in the suggestion list by type of content found. For instance by products, documents, site content… This way the user can better filter the suggestions by the type of content they are looking for.

Be sure to keep the list alphabetical. Highlighting the search query in the found text is also helpful. This gives reference as to why a particular term is being displayed.

When all else fails: Help when it’s needed

One last thing we can do for our search users is provide help when it’s needed. Returning a message like “Sorry your search on __ resulted in ‘0’ results please refine your search criterion.” Now that can be a frustrating message to any user.

How about offering up suggestions based on the search words used? If for example you could tell from the word or phrase what type of content others looked at when searching on similar terms.

Another thing you might want to display is any help to perform better searches. For example: some search engines have search operators (special characters to perform advanced searches). Displaying the list of available operators and brief info on how to use them is a good way of offering help.

Yet another good option is incorporating an advanced search form just below a message stating that they could turn up better results if they try using the advanced search.

Summary

In short, think about the many frustrations you run into when doing a site search and try to offer assistance when situations get sticky. Refer to patterns as a guide in choosing and designing you next project.

Additional Resources

Articles and blog posts

People Search Once, Maybe Twice
Users Don’t Learn to Search Better
communicating patterns part one

Design Patterns

welie
yahoo patterns
helsinki patterns
time-tripper.com ui patterns
hci patterns
guidebook gallery
Mad * Pow’s Amy Cueva’s latest presentation “Search & Filter Interface Roundup” (wish I could have heard the presentation to go along with the slides) Search & Filter Interface Roundup (pdf)

I have been using conditional comments for years now and this may seem like old news to some, To others this is refresher.

Conditional comments can do more than allow you to serve up different CSS for specific versions you can use conditional comments for just about any type of content you want to exclude or include for various versions. Conditional comments work in IE versions 5 and newer. You can be as specific as you need to like IE 5.01 and 5.5.

The syntax is simple…
<!- -[if IE 6]>
Special instructions for IE 6 here
<![endif]- ->
Variations are as follows…
[if IE]
[if IE 7]
[if gte IE 5]
[if lt IE 6]
[if lte IE 5.5]
[if gt IE 6]
[if !IE]
[if !(IE 7)]
[if (gt IE 5)&(lt IE 7)]
[if (IE 6)|(IE 7)]

All standard comments are wrapped in <!- – and – ->
All conditional comments fall within a standard comment and have an if block wrapped in square brackets [if ] [endif]

• !: not equal
• &: and
• |: or
• gt: greater than
• gte: greater than or equal to
• lt: less than
• lte: less than or equal to

They are just comments to all other browsers and just like comments they can be anywhere comments can be… in the Head or body. Places these comments don’t work are inside CSS files or script files.

to server up diff CSS for IE you can either use embedded CSS as in <style type=”text/css”></style> or link to an external CSS file as in <link type=”text/css” rel=”stylesheet” media=”all” href=”#” />

Same for script files…
<script type=”text/javascript”></script> or <script type=”text/javascript” src=”#”></script>

IE also has a JScript version of this for using inside JavaScript files.

/*@cc_on @*/
/*@if (@_win32)
IE specific JavaScript goes here.
/*@end @*/

This is a simple fix that will work in all browsers so no need for special IE Hacks or Conditional Comments.

First add a position: relative; declaration to the fieldset rule so that the absolute positioning of the legend will be relative to its fieldset:

fieldset {
position: relative;
background: #ffffcc;
}

Next, add a new rule for the legend element and set its absolute positioning properties to emulate its current position:

legend {
position: absolute;
top: -.7em;
left: .2em;
}

That’s it… That’s all there is to it.

enough talk let’s see it.
This sample uses all defaults of the script the attributes set are border = 1, alt = “testing jQuery captions!”, hspace = 5, vspace = 5, align = left.

To override the defaults you can add in options into the function call.

Here is a list of all possible parameters.

• bgcolor
• fontcolor
• font
• fontsize
• margin
• align
• width
• border

My Image tag looks like this.

<img class="caption" src="http://www.redsgn.com/wp-content/uploads/2008/11/paul.jpg" border="1" alt="testing jQuery captions!" hspace="5" vspace="5" align="left" />


In order to rewrite the images tags I call the function on the ready state of the document so I place my call inside an onload block like this.

jQuery(document).ready(function(){
});


Inside the ready block I make my call.

jQuery('img.caption').addcaption();


This will effect all images on the current document that have a class of “caption”.

My final load script block.

jQuery(document).ready(function(){
jQuery('img.caption').addcaption();
});


The output of the script is semantic too.

<span style="border: 1px solid #000000; margin: 5px; padding: 0px; background-color: #ffffff; display: block; float: left; text-align: center; width: 137px; cursor: pointer;">
<img alt="testing jQuery captions!" src="http://www.redsgn.com/wp-content/uploads/2008/11/paul.jpg" class="caption" style="border: none ; margin: auto;"/>
<span style="padding: 2px; display: block; text-align: center; background-color: #ffffff; color: #333333; font-family: Arial,Helvetica,sans-serif; font-size: 10px; width: 133px;">testing jQuery captions!</span>
</span>


Download

Download jQuery image captions

Supported Browsers

Currently, the Image Caption script has been tested and confirmed on the following browsers:

• Internet Explorer 5.5+
• Mozilla Firefox 1.5+
• Apple Safari 2.0
• Opera Version 8.51

Licensing

This ReDsgn tool is licensed under the Creative Commons Attribution 3.0 license.

This technique uses the Sliding Doors of CSS technique described by Douglas Bowman on A List Apart.

We need 4 containers or elements we can apply style to, to define the four corners we want to round. Here you see I’m using an h4 tag as my outer container and nesting inside it two spans one for the header text and one for a link or anchor point. With the inclusion of our anchor tag we now have our four elements.

<h4><span class="title">H4 Demo Title 2</span><span class="link"><a href="edit_link.htm" title="edit">Edit</a></span></h4>


<h4><span class="title">H4 Demo Title</span><span class="link"><a name="anchor">&nbsp;</a></span></h4>


The markup may seem a bit overkill in this example but I tend to always design for the future. In my original markup I wanted to allow for Graphic headers as well as edit links in my headers. But as you can see in my second example the edit link can be used as a legacy anchor. No matter how you split it up the goal here is to have semantic markup in the end not a bunch of meaningless wrapper divs. I will get into using wrapper containers in a later post.

I have created my corners in a graphical editor. I used gif’s for their transparency and browser support. The corners are transparent on the inside of the corner and have the background color of the page on the outside of the corner. Doing this allows me to style the background of the object that is being rounded with any color and not have to recreate the corner images every time I want to change the styling. Here are the images as I have made them.

Ok so now lets style it…

h4 {
background:#E3E3E3 url(corner-TL.gif) no-repeat scroll 0 0;
font-size:1.1em;
height:5ex;
position:relative;
}


I set the background color on the outer container and position the background (in this case the Top Left corner,) image to the top left and set it to no repeat. I set the position to relative so I can use absolute positioning for the rest of the corners. I also set the height here to accommodate the text so I used ex which is 1/2 em in browser calculations. see my post on calculating ems for more info. (Note: Elements when positioned absolute are removed from the document flow causing the parent containers to collapse as if they have no contents.)

h4 span.title {
background:transparent url(corner-BL.gif) no-repeat scroll 0 100%;
bottom:0;
display:block;
left:0;
padding:0 0 10px 10px;
position:absolute;
}


Here I set the Bottom left corner position in the background property and set the position to absolute with a bottom and left of zero. Its important to note that our background color is set to transparent here because all of the absolute positioned elements inside the first container sit on top and I don’t want to hide the background image of its container element. The padding is set to space in my text 10px from the left and bottom of the container. I set the display to block and any inline element so it holds its padding.

h4 span.link {
background:transparent url(corner-TR.gif) no-repeat scroll 100% 0;
display:block;
height:5ex;
padding:0 10px;
position:absolute;
right:0;
top:0;
}


Here I set the top Right corner nothing different and pad in the text 10px. I set the height to the same height we used for the container. Since this container has no content (child elements when positioned absolute are removed from the document flow causing the parent containers to collapse) we set the padding to accommodate the corner image and the height to accommodate the anchor tag.

h4 span.link a {
background:transparent url(corner-BR.gif) no-repeat scroll 100% 100%;
bottom:0;
display:block;
font-size:0.7em;
font-weight:normal;
padding:0 10px 10px 0;
position:absolute;
right:0;
}


In this last piece we set the Bottom Right corner and pad in the text from the right and bottom. I reduced the font size for the link so it does not compete with the header text. Set the padding here to 10px to accommodate the corner image and spacing in the text from the bottom and right.

The Results

H4 Demo Title 1Edit

H4 Demo Title 2 

The Problem: HTML Lists don’t allow you to style the list counters separate form the contents of the list.

Here is the markup for my Ordered List. (note the span tag that wraps the content… this is important)

<ol>
<li><span><strong>Intro</strong> description. </span></li>
<li><span><strong>Intro</strong> description. </span></li>
<li><span><strong>Intro</strong> description. </span></li>
</ol>

The basic Idea here is to overcome the limitations of styling the list numbers separate from the content. In order to accomplish this I use the span tag to wrap the content.

Now for the CSS

ol {
color:#225E8A;
font-size:1.5em;
font-weight:900;
}
ol li span {
color:#696969;
font-size:0.7em;
font-weight:normal;
}

Whats going on?

I am setting the color and size of the font on the “ol” element, to a 1.5em larger size from its parent size (the body) and making it bold and blue. This will style the list numbers and the content. Now I need to reset the content of my list items to use a smaller font of regular color and weight. To do this I simply style the span that is wrapping the content to a smaller size and normal color and weight.

I use a .7em here to say I want to make my font .7em of its parent size which was 1.5em larger than my base size. So if my body font size is 12px, 1.5em makes my “ol” font size 18px. Now I want to re-size my lists content font to roughly 12px, so .7em of the “ol” font size (18px) we will get 12.6px. (A closer number would be .67em.) I am also resetting the color and weight to match the rest of the page text.

Example

for more information read my other post on Calculating ems.

As an example, set a div font size to 10px (use a contrasting background color), zero out the border and padding, and then set the width to 100em. It should equal 1000px exactly.

The accurate method to convert a true typographic em is to use a capitol M’s width to calculate the em size. It’s the same method for calculating the en and ex units. Most browsers just treat en and ex as one-half em.

calculated: 1em == 2en == 2ex