Couching a Search

I came across this wonderful design pattern that is employed by eBay in its search results. What’s so hot about this?

Performing a search is a difficult process, not so much by what is returned but understanding what isn’t. As a result, it can be difficult to anticipate the effect of changing search parameters since it’s often unpredictable whether you’ll receive a larger or smaller result set–or more signal and less noise.

This pattern, however, identifies that concern and provides a comparative display of what else is out there if you were to loosen or constrict your parameters a bit. For me, I was looking for a mid-century modern sofa near Phoenix. I’m open to other possibilities though, and with this pattern I can start to juggle my priorities intelligently. Do I really care if it’s local–or am I more concerned that it adheres to a certain style?

Years ago, right when the Google API first came out, I wrote a prototype that performed a synonym search using Princeton’s Wordnet service. The goal there was to provide a better search experience for a user who might not know the best terms to use when articulating a query. So, a user could identify a terms that they were unsure of by prefixing it with a character–I used a tilde.

A standard search would be performed but additional information would be returned that showed alternative terms and the number of results. That way, a user could re-assess their keywords in case the results didn’t meet their expectations. Thankfully, Google ended up doing this on its own. And it used the tilde too. But I digress.

A Bug? No, that’s a feature…

I noticed this date picker while using a bug ticketing system. The backstory is that I needed to enter in an estimated date for responding to a customer. Lo and behold, this dialog popped up with the option to select “BC”. I try to be proactive, but logging my response 4014 years prior to the original request is pushing it.

I can only presume that this picker was not written by the application’s developers but, instead, picked à la carte from prefab controls.

oombrella is naked

Today, April 5th is CSS Naked Day. That means that the site you’re seeing today has been stripped of all css, rendering the site in all its non-styled glory. Why do this?

The main reason is to draw attention to the the underlying markup of a page, and to demonstrate how people with screenreaders might be seeing the site. In particular, it calls to attention the structure of the xhtml and the benefits of using semantic markup.

What’s Wrong
It’s been since dev that I have really looked at my site unstyled. I’m fairly pleased with how it renders but I’ve noticed a few problems that I want to mention.

1. Heading Images: I’ve used inline images to identify content areas such as “About Me” and “Design Portfolio”. As a designer, I wanted better control of the typeface in these areas. These would be better served using sIFR, but I didn’t want to hassle with the placing the extra javascript and flash into the page. Plus, I didn’t want to test for that in multiple browsers, so I took the easy way out. Unfortunately, is looks terrible when the page is non-styled and, of course, it’s less than accessible.
2. Structure: On the main page, the blog posts falls beneath the design portfolio. I would prefer this to appear first in the structure. The most “interesting” content on the site–as defined by google analytics–is the blog section. I think it would be better served by placing it before the portfolio.
3. Layout: I am a heavy, heavy user of floats. Sometimes these don’t degrade so nicely. For example, on the main page, the image “design portfolio” displays inline with the “see all >” navigation button. Looks bad, but not life-threatening. There are some other rendering issues, such as the duplicate “see all >” links that appear beneath the portfolio. I’ve definitely leaned heavily on the presentational css to distinguish content areas. I also committed a no-no by not using a semantic structure for my breadcrumb navigation. Shame on me.
4. Functionality: As I alluded to in the previous bullet, my presentational css was used to collect similar content and navigation together. This disintegrates a bit and it can be a challenge to know what a particular link does.

What’s Right
Overall, I think the presentation degrades decently. I don’t have any problem reading or navigating the site. But I’d really like to hear your opinions. So far, the good points that I see are:

1. Structure: Each section seems to clearly defined and the navigation remains intact. The site isn’t terribly content-dense or complex, which helps this a bit.
2. Functionality: The primary and secondary navigation fall into place at the top and are immediately presented to the visitor. This goes for the page header too. These two things help describe the page and provide an obvious means to move around the site.

There are probably a number of other things that are positive and negative about my design. Please voice your opinions because, well, my time is up and I have to go to work.