<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Coyote Tracks &#187; CSS</title>
	<atom:link href="http://kagan.mactane.org/blog/tag/css/feed/" rel="self" type="application/rss+xml" />
	<link>http://kagan.mactane.org/blog</link>
	<description>The prints of an Internet-enabled coyote.</description>
	<lastBuildDate>Tue, 31 Jan 2012 03:26:51 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=</generator>
		<item>
		<title>Cruel Rollover Trickery</title>
		<link>http://kagan.mactane.org/blog/2009/06/11/cruel-rollover-trickery/</link>
		<comments>http://kagan.mactane.org/blog/2009/06/11/cruel-rollover-trickery/#comments</comments>
		<pubDate>Thu, 11 Jun 2009 20:58:35 +0000</pubDate>
		<dc:creator>Kai MacTane</dc:creator>
				<category><![CDATA[Uncategorized]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[hall of shame]]></category>
		<category><![CDATA[snark]]></category>
		<category><![CDATA[UI]]></category>
		<category><![CDATA[usability]]></category>
		<category><![CDATA[UX]]></category>
		<category><![CDATA[you fail]]></category>

		<guid isPermaLink="false">http://kai.mactane.org/blog/?p=66</guid>
		<description><![CDATA[I found an interesting UI problem today, on a site that I will be kind enough not to actually link to. Instead, I&#8217;ll just reproduce the general concept and problem here: alpha beta gamma delta The links all just link straight to the nav bar itself, so if you scroll your browser view so that [...]]]></description>
			<content:encoded><![CDATA[<p>I found an interesting UI problem today, on a site that I will be kind enough not to actually link to. Instead, I&#8217;ll just reproduce the general concept and problem here:</p>
<ul id="bad_example">
<li id="bad_example_1"><a href="#bad_example">alpha</a></li>
<li id="bad_example_2"><a href="#bad_example">beta</a></li>
<li id="bad_example_3"><a href="#bad_example">gamma</a></li>
<li id="bad_example_4"><a href="#bad_example">delta</a></li>
</ul>
<p><br clear="all"><br />
The links all just link straight to the nav bar itself, so if you scroll your browser view so that the list <em>isn&#8217;t</em> right at the top, you&#8217;ll be able to tell when you&#8217;ve clicked one of the links. See what happens?</p>
<p>You roll over one of the list items, and you get an immediate visual reaction: not only does the background change color, but the mouse cursor even becomes a pointer. It&#8217;s not just <em>suggesting</em> that your cursor is over a clickable item; it&#8217;s flat-out <em>asserting that to be the case</em>.</p>
<p>And it&#8217;s lying.</p>
<p>The clickable area is nothing but the text in the very center of the nav bar item, and the only feedback you&#8217;ll get when you hover over <em>that</em> is the destination URL appearing in your browser&#8217;s status bar — <em>if</em> you have that turned on; many browsers leave the status bar off by default.</p>
<p>I&#8217;m fairly sure the people at Anonycorp didn&#8217;t mean to do this. I think it was just an ill-considered (and poorly QA-ed!) mistake in choosing which CSS rules to apply on which elements. But it&#8217;s a horrible, cruel UI trick to play on your visitors and users. Don&#8217;t do this.</p>
]]></content:encoded>
			<wfw:commentRss>http://kagan.mactane.org/blog/2009/06/11/cruel-rollover-trickery/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
	</channel>
</rss>

